/* stylesheet */
:root {
  --clr-bg: hsl(161 22% 12%);
  --clr-surface: hsl(161 20% 16%);
  --clr-surface-2: hsl(161 19% 20%);
  --clr-border: hsl(161 16% 24%);
  --clr-teal: hsl(307 72% 53%);
  --clr-teal-dim: hsl(307 72% 41%);
  --clr-gold: hsl(97 82% 58%);
  --clr-gold-dim: hsl(97 82% 44%);
  --clr-text: hsl(268 30% 93%);
  --clr-text-dim: hsl(266 14% 68%);
  --ff-body: system-ui, -apple-system, 'Helvetica Neue', Arial, 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); }
.bz25 { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.da98 { position: absolute; left: -9999px; }
.da98:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #16021f; padding: 8px 14px; z-index: 99; }
.rt97 { font-size: .84rem; color: var(--clr-text-dim); }

.bc28 { 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; }
.lb99, .nd95y { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.nd95y { display: flex; align-items: center; gap: 24px; height: 62px; }
.hu72 { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 1.15rem; color: var(--clr-text); }
.uh29j { color: var(--clr-teal); text-shadow: 0 0 12px var(--clr-teal); }
.yk56j { color: var(--clr-teal); }
.bc56 { margin-left: auto; }
.bc56 ul { display: flex; gap: 6px; list-style: none; }
.bc56 a { padding: 8px 14px; border-radius: 99px; text-decoration: none; color: var(--clr-text-dim); font-weight: 700; font-size: .92rem; }
.bc56 a:hover { background: var(--clr-surface-2); color: var(--clr-teal); }
.de42 { display: none; margin-left: auto; background: none; border: 1px solid var(--clr-border); border-radius: 8px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.pm82, .pm82::before, .pm82::after { content: ''; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--clr-text); }
.pm82 { top: 18px; } .pm82::before { top: -6px; } .pm82::after { top: 6px; }
.hu50t { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.hu50t ul { list-style: none; padding: 6px 0; }
.hu50t a { display: block; padding: 12px 22px; color: var(--clr-text); text-decoration: none; font-weight: 700; }

.sn63v { 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); }
.ts30k { 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); }
.sn63v h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.12; margin-bottom: 14px; }
.th83n { color: var(--clr-teal); text-shadow: 0 0 22px color-mix(in srgb, var(--clr-teal) 55%, transparent); }
.ow82 { max-width: 46rem; color: var(--clr-text-dim); font-size: 1.06rem; margin-bottom: 10px; }
.lr29d { font-size: .86rem; color: var(--clr-gold); margin-bottom: 20px; }
.pl70 { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.hq69 { display: inline-block; padding: 12px 24px; border-radius: 99px; font-weight: 800; text-decoration: none; }
.cq74 { 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); }
.cq74:hover { filter: brightness(1.12); }
.hs78 { border: 2px solid var(--clr-border); color: var(--clr-text); }
.hs78:hover { border-color: var(--clr-teal); color: var(--clr-teal); }

.ie16m { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 14px; }
.tw81 { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--clr-border); text-decoration: none; transition: .22s; }
.tw81:hover { transform: translateY(-4px); border-color: var(--clr-teal); box-shadow: 0 8px 26px color-mix(in srgb, var(--clr-teal) 30%, transparent); }
.tw81 img { width: 100%; height: 100%; min-height: 140px; object-fit: cover; }
.pe71 { 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; }
.tw81.od68 .pe71 { font-size: 1.15rem; }

.bo92 { padding: 46px 0; }
.jq79z { background: var(--clr-surface); border-block: 1px solid var(--clr-border); }
.dj33 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.35rem, 2.7vw, 1.8rem); margin-bottom: 18px; }
.jn32w { color: var(--clr-teal); text-shadow: 0 0 14px var(--clr-teal); font-size: .9em; }
.bo92 h3 { margin: 24px 0 10px; font-size: 1.15rem; color: var(--clr-teal); }
.bo92 h4 { margin: 18px 0 8px; }
.bo92 p { margin-bottom: 13px; }
.bo92 ul, .bo92 ol { margin: 0 0 15px 22px; }
.bo92 li { margin-bottom: 7px; }
.sb18i { display: grid; grid-template-columns: 1fr 190px; gap: 24px; align-items: start; }
.lu83q { 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); }
.ps19 { font-size: 3rem; font-weight: 900; color: var(--clr-teal); text-shadow: 0 0 18px color-mix(in srgb, var(--clr-teal) 60%, transparent); }
.ps19.is91t { font-size: 2rem; }
.kf72v { color: var(--clr-text-dim); }
.mf60 { font-weight: 800; margin-top: 6px; }
.hh66e { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0; }
.ox71p { 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; }
.ox71p.ta11 { border-color: color-mix(in srgb, var(--clr-gold) 45%, var(--clr-border)); }
.lz86 { border: 1px dashed var(--clr-teal); border-radius: 12px; padding: 16px; margin: 16px 0; }
.zu59 { list-style: none; margin-left: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.zu59 li { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 99px; padding: 6px 14px; margin: 0 !important; font-size: .92rem; }
.rn38c, .ze66 { list-style: none; margin-left: 0 !important; }
.rn38c li, .ze66 li { padding-left: 24px; position: relative; }
.rn38c li::before { content: '✓'; position: absolute; left: 0; color: var(--clr-gold); font-weight: 900; }
.ze66 li::before { content: '✕'; position: absolute; left: 0; color: var(--clr-teal); font-weight: 900; }
.vw76 { margin-left: 22px; }
.vw76 li { margin-bottom: 10px; }
.vw76 b { color: var(--clr-teal); }
.fo12h { 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); }

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

.oh52 { display: grid; gap: 10px; }
.ly53z { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 12px; }
.qd82p { 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; }
.pg29i { position: absolute; right: 18px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.pg29i::before, .pg29i::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.pg29i::before { left: 0; right: 0; top: 5px; height: 2px; }
.pg29i::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.qd82p[aria-expanded="true"] .pg29i::after { transform: scaleY(0); }
.km32l { padding: 0 18px 15px; color: var(--clr-text-dim); }

.ks82d { border-top: 1px solid var(--clr-border); background: var(--clr-surface); padding: 34px 0 24px; font-size: .9rem; }
.kg31 { margin-bottom: 12px; }
.im74v { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.nf90w { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 8px; padding: 2px 9px; font-weight: 800; }
.tx22 { color: var(--clr-text-dim); }
.ri82 ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.ri82 a { color: var(--clr-text-dim); text-decoration: none; }
.ri82 a:hover { color: var(--clr-teal); }
.fx20, .aq24 { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

.rc25q { padding: 42px 0; }
.ig19 { margin: 0 auto; padding: 0 22px; }
.uf40 ol { display: flex; gap: 8px; list-style: none; font-size: .85rem; color: var(--clr-text-dim); margin-bottom: 17px; }
.uf40 li + li::before { content: '·'; margin-right: 8px; }
.hc82e { font-size: clamp(1.55rem, 3.3vw, 2.2rem); margin-bottom: 11px; }
.ms20t { color: var(--clr-text-dim); font-size: .88rem; margin-bottom: 20px; }
.ny82t { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 21px; margin-bottom: 15px; }
.ny82t h2 { margin-bottom: 9px; font-size: 1.22rem; color: var(--clr-teal); }
.ny82t p { margin-bottom: 11px; }
.ny82t ul, .ny82t ol { margin: 0 0 11px 21px; }
.ki41 { overflow-x: auto; }
.sa79w { font-size: .83rem; color: var(--clr-text-dim); margin-top: 9px; }
.cz40y label { display: block; font-weight: 700; margin-bottom: 6px; }
.cz40y .ps27 { margin-bottom: 15px; }
.cz40y input, .cz40y select, .cz40y 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; }
.cz40y textarea { min-height: 135px; }
.an73 { font-size: .83rem; color: var(--clr-text-dim); }

@media (max-width: 900px) {
  .bc56 { display: none; }
  .de42 { display: block; }
  .ie16m { grid-template-columns: 1fr 1fr; }
  .tw81.od68 { grid-column: 1 / -1; }
  .sb18i, .hh66e { grid-template-columns: 1fr; }
}

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

/* inner-page layout variants */
.tn20 { max-width: 900px; }
.gi66 { margin-bottom: 26px; }
.gi66 h2 { margin-bottom: 10px; }
.lf85 { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.lf85 .uf40, .lf85 .hc82e { grid-column: 1 / -1; }
.wy70l { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.bc33m { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.tu20p { font-weight: 700; }
.ll65h { max-width: 700px; }
.ll65h .ny82t { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .lf85 { grid-template-columns: 1fr; }
  .wy70l { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.gb75 { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.kv93 { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.xs91p { color: var(--clr-text-dim); }
.pw75g { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.yr80 { display: flex; gap: 20px; align-items: flex-start; }
.cz27a { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.sy15 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.mj72 { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.sy15 p { margin-bottom: 10px; }

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

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

h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; }

/* extras.au48m — 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) ─────────────────────────────────────── */
.kv45d { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.mg81 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.kv45d h2 { margin: 0 0 .75rem; }
.gb92 { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.gb92 li { margin: .35rem 0; }
.xr47x { display: grid; gap: 1rem; }
.oh66 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.fg39h {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.nm23 { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.xh79a {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.fg39h .xh79a { background: var(--clr-teal); color: var(--clr-bg); }
.hi85l { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.vz75m { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.oh66 p { margin: .5rem 0; }
.lq16 { font-size: .95rem; opacity: .8; }
.hc55f { margin-top: .9rem; }
.sy67k { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

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

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

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.dg91x, .pu10d { margin: 1.5rem 0; }
.dg91x img, .pu10d img,
.mt97q.fig img, .sx61 img, .no92j img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.id68t { padding: 1.5rem 0 3rem; }
.jv27n { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.fg71b { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.id68t h1 { margin: 0 0 1rem; line-height: 1.2; }
.ue99j { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.ue99j img { width: 100%; height: auto; display: block; border-radius: 12px; }
.ou87j { max-width: 1100px; }
.oe96 { max-width: 780px; }
.io77w p, .qo50l p { font-size: 1.05rem; }
.qo50l {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.nf28 { font-size: .9rem; opacity: .8; }
.sv36 { margin: 1.75rem 0; }
.zb62 { font-weight: 700; margin: 0 0 .5rem; }
.sv36 ol { margin: 0; padding-left: 1.2rem; }
.sv36 li { margin: .3rem 0; }
.er64 ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.er64 li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.tk97 { padding: 1.5rem 0; }
.tk97 + .tk97 { border-top: 1px solid var(--clr-border); }
.tk97 h2 { margin: 0 0 .75rem; }
.sn78 {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.cy10y {
  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);
}
.ez99q { display: block; margin: 0 0 1rem; }
.ez99q img { width: 100%; height: auto; border-radius: 10px; display: block; }
.vb57y { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.am28n { font-size: 1.3rem; font-weight: 700; }
.ui37 { font-weight: 700; color: var(--clr-gold); }
.xv97n { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.xv97n li { margin: .35rem 0; }
.xu40 { padding-left: 1.1rem; }
.zk37z { margin: 1rem 0 .5rem; }
.nk90, .fj69 { font-size: .9rem; opacity: .8; }
.fj69 { margin-top: 2rem; }
.zr43g { 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 */
.xn33d { min-height: 100vh; }
.qs57, .pe58e, .em52 { display: block; }
.xw35k, .jq26 { display: block; }
.ap61y ol { list-style: decimal; }