/* =========================================================================
   2k_01_vst — cloned from 2k.ua.
   Palette, radii, type scale and geometry are the source's own design tokens
   (:root of its Nuxt build) and measured computed styles: 64px header,
   240px docked rail, 464x256 promo cards, 200x290 game tiles, 144x137
   provider cards, 12/16px radii, Mulish body + Dela Gothic One headings.
   ====================================================================== */

@font-face {
	font-family: 'Mulish';
	src: url('mulish-cyr.woff2') format('woff2');
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Mulish';
	src: url('mulish-lat.woff2') format('woff2');
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Dela Gothic One';
	src: url('dela-cyr.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Dela Gothic One';
	src: url('dela-lat.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Neutrals — the source's black-primary / gray ramp. */
	--bg:         #151718;
	--layer-01:   #1a1d1e;
	--layer-low:  #202425;
	--layer-02:   #26292b;
	--layer-03:   #2b2f31;
	--gray-600:   #313538;
	--gray-500:   #404649;
	--gray-400:   #72787e;
	--gray-300:   #9ba1a6;
	--gray-200:   #b9bdc1;
	--gray-100:   #dfe1e7;
	--white:      #fff;

	/* Brand violet ramp + the accent used inside gradients. */
	--violet-700: #45008e;
	--violet-600: #5200aa;
	--violet-500: #6800d6;
	--violet-400: #8929ef;
	--violet-300: #a056f0;
	--accent:     #ce46f0;
	--orange-600: #e35909;
	--orange-500: #f6610a;
	--yellow-500: #ffb800;

	--r-xs:  6px;
	--r-sm:  8px;
	--r-md: 12px;
	--r-lg: 16px;
	--r-xl: 20px;
	--r-full: 999px;

	--rail-w: 240px;
	--rail-w-min: 72px;
	--hdr-h:   64px;
	--bar-h:   64px;
	--pad-x:   48px;

	--font: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-head: 'Dela Gothic One', 'Mulish', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--white);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
hr.tk-hr { border: 0; border-top: 1px solid var(--layer-03); margin: 16px 0; }

/* Inline icon wrapper — every icon is a 20px square unless overridden. */
.tk-i { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--gray-400); }
.tk-i > svg { width: 100%; height: 100%; }
.tk-i--pur { width: 24px; height: 24px; color: var(--violet-300); }

/* ------------------------------------------------------------------ header */
.tk-hdr-root { position: sticky; top: 0; z-index: 60; }

/* Phone-only strip — the source hides it from 1024px up, where the download
   pill instead sits centred inside the header row. */
.tk-appbar {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: var(--bar-h);
	padding: 12px 16px;
	background: var(--layer-01) url('../img/banner-bg.svg') repeat-x center / auto 100%;
}
.tk-appbar.is-hidden { display: none; }
.tk-appbar__x { display: flex; padding: 4px; color: var(--gray-300); }
.tk-appbar__x svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Download pill — three tints, same geometry (source: 40px tall, 32px radius) */
.tk-dl {
	display: inline-flex;
	align-items: center;
	flex: none;
	height: 40px;
	padding: 8px 8px 8px 16px;
	border-radius: 32px;
	color: var(--white);
	white-space: nowrap;
}
.tk-dl--dark { background: var(--layer-02); }
.tk-dl--gray { background: var(--gray-500); }
.tk-dl--grad { background: linear-gradient(273.58deg, var(--violet-500) 2.95%, var(--layer-02) 41.97%); }
.tk-dl__t { margin-right: 12px; font-size: 13px; font-weight: 500; }
.tk-dl__ic { display: inline-flex; align-items: center; gap: 8px; }
.tk-dl__ic svg { width: 22px; height: 22px; fill: currentColor; }
.tk-dl__sep { width: 1px; height: 20px; background: rgb(255 255 255 / .28); }

.tk-hdr {
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--hdr-h);
	padding: 0 var(--pad-x) 0 16px;
	background: var(--bg);
}
.tk-logo { display: flex; flex: none; }
.tk-logo img { width: 160px; height: 34px; }
.tk-burger { display: none; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; color: var(--white); }
.tk-burger svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tk-dl--hdr { margin: 0 auto; }
.tk-hdr__act { display: flex; align-items: center; gap: 8px; }

.tk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 24px;
	border-radius: var(--r-lg);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color .2s ease;
}
.tk-btn--primary   { background: var(--violet-500); color: var(--white); }
.tk-btn--primary:hover   { background: var(--violet-600); }
.tk-btn--secondary { background: var(--layer-02); color: var(--white); }
.tk-btn--secondary:hover { background: var(--layer-03); }
.tk-btn--lg { padding: 16px 40px; font-size: 16px; }

/* -------------------------------------------------------------------- rail */
.tk-shell {
	display: grid;
	grid-template-columns: var(--rail-w) minmax(0, 1fr);
	transition: grid-template-columns .28s cubic-bezier(.4, 0, .2, 1);
}

.tk-rail {
	display: flex;
	flex-direction: column;
	position: sticky;
	top: var(--hdr-h);
	align-self: start;
	height: calc(100vh - var(--hdr-h));
	background: var(--layer-02);
	z-index: 50;
}
.tk-rail__head { display: none; }
.tk-rail__scroll {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding: 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--gray-500) transparent;
}
.tk-rail__scroll::-webkit-scrollbar { width: 4px; }
.tk-rail__scroll::-webkit-scrollbar-thumb { background: var(--gray-500); border-radius: 4px; }

.tk-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.tk-cta__i { border-radius: var(--r-full); overflow: hidden; }
.tk-cta__i img { width: 100%; height: 40px; object-fit: cover; object-position: left center; }

.tk-cats, .tk-nav { display: flex; flex-direction: column; gap: 4px; }

.tk-link {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	padding: 8px 16px;
	border-radius: var(--r-md);
	color: var(--gray-300);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	transition: background-color .2s ease, color .2s ease;
}
.tk-link:hover { background: var(--gray-600); color: var(--white); }
.tk-link:hover .tk-i { color: var(--violet-300); }
/* Current page in the rail — set by the deployed layout on its own links. */
.tk-link.is-on { background: var(--gray-600); color: var(--white); }
.tk-link.is-on .tk-i { color: var(--violet-300); }
.tk-link__t { flex: 1; white-space: nowrap; transition: opacity .18s ease; }
.tk-link--sub { padding-left: 40px; font-size: 13px; }

.tk-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 8px 8px; }
.tk-thumbs__i { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 1; }
.tk-thumbs__i img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.tk-thumbs__i:hover img { transform: scale(1.08); }

.tk-chev { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.tk-acc__b { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; }
.tk-acc__b > * { min-height: 0; overflow: hidden; }
.tk-acc:not(.is-open) .tk-acc__b { grid-template-rows: 0fr; }
.tk-acc:not(.is-open) .tk-acc__t .tk-chev { transform: rotate(-90deg); }

/* Collapse control — pinned below the scroll area so it stays reachable
   however long the menu is. */
.tk-rail__foot { flex: none; padding: 12px 16px 16px; border-top: 1px solid var(--layer-03); }
.tk-collapse {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	padding: 8px 16px;
	border-radius: var(--r-md);
	color: var(--gray-400);
	background: var(--layer-03);
	font-size: 13px;
	font-weight: 600;
	transition: background-color .2s ease, color .2s ease;
}
.tk-collapse:hover { background: var(--gray-600); color: var(--white); }
.tk-collapse svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s ease; }
.tk-collapse__t { white-space: nowrap; transition: opacity .18s ease; }

/* Collapsed rail — icon-only, desktop only. The state lives on <html> so the
   inline head script can restore it before first paint; under 1024px the rail
   is an off-canvas drawer and the toggle is hidden entirely. */
@media (min-width: 1024px) {
	.tk-rail-narrow .tk-shell { grid-template-columns: var(--rail-w-min) minmax(0, 1fr); }
	.tk-rail-narrow .tk-rail__scroll { padding: 16px 12px; }
	.tk-rail-narrow .tk-rail__foot { padding: 12px; }
	.tk-rail-narrow .tk-cta,
	.tk-rail-narrow .tk-thumbs,
	.tk-rail-narrow .tk-acc__b,
	.tk-rail-narrow .tk-dl--gray,
	.tk-rail-narrow .tk-acc__t .tk-chev,
	.tk-rail-narrow .tk-rail__scroll hr.tk-hr:last-of-type { display: none; }
	.tk-rail-narrow .tk-link__t,
	.tk-rail-narrow .tk-collapse__t { flex: 0 0 0; width: 0; opacity: 0; overflow: hidden; }
	.tk-rail-narrow .tk-link,
	.tk-rail-narrow .tk-collapse { justify-content: center; gap: 0; padding: 8px; }
	.tk-rail-narrow .tk-link--sub { padding-left: 8px; }
	.tk-rail-narrow .tk-collapse svg { transform: scaleX(-1); }
}

.tk-dim { display: none; }

/* -------------------------------------------------------------------- main */
.tk-body { min-width: 0; }
.tk-main { max-width: 2264px; padding: 24px var(--pad-x); overflow: hidden; }

/* ------------------------------------------------------------------ slider */
.tk-slider { margin-bottom: 32px; }
.tk-slider__vp { overflow: hidden; }
.tk-slider__track { display: flex; gap: 16px; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }

.tk-slide {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 0 464px;
	height: 256px;
	padding: 28px 32px;
	border-radius: var(--r-lg);
	overflow: hidden;
	isolation: isolate;
}
.tk-slide--a { background: linear-gradient(96deg, var(--violet-700) 0%, var(--violet-500) 58%, var(--violet-400) 100%); }
.tk-slide--b { background: linear-gradient(96deg, var(--violet-700) 0%, var(--violet-600) 48%, var(--accent) 100%); }
.tk-slide--c { background: linear-gradient(96deg, var(--violet-700) 0%, var(--violet-500) 52%, var(--orange-500) 100%); }
.tk-slide--d { background: linear-gradient(96deg, var(--violet-700) 0%, var(--violet-600) 44%, var(--yellow-500) 100%); }
.tk-slide--e { background: linear-gradient(96deg, var(--layer-01) 0%, var(--violet-700) 46%, var(--violet-400) 100%); }

/* The source's banner geometry: a double chevron cut into the right edge. */
.tk-slide__mark {
	position: absolute;
	inset: 0 -8% 0 auto;
	width: 46%;
	background: rgb(255 255 255 / .13);
	clip-path: polygon(28% 0, 64% 50%, 28% 100%, 0 100%, 36% 50%, 0 0, 36% 0, 72% 50%, 36% 100%, 64% 100%, 100% 50%, 64% 0);
	z-index: -1;
}
.tk-slide__kick {
	margin-bottom: 12px;
	color: var(--white);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .85;
}
.tk-slide__head {
	margin-bottom: 20px;
	color: var(--white);
	font-family: var(--font-head);
	font-size: 30px;
	line-height: 1.2;
	text-transform: uppercase;
}
.tk-slide__cta {
	align-self: flex-start;
	padding: 10px 24px;
	border-radius: var(--r-full);
	background: var(--violet-400);
	color: var(--white);
	font-size: 14px;
	font-weight: 700;
	transition: background-color .2s ease;
}
.tk-slide:hover .tk-slide__cta { background: var(--violet-300); }

.tk-slider__dots { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; }
.tk-slider__dot { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.tk-slider__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-600); transition: background-color .2s ease; }
.tk-slider__dot.is-on::after { background: radial-gradient(circle at 30% 30%, var(--yellow-500), var(--orange-600)); }

.tk-slider--single .tk-slide { flex: 1 1 auto; }
.tk-slide--wide { height: 280px; }

/* ------------------------------------------------------------------- chips */
.tk-chips { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 40px; }
.tk-chips__row {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
}
.tk-chips__row::-webkit-scrollbar { display: none; }
.tk-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 48px;
	padding: 6px 16px;
	border-radius: var(--r-md);
	background: var(--layer-01);
	color: var(--gray-300);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}
.tk-chip:hover { background: var(--layer-02); color: var(--white); }
.tk-chip:hover .tk-i { color: var(--violet-300); }

.tk-chips__act { display: flex; gap: 8px; }
.tk-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 48px;
	padding: 6px 16px;
	border: 1px solid var(--layer-03);
	border-radius: var(--r-md);
	background: var(--layer-02);
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}
.tk-pill:hover { background: var(--layer-03); }
.tk-pill > svg:first-child { width: 20px; height: 20px; fill: currentColor; opacity: .7; }

/* ------------------------------------------------------------- game rails */
.tk-grp { margin-bottom: 40px; }
.tk-grp__h { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.tk-grp__t { font-family: var(--font-head); font-size: 18px; line-height: 1.3; }
.tk-arrows { display: flex; gap: 12px; margin-left: auto; }
.tk-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--layer-02);
	color: var(--gray-300);
}
.tk-arrow:hover { background: var(--layer-03); color: var(--white); }
.tk-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.tk-grp__b {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 200px;
	grid-template-rows: 290px;
	gap: 16px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.tk-grp__b::-webkit-scrollbar { display: none; }
.tk-grp__b--2row { grid-template-rows: 290px 290px; grid-auto-flow: column; }
.tk-grp__b--prov { grid-auto-columns: 144px; grid-template-rows: 137px; }

.tk-tile {
	position: relative;
	display: block;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--layer-02);
}
.tk-tile img { width: 100%; height: 100%; object-fit: cover; }
.tk-tile__ov {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	padding: 12px;
	background: rgb(21 23 24 / .8);
	opacity: 0;
	transition: opacity .3s ease;
}
.tk-tile:hover .tk-tile__ov, .tk-tile:focus-visible .tk-tile__ov { opacity: 1; }
.tk-tile__nm {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}
.tk-tile__pv { grid-row: 2; margin-top: 2px; color: var(--gray-400); font-size: 11px; }
.tk-tile__play {
	grid-row: 3;
	place-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--violet-500);
	box-shadow: 0 0 0 10px rgb(137 41 239 / .12);
}
.tk-tile__play svg { width: 26px; height: 26px; fill: var(--white); }
.tk-tile__demo {
	grid-row: 4;
	justify-self: start;
	padding: 4px 10px;
	border-radius: var(--r-lg);
	background: var(--layer-03);
	color: var(--gray-200);
	font-size: 12px;
	font-weight: 600;
}

.tk-prov {
	display: grid;
	grid-template-rows: 1fr auto auto;
	align-items: center;
	justify-items: center;
	gap: 2px;
	padding: 16px 8px 12px;
	border-radius: var(--r-sm);
	background: var(--layer-02);
	text-align: center;
	transition: background-color .2s ease;
}
.tk-prov:hover { background: var(--layer-03); }
.tk-prov__logo { display: flex; align-items: center; justify-content: center; height: 44px; }
.tk-prov__logo img { max-width: 116px; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.tk-prov__nm { color: var(--white); font-size: 13px; font-weight: 600; }
.tk-prov__ct { color: var(--gray-400); font-size: 11px; }

/* ------------------------------------------------- page headers (toplist…) */
.tk-phead { margin-bottom: 32px; }
.tk-phead__t {
	display: block;
	margin-bottom: 12px;
	font-family: var(--font-head);
	font-size: 26px;
	line-height: 1.25;
}
.tk-phead p { margin: 0 0 16px; color: var(--gray-300); font-size: 14px; line-height: 1.6; max-width: 68ch; }
.tk-phead__btns { display: flex; flex-wrap: wrap; gap: 12px; }

.tk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 0 0 20px; }
.tk-facts > div { padding: 12px 16px; border-radius: var(--r-md); background: var(--layer-02); }
.tk-facts dt { color: var(--gray-400); font-size: 12px; }
.tk-facts dd { margin: 4px 0 0; color: var(--white); font-size: 15px; font-weight: 600; }

.tk-cta-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 32px 0;
	padding: 24px 32px;
	border-radius: var(--r-lg);
	background: linear-gradient(96deg, var(--layer-02) 40%, var(--violet-500) 100%);
}
.tk-cta-bar__txt { display: flex; flex-direction: column; gap: 4px; }
.tk-cta-bar__txt b { font-family: var(--font-head); font-size: 18px; font-weight: 400; }
.tk-cta-bar__txt i { color: var(--gray-200); font-size: 14px; font-style: normal; }

/* ------------------------------------------------------------ prose block */
/* The source dims this block to near-invisible (#404649 on #151718). Sites on
   this template publish real editorial here, so the ramp is lifted one step to
   stay readable while keeping the source's sizes and rhythm. */
.tk-text { margin: 8px 0 0; color: var(--gray-300); font-size: 14px; line-height: 1.65; }
/* Collapsed prose (home page only — inner articles get .tk-text--full). The
   source clamps this to two lines, but there it holds a short SEO paragraph;
   here it holds the page's whole editorial body, so the window shows the intro
   and the contents list instead of 2% of the text. */
.tk-text__body { position: relative; max-height: 520px; overflow: hidden; }
.tk-text__body::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 64px;
	background: linear-gradient(to bottom, rgb(21 23 24 / 0), var(--bg));
}
.tk-text.is-open .tk-text__body { max-height: none; }
.tk-text.is-open .tk-text__body::after { display: none; }
.tk-text--full .tk-text__body { max-height: none; }
.tk-text--full .tk-text__body::after { display: none; }

.tk-text__more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	margin-top: 8px;
	padding: 4px;
	color: var(--gray-400);
	font-size: 13px;
	font-weight: 600;
}
.tk-text__more:hover { color: var(--white); }
.tk-text.is-open .tk-text__more .tk-chev { transform: rotate(180deg); }

.tk-text__body h1,
.tk-text__body h2,
.tk-text__body h3,
.tk-text__body h4 {
	margin: 24px 0 12px;
	color: var(--white);
	font-family: var(--font-head);
	font-weight: 400;
	line-height: 1.3;
}
.tk-text__body h1 { margin-top: 0; font-size: 26px; }
.tk-text__body h2 { font-size: 20px; }
.tk-text__body h3 { font-size: 17px; }
.tk-text__body h4 { font-size: 15px; }
.tk-text__body p { margin: 0 0 12px; }
.tk-text__body strong, .tk-text__body b { color: var(--gray-100); font-weight: 700; }
.tk-text__body a { color: var(--violet-300); text-decoration: underline; text-underline-offset: 2px; }
.tk-text__body a:hover { color: var(--accent); }
.tk-text__body ul, .tk-text__body ol { margin: 0 0 12px; padding-left: 22px; }
.tk-text__body li { margin-bottom: 6px; }
.tk-text__body li::marker { color: var(--violet-300); }
.tk-text__body img { display: block; height: auto; margin: 16px auto; border-radius: var(--r-md); }
.tk-text__body blockquote {
	margin: 16px 0;
	padding: 12px 16px;
	border-left: 3px solid var(--violet-500);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: var(--layer-01);
}
.tk-text__body blockquote p:last-child { margin-bottom: 0; }

/* Tables scroll inside their own box so the page body never scrolls sideways.
   Content sizing, not a flat min-width: a fixed 560px hands a 5-column table
   ~110px per column and every cell wraps into a ragged stack — it scrolls while
   looking broken. width:max-content lets each table ask for what it needs. */
.tk-text__body .table-scroll {
	margin: 20px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.tk-text__body .table-scroll table { width: max-content; min-width: 100%; margin: 0; }
.tk-text__body .table-scroll th { white-space: nowrap; }
.tk-text__body .table-scroll td { max-width: 38ch; }
.tk-text__body table {
	width: 100%;
	margin: 16px 0;
	border-collapse: collapse;
	font-size: 13px;
}
.tk-text__body table th,
.tk-text__body table td {
	padding: 10px 12px;
	border: 1px solid var(--layer-03);
	text-align: left;
	vertical-align: top;
}
.tk-text__body table th { background: var(--layer-02); color: var(--white); font-weight: 700; }
.tk-text__body table tr:nth-child(even) td { background: var(--layer-01); }

/* ------------------------------------------------------------------ footer */
.tk-foot { max-width: 2264px; padding: 16px var(--pad-x) 48px; color: var(--gray-500); }
.tk-foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.tk-foot__t {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 0 0 8px;
	color: var(--gray-300);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
}
.tk-foot__t .tk-chev { display: none; }
.tk-foot__list { display: grid; gap: 6px; }
.tk-foot__list a { color: var(--gray-500); font-size: 12px; line-height: 1.3; transition: color .2s ease; }
.tk-foot__list a:hover { color: var(--gray-300); }

.tk-foot__info p { margin: 0 0 12px; font-size: 12px; line-height: 1.5; max-width: 92ch; }
.tk-foot__copy { display: flex; align-items: center; gap: 12px; }
.tk-foot__copy p { margin: 0; font-size: 12px; }
.tk-age {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border: 1px solid var(--gray-500);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1279px) {
	:root { --pad-x: 24px; }
	.tk-slide { flex-basis: 400px; }
}

@media (max-width: 1023px) {
	.tk-appbar { display: flex; }
	.tk-shell { grid-template-columns: minmax(0, 1fr); }
	.tk-burger { display: flex; }
	.tk-logo img { width: 113px; height: 24px; }
	.tk-hdr__act { margin-left: auto; }
	.tk-dl--hdr { display: none; }
	.tk-hdr { padding: 0 16px; }

	.tk-rail {
		position: fixed;
		top: 0;
		left: 0;
		width: 270px;
		height: 100dvh;
		transform: translateX(-100%);
		transition: transform .28s ease;
		z-index: 80;
	}
	.tk-rail.is-open { transform: none; }
	.tk-rail__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--hdr-h);
		padding: 0 16px;
		background: var(--bg);
	}
	.tk-rail__x { display: flex; padding: 4px; color: var(--gray-300); }
	.tk-rail__x svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
	.tk-rail__foot { display: none; }

	.tk-dim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgb(0 0 0 / .6);
		opacity: 0;
		visibility: hidden;
		transition: opacity .28s ease, visibility .28s ease;
		z-index: 70;
	}
	.tk-dim.is-on { opacity: 1; visibility: visible; }

	.tk-chips { grid-template-columns: minmax(0, 1fr); }
	.tk-chips__act { order: -1; }
	.tk-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	:root { --pad-x: 16px; }
	.tk-hdr { gap: 8px; padding: 0 12px; }
	.tk-logo img { width: 94px; height: 20px; }
	.tk-btn { padding: 10px 16px; font-size: 12px; }
	.tk-main { padding: 16px var(--pad-x); }

	.tk-slide { flex-basis: 304px; height: 171px; padding: 16px 20px; border-radius: var(--r-md); }
	.tk-slide__kick { margin-bottom: 8px; font-size: 11px; }
	.tk-slide__head { margin-bottom: 12px; font-size: 20px; }
	.tk-slide__cta { padding: 8px 18px; font-size: 13px; }
	.tk-slide--wide { height: 200px; }

	.tk-grp { margin-bottom: 32px; }
	.tk-grp__b { grid-auto-columns: 140px; grid-template-rows: 203px; }
	.tk-grp__b--2row { grid-template-rows: 203px 203px; }
	.tk-grp__b--prov { grid-auto-columns: 132px; grid-template-rows: 128px; }
	.tk-text__body { max-height: 600px; }
	.tk-arrows { display: none; }
	.tk-tile__play { width: 44px; height: 44px; box-shadow: 0 0 0 6px rgb(137 41 239 / .12); }
	.tk-tile__play svg { width: 20px; height: 20px; }

	.tk-cta-bar { padding: 20px; }
	.tk-btn--lg { width: 100%; padding: 14px 24px; }

	/* Footer columns collapse to accordions, as on the source. */
	.tk-foot__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.tk-foot__col { border-bottom: 1px solid var(--layer-03); }
	.tk-foot__t { padding: 14px 0; }
	.tk-foot__t .tk-chev { display: block; }
	.tk-foot__list { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; }
	.tk-foot__list > * { min-height: 0; }
	.tk-foot__col:not(.is-open) .tk-foot__list { grid-template-rows: 0fr; overflow: hidden; }
	.tk-foot__col:not(.is-open) .tk-foot__t .tk-chev { transform: rotate(-90deg); }
	.tk-foot__col.is-open .tk-foot__list { padding-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.tk-slider__track { transition: none; }
}