/* stylesheet */
:root {
  --clr-bg: hsl(73 22% 11%);
  --clr-surface: hsl(73 20% 15%);
  --clr-surface-2: hsl(73 19% 19%);
  --clr-border: hsl(73 16% 23%);
  --clr-teal: hsl(349 56% 48%);
  --clr-teal-dim: hsl(349 56% 36%);
  --clr-gold: hsl(139 66% 58%);
  --clr-gold-dim: hsl(139 66% 44%);
  --clr-text: hsl(268 30% 93%);
  --clr-text-dim: hsl(266 14% 68%);
  --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.65; font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-teal); }
.su50j { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.pk75 { position: absolute; left: -9999px; }
.pk75:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #16021f; padding: 8px 14px; z-index: 99; }
.op62q { font-size: .84rem; color: var(--clr-text-dim); }

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

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

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

.xi34 { padding: 46px 0; }
.ls40v { background: var(--clr-surface); border-block: 1px solid var(--clr-border); }
.lp90o { display: flex; align-items: center; gap: 10px; font-size: clamp(1.35rem, 2.7vw, 1.8rem); margin-bottom: 18px; }
.kn42z { color: var(--clr-teal); text-shadow: 0 0 14px var(--clr-teal); font-size: .9em; }
.xi34 h3 { margin: 24px 0 10px; font-size: 1.15rem; color: var(--clr-teal); }
.xi34 h4 { margin: 18px 0 8px; }
.xi34 p { margin-bottom: 13px; }
.xi34 ul, .xi34 ol { margin: 0 0 15px 22px; }
.xi34 li { margin-bottom: 7px; }
.ep54 { display: grid; grid-template-columns: 1fr 190px; gap: 24px; align-items: start; }
.cj50h { 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); }
.po96t { font-size: 3rem; font-weight: 900; color: var(--clr-teal); text-shadow: 0 0 18px color-mix(in srgb, var(--clr-teal) 60%, transparent); }
.po96t.jc50p { font-size: 2rem; }
.zn81 { color: var(--clr-text-dim); }
.ts82u { font-weight: 800; margin-top: 6px; }
.rj90w { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0; }
.yw16s { 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; }
.yw16s.va79 { border-color: color-mix(in srgb, var(--clr-gold) 45%, var(--clr-border)); }
.gq51g { border: 1px dashed var(--clr-teal); border-radius: 12px; padding: 16px; margin: 16px 0; }
.ej58y { list-style: none; margin-left: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.ej58y li { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 99px; padding: 6px 14px; margin: 0 !important; font-size: .92rem; }
.uh20, .de60 { list-style: none; margin-left: 0 !important; }
.uh20 li, .de60 li { padding-left: 24px; position: relative; }
.uh20 li::before { content: '✓'; position: absolute; left: 0; color: var(--clr-gold); font-weight: 900; }
.de60 li::before { content: '✕'; position: absolute; left: 0; color: var(--clr-teal); font-weight: 900; }
.it40i { margin-left: 22px; }
.it40i li { margin-bottom: 10px; }
.it40i b { color: var(--clr-teal); }
.ro26 { 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); }

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

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

.ai83 { border-top: 1px solid var(--clr-border); background: var(--clr-surface); padding: 34px 0 24px; font-size: .9rem; }
.uc84a { margin-bottom: 12px; }
.xr17e { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.ce91 { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 8px; padding: 2px 9px; font-weight: 800; }
.we98 { color: var(--clr-text-dim); }
.rr94p ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.rr94p a { color: var(--clr-text-dim); text-decoration: none; }
.rr94p a:hover { color: var(--clr-teal); }
.sq27, .mn17j { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

.cr50 { padding: 42px 0; }
.ox45s { margin: 0 auto; padding: 0 22px; }
.fx79l ol { display: flex; gap: 8px; list-style: none; font-size: .85rem; color: var(--clr-text-dim); margin-bottom: 17px; }
.fx79l li + li::before { content: '·'; margin-right: 8px; }
.vp73g { font-size: clamp(1.55rem, 3.3vw, 2.2rem); margin-bottom: 11px; }
.ff54q { color: var(--clr-text-dim); font-size: .88rem; margin-bottom: 20px; }
.iu66d { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 21px; margin-bottom: 15px; }
.iu66d h2 { margin-bottom: 9px; font-size: 1.22rem; color: var(--clr-teal); }
.iu66d p { margin-bottom: 11px; }
.iu66d ul, .iu66d ol { margin: 0 0 11px 21px; }
.ua25 { overflow-x: auto; }
.me98s { font-size: .83rem; color: var(--clr-text-dim); margin-top: 9px; }
.wp64k label { display: block; font-weight: 700; margin-bottom: 6px; }
.wp64k .na11 { margin-bottom: 15px; }
.wp64k input, .wp64k select, .wp64k 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; }
.wp64k textarea { min-height: 135px; }
.wd30j { font-size: .83rem; color: var(--clr-text-dim); }

@media (max-width: 900px) {
  .pn20 { display: none; }
  .pi40p { display: block; }
  .ky97 { grid-template-columns: 1fr 1fr; }
  .po47h.zi80u { grid-column: 1 / -1; }
  .ep54, .rj90w { grid-template-columns: 1fr; }
}

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

/* inner-page layout variants */
.jp45h { max-width: 900px; }
.ip52 { margin-bottom: 26px; }
.ip52 h2 { margin-bottom: 10px; }
.jz74s { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.jz74s .fx79l, .jz74s .vp73g { grid-column: 1 / -1; }
.bz71s { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.yg54 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.oc98 { font-weight: 700; }
.jk22 { max-width: 700px; }
.jk22 .iu66d { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .jz74s { grid-template-columns: 1fr; }
  .bz71s { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.wl39o { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.mz28n { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.rb29 { color: var(--clr-text-dim); }
.gq11 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.yi76t { display: flex; gap: 20px; align-items: flex-start; }
.lw78o { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.ty17 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.ml84 { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.ty17 p { margin-bottom: 10px; }

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

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

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

/* extras.al53d — 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) ─────────────────────────────────────── */
.qi95 { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.ob72 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.qi95 h2 { margin: 0 0 .75rem; }
.rh70 { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.rh70 li { margin: .35rem 0; }
.xx72y { display: grid; gap: 1rem; }
.su97g {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.vq85 {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.mq24k { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.ff45 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.vq85 .ff45 { background: var(--clr-teal); color: var(--clr-bg); }
.zu52n { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.jk57 { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.su97g p { margin: .5rem 0; }
.de99 { font-size: .95rem; opacity: .8; }
.nt70 { margin-top: .9rem; }
.qc52 { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

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

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

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.dg84, .qk37 { margin: 1.5rem 0; }
.dg84 img, .qk37 img,
.ev52.fig img, .kc19 img, .ql10 img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.rc79 { padding: 1.5rem 0 3rem; }
.kj32 { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.cv18t { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.rc79 h1 { margin: 0 0 1rem; line-height: 1.2; }
.od31g { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.od31g img { width: 100%; height: auto; display: block; border-radius: 12px; }
.ep68 { max-width: 1100px; }
.ul22 { max-width: 780px; }
.lc31m p, .ky83o p { font-size: 1.05rem; }
.ky83o {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.lb97h { font-size: .9rem; opacity: .8; }
.fn17z { margin: 1.75rem 0; }
.hf47 { font-weight: 700; margin: 0 0 .5rem; }
.fn17z ol { margin: 0; padding-left: 1.2rem; }
.fn17z li { margin: .3rem 0; }
.mr26g ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mr26g li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.hj53y { padding: 1.5rem 0; }
.hj53y + .hj53y { border-top: 1px solid var(--clr-border); }
.hj53y h2 { margin: 0 0 .75rem; }
.rg82 {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.jy80g {
  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);
}
.no31 { display: block; margin: 0 0 1rem; }
.no31 img { width: 100%; height: auto; border-radius: 10px; display: block; }
.wy22q { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.dp80i { font-size: 1.3rem; font-weight: 700; }
.dv71h { font-weight: 700; color: var(--clr-gold); }
.au56q { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.au56q li { margin: .35rem 0; }
.cr87p { padding-left: 1.1rem; }
.vk28q { margin: 1rem 0 .5rem; }
.om14, .yc36v { font-size: .9rem; opacity: .8; }
.yc36v { margin-top: 2rem; }
.mq85q { 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 */
.za21b { min-height: 100vh; }
.mm44, .lk40i, .rt42 { display: block; }
.fd24, .ul37 { display: block; }
.uw65q ol { list-style: decimal; }