/* stylesheet */
:root {
  --clr-bg: hsl(102 22% 9%);
  --clr-surface: hsl(102 20% 13%);
  --clr-surface-2: hsl(102 19% 17%);
  --clr-border: hsl(102 16% 21%);
  --clr-teal: hsl(222 82% 51%);
  --clr-teal-dim: hsl(222 82% 39%);
  --clr-gold: hsl(12 90% 58%);
  --clr-gold-dim: hsl(12 90% 44%);
  --clr-text: hsl(220 20% 91%);
  --clr-text-dim: hsl(220 10% 64%);
  --ff-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ff-mono: 'Cascadia Code', Consolas, 'Courier New', monospace;
}
* { 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.6; font-size: 15.5px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-teal); }
.od86 { max-width: 1160px; margin: 0 auto; padding: 0 18px; }
.yt10 { position: absolute; left: -9999px; }
.yt10:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #001318; padding: 8px 14px; z-index: 99; }
.aa80s { font-size: .82rem; color: var(--clr-text-dim); }

.hf30 { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); position: sticky; top: 0; z-index: 50; }
.do94 { display: flex; align-items: center; gap: 20px; height: 56px; }
.cp17 { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--clr-text); font-weight: 800; font-size: 1.05rem; }
.om71c { color: var(--clr-teal); font-size: 1.2rem; }
.gg69u { color: var(--clr-teal); }
.ov96 { margin-left: auto; }
.ov96 ul { display: flex; gap: 0; list-style: none; }
.ov96 a { padding: 6px 12px; text-decoration: none; color: var(--clr-text-dim); font-size: .88rem; font-weight: 700; border-right: 1px solid var(--clr-border); }
.ov96 li:last-child a { border-right: 0; }
.ov96 a:hover { color: var(--clr-teal); }
.ba55 { display: none; margin-left: auto; background: none; border: 1px solid var(--clr-border); border-radius: 4px; width: 40px; height: 36px; cursor: pointer; position: relative; }
.uk97, .uk97::before, .uk97::after { content: ''; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--clr-text); }
.uk97 { top: 17px; } .uk97::before { top: -6px; } .uk97::after { top: 6px; }
.jd71r { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.jd71r ul { list-style: none; padding: 4px 0; }
.jd71r a { display: block; padding: 10px 20px; color: var(--clr-text); text-decoration: none; font-weight: 700; font-size: .92rem; }

.pv99y { background: var(--clr-surface-2); border-bottom: 1px solid var(--clr-border); font-family: var(--ff-mono); font-size: .78rem; color: var(--clr-text-dim); }
.pv99y .od86 { padding-top: 6px; padding-bottom: 6px; }

.wd26w { border-bottom: 1px solid var(--clr-border); padding: 34px 0 30px; background: linear-gradient(180deg, var(--clr-surface), var(--clr-bg)); }
.tl11 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px; align-items: start; }
.rv51f h1 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); line-height: 1.15; margin-bottom: 6px; }
.ly94e { color: var(--clr-teal); font-weight: 700; margin-bottom: 14px; }
.rn28 { color: var(--clr-text-dim); margin-bottom: 12px; }
.lh69z { font-size: .82rem; color: var(--clr-gold); margin-bottom: 18px; }
.mx72d { display: flex; gap: 10px; flex-wrap: wrap; }
.vl11g { display: inline-block; padding: 10px 20px; border-radius: 6px; font-weight: 800; text-decoration: none; font-size: .92rem; }
.yb57 { background: var(--clr-teal); color: #001318; }
.yb57:hover { background: var(--clr-teal-dim); color: #dffbff; }
.wl33z { border: 1px solid var(--clr-border); color: var(--clr-text); }
.wl33z:hover { border-color: var(--clr-teal); color: var(--clr-teal); }
.it89 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; overflow: hidden; }
.xq84d { display: flex; align-items: baseline; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--clr-border); background: var(--clr-surface-2); font-family: var(--ff-mono); }
.xq84d b { font-size: 1.9rem; color: var(--clr-teal); }
.xq84d i { color: var(--clr-text-dim); font-style: normal; }
.xq84d em { margin-left: auto; font-style: normal; font-weight: 700; font-size: .88rem; }
.xq84d.xi96 { border: 1px solid var(--clr-border); border-radius: 8px; display: inline-flex; margin: 10px 0; }
.qa30 th, .qa30 td { padding: 8px 16px !important; font-size: .86rem; }

.bv30 { position: sticky; top: 56px; z-index: 40; background: var(--clr-bg); border-bottom: 1px solid var(--clr-border); overflow-x: auto; }
.bv30 .od86 { display: flex; gap: 8px; padding-top: 9px; padding-bottom: 9px; white-space: nowrap; }
.ko80z { font-family: var(--ff-mono); font-size: .78rem; padding: 5px 12px; border: 1px solid var(--clr-border); border-radius: 99px; color: var(--clr-text-dim); text-decoration: none; }
.ko80z:hover { border-color: var(--clr-teal); color: var(--clr-teal); }

.xr64f { padding: 10px 0 40px; }
.rk74 { padding: 26px 0; border-bottom: 1px dashed var(--clr-border); }
.rk74 h2 { font-size: 1.35rem; margin-bottom: 14px; font-family: var(--ff-mono); }
.rk74 h2::before { content: '#'; color: var(--clr-teal); margin-right: 8px; }
.rk74 h3 { margin: 20px 0 8px; font-size: 1.08rem; }
.rk74 h4 { margin: 16px 0 6px; font-size: .98rem; }
.rk74 p { margin-bottom: 12px; }
.rk74 ul, .rk74 ol { margin: 0 0 14px 20px; }
.rk74 li { margin-bottom: 6px; }
.fw76i { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.ch95 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; padding: 16px; }
.pk12 { font-size: .9rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-left: 3px solid var(--clr-teal); padding: 10px 14px; margin: 12px 0; }
.pk12.bm15p { border-left-color: var(--clr-gold); }
.tk58m, .id38v { list-style: none; margin-left: 0 !important; }
.tk58m li, .id38v li { padding-left: 22px; position: relative; }
.tk58m li::before { content: '+'; position: absolute; left: 0; color: var(--clr-teal); font-weight: 900; font-family: var(--ff-mono); }
.id38v li::before { content: '−'; position: absolute; left: 0; color: var(--clr-gold); font-weight: 900; font-family: var(--ff-mono); }

.ql84o { overflow-x: auto; margin: 12px 0; border: 1px solid var(--clr-border); border-radius: 8px; }
.ai37 { width: 100%; border-collapse: collapse; min-width: 500px; font-size: .9rem; }
.ai37 th, .ai37 td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--clr-border); }
.ai37 thead th { background: var(--clr-surface-2); font-family: var(--ff-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.ai37 tbody tr:nth-child(even) { background: color-mix(in srgb, var(--clr-surface) 55%, transparent); }
.ai37 tbody tr:last-child td, .ai37 tbody tr:last-child th { border-bottom: 0; }
.ai37 th[scope="row"] { color: var(--clr-text-dim); font-weight: 600; width: 40%; }
.tx61 { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .72rem; font-weight: 700; font-family: var(--ff-mono); }
.ur37 { background: color-mix(in srgb, var(--clr-teal) 20%, transparent); color: var(--clr-teal); }
.uv90j { background: color-mix(in srgb, var(--clr-gold) 20%, transparent); color: var(--clr-gold); }

.zc73 { border: 1px solid var(--clr-border); border-radius: 8px; margin: 12px 0; background: var(--clr-surface); }
.zc73 summary { cursor: pointer; padding: 12px 16px; font-weight: 800; font-family: var(--ff-mono); font-size: .9rem; }
.zc73[open] summary { border-bottom: 1px solid var(--clr-border); }
.zc73 .ql84o { border: 0; margin: 0; }
.qt86 { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; margin-bottom: 10px; }
.qt86 img { border: 1px solid var(--clr-border); border-radius: 8px; }
.ic75 { margin-left: 20px; }
.ic75 li { margin-bottom: 8px; }
.ic75 b { color: var(--clr-teal); }
.xt11t { border-bottom: 0; }
.ra93 { margin: 8px 0; }

.ey80q { display: grid; gap: 8px; }
.ug63e { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; }
.kw71f { width: 100%; text-align: left; background: none; border: 0; color: var(--clr-text); font: inherit; font-weight: 800; font-size: .95rem; padding: 13px 44px 13px 15px; cursor: pointer; position: relative; }
.ba82 { position: absolute; right: 15px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.ba82::before, .ba82::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.ba82::before { left: 0; right: 0; top: 5px; height: 2px; }
.ba82::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.kw71f[aria-expanded="true"] .ba82::after { transform: scaleY(0); }
.gm95 { padding: 0 15px 13px; color: var(--clr-text-dim); font-size: .93rem; }

.hs99 { background: var(--clr-surface); border-top: 1px solid var(--clr-border); padding: 30px 0 22px; font-size: .86rem; }
.rm59i { margin-bottom: 12px; }
.cr74m { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.fk47i { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 4px; padding: 1px 8px; font-weight: 800; font-family: var(--ff-mono); }
.ih19 { color: var(--clr-text-dim); }
.pe73u ul { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.pe73u a { color: var(--clr-text-dim); text-decoration: none; }
.pe73u a:hover { color: var(--clr-teal); }
.vj80, .pe87f { color: var(--clr-text-dim); font-size: .78rem; margin-bottom: 8px; }

.pv18v { padding: 34px 0; }
.si49w { margin: 0 auto; padding: 0 18px; }
.im88m ol { display: flex; gap: 8px; list-style: none; font-family: var(--ff-mono); font-size: .78rem; color: var(--clr-text-dim); margin-bottom: 16px; }
.im88m li + li::before { content: '/'; margin-right: 8px; }
.rv63k { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: 10px; }
.sk74 { color: var(--clr-text-dim); font-family: var(--ff-mono); font-size: .8rem; margin-bottom: 20px; }
.jk63 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; padding: 18px; margin-bottom: 14px; }
.jk63 h2 { margin-bottom: 8px; font-size: 1.15rem; }
.jk63 p { margin-bottom: 10px; }
.jk63 ul, .jk63 ol { margin: 0 0 10px 20px; }
.nm64w { overflow-x: auto; }
.tf11b { font-size: .8rem; color: var(--clr-text-dim); margin-top: 8px; }
.zp60i label { display: block; font-weight: 700; margin-bottom: 5px; font-size: .9rem; }
.zp60i .xy89v { margin-bottom: 14px; }
.zp60i input, .zp60i select, .zp60i textarea { width: 100%; background: var(--clr-surface-2); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 6px; padding: 10px 12px; font: inherit; }
.zp60i textarea { min-height: 130px; }
.qq43u { font-size: .8rem; color: var(--clr-text-dim); }

@media (max-width: 860px) {
  .ov96 { display: none; }
  .ba55 { display: block; }
  .tl11, .fw76i, .qt86 { grid-template-columns: 1fr; }
  .bv30 { top: 56px; }
}

.ic80 { padding: 26px 0; border-bottom: 1px dashed var(--clr-border); }
.lw53i { max-width: 1160px; margin: 0 auto; padding: 0 18px; }
.lw53i h2 { font-size: 1.35rem; margin-bottom: 14px; font-family: var(--ff-mono); }
.lw53i h2::before { content: '#'; color: var(--clr-teal); margin-right: 8px; }
.lw53i p { margin-bottom: 12px; }
.lw53i ul { margin: 0 0 14px 20px; }
.lw53i li { margin-bottom: 6px; }

/* inner-page layout variants */
.rt75v { max-width: 900px; }
.cq37 { margin-bottom: 26px; }
.cq37 h2 { margin-bottom: 10px; }
.hu72d { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.hu72d .im88m, .hu72d .rv63k { grid-column: 1 / -1; }
.la20 { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.pf58q { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.od90 { font-weight: 700; }
.vl46n { max-width: 700px; }
.vl46n .jk63 { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .hu72d { grid-template-columns: 1fr; }
  .la20 { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.fc42 { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.lw29l { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.el20 { color: var(--clr-text-dim); }
.ym58 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.sw11 { display: flex; gap: 20px; align-items: flex-start; }
.xf74n { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.pl87 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.pc93 { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.pl87 p { margin-bottom: 10px; }

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

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

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

/* extras.fd75 — 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) ─────────────────────────────────────── */
.xl77 { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.ss13c { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.xl77 h2 { margin: 0 0 .75rem; }
.xv53b { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.xv53b li { margin: .35rem 0; }
.qz49 { display: grid; gap: 1rem; }
.dr64k {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.gm29 {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.iu10 { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.tx57 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.gm29 .tx57 { background: var(--clr-teal); color: var(--clr-bg); }
.km53 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.kt39 { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.dr64k p { margin: .5rem 0; }
.rg43h { font-size: .95rem; opacity: .8; }
.ag80p { margin-top: .9rem; }
.ut50o { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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