/* stylesheet */
:root {
  --clr-bg: hsl(208 22% 11%);
  --clr-surface: hsl(208 20% 15%);
  --clr-surface-2: hsl(208 19% 19%);
  --clr-border: hsl(208 16% 23%);
  --clr-teal: hsl(338 71% 50%);
  --clr-teal-dim: hsl(338 71% 38%);
  --clr-gold: hsl(128 81% 58%);
  --clr-gold-dim: hsl(128 81% 44%);
  --clr-text: hsl(210 25% 92%);
  --clr-text-dim: hsl(210 12% 66%);
  --ff-body: 'Segoe UI', system-ui, -apple-system, 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.66; font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-teal); }
.pz35 { position: absolute; left: -9999px; }
.pz35:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #041018; padding: 8px 14px; z-index: 99; }

.ev87b { background: linear-gradient(90deg, var(--clr-surface), var(--clr-surface-2)); border-bottom: 2px solid var(--clr-teal); }
.ot36j, .wl78 { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.wl78 { display: flex; align-items: center; gap: 24px; height: 60px; }
.ju30w { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 1.14rem; color: var(--clr-text); }
.nu53 { color: var(--clr-teal); }
.gu50k { color: var(--clr-teal); }
.xx95 { margin-left: auto; }
.xx95 ul { display: flex; gap: 4px; list-style: none; }
.xx95 a { padding: 19px 13px; text-decoration: none; color: var(--clr-text-dim); font-weight: 600; font-size: .93rem; border-bottom: 3px solid transparent; }
.xx95 a:hover { color: var(--clr-text); border-bottom-color: var(--clr-teal); }
.wo50u { display: none; margin-left: auto; background: none; border: 1px solid var(--clr-border); border-radius: 6px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.qt32, .qt32::before, .qt32::after { content: ''; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--clr-text); }
.qt32 { top: 18px; } .qt32::before { top: -6px; } .qt32::after { top: 6px; }
.em81p { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.em81p ul { list-style: none; padding: 6px 0; }
.em81p a { display: block; padding: 11px 20px; color: var(--clr-text); text-decoration: none; font-weight: 600; }

.sh61k { max-width: 1180px; margin: 0 auto; padding: 30px 20px 50px; display: grid; grid-template-columns: 1fr 320px; gap: 34px; align-items: start; }
.wo56 { min-width: 0; }
.qm47 { margin-bottom: 20px; }
.wb89e { color: var(--clr-gold); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.qm47 h1 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); line-height: 1.18; margin-bottom: 12px; }
.no44i { color: var(--clr-text-dim); font-size: 1.05rem; margin-bottom: 8px; }
.ob82 { font-size: .84rem; color: var(--clr-gold); }
.dp97l { border: 1px solid var(--clr-border); border-radius: 10px; overflow: hidden; margin-bottom: 26px; }

.fd28l { border-top: 1px solid var(--clr-border); padding: 26px 0; }
.fd28l h2 { font-size: 1.4rem; margin-bottom: 14px; color: var(--clr-teal); }
.fd28l h3 { margin: 20px 0 8px; font-size: 1.1rem; }
.fd28l h4 { margin: 16px 0 6px; }
.fd28l p { margin-bottom: 12px; }
.fd28l ul, .fd28l ol { margin: 0 0 14px 22px; }
.fd28l li { margin-bottom: 7px; }
.md46c { font-size: .84rem; color: var(--clr-text-dim); }
.ob36r { background: var(--clr-surface); border: 1px solid var(--clr-border); border-left: 4px solid var(--clr-teal); border-radius: 0 8px 8px 0; padding: 12px 15px; margin: 12px 0; font-size: .95rem; }
.ob36r.cp49s { border-left-color: var(--clr-gold); }
.zt70j { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 14px 0; }
.ms52m { margin-left: 22px; }
.ms52m li { margin-bottom: 10px; }
.du35 { overflow-x: auto; border: 1px solid var(--clr-border); border-radius: 8px; margin: 12px 0; }
.zc51q, .km97b { list-style: none; margin-left: 0 !important; }
.zc51q li, .km97b li { padding-left: 24px; position: relative; }
.zc51q li::before { content: '✓'; position: absolute; left: 0; color: var(--clr-teal); font-weight: 800; }
.km97b li::before { content: '✕'; position: absolute; left: 0; color: var(--clr-gold); font-weight: 800; }

.jc99 { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .95rem; }
.jc99 th, .jc99 td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--clr-border); }
.jc99 thead th { background: var(--clr-surface-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--clr-text-dim); }
.jc99 tbody tr:last-child td, .jc99 tbody tr:last-child th { border-bottom: 0; }
.jc99 th[scope="row"] { color: var(--clr-text-dim); font-weight: 600; width: 40%; }
.hc14f { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .76rem; font-weight: 700; }
.uy86 { background: color-mix(in srgb, var(--clr-teal) 22%, transparent); color: var(--clr-teal); }
.ip81j { background: color-mix(in srgb, var(--clr-gold) 22%, transparent); color: var(--clr-gold); }

.wm42 { position: sticky; top: 20px; display: grid; gap: 16px; }
.zl17 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 18px; }
.zl17 h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); margin-bottom: 10px; }
.hk43 { text-align: center; border-top: 4px solid var(--clr-teal); }
.hz71u { font-size: 2.6rem; font-weight: 900; color: var(--clr-teal); }
.pj42n { color: var(--clr-text-dim); }
.pa39 { font-weight: 700; margin: 4px 0 14px; }
.uz76 ul { list-style: none; }
.uz76 li { border-bottom: 1px solid var(--clr-border); }
.uz76 li:last-child { border-bottom: 0; }
.uz76 a { display: block; padding: 8px 2px; text-decoration: none; color: var(--clr-text-dim); font-size: .92rem; }
.uz76 a:hover { color: var(--clr-teal); padding-left: 6px; }
.nr20s p { font-size: .88rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.pq91 { display: inline-block; border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 1px 9px; font-weight: 800; }
.zl17 .jc99 { min-width: 0; font-size: .85rem; }
.zl17 .du35, .zl17 .kb16h { border: 0; }

.nk83m { display: inline-block; padding: 11px 20px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.co72 { background: var(--clr-teal); color: #041018; }
.co72:hover { background: var(--clr-teal-dim); color: #eaf6ff; }
.ff15 { display: block; text-align: center; }

.qm99 { display: grid; gap: 9px; }
.xi43 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; }
.ng79r { width: 100%; text-align: left; background: none; border: 0; color: var(--clr-text); font: inherit; font-weight: 700; padding: 14px 46px 14px 16px; cursor: pointer; position: relative; }
.qd84 { position: absolute; right: 16px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.qd84::before, .qd84::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.qd84::before { left: 0; right: 0; top: 5px; height: 2px; }
.qd84::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.ng79r[aria-expanded="true"] .qd84::after { transform: scaleY(0); }
.co12 { padding: 0 16px 14px; color: var(--clr-text-dim); }

.wh49x { background: var(--clr-surface); border-top: 2px solid var(--clr-teal); padding: 32px 0 24px; font-size: .9rem; }
.vu13 { margin-bottom: 12px; }
.rc96 { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.ul47 { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 2px 9px; font-weight: 800; }
.lx98l { color: var(--clr-text-dim); }
.sm74c ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.sm74c a { color: var(--clr-text-dim); text-decoration: none; }
.sm74c a:hover { color: var(--clr-teal); }
.ic35, .go55m { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

.tp70x { padding: 38px 0; }
.el56g { margin: 0 auto; padding: 0 20px; max-width: 880px !important; }
.ww52i ol { display: flex; gap: 8px; list-style: none; font-size: .85rem; color: var(--clr-text-dim); margin-bottom: 16px; }
.ww52i li + li::before { content: '»'; margin-right: 8px; }
.gr32 { font-size: clamp(1.55rem, 3.3vw, 2.15rem); margin-bottom: 10px; }
.ut55 { color: var(--clr-text-dim); font-size: .88rem; margin-bottom: 20px; }
.xl28l { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 20px; margin-bottom: 15px; }
.xl28l h2 { margin-bottom: 9px; font-size: 1.2rem; }
.xl28l p { margin-bottom: 11px; }
.xl28l ul, .xl28l ol { margin: 0 0 11px 21px; }
.kb16h { overflow-x: auto; }
.xp90 { font-size: .82rem; color: var(--clr-text-dim); margin-top: 9px; }
.qd60u label { display: block; font-weight: 600; margin-bottom: 6px; }
.qd60u .fh36s { margin-bottom: 15px; }
.qd60u input, .qd60u select, .qd60u textarea { width: 100%; background: var(--clr-surface-2); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 8px; padding: 10px 12px; font: inherit; }
.qd60u textarea { min-height: 135px; }
.dn51 { font-size: .82rem; color: var(--clr-text-dim); }

@media (max-width: 980px) {
  .sh61k { grid-template-columns: 1fr; }
  .wm42 { position: static; order: -1; }
  .uz76 { display: none; }
}
@media (max-width: 860px) {
  .xx95 { display: none; }
  .wo50u { display: block; }
}

.fp27 { border-top: 1px solid var(--clr-border); padding: 26px 0; }
.oj55 h2 { font-size: 1.4rem; margin-bottom: 14px; color: var(--clr-teal); }
.oj55 p { margin-bottom: 12px; }
.oj55 ul { margin: 0 0 14px 22px; }
.oj55 li { margin-bottom: 7px; }

/* inner-page layout variants */
.ho21 { max-width: 900px; }
.xy12 { margin-bottom: 26px; }
.xy12 h2 { margin-bottom: 10px; }
.ha11 { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.ha11 .ww52i, .ha11 .gr32 { grid-column: 1 / -1; }
.mx25 { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.cd62 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.xz83 { font-weight: 700; }
.qd64p { max-width: 700px; }
.qd64p .xl28l { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .ha11 { grid-template-columns: 1fr; }
  .mx25 { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

/* conversion hero */
.hp89s { padding: 30px 0 6px; }
.fr63l { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; }
.hp89s.cv-solo .fr63l { display: block; }
.zp64c { font-size: clamp(1.25rem, 2.5vw, 1.7rem); line-height: 1.2; margin-bottom: 14px; }
.re43 { list-style: none; margin: 0 0 18px !important; padding: 0; display: grid; gap: 9px; }
.re43 li { position: relative; padding-left: 30px; font-size: 1.02rem; font-weight: 600; }
.re43 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; }
.ch24 { font-size: 1.04rem; padding: 13px 28px; }
.mm37 { font-size: .82rem; color: var(--clr-text-dim); margin-top: 10px; }
.kt33 { border-radius: 14px; overflow: hidden; border: 1px solid var(--clr-border); margin: 0; }
.kt33 img { width: 100%; height: auto; display: block; }

/* author */
.wj35x { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.fo85r { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.pi57v { color: var(--clr-text-dim); }
.eg92 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.gt61v { display: flex; gap: 20px; align-items: flex-start; }
.jk88t { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.un32 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.ab78 { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.un32 p { margin-bottom: 10px; }

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

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

h1, h2, h3 { font-family: 'Segoe UI', system-ui, sans-serif; }

/* extras.is43 — 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) ─────────────────────────────────────── */
.fj92s { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.gi69 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.fj92s h2 { margin: 0 0 .75rem; }
.dc63 { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.dc63 li { margin: .35rem 0; }
.by17 { display: grid; gap: 1rem; }
.sr73 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.xu20 {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.my48 { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.uq14i {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.xu20 .uq14i { background: var(--clr-teal); color: var(--clr-bg); }
.dg72 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.pw29 { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.sr73 p { margin: .5rem 0; }
.wt74j { font-size: .95rem; opacity: .8; }
.xf39 { margin-top: .9rem; }
.tc53c { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

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

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

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.pr49, .ox94 { margin: 1.5rem 0; }
.pr49 img, .ox94 img,
.zw92y.fig img, .dy24 img, .vd90 img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.vx61 { padding: 1.5rem 0 3rem; }
.hy90 { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.ds19k { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.vx61 h1 { margin: 0 0 1rem; line-height: 1.2; }
.hw27 { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.hw27 img { width: 100%; height: auto; display: block; border-radius: 12px; }
.rs78f { max-width: 1100px; }
.go55 { max-width: 780px; }
.tq74 p, .bv73t p { font-size: 1.05rem; }
.bv73t {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.iu57 { font-size: .9rem; opacity: .8; }
.ua93 { margin: 1.75rem 0; }
.ie14 { font-weight: 700; margin: 0 0 .5rem; }
.ua93 ol { margin: 0; padding-left: 1.2rem; }
.ua93 li { margin: .3rem 0; }
.oz71 ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.oz71 li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.hl86c { padding: 1.5rem 0; }
.hl86c + .hl86c { border-top: 1px solid var(--clr-border); }
.hl86c h2 { margin: 0 0 .75rem; }
.js33 {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.nx29 {
  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);
}
.qv43 { display: block; margin: 0 0 1rem; }
.qv43 img { width: 100%; height: auto; border-radius: 10px; display: block; }
.ne81x { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.au85o { font-size: 1.3rem; font-weight: 700; }
.gu59 { font-weight: 700; color: var(--clr-gold); }
.db12 { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.db12 li { margin: .35rem 0; }
.ss55f { padding-left: 1.1rem; }
.xx77y { margin: 1rem 0 .5rem; }
.kx49, .nv67u { font-size: .9rem; opacity: .8; }
.nv67u { margin-top: 2rem; }
.oc23o { 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 */
.kx99 { min-height: 100vh; }
.cv70j, .iv75, .ez43 { display: block; }
.rq27, .cr25w { display: block; }
.ib84 ol { list-style: decimal; }