@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('golos-400-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('golos-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('golos-700-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('golos-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('golos-900-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('golos-900-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--qlx-bg: #0a0f18;
	--qlx-surface: #101823;
	--qlx-card: #161d29;
	--qlx-raised: #222938;
	--qlx-line: rgba(255, 255, 255, .085);
	--qlx-acc-line: rgba(189, 242, 39, .3);
	--qlx-text: #e6ebf4;
	--qlx-soft: #c9d2e0;
	--qlx-dim: #939daf;
	--qlx-white: #fff;
	--qlx-acc: #bdf227;
	--qlx-acc2: #96d914;
	--qlx-ink: #0b1005;
	--qlx-r-sm: 14px;
	--qlx-r-md: 20px;
	--qlx-r-lg: 28px;
	--qlx-max: 1200px;
	--qlx-ring: 0 0 0 1px rgba(189, 242, 39, .35), 0 14px 44px -12px rgba(189, 242, 39, .3);
	--qlx-ease: cubic-bezier(.22, .61, .36, 1);
	/* Vertical rhythm. --qlx-sec separates the page bands (hero, facts, promo,
	   body, footer), --qlx-gap the cards inside one band. Every margin between
	   sections comes from these two, so the page keeps one measure instead of
	   a different hand-picked number per block. */
	--qlx-sec: clamp(22px, 2.6vw, 36px);
	--qlx-gap: clamp(11px, 1.1vw, 15px);
	--qlx-bar: #2b3547;
	--qlx-bar-hi: #3d4a60;
}

* {
	box-sizing: border-box;
}

/* ---- scrollbars ------------------------------------------------------ */

/* The default light scrollbar cuts a bright strip down a near-black page, and
   the same bar shows up inside every scroll box the template has (drawer,
   sidebar, contents list, table wrappers). One treatment covers all of them:
   a rounded thumb that floats on whatever surface is behind it — the
   transparent border plus background-clip is what creates the inset, so the
   track itself stays invisible and the bar suits both the page and a card. */
/* Chrome honours scrollbar-width/scrollbar-color OVER the ::-webkit- rules
   whenever both are set, and scrollbar-color inherits — declaring it on html
   would quietly cancel the styling below for every scroll box on the page.
   So the standard properties are served only to engines that have no legacy
   pseudo-elements at all, which in practice means Firefox. */
@supports not selector(::-webkit-scrollbar) {
	html,
	.qlx-aside,
	.qlx-drawer,
	.qlx-tw {
		scrollbar-width: thin;
		scrollbar-color: var(--qlx-bar) transparent;
	}
}

*::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	border-radius: 100px;
	background: var(--qlx-bar);
	background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--qlx-bar-hi);
	background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
	background: var(--qlx-acc-line);
	background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
	background: transparent;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--qlx-bg);
	color: var(--qlx-text);
	font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
}

a {
	color: var(--qlx-acc);
	text-decoration: none;
}

.qlx-wrap {
	max-width: var(--qlx-max);
	margin: 0 auto;
	padding: 0 clamp(15px, 3vw, 26px);
}

/* ---- header ---------------------------------------------------------- */

.qlx-head {
	position: sticky;
	top: 0;
	z-index: 900;
	background: rgba(10, 15, 24, .88);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--qlx-line);
}

.qlx-head__in {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: var(--qlx-max);
	margin: 0 auto;
	padding: 10px clamp(15px, 3vw, 26px);
}

.qlx-burg {
	display: none;
	border: 0;
	padding: 6px;
	background: none;
	color: var(--qlx-acc);
	cursor: pointer;
	line-height: 0;
}

.qlx-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.qlx-logo img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: contain;
}

.qlx-logo span {
	font-weight: 900;
	font-size: 17px;
	letter-spacing: .2px;
	color: var(--qlx-white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.qlx-nav {
	display: flex;
	gap: 6px;
	margin-left: 10px;
}

.qlx-nav a {
	padding: 8px 13px;
	border-radius: 100px;
	color: var(--qlx-dim);
	font-size: 14px;
	font-weight: 700;
	transition: .2s;
}

.qlx-nav a:hover {
	color: var(--qlx-acc);
	background: rgba(189, 242, 39, .08);
}

/* The pill of the page you are on. Filled rather than tinted: on a row of
   five the tint alone is too quiet to find at a glance. */
.qlx-nav a.on {
	background: rgba(189, 242, 39, .13);
	color: var(--qlx-acc);
}

.qlx-hr {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.qlx-lang {
	display: flex;
	border: 1px solid var(--qlx-line);
	border-radius: 100px;
	overflow: hidden;
}

.qlx-lang a {
	padding: 6px 13px;
	color: var(--qlx-dim);
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
}

.qlx-lang a.on {
	background: var(--qlx-acc);
	color: var(--qlx-ink);
}

/* The switch ships twice: two-letter codes in the header, where a desktop
   visitor sees them, and full language names in the drawer, which is the
   whole navigation on a phone. */
.qlx-lang--drawer {
	display: grid;
	grid-auto-flow: column;
	border-radius: 13px;
	margin: 0 0 18px;
}

.qlx-lang--drawer a {
	padding: 10px 6px;
	font-size: 13px;
	text-align: center;
	text-transform: none;
}

.qlx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 21px;
	border: 0;
	border-radius: 100px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
	transition: .22s;
}

.qlx-btn--n {
	background: var(--qlx-acc);
	color: var(--qlx-ink) !important;
	box-shadow: var(--qlx-ring);
}

.qlx-btn--n:hover {
	background: #cdff4a;
	transform: translateY(-2px);
}

.qlx-btn--g {
	border: 1px solid var(--qlx-acc-line);
	color: var(--qlx-acc) !important;
}

.qlx-btn--g:hover {
	background: rgba(189, 242, 39, .1);
}

.qlx-btn--lg {
	padding: 15px 29px;
	font-size: 15.5px;
}

/* ---- mobile drawer --------------------------------------------------- */

.qlx-scrim {
	position: fixed;
	inset: 0;
	z-index: 940;
	background: rgba(6, 9, 14, .66);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: .25s;
}

.qlx-scrim.on {
	opacity: 1;
	visibility: visible;
}

.qlx-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 950;
	width: min(320px, 86vw);
	padding: 18px;
	background: var(--qlx-surface);
	border-right: 1px solid var(--qlx-line);
	transform: translateX(-102%);
	transition: transform .28s var(--qlx-ease);
	overflow-y: auto;
}

.qlx-drawer.on {
	transform: none;
}

.qlx-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.qlx-drawer__x {
	border: 1px solid var(--qlx-line);
	border-radius: 10px;
	padding: 5px 11px;
	background: none;
	color: var(--qlx-dim);
	font-family: inherit;
	font-size: 19px;
	line-height: 1.2;
	cursor: pointer;
}

.qlx-drawer__x:hover {
	color: var(--qlx-acc);
	border-color: var(--qlx-acc-line);
}

.qlx-drawer__l {
	display: grid;
	gap: 4px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.qlx-drawer__l a {
	display: block;
	padding: 11px 13px;
	border-radius: 11px;
	border-left: 2px solid transparent;
	color: var(--qlx-text);
	font-weight: 700;
	font-size: 15px;
}

.qlx-drawer__l a:hover,
.qlx-drawer__l a.on {
	color: var(--qlx-acc);
	border-left-color: var(--qlx-acc);
	background: rgba(189, 242, 39, .07);
}

/* Caption over the service links. A span, not a heading: the drawer is
   chrome, and h1-h6 belong to the article body. */
.qlx-drawer__c {
	display: block;
	margin: 0 0 7px 13px;
	color: var(--qlx-dim);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
}

.qlx-drawer__l--sec a {
	padding: 9px 13px;
	color: var(--qlx-dim);
	font-size: 14px;
	font-weight: 600;
}

.qlx-drawer__cta {
	display: grid;
	gap: 10px;
}

/* ---- hero ------------------------------------------------------------ */

.qlx-hero {
	max-width: var(--qlx-max);
	margin: var(--qlx-sec) auto 0;
	padding: 0 clamp(15px, 3vw, 26px);
}

.qlx-band {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 290px;
	aspect-ratio: 12 / 5;
	border: 1px solid var(--qlx-line);
	border-radius: var(--qlx-r-lg);
	background-color: var(--qlx-surface);
	background-image: var(--qlx-hero);
	background-position: center;
	background-size: cover;
	box-shadow: 0 30px 80px -30px #000;
	overflow: hidden;
}

/* The scrim is three layers, and each one has a job: a horizontal ramp that
   keeps the copy column dark wherever the artwork is bright, a short lift from
   the bottom edge so the small print never sits on a highlight, and a wide
   vignette that stops the photograph from touching the rounded border. The
   ramp ends well before the right edge — the subject of the artwork stays
   unclouded, which the previous flat 24% wash did not manage. */
.qlx-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(94deg, rgba(6, 9, 14, .96) 0%, rgba(6, 9, 14, .92) 30%, rgba(6, 9, 14, .66) 52%, rgba(6, 9, 14, .18) 72%, rgba(6, 9, 14, 0) 88%),
		linear-gradient(0deg, rgba(6, 9, 14, .58) 0%, rgba(6, 9, 14, 0) 42%),
		radial-gradient(130% 110% at 50% 45%, transparent 52%, rgba(6, 9, 14, .55) 100%);
}

/* A soft accent bloom behind the subject, plus a hairline highlight along the
   top edge so the band reads as a lit surface rather than a flat cut-out. */
.qlx-band::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(90% 90% at 80% 26%, rgba(189, 242, 39, .13), transparent 60%),
		linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 18%);
}

.qlx-band__in {
	position: relative;
	z-index: 2;
	max-width: 60%;
	padding: clamp(24px, 3.4vw, 46px);
}

.qlx-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 15px;
	border: 1px solid var(--qlx-acc-line);
	border-radius: 100px;
	background: rgba(189, 242, 39, .14);
	color: var(--qlx-acc);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .7px;
	text-transform: uppercase;
}

.qlx-h1 {
	display: block;
	margin: 15px 0 13px;
	font-size: clamp(26px, 3.2vw, 45px);
	font-weight: 900;
	line-height: 1.1;
	background: linear-gradient(96deg, #fff 0%, #fff 66%, #e6ffa6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .6));
}

.qlx-lead {
	max-width: 52ch;
	margin: 0 0 21px;
	color: var(--qlx-soft);
	font-size: 15px;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

.qlx-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.qlx-disc {
	margin: 13px 0 0;
	color: var(--qlx-dim);
	font-size: 12px;
}

/* ---- fact strip ------------------------------------------------------ */

.qlx-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--qlx-gap);
	max-width: var(--qlx-max);
	/* Tight against the hero on purpose: the strip is the hero's own footing,
	   not the next section. The next real gap comes after it. */
	margin: var(--qlx-gap) auto 0;
	padding: 0 clamp(15px, 3vw, 26px);
}

.qlx-fact {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 17px;
	border: 1px solid var(--qlx-line);
	border-radius: var(--qlx-r-sm);
	background: linear-gradient(168deg, var(--qlx-card), var(--qlx-surface));
	transition: border-color .22s, transform .22s;
}

.qlx-fact:hover {
	border-color: var(--qlx-acc-line);
	transform: translateY(-2px);
}

.qlx-fact i {
	display: grid;
	place-items: center;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border: 1px solid var(--qlx-acc-line);
	border-radius: 11px;
	background: rgba(189, 242, 39, .11);
	color: var(--qlx-acc);
}

.qlx-fact b {
	display: block;
	color: var(--qlx-white);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.25;
}

.qlx-fact span {
	color: var(--qlx-dim);
	font-size: 12.5px;
}

/* ---- two-column body ------------------------------------------------- */

/* The promo band sits between the fact strip and the article: it is the
   highest-value block on the page, so it goes where a reader still is. */
.qlx-promo {
	margin-top: var(--qlx-sec);
}

.qlx-body {
	padding: var(--qlx-sec) 0 calc(var(--qlx-sec) * 1.4);
}

.qlx-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 304px;
	align-items: start;
	gap: var(--qlx-sec);
}

.qlx-main {
	min-width: 0;
}

/* The sidebar is the ONLY scroll region on this side of the page: the contents
   list used to have its own max-height as well, so a short viewport produced a
   scrollbar inside a scrollbar. `scrollbar-width` is deliberately absent —
   setting it here is what made Chrome fall back to its own bar and ignore the
   styled thumb the rest of the page uses (Firefox is served in the @supports
   block near the top). */
.qlx-aside {
	position: sticky;
	top: 78px;
	display: grid;
	gap: 13px;
	align-self: start;
	max-height: calc(100vh - 88px);
	padding-right: 3px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Inside a card the bar is a touch narrower than the page one; the thumb
   itself is not restated — a `background` shorthand here would reset the
   background-clip that gives every thumb its inset. */
.qlx-aside::-webkit-scrollbar {
	width: 9px;
}

.qlx-card {
	padding: 15px 18px;
	border: 1px solid var(--qlx-line);
	border-radius: var(--qlx-r-md);
	background: linear-gradient(168deg, var(--qlx-card), var(--qlx-surface));
}

.qlx-card__h {
	margin-bottom: 10px;
	color: var(--qlx-acc);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.qlx-toc {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qlx-toc::-webkit-scrollbar {
	width: 9px;
}

.qlx-toc a {
	display: block;
	padding: 6px 10px;
	border-left: 2px solid transparent;
	border-radius: 8px;
	color: var(--qlx-dim);
	font-size: 13.2px;
	line-height: 1.38;
	transition: .16s;
}

.qlx-toc a:hover,
.qlx-toc a.on {
	color: var(--qlx-acc);
	border-left-color: var(--qlx-acc);
	background: rgba(189, 242, 39, .08);
}

.qlx-side-cta {
	border-color: var(--qlx-acc-line);
	background: linear-gradient(150deg, rgba(189, 242, 39, .16), transparent 70%), var(--qlx-card);
	text-align: center;
}

.qlx-side-cta b {
	display: block;
	margin-bottom: 4px;
	color: var(--qlx-white);
	font-size: 15.5px;
	font-weight: 900;
}

.qlx-side-cta span {
	display: block;
	margin-bottom: 13px;
	color: var(--qlx-dim);
	font-size: 13px;
}

.qlx-side-f {
	display: grid;
	gap: 9px;
}

.qlx-side-f div {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--qlx-text);
	font-size: 13px;
}

.qlx-side-f i {
	display: grid;
	place-items: center;
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border: 1px solid var(--qlx-acc-line);
	border-radius: 8px;
	background: rgba(189, 242, 39, .1);
	color: var(--qlx-acc);
}

/* ---- content sections ------------------------------------------------ */

.qlx-article,
.qlx-block {
	position: relative;
	margin: 0 0 var(--qlx-sec);
	padding: 27px clamp(19px, 2.2vw, 32px);
	border: 1px solid var(--qlx-line);
	border-radius: var(--qlx-r-md);
	background: linear-gradient(168deg, var(--qlx-card) 0%, var(--qlx-surface) 100%);
	overflow: hidden;
	transition: border-color .25s;
}

.qlx-article::before,
.qlx-block::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(var(--qlx-acc), transparent);
}

.qlx-article h1,
.qlx-article h2 {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 17px;
	padding-left: 17px;
	color: var(--qlx-white);
	font-size: clamp(22px, 2.5vw, 31px);
	font-weight: 900;
	line-height: 1.22;
}

.qlx-article h1::before,
.qlx-article h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(var(--qlx-acc), var(--qlx-acc2));
	box-shadow: 0 0 12px rgba(189, 242, 39, .5);
}

.qlx-block__p {
	max-width: 72ch;
	margin: 0 0 4px;
	color: var(--qlx-text);
	font-size: 15.5px;
	line-height: 1.75;
}

.qlx-cap {
	position: relative;
	display: block;
	margin: 0 0 17px;
	padding-left: 17px;
	color: var(--qlx-white);
	font-size: clamp(20px, 2.2vw, 27px);
	font-weight: 900;
	line-height: 1.22;
}

.qlx-cap::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(var(--qlx-acc), var(--qlx-acc2));
	box-shadow: 0 0 12px rgba(189, 242, 39, .5);
}

/* Chapter spacing. An h2 opens a new section, so it gets a wide gap above it;
   the first one sits flush with the top of the card. Without this the sections
   ran into each other and the whole article read as one grey slab. */
.qlx-article > h2 {
	margin-top: clamp(30px, 3.2vw, 44px);
}

.qlx-article > h2:first-child,
.qlx-article > h1:first-child {
	margin-top: 0;
}

.qlx-article h3,
.qlx-article h4 {
	margin: 28px 0 10px;
	color: var(--qlx-white);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
}

.qlx-article h4 {
	font-size: 16px;
}

.qlx-article p {
	max-width: 72ch;
	margin: 0 0 14px;
	color: var(--qlx-text);
	font-size: 15.5px;
	line-height: 1.75;
}

/* Author credit at the head of the body. Muted on purpose — it is a
   provenance line, not a heading — with the date pushed to the far side on a
   wide card and dropping under the name on a phone. */
.qlx-by {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0 0 20px;
	padding-bottom: 13px;
	border-bottom: 1px solid var(--qlx-line);
	color: var(--qlx-dim);
	font-size: 13px;
}

.qlx-by__n {
	color: var(--qlx-soft);
	font-weight: 700;
}

.qlx-by__d {
	color: #79839a;
}

/* The credit sits above the first chapter, so that chapter does not also need
   the full inter-section gap. */
.qlx-by + h2 {
	margin-top: 0;
}

.qlx-article strong,
.qlx-article b {
	color: var(--qlx-white);
}

.qlx-article a:hover {
	text-decoration: underline;
}

/* Content images: centred, never stretched, never squeezed by width/height
   attributes — the bodies deliberately carry none. */
.qlx-article img {
	display: block;
	height: auto;
	max-width: 100%;
	margin: 22px auto;
	border: 1px solid var(--qlx-line);
	border-radius: var(--qlx-r-sm);
}

.qlx-article figure {
	margin: 18px 0;
}

.qlx-article figcaption {
	margin-top: 7px;
	color: var(--qlx-dim);
	font-size: 13px;
}

.qlx-article ul,
.qlx-article ol {
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
}

.qlx-article ul li {
	position: relative;
	padding: 8px 0 8px 27px;
	border-bottom: 1px solid var(--qlx-line);
	color: var(--qlx-text);
	line-height: 1.65;
}

.qlx-article ul li::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 16px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--qlx-acc);
	box-shadow: 0 0 8px var(--qlx-acc);
}

.qlx-article ul li:last-child,
.qlx-article ol li:last-child {
	border-bottom: 0;
}

.qlx-article ol {
	counter-reset: qlxn;
}

.qlx-article ol li {
	position: relative;
	padding: 8px 0 8px 36px;
	border-bottom: 1px solid var(--qlx-line);
	line-height: 1.65;
}

.qlx-article ol li::before {
	counter-increment: qlxn;
	content: counter(qlxn);
	position: absolute;
	left: 0;
	top: 7px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 1px solid var(--qlx-acc-line);
	border-radius: 7px;
	background: rgba(189, 242, 39, .12);
	color: var(--qlx-acc);
	font-size: 12.5px;
	font-weight: 900;
}

.qlx-article blockquote {
	position: relative;
	margin: 21px 0;
	padding: 21px 23px 21px 56px;
	border: 1px solid var(--qlx-line);
	border-left: 3px solid var(--qlx-acc);
	border-radius: var(--qlx-r-md);
	background: linear-gradient(120deg, rgba(189, 242, 39, .07), transparent 70%);
}

.qlx-article blockquote::before {
	content: "\201C";
	position: absolute;
	left: 16px;
	top: 2px;
	color: var(--qlx-acc);
	font-family: Georgia, 'PT Serif', serif;
	font-size: 54px;
	line-height: 1;
	opacity: .55;
}

.qlx-article blockquote p {
	margin: 0 0 6px;
	color: #dde2ec;
	font-style: italic;
}

.qlx-article blockquote p:last-child {
	margin: 0;
}

.qlx-article table {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
}

.qlx-article table th,
.qlx-article table td {
	padding: 12px 17px;
	border-bottom: 1px solid var(--qlx-line);
	background: var(--qlx-card);
	color: var(--qlx-text);
	font-size: 14px;
	text-align: left;
	vertical-align: top;
}

.qlx-article table th {
	background: rgba(189, 242, 39, .1);
	color: var(--qlx-acc);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .7px;
	text-transform: uppercase;
}

.qlx-article table tr:last-child td {
	border-bottom: 0;
}

.qlx-article table tr:hover td {
	background: var(--qlx-raised);
}

.qlx-tw {
	margin: 19px 0;
	border: 1px solid var(--qlx-line);
	border-radius: var(--qlx-r-sm);
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.qlx-tw > table {
	margin: 0;
	border: 0;
}

.qlx-page-h {
	margin: 0 0 var(--qlx-sec);
}

.qlx-page-t {
	display: block;
	margin: 0;
	color: var(--qlx-white);
	font-size: clamp(26px, 3.1vw, 40px);
	font-weight: 900;
	line-height: 1.15;
}

.qlx-final {
	text-align: center;
}

.qlx-final .qlx-block__p {
	max-width: 72ch;
	margin: 0 0 4px;
	color: var(--qlx-text);
	font-size: 15.5px;
	line-height: 1.75;
}

/* Scoped to the closing call-to-action, which centres its caption and drops
   the accent bar. Unscoped, this rule stripped the padding from EVERY caption
   on the site and the bar printed straight through the first letter. */
.qlx-final .qlx-cap {
	padding-left: 0;
}

.qlx-final .qlx-cap::before {
	display: none;
}

.qlx-final p {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.qlx-final .qlx-cta {
	justify-content: center;
}

/* ---- bonus cards ----------------------------------------------------- */

/* ---- promo band ------------------------------------------------------ */

/* The offer row as a band of its own: it sits directly under the fact strip,
   full container width, so it is read before the article rather than after
   nine screens of it. */
.qlx-bonsec--band {
	margin: 0;
	padding: clamp(21px, 2.4vw, 31px) clamp(19px, 2.2vw, 32px) clamp(24px, 2.6vw, 34px);
	background:
		radial-gradient(80% 130% at 88% 0%, rgba(189, 242, 39, .09), transparent 62%),
		linear-gradient(168deg, var(--qlx-card) 0%, var(--qlx-surface) 100%);
}

/* Caption and its line share a baseline row on wide screens and stack on
   narrow ones, so the band opens with one compact header instead of three
   stacked lines of chrome. */
.qlx-bonsec__h {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 20px;
}

.qlx-bonsec__h .qlx-cap {
	margin: 0;
}

.qlx-bonsec__h .qlx-block__p {
	margin: 0;
	color: var(--qlx-dim);
	font-size: 14px;
}

.qlx-bons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--qlx-gap);
	margin: clamp(16px, 1.8vw, 22px) 0 0;
}

.qlx-bon {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--qlx-line);
	border-radius: var(--qlx-r-md);
	background: linear-gradient(168deg, var(--qlx-raised) 0%, var(--qlx-surface) 64%);
	overflow: hidden;
	transition: transform .26s var(--qlx-ease), border-color .26s, box-shadow .26s;
}

/* The artwork gets its own lit panel. Cards then line up whatever the title
   length, which the old side-by-side layout could not do. */
.qlx-bon__art {
	position: relative;
	display: grid;
	place-items: center;
	height: 128px;
	border-bottom: 1px solid var(--qlx-line);
	background:
		radial-gradient(66% 74% at 50% 60%, rgba(189, 242, 39, .17), transparent 72%),
		linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 62%);
}

.qlx-bon__i {
	width: 104px;
	height: 84px;
	object-fit: contain;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .55));
	transition: transform .3s var(--qlx-ease);
}

.qlx-bon__tag {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 3px 9px;
	border-radius: 7px;
	background: var(--qlx-acc);
	color: var(--qlx-ink);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.qlx-bon__b {
	display: block;
	flex: 1 1 auto;
	padding: 14px 16px 13px;
}

.qlx-bon__b b {
	display: block;
	margin: 0 0 4px;
	color: var(--qlx-white);
	font-size: 16px;
	font-weight: 900;
	line-height: 1.25;
}

.qlx-bon__b span {
	color: var(--qlx-dim);
	font-size: 13px;
	line-height: 1.5;
}

.qlx-bon__go {
	display: block;
	padding: 12px 16px;
	border-top: 1px solid var(--qlx-line);
	background: rgba(189, 242, 39, .05);
	color: var(--qlx-acc);
	font-size: 13px;
	font-weight: 800;
	transition: background .26s;
}

.qlx-bon:hover {
	border-color: var(--qlx-acc);
	transform: translateY(-4px);
	box-shadow: 0 22px 48px -20px rgba(189, 242, 39, .45);
}

.qlx-bon:hover .qlx-bon__i {
	transform: scale(1.06) translateY(-2px);
}

.qlx-bon:hover .qlx-bon__go {
	background: rgba(189, 242, 39, .13);
}

/* ---- ranked list (toplist) ------------------------------------------- */

.qlx-tops {
	display: grid;
	gap: 13px;
	margin: 17px 0 0;
}

.qlx-top {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: 17px 19px;
	border: 1px solid var(--qlx-line);
	border-radius: var(--qlx-r-md);
	background: linear-gradient(150deg, var(--qlx-raised), var(--qlx-surface));
	transition: .26s;
}

.qlx-top:hover {
	border-color: var(--qlx-acc);
	transform: translateY(-3px);
}

.qlx-top__r {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--qlx-acc-line);
	border-radius: 15px;
	background: rgba(189, 242, 39, .1);
	color: var(--qlx-acc);
	font-size: 21px;
	font-weight: 900;
}

.qlx-top__b b {
	display: block;
	color: var(--qlx-white);
	font-size: 17px;
	font-weight: 900;
}

.qlx-top__b > span {
	display: block;
	color: var(--qlx-dim);
	font-size: 13.5px;
}

.qlx-top__o {
	display: inline-block;
	margin-top: 6px;
	padding: 4px 11px;
	border-radius: 8px;
	background: rgba(189, 242, 39, .12);
	color: var(--qlx-acc);
	font-size: 13px;
	font-weight: 800;
}

.qlx-top__x {
	display: grid;
	justify-items: center;
	gap: 8px;
}

.qlx-top__s {
	color: var(--qlx-acc);
	font-size: 19px;
	font-weight: 900;
}

/* ---- score block (review) -------------------------------------------- */

.qlx-score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 25px;
	margin: 6px 0 21px;
	padding: 21px 25px;
	border: 1px solid var(--qlx-line);
	border-radius: var(--qlx-r-md);
	background: linear-gradient(120deg, rgba(189, 242, 39, .09), transparent 70%), var(--qlx-card);
}

.qlx-ring {
	position: relative;
	flex: 0 0 118px;
	width: 118px;
	height: 118px;
}

.qlx-ring svg {
	display: block;
	width: 118px;
	height: 118px;
}

.qlx-ring__t {
	fill: none;
	stroke: var(--qlx-raised);
	stroke-width: 11;
}

.qlx-ring__p {
	fill: none;
	stroke: var(--qlx-acc);
	stroke-width: 11;
	stroke-linecap: round;
	filter: drop-shadow(0 0 7px rgba(189, 242, 39, .55));
}

.qlx-ring__n {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.qlx-ring__n b {
	color: var(--qlx-white);
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
}

.qlx-ring__n span {
	color: var(--qlx-dim);
	font-size: 12.5px;
	font-weight: 700;
}

.qlx-score__x {
	flex: 1;
	min-width: 210px;
}

.qlx-score__b {
	display: inline-flex;
	gap: 6px;
	margin-bottom: 12px;
	color: var(--qlx-acc);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .6px;
	text-transform: uppercase;
}

.qlx-bar {
	height: 9px;
	border-radius: 6px;
	background: var(--qlx-raised);
	overflow: hidden;
}

.qlx-bar i {
	display: block;
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--qlx-acc2), var(--qlx-acc));
}

.qlx-score__s {
	margin: 11px 0 0;
	color: var(--qlx-dim);
	font-size: 13.5px;
}

/* ---- faq ------------------------------------------------------------- */

.qlx-faq {
	display: grid;
	gap: 10px;
	margin: 17px 0 0;
}

.qlx-faq__i {
	border: 1px solid var(--qlx-line);
	border-radius: var(--qlx-r-sm);
	background: var(--qlx-card);
	overflow: hidden;
	transition: border-color .25s;
}

.qlx-faq__i.on {
	border-color: var(--qlx-acc-line);
}

.qlx-faq__q {
	position: relative;
	width: 100%;
	padding: 16px 50px 16px 19px;
	border: 0;
	background: none;
	color: var(--qlx-white);
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	text-align: left;
	cursor: pointer;
}

.qlx-faq__q::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	color: var(--qlx-acc);
	font-size: 22px;
	font-weight: 900;
	transform: translateY(-50%);
}

.qlx-faq__i.on .qlx-faq__q::after {
	content: "\2013";
}

.qlx-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s var(--qlx-ease);
}

.qlx-faq__i.on .qlx-faq__a {
	max-height: 1200px;
}

.qlx-faq__a p {
	margin: 0;
	padding: 0 19px 16px;
	color: var(--qlx-text);
	font-size: 14.5px;
}

/* Page types without the sidebar (page, landing, toplist, review) give the
   prose the whole block: a 72ch measure inside a 1200px card leaves a third
   of the plate empty, which the owner reads as a broken layout. Inside the
   two-column article the measure still applies — the column is narrower than
   72ch anyway. */
.qlx-body > .qlx-article p,
.qlx-body > .qlx-article li,
.qlx-body > .qlx-article .qlx-block__p {
	max-width: none;
}

/* ---- footer ---------------------------------------------------------- */

.qlx-foot {
	margin-top: var(--qlx-sec);
	border-top: 1px solid var(--qlx-line);
	background: var(--qlx-surface);
}

.qlx-foot__in {
	max-width: var(--qlx-max);
	margin: 0 auto;
	padding: clamp(26px, 2.6vw, 34px) clamp(15px, 3vw, 26px);
}

.qlx-foot__t {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 21px 34px;
}

/* Two link columns: the site's own materials and the pages about the site
   itself. Everything the footer offers stays on this site — the operator is
   reached from the header and the page bodies. */
.qlx-foot__c {
	display: grid;
	gap: 8px;
	align-content: start;
}

.qlx-foot__h {
	display: block;
	color: var(--qlx-white);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
}

.qlx-foot__c a {
	color: var(--qlx-dim);
	font-size: 13.5px;
	font-weight: 700;
}

.qlx-foot__c a:hover {
	color: var(--qlx-acc);
}

.qlx-foot__d {
	margin: 19px 0 0;
	color: var(--qlx-dim);
	font-size: 12.7px;
	line-height: 1.65;
}

.qlx-foot__d + .qlx-rg {
	margin-top: 13px;
}

.qlx-rg {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 19px;
	padding: 17px 0;
	border-top: 1px solid var(--qlx-line);
	color: var(--qlx-dim);
	font-size: 12.7px;
}

.qlx-rg svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--qlx-acc);
}

.qlx-bot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-top: 13px;
	border-top: 1px solid var(--qlx-line);
	color: #6c7383;
	font-size: 12.5px;
}

.qlx-age {
	padding: 1px 10px;
	border: 1px solid var(--qlx-acc-line);
	border-radius: 100px;
	color: var(--qlx-acc);
	font-weight: 900;
}

.qlx-top-btn {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 800;
	display: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--qlx-acc);
	color: var(--qlx-ink);
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--qlx-ring);
}

.qlx-top-btn.on {
	display: grid;
}

.qlx-top-btn:hover {
	background: #cdff4a;
	transform: translateY(-2px);
}

/* ---- responsive ------------------------------------------------------ */

@media (max-width: 1160px) {
	/* One row has to hold the mark, five pills, the language switch and both
	   buttons before the burger takes over at 940px. */
	.qlx-head__in {
		gap: 10px;
	}

	.qlx-nav {
		margin-left: 2px;
		gap: 2px;
	}

	.qlx-nav a {
		padding: 8px 10px;
		font-size: 13px;
	}

	.qlx-hr {
		gap: 7px;
	}
}

@media (max-width: 1034px) {
	.qlx-cols {
		display: flex;
		flex-direction: column;
		gap: var(--qlx-gap);
		/* align-items:start survives from the desktop grid, and in a column
		   flex container that sizes each item to fit-content — a wide table
		   then stretches the whole column instead of scrolling inside its
		   own box. Only shows up on a page whose table is wider than the
		   phone, which is why it hid on the two-column tables next door. */
		align-items: stretch;
	}

	.qlx-main {
		max-width: 100%;
	}

	/* The sidebar stops being a column and its cards join the single stack
	   directly, so they can be ordered around the article instead of all
	   landing above it: contents first (it is the page's map), then the text,
	   then the two promotional cards. A whole sidebar in front of the first
	   paragraph is nine hundred pixels of chrome before any content. */
	.qlx-aside {
		display: contents;
	}

	.qlx-toc-card {
		order: 1;
	}

	.qlx-main {
		order: 2;
	}

	.qlx-side-cta {
		order: 3;
	}

	.qlx-side-about {
		order: 4;
	}

	.qlx-toc {
		max-height: none;
	}

	.qlx-bons {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 940px) {
	.qlx-nav {
		display: none;
	}

	/* Below this the drawer IS the navigation, and it carries its own
	   switcher with the full language names. */
	.qlx-lang--hdr {
		display: none;
	}

	.qlx-burg {
		display: block;
	}

	.qlx-facts {
		grid-template-columns: repeat(2, 1fr);
	}

	.qlx-bons {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 820px) {
	/* The phone band stacks instead of overlaying: the artwork gets its own
	   strip at the top and the copy sits under it, so nothing covers the art. */
	.qlx-band {
		display: block;
		aspect-ratio: auto;
		min-height: 0;
		padding-top: 0;
		background-image: none;
	}

	/* The artwork is an in-flow strip that carries its own fade and glow as
	   background layers. Anchoring the fade to the picture instead of to a
	   percentage of the whole band is what removes the hard seam: the two
	   only agreed at one viewport width, and at 768 the badge landed on a
	   bright, unfaded row of chips. */
	.qlx-band::before {
		content: "";
		position: relative;
		display: block;
		inset: auto;
		width: 100%;
		aspect-ratio: 3 / 2;
		background-image:
			radial-gradient(72% 90% at 72% 20%, rgba(189, 242, 39, .14), transparent 62%),
			linear-gradient(180deg, rgba(16, 24, 35, 0) 44%, rgba(16, 24, 35, .8) 78%, var(--qlx-surface) 99%),
			var(--qlx-hero-m, var(--qlx-hero));
		background-size: 100% 100%, 100% 100%, cover;
		background-position: center, center, top center;
		background-repeat: no-repeat;
	}

	.qlx-band::after {
		display: none;
	}

	.qlx-band__in {
		max-width: 100%;
		padding-top: 8px;
	}

	.qlx-hero {
		margin-top: calc(var(--qlx-sec) * .7);
	}
}

@media (max-width: 760px) {
	.qlx-bon__art {
		height: 108px;
	}

	.qlx-bon__i {
		width: 88px;
		height: 72px;
	}

	.qlx-bon__b {
		padding: 12px 13px 11px;
	}

	.qlx-bon__b b {
		font-size: 15px;
	}

	.qlx-bon__go {
		padding: 11px 13px;
		font-size: 12.5px;
	}

	.qlx-top {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.qlx-top__r {
		width: 44px;
		height: 44px;
		font-size: 18px;
	}

	.qlx-top__x {
		grid-column: 1 / -1;
		justify-items: stretch;
	}
}

@media (max-width: 680px) {
	.qlx-article table th,
	.qlx-article table td {
		padding: 10px 13px;
		font-size: 13.5px;
	}
}

@media (max-width: 560px) {
	/* Two cards a row here: four full-width promo tiles would push the article
	   another screen down, and these are decoration, not the page. */
	.qlx-facts {
		grid-template-columns: 1fr;
	}

	.qlx-bonsec--band {
		padding: 19px 15px 22px;
	}

	.qlx-head__in {
		gap: 10px;
		padding: 9px 15px;
	}

	.qlx-logo img {
		width: 36px;
		height: 36px;
	}

	.qlx-logo span {
		font-size: 15px;
	}

	.qlx-hr .qlx-btn {
		padding: 9px 15px;
		font-size: 13px;
	}

	.qlx-article,
	.qlx-block {
		padding: 21px 16px;
	}

	.qlx-cta .qlx-btn {
		flex: 1 1 100%;
	}
}