/* stylesheet */
:root {
  --clr-bg: hsl(29 22% 11%);
  --clr-surface: hsl(29 20% 15%);
  --clr-surface-2: hsl(29 19% 19%);
  --clr-border: hsl(29 16% 23%);
  --clr-teal: hsl(47 62% 51%);
  --clr-teal-dim: hsl(47 62% 39%);
  --clr-gold: hsl(197 72% 58%);
  --clr-gold-dim: hsl(197 72% 44%);
  --clr-text: hsl(250 24% 92%);
  --clr-text-dim: hsl(250 10% 65%);
  --ff-body: -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  --rail: 218px;
}
* { 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.62; font-size: 15.5px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-teal); }
.he67y { max-width: 980px; margin: 0 auto; padding: 22px 24px 50px; }
.pp28i { position: absolute; left: -9999px; }
.pp28i:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #03130a; padding: 8px 14px; z-index: 99; }
.pc80 { font-size: .83rem; color: var(--clr-text-dim); }

/* topbar + rail */
.hc83 { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 60; display: flex; align-items: center; gap: 16px; padding: 0 18px; background: color-mix(in srgb, var(--clr-surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--clr-border); }
.ku57d { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 900; font-size: 1.08rem; color: var(--clr-text); }
.kn88 { color: var(--clr-teal); text-shadow: 0 0 12px var(--clr-teal); }
.cl20 { color: var(--clr-teal); }
.cz79s { margin-left: auto; }
.cq48 { position: fixed; top: 56px; bottom: 0; left: 0; width: var(--rail); background: var(--clr-surface); border-right: 1px solid var(--clr-border); padding: 18px 0; display: flex; flex-direction: column; z-index: 55; }
.cq48 ul { list-style: none; flex: 1; }
.cq48 a { display: flex; align-items: center; gap: 12px; padding: 11px 20px; text-decoration: none; color: var(--clr-text-dim); font-weight: 700; font-size: .92rem; border-left: 3px solid transparent; }
.cq48 a:hover { color: var(--clr-teal); background: var(--clr-surface-2); border-left-color: var(--clr-teal); }
.kv62l { color: var(--clr-teal); width: 18px; text-align: center; }
.gy59 { padding: 14px 20px 6px; border-top: 1px solid var(--clr-border); }
.fd41 { display: none; background: none; border: 1px solid var(--clr-border); border-radius: 8px; width: 40px; height: 36px; cursor: pointer; position: relative; }
.wr92, .wr92::before, .wr92::after { content: ''; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--clr-text); }
.wr92 { top: 17px; } .wr92::before { top: -6px; } .wr92::after { top: 6px; }
.in77a { position: fixed; top: 56px; left: 0; right: 0; z-index: 58; background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.in77a ul { list-style: none; padding: 6px 0; }
.in77a a { display: block; padding: 12px 22px; color: var(--clr-text); text-decoration: none; font-weight: 700; }
body { padding-top: 56px; padding-left: var(--rail); }
.qy18 { margin-left: 0; }

.fw67 { display: inline-block; padding: 9px 18px; border-radius: 8px; font-weight: 800; text-decoration: none; font-size: .9rem; }
.wj27j { background: var(--clr-teal); color: #03130a; box-shadow: 0 0 16px color-mix(in srgb, var(--clr-teal) 40%, transparent); }
.wj27j:hover { background: var(--clr-teal-dim); color: #eafff2; }

.vj86j { margin-bottom: 20px; }
.to29y { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-gold); border: 1px solid color-mix(in srgb, var(--clr-gold) 50%, var(--clr-border)); border-radius: 6px; padding: 3px 10px; margin-bottom: 14px; }
.vj86j h1 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); line-height: 1.15; margin-bottom: 10px; }
.ck90 { color: var(--clr-teal); text-shadow: 0 0 20px color-mix(in srgb, var(--clr-teal) 50%, transparent); }
.yp50 { color: var(--clr-text-dim); margin-bottom: 8px; }
.ot86 { font-size: .82rem; color: var(--clr-gold); }

.ye95 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.vj39 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.pw88 { border-color: var(--clr-teal); box-shadow: inset 0 0 22px color-mix(in srgb, var(--clr-teal) 12%, transparent); }
.uk40i { font-size: 1.7rem; font-weight: 900; color: var(--clr-teal); }
.uk40i i { font-style: normal; font-size: .9rem; color: var(--clr-text-dim); }
.yc94a { font-size: .82rem; color: var(--clr-text-dim); font-weight: 700; }
.wy29:hover { border-color: var(--clr-teal); }
.mu85d { color: var(--clr-teal); font-weight: 900; font-size: 1.2rem; }

.wy21 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; }
.sw20r { border-color: var(--clr-gold); }
.ix80q { font-size: 1.25rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--clr-border); }
.wy21 h3 { margin: 20px 0 8px; font-size: 1.05rem; color: var(--clr-teal); }
.wy21 h4 { margin: 15px 0 6px; font-size: .96rem; }
.wy21 p { margin-bottom: 12px; }
.wy21 ul, .wy21 ol { margin: 0 0 13px 20px; }
.wy21 li { margin-bottom: 6px; }
.yc91m { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.lo59u { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 10px; padding: 15px; }
.lo59u.xc90a { padding: 0; overflow: hidden; }
.xs38 { border: 1px solid color-mix(in srgb, var(--clr-teal) 45%, var(--clr-border)); background: color-mix(in srgb, var(--clr-teal) 7%, var(--clr-surface-2)); border-radius: 10px; padding: 11px 14px; margin: 12px 0; font-size: .92rem; }
.xs38.pc98k { border-color: color-mix(in srgb, var(--clr-gold) 45%, var(--clr-border)); background: color-mix(in srgb, var(--clr-gold) 7%, var(--clr-surface-2)); }
.hf26, .xv92n { list-style: none; margin-left: 0 !important; }
.hf26 li, .xv92n li { padding-left: 22px; position: relative; }
.hf26 li::before { content: '▲'; position: absolute; left: 0; color: var(--clr-teal); font-size: .7em; top: .45em; }
.xv92n li::before { content: '▼'; position: absolute; left: 0; color: var(--clr-gold); font-size: .7em; top: .45em; }
.kb49g { margin-left: 20px; }
.kb49g li { margin-bottom: 8px; }
.kb49g b { color: var(--clr-teal); }
.oi84 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.ht89e { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--clr-border); text-decoration: none; }
.ht89e:hover { border-color: var(--clr-teal); }
.ht89e img { width: 100%; height: 130px; object-fit: cover; }
.ht89e span { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(5,3,12,.9)); color: #fff; font-weight: 800; font-size: .9rem; }

.zi14 { overflow-x: auto; border: 1px solid var(--clr-border); border-radius: 10px; margin: 12px 0; }
.fi72 { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .9rem; }
.fi72 th, .fi72 td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--clr-border); }
.fi72 thead th { background: var(--clr-surface-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.fi72 tbody tr:last-child td, .fi72 tbody tr:last-child th { border-bottom: 0; }
.fi72 th[scope="row"] { color: var(--clr-text-dim); font-weight: 600; width: 40%; }
.yc70 { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: .74rem; font-weight: 800; }
.jo99 { background: color-mix(in srgb, var(--clr-teal) 20%, transparent); color: var(--clr-teal); }
.yr60k { background: color-mix(in srgb, var(--clr-gold) 20%, transparent); color: var(--clr-gold); }

.lo60 { display: grid; gap: 8px; }
.my24a { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 10px; }
.mi69m { width: 100%; text-align: left; background: none; border: 0; color: var(--clr-text); font: inherit; font-weight: 800; font-size: .94rem; padding: 13px 44px 13px 15px; cursor: pointer; position: relative; }
.hc75b { position: absolute; right: 15px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.hc75b::before, .hc75b::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.hc75b::before { left: 0; right: 0; top: 5px; height: 2px; }
.hc75b::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.mi69m[aria-expanded="true"] .hc75b::after { transform: scaleY(0); }
.xx36x { padding: 0 15px 13px; color: var(--clr-text-dim); font-size: .92rem; }

.qy18 { background: var(--clr-surface); border-top: 1px solid var(--clr-border); font-size: .86rem; }
.qy18 .he67y { padding-top: 26px; padding-bottom: 22px; }
.sr54 { margin-bottom: 12px; }
.lo15 { display: flex; gap: 10px; align-items: center; margin-bottom: 13px; flex-wrap: wrap; }
.jg68r { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 1px 8px; font-weight: 800; }
.bv86b { color: var(--clr-text-dim); }
.hp63q ul { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; margin-bottom: 13px; }
.hp63q a { color: var(--clr-text-dim); text-decoration: none; }
.hp63q a:hover { color: var(--clr-teal); }
.bs81, .ei48b { color: var(--clr-text-dim); font-size: .78rem; margin-bottom: 8px; }

.ev77t { padding: 8px 0 30px; }
.yn20n { margin: 0 auto; padding: 22px 24px 0; max-width: 980px !important; }
.cd55 ol { display: flex; gap: 8px; list-style: none; font-size: .8rem; color: var(--clr-text-dim); margin-bottom: 15px; }
.cd55 li + li::before { content: '›'; margin-right: 8px; }
.oh32 { font-size: clamp(1.5rem, 3.2vw, 2.05rem); margin-bottom: 10px; }
.ab15 { color: var(--clr-text-dim); font-size: .84rem; margin-bottom: 18px; }
.px42d { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 12px; padding: 19px 21px; margin-bottom: 14px; }
.px42d h2 { margin-bottom: 9px; font-size: 1.15rem; color: var(--clr-teal); }
.px42d p { margin-bottom: 10px; }
.px42d ul, .px42d ol { margin: 0 0 10px 20px; }
.jv36 { overflow-x: auto; }
.lu65r { font-size: .8rem; color: var(--clr-text-dim); margin-top: 8px; }
.xs95 label { display: block; font-weight: 700; margin-bottom: 5px; font-size: .92rem; }
.xs95 .kb52 { margin-bottom: 14px; }
.xs95 input, .xs95 select, .xs95 textarea { width: 100%; background: var(--clr-surface-2); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 8px; padding: 10px 12px; font: inherit; }
.xs95 textarea { min-height: 130px; }
.wm84x { font-size: .8rem; color: var(--clr-text-dim); }

@media (max-width: 920px) {
  body { padding-left: 0; }
  .cq48 { display: none; }
  .fd41 { display: block; }
  .ye95, .yc91m, .oi84 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ye95, .yc91m, .oi84 { grid-template-columns: 1fr; }
  .cz79s { display: none; }
}

.nj78 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; }
.au94 h2 { font-size: 1.25rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--clr-border); }
.au94 p { margin-bottom: 12px; }
.au94 ul { margin: 0 0 13px 20px; }
.au94 li { margin-bottom: 6px; }

/* inner-page layout variants */
.ae94j { max-width: 900px; }
.pc91 { margin-bottom: 26px; }
.pc91 h2 { margin-bottom: 10px; }
.xq78q { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.xq78q .cd55, .xq78q .oh32 { grid-column: 1 / -1; }
.te15b { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.yx80 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.qa20g { font-weight: 700; }
.na65 { max-width: 700px; }
.na65 .px42d { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .xq78q { grid-template-columns: 1fr; }
  .te15b { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.al42f { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.cc61 { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.lv14 { color: var(--clr-text-dim); }
.gu65k { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.my81 { display: flex; gap: 20px; align-items: flex-start; }
.rm72y { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.ua53 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.ch15h { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.ua53 p { margin-bottom: 10px; }

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

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

h1, h2, h3 { font-family: 'Palatino Linotype', Palatino, Georgia, serif; }

/* extras.ei90 — 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) ─────────────────────────────────────── */
.jo51 { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.ak83 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.jo51 h2 { margin: 0 0 .75rem; }
.xi16 { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.xi16 li { margin: .35rem 0; }
.in84i { display: grid; gap: 1rem; }
.bj99k {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.xs32 {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.ax35q { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.lh66z {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.xs32 .lh66z { background: var(--clr-teal); color: var(--clr-bg); }
.kl13y { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.vf94p { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.bj99k p { margin: .5rem 0; }
.gt22 { font-size: .95rem; opacity: .8; }
.cs65 { margin-top: .9rem; }
.xk62l { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

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

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

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.wm46w, .ro46m { margin: 1.5rem 0; }
.wm46w img, .ro46m img,
.wy21.xc90a img, .wh14 img, .wx25 img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.zx79x { padding: 1.5rem 0 3rem; }
.ui80x { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.xb79l { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.zx79x h1 { margin: 0 0 1rem; line-height: 1.2; }
.vu37 { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.vu37 img { width: 100%; height: auto; display: block; border-radius: 12px; }
.ou55r { max-width: 1100px; }
.ep69 { max-width: 780px; }
.xn85a p, .qu26 p { font-size: 1.05rem; }
.qu26 {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.bs25c { font-size: .9rem; opacity: .8; }
.np26 { margin: 1.75rem 0; }
.km92o { font-weight: 700; margin: 0 0 .5rem; }
.np26 ol { margin: 0; padding-left: 1.2rem; }
.np26 li { margin: .3rem 0; }
.tt13v ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tt13v li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.oo90 { padding: 1.5rem 0; }
.oo90 + .oo90 { border-top: 1px solid var(--clr-border); }
.oo90 h2 { margin: 0 0 .75rem; }
.wm17p {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.ir86 {
  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);
}
.td42 { display: block; margin: 0 0 1rem; }
.td42 img { width: 100%; height: auto; border-radius: 10px; display: block; }
.xf46 { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.in13 { font-size: 1.3rem; font-weight: 700; }
.ch92e { font-weight: 700; color: var(--clr-gold); }
.gi63 { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.gi63 li { margin: .35rem 0; }
.ny40u { padding-left: 1.1rem; }
.gr29e { margin: 1rem 0 .5rem; }
.ej52, .kv95 { font-size: .9rem; opacity: .8; }
.kv95 { margin-top: 2rem; }
.pp46v { 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 */
.tp-body { min-height: 100vh; }
.tp-longform, .tp-listicle, .tp-qna { display: block; }
.tp-faq, .tp-rg { display: block; }
.tp-toc-plain ol { list-style: decimal; }