/* stylesheet */
:root {
  --clr-bg: hsl(292 22% 13%);
  --clr-surface: hsl(292 20% 17%);
  --clr-surface-2: hsl(292 19% 21%);
  --clr-border: hsl(292 16% 25%);
  --clr-teal: hsl(103 56% 48%);
  --clr-teal-dim: hsl(103 56% 36%);
  --clr-gold: hsl(253 66% 58%);
  --clr-gold-dim: hsl(253 66% 44%);
  --clr-text: hsl(40 22% 93%);
  --clr-text-dim: hsl(40 10% 66%);
  --ff-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ff-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.75; font-size: 17px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-teal); }
.vs82y { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.ee56 { position: absolute; left: -9999px; }
.ee56:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #1c1200; padding: 8px 14px; z-index: 99; }

.ot47 { border-bottom: 3px double var(--clr-border); background: var(--clr-surface); font-family: var(--ff-ui); }
.eu69y { max-width: 980px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 24px; height: 60px; }
.yx71 { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 1.12rem; color: var(--clr-text); }
.tl57 { color: var(--clr-teal); }
.rk55 { color: var(--clr-teal); }
.dw76h { margin-left: auto; }
.dw76h ul { display: flex; gap: 2px; list-style: none; }
.dw76h a { padding: 8px 12px; text-decoration: none; color: var(--clr-text-dim); font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent; }
.dw76h a:hover { color: var(--clr-teal); border-bottom-color: var(--clr-teal); }
.bc29a { display: none; margin-left: auto; background: none; border: 1px solid var(--clr-border); border-radius: 6px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.pk88e, .pk88e::before, .pk88e::after { content: ''; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--clr-text); }
.pk88e { top: 18px; } .pk88e::before { top: -6px; } .pk88e::after { top: 6px; }
.md40 { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); font-family: var(--ff-ui); }
.md40 ul { list-style: none; padding: 6px 0; }
.md40 a { display: block; padding: 11px 22px; color: var(--clr-text); text-decoration: none; }

.ft76k { padding: 54px 0 8px; }
.oz37 { font-family: var(--ff-ui); color: var(--clr-teal); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin-bottom: 14px; }
.ft76k h1 { font-size: clamp(1.8rem, 4.5vw, 2.7rem); line-height: 1.18; margin-bottom: 16px; font-weight: 700; }
.jb68 { font-size: 1.12rem; color: var(--clr-text-dim); font-style: italic; margin-bottom: 12px; }
.or22h { font-family: var(--ff-ui); font-size: .85rem; color: var(--clr-gold); margin-bottom: 22px; }
.so78a { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; font-family: var(--ff-ui); margin-bottom: 30px; }
.cu19 { background: var(--clr-surface); border: 1px solid var(--clr-border); padding: 12px; text-align: center; }
.cu19 a { text-decoration: none; }
.sv89r { display: block; font-size: 1.35rem; font-weight: 900; color: var(--clr-teal); }
.yv62 { font-size: .8rem; color: var(--clr-text-dim); }

.ts93 { border: 1px solid var(--clr-teal); padding: 20px 22px; margin-bottom: 34px; position: relative; }
.jb85 { position: absolute; top: -13px; left: 16px; background: var(--clr-bg); padding: 0 10px; font-family: var(--ff-ui); font-size: .85rem; letter-spacing: .12em; color: var(--clr-teal); }
.px25y { margin-top: 14px; }

.uc73 { background: var(--clr-surface); border: 1px solid var(--clr-border); padding: 22px 26px; margin-bottom: 40px; font-family: var(--ff-ui); }
.uc73 h2 { font-size: 1.05rem; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .06em; }
.uc73 ol { columns: 2; gap: 28px; margin-left: 20px; }
.uc73 li { margin-bottom: 7px; break-inside: avoid; }
.uc73 a { text-decoration: none; color: var(--clr-text-dim); }
.uc73 a:hover { color: var(--clr-teal); }

.je59u { padding: 8px 0 30px; border-bottom: 1px solid var(--clr-border); margin-bottom: 30px; }
.je59u h2 { font-size: 1.5rem; margin-bottom: 16px; display: flex; align-items: baseline; gap: 12px; }
.xs76e { font-family: var(--ff-ui); flex: 0 0 auto; background: var(--clr-teal); color: #1c1200; font-size: .95rem; font-weight: 800; width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 4px; }
.je59u h3 { margin: 22px 0 10px; font-size: 1.18rem; }
.je59u h4 { margin: 18px 0 8px; }
.je59u p { margin-bottom: 14px; }
.je59u ul, .je59u ol { margin: 0 0 16px 24px; }
.je59u li { margin-bottom: 8px; }
.dg68 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 18px 0; }
.yn94u, .hr34 { list-style: none; margin-left: 0 !important; }
.yn94u li, .hr34 li { padding-left: 24px; position: relative; }
.yn94u li::before { content: '✓'; position: absolute; left: 0; color: var(--clr-teal); font-weight: 800; }
.hr34 li::before { content: '✕'; position: absolute; left: 0; color: var(--clr-gold); font-weight: 800; }
.ow38v { border-left: 3px solid var(--clr-teal); background: var(--clr-surface); padding: 12px 16px; margin: 14px 0; font-family: var(--ff-ui); font-size: .95rem; }
.kt68 { border-left-color: var(--clr-gold); }
.cw52 { border: 1px dashed var(--clr-border); padding: 16px; margin: 16px 0; }
.so40n { margin: 18px 0; border: 1px solid var(--clr-border); }
.hr40k { margin-left: 24px; }
.hr40k li { margin-bottom: 12px; }

.ek66u { overflow-x: auto; margin: 14px 0; }
.jy83 { width: 100%; border-collapse: collapse; min-width: 520px; font-family: var(--ff-ui); font-size: .95rem; }
.jy83 th, .jy83 td { text-align: left; padding: 10px 14px; border: 1px solid var(--clr-border); }
.jy83 thead th { background: var(--clr-surface-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.jy83 th[scope="row"] { background: var(--clr-surface); color: var(--clr-text-dim); font-weight: 600; width: 38%; }
.vo92 { font-size: .84rem; color: var(--clr-text-dim); font-family: var(--ff-ui); }
.ny34q { display: inline-block; padding: 2px 9px; border-radius: 3px; font-size: .76rem; font-weight: 700; }
.qf49 { background: color-mix(in srgb, var(--clr-teal) 25%, transparent); color: var(--clr-teal); }
.bu66 { background: color-mix(in srgb, var(--clr-gold) 25%, transparent); color: var(--clr-gold); }

.ad19 { display: flex; align-items: center; gap: 16px; background: var(--clr-surface); border: 1px solid var(--clr-teal); padding: 16px 20px; margin: 20px 0; font-family: var(--ff-ui); }
.fd56z { font-size: 2.2rem; font-weight: 900; color: var(--clr-teal); }
.fd56z small { font-size: 1rem; color: var(--clr-text-dim); }
.xt50l { font-weight: 700; }
.hh50 { display: inline-block; padding: 12px 24px; font-family: var(--ff-ui); font-weight: 700; text-decoration: none; border: 2px solid var(--clr-teal); }
.hy62 { background: var(--clr-teal); color: #1c1200; }
.hy62:hover { background: transparent; color: var(--clr-teal); }
.lx63n { color: var(--clr-text); border-color: var(--clr-border); }

.dk25l { display: grid; gap: 0; }
.ne45 { border-bottom: 1px solid var(--clr-border); }
.fu35 { width: 100%; text-align: left; background: none; border: 0; color: var(--clr-text); font-family: var(--ff-body); font-size: 1.05rem; font-weight: 700; padding: 16px 44px 16px 0; cursor: pointer; position: relative; }
.lo22n { position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.lo22n::before, .lo22n::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.lo22n::before { left: 0; right: 0; top: 5px; height: 2px; }
.lo22n::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.fu35[aria-expanded="true"] .lo22n::after { transform: scaleY(0); }
.ur80b { padding: 0 0 16px; color: var(--clr-text-dim); }

.em39 { border-top: 3px double var(--clr-border); background: var(--clr-surface); margin-top: 30px; padding: 34px 0 26px; font-family: var(--ff-ui); font-size: .9rem; }
.em39 .em49v { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.ws12n { margin-bottom: 12px; }
.pa94i { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.aw96 { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 4px; padding: 1px 8px; font-weight: 800; }
.vx17m { color: var(--clr-text-dim); }
.qb71k ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.qb71k a { color: var(--clr-text-dim); text-decoration: none; }
.rh71, .mi44 { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 10px; }

.pv19l { padding: 40px 0; }
.dz93 { margin: 0 auto; padding: 0 20px; max-width: 780px !important; }
.tz38 ol { display: flex; gap: 8px; list-style: none; font-size: .84rem; color: var(--clr-text-dim); margin-bottom: 16px; font-family: var(--ff-ui); }
.tz38 li + li::before { content: '→'; margin-right: 8px; }
.lo82x { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 10px; }
.iw67 { color: var(--clr-text-dim); font-size: .88rem; margin-bottom: 20px; font-family: var(--ff-ui); }
.cp94 { border: 1px solid var(--clr-border); background: var(--clr-surface); padding: 22px 24px; margin-bottom: 18px; }
.cp94 h2 { margin-bottom: 10px; font-size: 1.25rem; }
.cp94 p { margin-bottom: 12px; }
.cp94 ul, .cp94 ol { margin: 0 0 12px 22px; }
.wz84 label { display: block; font-weight: 700; font-family: var(--ff-ui); margin-bottom: 6px; }
.wz84 .es91 { margin-bottom: 15px; }
.wz84 input, .wz84 select, .wz84 textarea { width: 100%; background: var(--clr-surface-2); color: var(--clr-text); border: 1px solid var(--clr-border); padding: 10px 12px; font: inherit; }
.wz84 textarea { min-height: 140px; }
.cv15p { font-size: .82rem; color: var(--clr-text-dim); font-family: var(--ff-ui); }

@media (max-width: 760px) {
  .dw76h { display: none; }
  .bc29a { display: block; }
  .so78a { grid-template-columns: 1fr 1fr; }
  .dg68 { grid-template-columns: 1fr; }
  .uc73 ol { columns: 1; }
}

.sy47 { padding: 8px 0 30px; border-bottom: 1px solid var(--clr-border); margin-bottom: 30px; }
.xy97 { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.xy97 h2 { font-size: 1.4rem; margin-bottom: 14px; color: var(--clr-teal); }
.xy97 p { margin-bottom: 14px; }
.xy97 ul { margin: 0 0 16px 24px; }
.xy97 li { margin-bottom: 8px; }

/* inner-page layout variants */
.dr12 { max-width: 900px; }
.dk64 { margin-bottom: 26px; }
.dk64 h2 { margin-bottom: 10px; }
.pt77 { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.pt77 .tz38, .pt77 .lo82x { grid-column: 1 / -1; }
.da37 { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.yh40p { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.vj97s { font-weight: 700; }
.hl43 { max-width: 700px; }
.hl43 .cp94 { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .pt77 { grid-template-columns: 1fr; }
  .da37 { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.jm47 { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.td55 { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.xo16 { color: var(--clr-text-dim); }
.wp25 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.fu70e { display: flex; gap: 20px; align-items: flex-start; }
.hs36 { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.xp56 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.ea25 { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.xp56 p { margin-bottom: 10px; }

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

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

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

/* extras.sc34 — 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) ─────────────────────────────────────── */
.bx59 { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.mz61 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.bx59 h2 { margin: 0 0 .75rem; }
.yh50v { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.yh50v li { margin: .35rem 0; }
.ya29 { display: grid; gap: 1rem; }
.sw53i {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.do10 {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.iv72f { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.cd55 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.do10 .cd55 { background: var(--clr-teal); color: var(--clr-bg); }
.br34 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.be93u { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.sw53i p { margin: .5rem 0; }
.ev97w { font-size: .95rem; opacity: .8; }
.ln83e { margin-top: .9rem; }
.fw47 { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

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

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

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.jl49, .fp12g { margin: 1.5rem 0; }
.jl49 img, .fp12g img,
.co40.fig img, .ql35s img, .so40n img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.la50w { padding: 1.5rem 0 3rem; }
.px15 { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.lx56e { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.la50w h1 { margin: 0 0 1rem; line-height: 1.2; }
.bs45j { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.bs45j img { width: 100%; height: auto; display: block; border-radius: 12px; }
.ht52 { max-width: 1100px; }
.ez93v { max-width: 780px; }
.sl11 p, .td33 p { font-size: 1.05rem; }
.td33 {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.fz99 { font-size: .9rem; opacity: .8; }
.gl64 { margin: 1.75rem 0; }
.md25 { font-weight: 700; margin: 0 0 .5rem; }
.gl64 ol { margin: 0; padding-left: 1.2rem; }
.gl64 li { margin: .3rem 0; }
.xn91u ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.xn91u li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.na42 { padding: 1.5rem 0; }
.na42 + .na42 { border-top: 1px solid var(--clr-border); }
.na42 h2 { margin: 0 0 .75rem; }
.gh30 {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.hg48 {
  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);
}
.mg85a { display: block; margin: 0 0 1rem; }
.mg85a img { width: 100%; height: auto; border-radius: 10px; display: block; }
.vk69y { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.hy61q { font-size: 1.3rem; font-weight: 700; }
.un56 { font-weight: 700; color: var(--clr-gold); }
.md41 { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.md41 li { margin: .35rem 0; }
.dp85 { padding-left: 1.1rem; }
.gw31 { margin: 1rem 0 .5rem; }
.we43, .ok96y { font-size: .9rem; opacity: .8; }
.ok96y { margin-top: 2rem; }
.rj41v { 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 */
.qj99 { min-height: 100vh; }
.ip93p, .xb18s, .cu73i { display: block; }
.yy30k, .sg88 { display: block; }
.pl80 ol { list-style: decimal; }