/* stylesheet */
:root {
  --clr-bg: hsl(259 22% 11%);
  --clr-surface: hsl(259 20% 15%);
  --clr-surface-2: hsl(259 19% 19%);
  --clr-border: hsl(259 16% 23%);
  --clr-teal: hsl(255 70% 49%);
  --clr-teal-dim: hsl(255 70% 37%);
  --clr-gold: hsl(45 80% 58%);
  --clr-gold-dim: hsl(45 80% 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); }
.uf73 { max-width: 1160px; margin: 0 auto; padding: 0 18px; }
.xj36 { position: absolute; left: -9999px; }
.xj36:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #001318; padding: 8px 14px; z-index: 99; }
.gj88 { font-size: .82rem; color: var(--clr-text-dim); }

.yv34p { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); position: sticky; top: 0; z-index: 50; }
.qx55 { display: flex; align-items: center; gap: 20px; height: 56px; }
.es70d { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--clr-text); font-weight: 800; font-size: 1.05rem; }
.ze55 { color: var(--clr-teal); font-size: 1.2rem; }
.rl32h { color: var(--clr-teal); }
.nr56i { margin-left: auto; }
.nr56i ul { display: flex; gap: 0; list-style: none; }
.nr56i 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); }
.nr56i li:last-child a { border-right: 0; }
.nr56i a:hover { color: var(--clr-teal); }
.io47 { display: none; margin-left: auto; background: none; border: 1px solid var(--clr-border); border-radius: 4px; width: 40px; height: 36px; cursor: pointer; position: relative; }
.ee11, .ee11::before, .ee11::after { content: ''; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--clr-text); }
.ee11 { top: 17px; } .ee11::before { top: -6px; } .ee11::after { top: 6px; }
.xl90 { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.xl90 ul { list-style: none; padding: 4px 0; }
.xl90 a { display: block; padding: 10px 20px; color: var(--clr-text); text-decoration: none; font-weight: 700; font-size: .92rem; }

.yg69c { 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); }
.yg69c .uf73 { padding-top: 6px; padding-bottom: 6px; }

.hi75r { border-bottom: 1px solid var(--clr-border); padding: 34px 0 30px; background: linear-gradient(180deg, var(--clr-surface), var(--clr-bg)); }
.zr62n { display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px; align-items: start; }
.ic33 h1 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); line-height: 1.15; margin-bottom: 6px; }
.ev66d { color: var(--clr-teal); font-weight: 700; margin-bottom: 14px; }
.mp22d { color: var(--clr-text-dim); margin-bottom: 12px; }
.fn61u { font-size: .82rem; color: var(--clr-gold); margin-bottom: 18px; }
.st21z { display: flex; gap: 10px; flex-wrap: wrap; }
.pm28x { display: inline-block; padding: 10px 20px; border-radius: 6px; font-weight: 800; text-decoration: none; font-size: .92rem; }
.kc64 { background: var(--clr-teal); color: #001318; }
.kc64:hover { background: var(--clr-teal-dim); color: #dffbff; }
.zb50 { border: 1px solid var(--clr-border); color: var(--clr-text); }
.zb50:hover { border-color: var(--clr-teal); color: var(--clr-teal); }
.wh34 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; overflow: hidden; }
.kj97 { 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); }
.kj97 b { font-size: 1.9rem; color: var(--clr-teal); }
.kj97 i { color: var(--clr-text-dim); font-style: normal; }
.kj97 em { margin-left: auto; font-style: normal; font-weight: 700; font-size: .88rem; }
.kj97.vb61w { border: 1px solid var(--clr-border); border-radius: 8px; display: inline-flex; margin: 10px 0; }
.va89m th, .va89m td { padding: 8px 16px !important; font-size: .86rem; }

.hn31 { position: sticky; top: 56px; z-index: 40; background: var(--clr-bg); border-bottom: 1px solid var(--clr-border); overflow-x: auto; }
.hn31 .uf73 { display: flex; gap: 8px; padding-top: 9px; padding-bottom: 9px; white-space: nowrap; }
.yw17o { 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; }
.yw17o:hover { border-color: var(--clr-teal); color: var(--clr-teal); }

.mc53f { padding: 10px 0 40px; }
.qf90 { padding: 26px 0; border-bottom: 1px dashed var(--clr-border); }
.qf90 h2 { font-size: 1.35rem; margin-bottom: 14px; font-family: var(--ff-mono); }
.qf90 h2::before { content: '#'; color: var(--clr-teal); margin-right: 8px; }
.qf90 h3 { margin: 20px 0 8px; font-size: 1.08rem; }
.qf90 h4 { margin: 16px 0 6px; font-size: .98rem; }
.qf90 p { margin-bottom: 12px; }
.qf90 ul, .qf90 ol { margin: 0 0 14px 20px; }
.qf90 li { margin-bottom: 6px; }
.ad99e { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.rf23 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; padding: 16px; }
.vj19r { 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; }
.vj19r.yi75b { border-left-color: var(--clr-gold); }
.bn20, .ol10 { list-style: none; margin-left: 0 !important; }
.bn20 li, .ol10 li { padding-left: 22px; position: relative; }
.bn20 li::before { content: '+'; position: absolute; left: 0; color: var(--clr-teal); font-weight: 900; font-family: var(--ff-mono); }
.ol10 li::before { content: '−'; position: absolute; left: 0; color: var(--clr-gold); font-weight: 900; font-family: var(--ff-mono); }

.xb69w { overflow-x: auto; margin: 12px 0; border: 1px solid var(--clr-border); border-radius: 8px; }
.pi21 { width: 100%; border-collapse: collapse; min-width: 500px; font-size: .9rem; }
.pi21 th, .pi21 td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--clr-border); }
.pi21 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); }
.pi21 tbody tr:nth-child(even) { background: color-mix(in srgb, var(--clr-surface) 55%, transparent); }
.pi21 tbody tr:last-child td, .pi21 tbody tr:last-child th { border-bottom: 0; }
.pi21 th[scope="row"] { color: var(--clr-text-dim); font-weight: 600; width: 40%; }
.og11y { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .72rem; font-weight: 700; font-family: var(--ff-mono); }
.uq14 { background: color-mix(in srgb, var(--clr-teal) 20%, transparent); color: var(--clr-teal); }
.ek32v { background: color-mix(in srgb, var(--clr-gold) 20%, transparent); color: var(--clr-gold); }

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

.ta52p { display: grid; gap: 8px; }
.qd23 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; }
.gt20 { 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; }
.ve61 { position: absolute; right: 15px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.ve61::before, .ve61::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.ve61::before { left: 0; right: 0; top: 5px; height: 2px; }
.ve61::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.gt20[aria-expanded="true"] .ve61::after { transform: scaleY(0); }
.nm63 { padding: 0 15px 13px; color: var(--clr-text-dim); font-size: .93rem; }

.ld20 { background: var(--clr-surface); border-top: 1px solid var(--clr-border); padding: 30px 0 22px; font-size: .86rem; }
.uo42 { margin-bottom: 12px; }
.xs88 { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.ty54h { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 4px; padding: 1px 8px; font-weight: 800; font-family: var(--ff-mono); }
.ff39 { color: var(--clr-text-dim); }
.zi42 ul { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.zi42 a { color: var(--clr-text-dim); text-decoration: none; }
.zi42 a:hover { color: var(--clr-teal); }
.ug20, .rq46 { color: var(--clr-text-dim); font-size: .78rem; margin-bottom: 8px; }

.yo63 { padding: 34px 0; }
.px34 { margin: 0 auto; padding: 0 18px; }
.zn35v ol { display: flex; gap: 8px; list-style: none; font-family: var(--ff-mono); font-size: .78rem; color: var(--clr-text-dim); margin-bottom: 16px; }
.zn35v li + li::before { content: '/'; margin-right: 8px; }
.vl57 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: 10px; }
.su90y { color: var(--clr-text-dim); font-family: var(--ff-mono); font-size: .8rem; margin-bottom: 20px; }
.mg38 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; padding: 18px; margin-bottom: 14px; }
.mg38 h2 { margin-bottom: 8px; font-size: 1.15rem; }
.mg38 p { margin-bottom: 10px; }
.mg38 ul, .mg38 ol { margin: 0 0 10px 20px; }
.qp78y { overflow-x: auto; }
.xu46k { font-size: .8rem; color: var(--clr-text-dim); margin-top: 8px; }
.sf38 label { display: block; font-weight: 700; margin-bottom: 5px; font-size: .9rem; }
.sf38 .wt62 { margin-bottom: 14px; }
.sf38 input, .sf38 select, .sf38 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; }
.sf38 textarea { min-height: 130px; }
.er42 { font-size: .8rem; color: var(--clr-text-dim); }

@media (max-width: 860px) {
  .nr56i { display: none; }
  .io47 { display: block; }
  .zr62n, .ad99e, .ao31e { grid-template-columns: 1fr; }
  .hn31 { top: 56px; }
}

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

/* inner-page layout variants */
.km42h { max-width: 900px; }
.pl29 { margin-bottom: 26px; }
.pl29 h2 { margin-bottom: 10px; }
.qk73i { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.qk73i .zn35v, .qk73i .vl57 { grid-column: 1 / -1; }
.jh57n { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.ri53 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.tc40j { font-weight: 700; }
.au54 { max-width: 700px; }
.au54 .mg38 { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .qk73i { grid-template-columns: 1fr; }
  .jh57n { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.jz20 { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.ya18c { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.on40o { color: var(--clr-text-dim); }
.ix72 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.ec92 { display: flex; gap: 20px; align-items: flex-start; }
.vs19c { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.yr85 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.pa32w { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.yr85 p { margin-bottom: 10px; }

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

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

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

/* extras.ky21d — 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) ─────────────────────────────────────── */
.yk91l { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.at52f { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.yk91l h2 { margin: 0 0 .75rem; }
.ld55r { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.ld55r li { margin: .35rem 0; }
.zs26 { display: grid; gap: 1rem; }
.hq12b {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.jl36 {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.ev29 { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.yk24 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.jl36 .yk24 { background: var(--clr-teal); color: var(--clr-bg); }
.wq31 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.yd59e { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.hq12b p { margin: .5rem 0; }
.hk30 { font-size: .95rem; opacity: .8; }
.cl39 { margin-top: .9rem; }
.xa14k { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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