/* stylesheet */
:root {
  --clr-bg: hsl(204 22% 10%);
  --clr-surface: hsl(204 20% 14%);
  --clr-surface-2: hsl(204 19% 18%);
  --clr-border: hsl(204 16% 22%);
  --clr-teal: hsl(21 82% 50%);
  --clr-teal-dim: hsl(21 82% 38%);
  --clr-gold: hsl(171 90% 58%);
  --clr-gold-dim: hsl(171 90% 44%);
  --clr-text: hsl(220 20% 91%);
  --clr-text-dim: hsl(220 10% 64%);
  --ff-body: Verdana, Geneva, Tahoma, 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); }
.dh44a { max-width: 1160px; margin: 0 auto; padding: 0 18px; }
.df89 { position: absolute; left: -9999px; }
.df89:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #001318; padding: 8px 14px; z-index: 99; }
.us54 { font-size: .82rem; color: var(--clr-text-dim); }

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

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

.lq80 { border-bottom: 1px solid var(--clr-border); padding: 34px 0 30px; background: linear-gradient(180deg, var(--clr-surface), var(--clr-bg)); }
.za86b { display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px; align-items: start; }
.ql40 h1 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); line-height: 1.15; margin-bottom: 6px; }
.df13 { color: var(--clr-teal); font-weight: 700; margin-bottom: 14px; }
.zb14r { color: var(--clr-text-dim); margin-bottom: 12px; }
.vh79f { font-size: .82rem; color: var(--clr-gold); margin-bottom: 18px; }
.di55 { display: flex; gap: 10px; flex-wrap: wrap; }
.og70 { display: inline-block; padding: 10px 20px; border-radius: 6px; font-weight: 800; text-decoration: none; font-size: .92rem; }
.vj83n { background: var(--clr-teal); color: #001318; }
.vj83n:hover { background: var(--clr-teal-dim); color: #dffbff; }
.pm48 { border: 1px solid var(--clr-border); color: var(--clr-text); }
.pm48:hover { border-color: var(--clr-teal); color: var(--clr-teal); }
.tj32 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; overflow: hidden; }
.yz16k { 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); }
.yz16k b { font-size: 1.9rem; color: var(--clr-teal); }
.yz16k i { color: var(--clr-text-dim); font-style: normal; }
.yz16k em { margin-left: auto; font-style: normal; font-weight: 700; font-size: .88rem; }
.yz16k.ne98 { border: 1px solid var(--clr-border); border-radius: 8px; display: inline-flex; margin: 10px 0; }
.lx54j th, .lx54j td { padding: 8px 16px !important; font-size: .86rem; }

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

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

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

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

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

.fp28t { background: var(--clr-surface); border-top: 1px solid var(--clr-border); padding: 30px 0 22px; font-size: .86rem; }
.fk84f { margin-bottom: 12px; }
.sc30 { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.jo27 { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 4px; padding: 1px 8px; font-weight: 800; font-family: var(--ff-mono); }
.sx66r { color: var(--clr-text-dim); }
.tl39y ul { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.tl39y a { color: var(--clr-text-dim); text-decoration: none; }
.tl39y a:hover { color: var(--clr-teal); }
.lo82y, .rv88 { color: var(--clr-text-dim); font-size: .78rem; margin-bottom: 8px; }

.ts54 { padding: 34px 0; }
.zx28 { margin: 0 auto; padding: 0 18px; }
.au14 ol { display: flex; gap: 8px; list-style: none; font-family: var(--ff-mono); font-size: .78rem; color: var(--clr-text-dim); margin-bottom: 16px; }
.au14 li + li::before { content: '/'; margin-right: 8px; }
.kb69 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: 10px; }
.pn46 { color: var(--clr-text-dim); font-family: var(--ff-mono); font-size: .8rem; margin-bottom: 20px; }
.dj59l { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; padding: 18px; margin-bottom: 14px; }
.dj59l h2 { margin-bottom: 8px; font-size: 1.15rem; }
.dj59l p { margin-bottom: 10px; }
.dj59l ul, .dj59l ol { margin: 0 0 10px 20px; }
.yt44 { overflow-x: auto; }
.jh86z { font-size: .8rem; color: var(--clr-text-dim); margin-top: 8px; }
.we54 label { display: block; font-weight: 700; margin-bottom: 5px; font-size: .9rem; }
.we54 .wq86 { margin-bottom: 14px; }
.we54 input, .we54 select, .we54 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; }
.we54 textarea { min-height: 130px; }
.ci88 { font-size: .8rem; color: var(--clr-text-dim); }

@media (max-width: 860px) {
  .em70 { display: none; }
  .ti38v { display: block; }
  .za86b, .we35, .ya55x { grid-template-columns: 1fr; }
  .jt90 { top: 56px; }
}

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

/* inner-page layout variants */
.ia75 { max-width: 900px; }
.ld85l { margin-bottom: 26px; }
.ld85l h2 { margin-bottom: 10px; }
.aj52b { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.aj52b .au14, .aj52b .kb69 { grid-column: 1 / -1; }
.vi28z { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.dc80 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.qn29 { font-weight: 700; }
.ym19n { max-width: 700px; }
.ym19n .dj59l { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .aj52b { grid-template-columns: 1fr; }
  .vi28z { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.fa80v { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.el15a { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.wd70v { color: var(--clr-text-dim); }
.wd57 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.vd58 { display: flex; gap: 20px; align-items: flex-start; }
.cu89w { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.yq51c h2 { font-size: 1.2rem; margin-bottom: 8px; }
.mx84 { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.yq51c p { margin-bottom: 10px; }

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

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

h1, h2, h3 { font-family: 'Trebuchet MS', Verdana, sans-serif; }

/* extras.vc17 — 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) ─────────────────────────────────────── */
.dy28 { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.xk12p { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.dy28 h2 { margin: 0 0 .75rem; }
.mj43i { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.mj43i li { margin: .35rem 0; }
.xz47 { display: grid; gap: 1rem; }
.cp31m {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.tt61 {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.sh71q { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.ot34 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.tt61 .ot34 { background: var(--clr-teal); color: var(--clr-bg); }
.js80m { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.cv23a { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.cp31m p { margin: .5rem 0; }
.bj60 { font-size: .95rem; opacity: .8; }
.ki57x { margin-top: .9rem; }
.zr53 { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

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

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

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.ct37k, .pq11 { margin: 1.5rem 0; }
.ct37k img, .pq11 img,
.jf49n.fig img, .zx76f img, .nu63f img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}