@charset "UTF-8";
/* KC-X brand layer (2026-10-17). Loaded after the shared styles on every public
page: it swaps the warm KC-6 palette for the KC-X app's TikTok-style colours
(ink, red #fe2c55, cyan #25f4ee, black and white) and styles the new homepage.
The app icon and wordmark come from the KC-X app (scripts/kcx-icon.swift). */
:root {
--ink: #161823;
--muted: #5e5f68;
--orange: #fe2c55;
--coral: #fe2c55;
--purple: #161823;
--mint: #25f4ee;
--cream: #ffffff;
--soft: #f5f5f7;
--line: #e7e7eb;
--shadow: 0 24px 60px rgb(22 24 35 / 10%);
--kx-red: #fe2c55;
--kx-red-dark: #e0244a;
--kx-cyan: #25f4ee;
--kx-mint: #57e0b5;
--kx-ink: #161823;
--kx-night: #0b0b10;
--kx-night-2: #15151d;
--kx-grey: #8a8b91;
}
/* Brand: app icon + glitch wordmark, as in the KC-X sidebar. */
.brand img { border-radius: 22%; }
.kx-wordmark {
font-weight: 900;
letter-spacing: -0.03em;
text-shadow: -1.2px -1.2px 0 var(--kx-cyan), 1.2px 1.2px 0 var(--kx-red);
}
.brand .kx-wordmark { font-size: inherit; }
/* Shared chrome on the older page families. */
.site-header, .utility-header, .kc-marketing .site-header { background: rgb(255 255 255 / 94%); border-bottom-color: var(--line); }
.desktop-nav a:hover, .utility-nav a:hover, .guide-nav a:hover { color: var(--kx-red); }
.utility-nav a[aria-current="page"], .guide-nav a[aria-current="page"] { color: var(--kx-red); }
.nav-cta, .button-primary, .release-link, .mk-primary {
background: var(--kx-red);
box-shadow: 0 8px 22px rgb(254 44 85 / 22%);
}
.nav-cta:hover, .button-primary:hover, .release-link:hover, .mk-primary:hover { background: var(--kx-red-dark); box-shadow: 0 12px 25px rgb(254 44 85 / 28%); }
.button-outline { border-color: var(--line); background: #fff; color: var(--ink); }
.market-eyebrow, .utility-kicker, .section-label, .step-number, .format-tag { color: var(--kx-red); }
.site-footer, .utility-footer { background: #f7f7f8; }
.utility-footer-inner, .footer-bottom, .footer-brand p { color: var(--muted); }
.mobile-nav nav a:hover { background: #fff0f4; }
/* Download, privacy and 404 pages (utility.css). */
.utility-hero, .utility-not-found {
background:
radial-gradient(circle at 85% 10%, rgb(37 244 238 / 14%), transparent 34%),
radial-gradient(circle at 12% 90%, rgb(254 44 85 / 10%), transparent 38%),
#fff;
}
.utility-language select { background: #fff; }
.release-card, .payment-shell > div, .privacy-card { border-color: var(--line); background: #fff; }
.release-card-mac, .privacy-card:nth-child(even) { background: #fafafb; }
.release-icon { background: transparent; }
.release-badge, .market-version, .market-badge, .market-badge-purple { border-color: var(--line); background: #f3f3f5; }
.mac-guide, .mac-requirements, .mac-security-note, .download-marketplace .payment-recovery-notice { background: #f7f7f8; }
.payment-section { background: #f7f7f8; }
.utility-bottom-note { background: var(--kx-night); }
.utility-bottom-note .utility-kicker { color: var(--kx-cyan); }
.market-buy { background: var(--kx-red); color: #fff; }
.market-buy:hover { background: var(--kx-red-dark); }
.market-buy:disabled { color: #6c6d75; background: #efeff2; }
.market-table thead th { background: #f7f7f8; }
.market-table tbody tr:hover { background: #fafafb; }
/* Guides and press kit (guides.css / marketing.css). */
.guide-answer, .guide-paths, .guide-hub-note, .guide-note { background: #f7f7f8; }
.guide-entry figure { background: var(--kx-night); }
.guide-figure img, .guide-entry figure img { background: var(--kx-night); }
/* The CMS notice keeps its line break ("…18+ only\nBrowse and play…"). */
[data-portal-text="notice"] { white-space: pre-line; }
/* ---------- Homepage (2026-10-17 redesign) ----------
One dark page, like KC-X in dark mode, told in order: what it is (hero),
your platforms (pick the sites for Home, as with Home's + in the app), how
it works (three real screens), everything else, download, questions.
Site marks are KC-X's own letter tiles, one colour per site (--h); no site
logos are used. Names carry translate="no" so browser translation keeps them. */
/* ---------- Site chrome (2026-10-18): every public page (body.kx-site) ----------
The homepage's dark palette, header and footer, shared by the download center,
guides, press kit, privacy, account and 404 pages (their page styles are in
kcx-pages.css). One header everywhere: Platforms, How it works, Guides,
Download center, FAQ, Account, Contact support and Download for Mac. The
support button and panel are styled in support.css (2026-10-18 redesign). */
.kx-site {
--kx-bg: #0b0b10;
--kx-bg-2: #111118;
--kx-card: rgb(255 255 255 / 4.5%);
--kx-card-2: rgb(255 255 255 / 8%);
--kx-line: rgb(255 255 255 / 9%);
--kx-line-2: rgb(255 255 255 / 16%);
--kx-text: #f5f5f7;
--kx-text-2: rgb(255 255 255 / 72%);
--kx-text-3: rgb(255 255 255 / 52%);
--kx-link: #ff6b88;
background: var(--kx-bg);
color: var(--kx-text);
}
html:has(> body.kx-site) { color-scheme: dark; background: #0b0b10; }
.kx-site main { background: var(--kx-bg); }
.kx-site .site-header { position: sticky; top: 0; z-index: 50; background: rgb(11 11 16 / 86%); border-bottom: 1px solid var(--kx-line); color: #fff; backdrop-filter: blur(18px); }
.kx-site .site-header .container, .kx-site .kx-footer .container { width: min(100% - 48px, 1120px); }
.kx-site .nav-shell { height: 72px; min-height: 0; flex-wrap: nowrap; gap: 24px; padding-block: 0; }
.kx-site .brand { color: #fff; font-size: 1.55rem; font-weight: 850; letter-spacing: -0.03em; gap: 8px; direction: ltr; unicode-bidi: isolate; }
.kx-site .site-header .brand img { width: 36px; height: 36px; }
.kx-site .desktop-nav { display: flex; gap: 26px; margin-inline-start: auto; }
.kx-site .desktop-nav a { color: rgb(255 255 255 / 76%); font-size: 0.92rem; font-weight: 600; white-space: nowrap; }
.kx-site .desktop-nav a:hover, .kx-site .desktop-nav a[aria-current] { color: #fff; }
.kx-site .desktop-nav a[aria-current] { text-decoration: underline 2px var(--kx-red); text-underline-offset: 9px; }
.kx-site .nav-cta { margin-inline-start: 6px; padding: 11px 18px; border-radius: 8px; background: var(--kx-red); color: #fff; font-size: 0.88rem; font-weight: 750; white-space: nowrap; }
.kx-site .mobile-nav { display: none; }
.kx-site .mobile-nav summary span { background: #fff; }
.kx-site .mobile-nav nav { background: var(--kx-bg-2); border: 1px solid var(--kx-line-2); }
.kx-site .mobile-nav nav a { color: #fff; }
.kx-site .mobile-nav nav a:hover, .kx-site .mobile-nav nav a[aria-current] { background: rgb(255 255 255 / 8%); }
.kx-site :focus-visible { outline: 2px solid var(--kx-cyan); outline-offset: 3px; }
@media (max-width: 1180px) {
.kx-site .desktop-nav { gap: 18px; }
}
@media (max-width: 1000px) {
.kx-site .desktop-nav { display: none; }
.kx-site .mobile-nav { display: block; position: relative; margin-inline-start: 0; }
.kx-site .mobile-nav summary { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; cursor: pointer; }
.kx-site .mobile-nav summary::-webkit-details-marker { display: none; }
.kx-site .mobile-nav summary span { display: block; width: 23px; height: 2px; border-radius: 5px; }
.kx-site .mobile-nav nav { position: absolute; top: 53px; inset-inline-end: 0; display: flex; flex-direction: column; width: 230px; padding: 10px; border-radius: 12px; box-shadow: 0 18px 40px rgb(0 0 0 / 55%); }
.kx-site .mobile-nav nav a { padding: 11px 10px; border-radius: 7px; font-size: 0.92rem; font-weight: 600; }
}
@media (max-width: 650px) {
.kx-site .site-header .container, .kx-site .kx-footer .container { width: calc(100% - 32px); }
.kx-site .nav-shell { height: 64px; gap: 10px; }
.kx-site .brand { font-size: 1.45rem; }
.kx-site .site-header .brand img { width: 32px; height: 32px; }
.kx-site .nav-cta { display: none; }
}
/* Site language (kcx-lang.js, 2026-10-18): the header menu, and a non-English page kept hidden
while it is translated (at most 2.5 s, even if the script fails). */
html.kx-translating body { opacity: 0; animation: kx-lang-reveal 0s linear 2.5s forwards; }
@keyframes kx-lang-reveal { to { opacity: 1; } }
.kx-lang { order: 1; position: relative; flex: none; }
.kx-lang[hidden] { display: none; }
.kx-lang-button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--kx-line-2); border-radius: 999px; background: rgb(255 255 255 / 8%); color: #fff; font: inherit; font-size: 0.84rem; font-weight: 750; white-space: nowrap; cursor: pointer; }
.kx-lang-button:hover, .kx-lang-button[aria-expanded="true"] { background: rgb(255 255 255 / 16%); }
.kx-lang-button svg { width: 18px; height: 18px; flex: none; }
.kx-lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 180px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--kx-line-2); border-radius: 12px; background: var(--kx-bg-2); box-shadow: 0 18px 40px rgb(0 0 0 / 55%); }
.kx-lang-menu[hidden] { display: none; }
.kx-lang-menu button { display: flex; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: #fff; font: inherit; font-size: 0.92rem; font-weight: 600; text-align: start; cursor: pointer; }
.kx-lang-menu button:hover { background: rgb(255 255 255 / 8%); }
.kx-lang-menu button[aria-pressed="true"] { background: rgb(255 255 255 / 12%); }
.kx-lang-menu button[aria-pressed="true"]::after { content: "✓"; margin-inline-start: auto; padding-inline-start: 12px; color: var(--kx-cyan); }
@media (max-width: 650px) {
.kx-lang-button { height: 38px; padding: 0 10px; }
}
/* Chinese headings break at punctuation and spaces, not inside a word (你喜欢的网/站). */
html:lang(zh) .kx-site :is(h1, h2, h3) { word-break: keep-all; overflow-wrap: anywhere; }
/* With the links folded into the menu button, the language and support buttons sit at the end. */
@media (max-width: 1000px) {
.kx-site .nav-shell:has(> .kx-lang:not([hidden])) > .kx-lang { margin-inline-start: auto; }
body.kx-site .nav-shell:has(> .kx-lang:not([hidden])) > .kc-support-nav { margin-inline-start: 0; }
}
/* A language whose links do not fit the header (kcx-lang.js measures it and sets kx-nav-tight):
the same menu button as on narrow screens. */
html.kx-nav-tight .kx-site .desktop-nav { display: none; }
html.kx-nav-tight .kx-site .mobile-nav { display: block; position: relative; margin-inline-start: 0; }
html.kx-nav-tight .kx-site .mobile-nav summary { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; cursor: pointer; }
html.kx-nav-tight .kx-site .mobile-nav summary::-webkit-details-marker { display: none; }
html.kx-nav-tight .kx-site .mobile-nav summary span { display: block; width: 23px; height: 2px; border-radius: 5px; }
html.kx-nav-tight .kx-site .mobile-nav nav { position: absolute; top: 53px; inset-inline-end: 0; display: flex; flex-direction: column; width: 230px; padding: 10px; border-radius: 12px; box-shadow: 0 18px 40px rgb(0 0 0 / 55%); }
html.kx-nav-tight .kx-site .mobile-nav nav a { padding: 11px 10px; border-radius: 7px; font-size: 0.92rem; font-weight: 600; }
html.kx-nav-tight body.kx-site .nav-shell > .kc-support-nav { margin-inline-start: auto; }
html.kx-nav-tight .kx-site .nav-shell:has(> .kx-lang:not([hidden])) > .kx-lang { margin-inline-start: auto; }
html.kx-nav-tight body.kx-site .nav-shell:has(> .kx-lang:not([hidden])) > .kc-support-nav { margin-inline-start: 0; }
.kx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Shared section type. */
.kx-section { padding-block: clamp(64px, 9vw, 112px); }
.kx-section-alt { background: var(--kx-bg-2); border-block: 1px solid var(--kx-line); }
.kx-eyebrow { margin: 0 0 14px; color: var(--kx-cyan); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.kx-head { max-width: 48rem; margin-bottom: clamp(30px, 4vw, 48px); }
.kx-head h2, .kx-faq-aside h2 { margin: 0; color: #fff; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 900; }
.kx-head p:not(.kx-eyebrow), .kx-faq-aside > p:not(.kx-eyebrow) { margin: 16px 0 0; color: var(--kx-text-2); font-size: 1.06rem; line-height: 1.65; }
.kx-head-center { margin-inline: auto; text-align: center; }
.kx-live { display: inline-block; padding: 1px 5px; border-radius: 4px; background: var(--kx-red); color: #fff; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.04em; vertical-align: middle; }
.kx-legal { margin: 26px 0 0; max-width: 62rem; color: var(--kx-text-3); font-size: 0.8rem; line-height: 1.65; }
/* Buttons. */
.kx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.kx-button {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 52px; padding: 13px 24px; border-radius: 10px;
font-weight: 800; font-size: 1rem; line-height: 1.2; text-decoration: none;
transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.kx-button svg { width: 20px; height: 20px; flex: none; }
.kx-button-primary { background: var(--kx-red); color: #fff; box-shadow: 0 10px 28px rgb(254 44 85 / 32%); }
.kx-button-primary:hover { background: var(--kx-red-dark); transform: translateY(-1px); }
.kx-button-ghost { border: 1px solid rgb(255 255 255 / 26%); color: #fff; }
.kx-button-ghost:hover { border-color: rgb(255 255 255 / 52%); background: rgb(255 255 255 / 6%); }
/* 1. Hero. */
.kx-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(55% 60% at 88% 18%, rgb(254 44 85 / 24%), transparent 70%),
radial-gradient(45% 50% at 6% 92%, rgb(37 244 238 / 14%), transparent 70%),
var(--kx-bg);
}
.kx-hero-inner {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.24fr);
gap: clamp(28px, 4.5vw, 64px);
align-items: center;
padding-block: clamp(48px, 7vw, 96px) clamp(36px, 5vw, 64px);
}
.kx-hero h1 { margin: 0; color: #fff; font-size: clamp(2.6rem, 5.4vw, 4.5rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 900; }
.kx-lede { margin: 22px 0 0; max-width: 34rem; color: var(--kx-text-2); font-size: clamp(1.04rem, 1.4vw, 1.2rem); line-height: 1.6; }
.kx-notice { margin: 20px 0 0; max-width: 34rem; color: var(--kx-text-3); font-size: 0.84rem; line-height: 1.7; }
.kx-stage { margin: 0; }
.kx-tour-frames {
position: relative; overflow: hidden; width: 100%; aspect-ratio: 1600 / 1010;
border-radius: 18px; background: var(--kx-bg);
box-shadow: 0 0 0 1px var(--kx-line-2), 0 40px 90px rgb(0 0 0 / 55%);
}
/* The tour (2026-10-18): four stills, 4 s each with a slow push-in (inside the
pictures' dark margin). Each fades out to the backdrop before the next fades in,
so two different windows never show at once. Delays start the first one in view. */
.kx-tour-frame {
position: absolute; inset: 0; container-type: inline-size;
opacity: 0; animation: kx-tour-frame 16s linear infinite backwards;
}
.kx-tour-frame > img { display: block; width: 100%; height: 100%; }
.kx-tour-frame:nth-child(1) { animation-delay: -0.4s; }
.kx-tour-frame:nth-child(2) { animation-delay: 3.6s; }
.kx-tour-frame:nth-child(3) { animation-delay: 7.6s; }
.kx-tour-frame:nth-child(4) { animation-delay: 11.6s; }
@keyframes kx-tour-frame {
0% { opacity: 0; transform: scale(1); }
2.5% { opacity: 1; }
22.5% { opacity: 1; }
25%, 100% { opacity: 0; transform: scale(1.035); }
}
/* The pause button holds it where it is (kcx-home.js). With reduced motion it stays on
the first screen until the play button starts it; an animation paused before it ever
ran ignores the first screen's negative delay in Chrome, so it is off until then. */
.kx-tour.is-paused .kx-tour-frame { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.kx-tour:not(.is-started) .kx-tour-frame { animation: none; }
.kx-tour:not(.is-started) .kx-tour-frame:first-child { opacity: 1; }
/* Started with the play button: its own pace. styles.css cuts every animation to
0.01 ms here, which would flash through the screens. */
.kx-tour.is-started .kx-tour-frame { animation-duration: 16s !important; }
}
/* Once 18+, the player screen plays a real Eporner video (its 16:9 preview frames, kcx-home.js)
in the screenshot's video column, letterboxed as the player shows a landscape video, and
its header and link name Eporner. Positions are the screenshot's, in % of the frame;
sizes in cqw follow the frame's width. */
.kx-tour-live { position: absolute; inset: 0; pointer-events: none; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
.kx-tour-live-video { position: absolute; left: 21.332%; top: 3.772%; width: 32.851%; height: 92.455%; overflow: hidden; background: #000; }
.kx-tour-live-blur { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(2.2cqw) brightness(0.5); }
.kx-tour-live-pic { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 16 / 9; transform: translateY(-50%); }
.kx-tour-live-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kx-tour-live-count { position: absolute; left: 36.12%; top: 9.91%; width: 3.2%; height: 2.38%; display: grid; place-items: center; border-radius: 99px; background: rgb(0 0 0 / 38%); color: #fff; font-size: 0.75cqw; line-height: 1; }
.kx-tour-live-bar { position: absolute; left: 21.332%; top: 94.03%; width: 32.851%; height: 0.3%; background: #fffbf5; }
.kx-tour-live-site { position: absolute; left: 72.81%; top: 9.11%; width: 14.19%; height: 5.35%; display: flex; align-items: center; gap: 0.84cqw; padding-left: 0.31cqw; background: #141414; }
.kx-tour-live-site img { width: 3cqw; height: 3cqw; border-radius: 50%; }
.kx-tour-live-site span { display: grid; gap: 0.15cqw; }
.kx-tour-live-site b { color: #fff; font-size: 1.24cqw; font-weight: 700; line-height: 1.1; }
.kx-tour-live-site small { color: #8e8e93; font-size: 0.94cqw; line-height: 1.1; }
.kx-tour-live-link { position: absolute; left: 75.31%; top: 32.48%; width: 14.44%; height: 2.67%; display: flex; align-items: center; padding-left: 0.31cqw; overflow: hidden; background: #282828; color: #8e8e93; font-size: 0.82cqw; white-space: nowrap; }
/* Home's feed tiles and the player's "Up next", once 18+: one moving Eporner video each, with
the drawn samples' durations. Same capture coordinates as above. */
.kx-tour-live-tile, .kx-tour-live-next { position: absolute; overflow: hidden; background: #000; }
.kx-tour-live-tile { width: 17.14%; height: 16.97%; border-radius: 0.58cqw; }
.kx-tour-live-next { left: 73.397%; width: 8.162%; height: 7.327%; border-radius: 0.34cqw; }
.kx-tour-live-tile img, .kx-tour-live-next img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.kx-tour-live-next img { height: auto; aspect-ratio: 240 / 136; }
.kx-tour-live-tile b, .kx-tour-live-next b { position: absolute; color: #fff; font-weight: 700; line-height: 1; text-shadow: 0 0 0.12cqw #000, 0 0 0.25cqw rgb(0 0 0 / 60%); }
.kx-tour-live-tile b { right: 4.76%; bottom: 6.98%; font-size: 0.71cqw; }
.kx-tour-live-next b { right: 7.5%; bottom: 8.8%; font-size: 0.75cqw; }
.kx-tour-live-tile-1, .kx-tour-live-tile-5 { left: 22.284%; }
.kx-tour-live-tile-2, .kx-tour-live-tile-6 { left: 40.512%; }
.kx-tour-live-tile-3, .kx-tour-live-tile-7 { left: 58.74%; }
.kx-tour-live-tile-4, .kx-tour-live-tile-8 { left: 76.934%; }
/* Home since KC build 38 (2026-11-01): 25 sites, the video row in two lines, so the feed starts
at capture y 1049 and its site name at 752; the second row (y 1500) is cut by the window's
edge (96.223%), so its tiles keep their picture's size, lose their bottom and their length. */
.kx-tour-live-tile-1, .kx-tour-live-tile-2, .kx-tour-live-tile-3, .kx-tour-live-tile-4 { top: 60.29%; }
.kx-tour-live-tile-5, .kx-tour-live-tile-6, .kx-tour-live-tile-7, .kx-tour-live-tile-8 { top: 84.586%; height: 11.637%; border-radius: 0.58cqw 0.58cqw 0 0; }
.kx-tour-live-tile-5 img, .kx-tour-live-tile-6 img, .kx-tour-live-tile-7 img, .kx-tour-live-tile-8 img { height: 145.83%; }
.kx-tour-live-tile-5 b, .kx-tour-live-tile-6 b, .kx-tour-live-tile-7 b, .kx-tour-live-tile-8 b { display: none; }
.kx-tour-live-next-1 { top: 44.236%; }
.kx-tour-live-next-2 { top: 53.071%; }
.kx-tour-live-next-3 { top: 61.906%; }
.kx-tour-live-next-4 { top: 70.741%; }
.kx-tour-live-next-5 { top: 79.576%; }
.kx-tour-live-next-6 { top: 88.411%; height: 1.778%; border-radius: 0.34cqw 0.34cqw 0 0; }
/* Home's feed header names Eporner, the site of its videos. */
.kx-tour-live-feed { position: absolute; left: 22.114%; top: 44.289%; width: 8.842%; height: 4.418%; display: flex; align-items: center; gap: 0.82cqw; padding-left: 0.2cqw; background: #000; }
.kx-tour-live-feed img { width: 2.1cqw; height: 2.1cqw; border-radius: 50%; }
.kx-tour-live-feed b { color: #fff; font-size: 1.36cqw; font-weight: 700; line-height: 1; }
/* The library, once 18+: its three tiles show Eporner videos with the samples' file sizes
and delete buttons, the site chip reads "Eporner 3" and the tiles' site names Eporner. */
.kx-tour-live-tile.kx-tour-live-saved { top: 43.858%; }
.kx-tour-live-saved b { left: 2.38%; right: auto; bottom: 3.81%; padding: 0.24cqw 0.34cqw; border-radius: 0.27cqw; background: #1b1b1b; font-size: 0.71cqw; text-shadow: none; }
.kx-tour-live-saved i { position: absolute; right: 2.38%; top: 3.81%; width: 11.9%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #1f1f1f; }
.kx-tour-live-saved svg { width: 42%; height: 42%; fill: none; stroke: #e5e5e5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kx-tour-live-chips { position: absolute; left: 25.855%; top: 38.794%; width: 12.991%; height: 3.394%; display: flex; align-items: center; padding-left: 0.27cqw; background: #000; }
.kx-tour-live-chips span { display: flex; align-items: center; height: 1.77cqw; padding: 0 0.88cqw; border-radius: 99px; background: #292929; color: #fff; font-size: 0.8cqw; font-weight: 700; white-space: nowrap; }
.kx-tour-live-site-name { position: absolute; top: 63.791%; width: 4.93%; height: 1.724%; display: flex; align-items: center; background: #000; color: #7c7c80; font-size: 0.8cqw; line-height: 1; }
.kx-tour-live-site-name-1 { left: 22.284%; }
.kx-tour-live-site-name-2 { left: 40.512%; }
.kx-tour-live-site-name-3 { left: 58.74%; }
/* The videos' own titles, lengths and views (Eporner's API), where the 18+ screenshots have
the samples' wiped. This layer is the frame at the app's own size, in its points (the
captures are 2x: a capture pixel is half a point), scaled with the screen by kcx-home.js
(--kx-tour-pt), so the text keeps the app's letter spacing at any width (the browser's
spacing grows at small sizes). A line's top is its baseline in the capture less the
font's ascent (0.955 em at line-height 1.2). */
.kx-tour-live-words { position: absolute; left: 0; top: 0; width: 1470.27px; height: 928.11px; transform: scale(var(--kx-tour-pt, 0.6665)); transform-origin: 0 0; }
.kx-tour-live-words > * { position: absolute; overflow: hidden; color: #fff; font-weight: 650; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.kx-tour-live-feed-title-1 { left: 328.13px; top: 724.08px; width: 250px; font-size: 13.55px; }
.kx-tour-live-feed-title-2 { left: 596.13px; top: 724.08px; width: 250px; font-size: 13.55px; }
.kx-tour-live-feed-title-3 { left: 864.13px; top: 724.08px; width: 250px; font-size: 13.55px; }
.kx-tour-live-feed-title-4 { left: 1131.63px; top: 724.08px; width: 250px; font-size: 13.55px; }
.kx-tour-live-saved-title-1 { left: 328.13px; top: 570.94px; width: 250px; font-size: 13.2px; }
.kx-tour-live-saved-title-2 { left: 596.13px; top: 570.94px; width: 250px; font-size: 13.2px; }
.kx-tour-live-saved-title-3 { left: 864.13px; top: 570.94px; width: 250px; font-size: 13.2px; }
.kx-tour-live-name { left: 1075.63px; top: 148.71px; width: 319.5px; font-size: 15.8px; font-weight: 700; }
.kx-tour-live-meta { left: 1098.63px; top: 179.14px; width: 300px; font-size: 13px; display: flex; align-items: center; color: #a1a1a1; }
.kx-tour-live-time { left: 143.14px; top: 844.46px; width: 300px; font-size: 13.45px; color: #eae8e8; }
.kx-tour-live-meta, .kx-tour-live-time { font-weight: 400; }
.kx-tour-live-meta svg { flex: none; width: 17.5px; height: 11px; margin: 0 10px 0 15px; }
.kx-tour-live-meta path { fill: none; stroke: currentColor; stroke-width: 2.2; }
.kx-tour-live-meta circle { fill: currentColor; }
.kx-tour-live-meta circle + circle { fill: #141414; }
/* "Up next": two lines at most; the sixth is cut off by the panel's bottom line, as its picture is. */
.kx-tour-live-words > [class*="kx-tour-live-next-title-"] { left: 1209.64px; width: 185.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12.75px; font-weight: 600; white-space: normal; }
.kx-tour-live-next-title-1 { top: 411.37px; }
.kx-tour-live-next-title-2 { top: 493.37px; }
.kx-tour-live-next-title-3 { top: 575.37px; }
.kx-tour-live-next-title-4 { top: 657.37px; }
.kx-tour-live-next-title-5 { top: 739.37px; }
.kx-tour-live-next-title-6 { top: 821.37px; height: 14.68px; }
.kx-stage figcaption { margin-top: 12px; color: var(--kx-text-3); font-size: 0.8rem; text-align: center; }
.kx-facts { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0 0 clamp(48px, 7vw, 80px); }
.kx-facts li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--kx-line); border-radius: 14px; background: var(--kx-card); }
.kx-facts svg { width: 26px; height: 26px; flex: none; color: var(--kx-cyan); }
.kx-facts strong { display: block; color: #fff; font-size: 0.98rem; }
.kx-facts span { display: block; margin-top: 3px; color: var(--kx-text-3); font-size: 0.84rem; line-height: 1.45; }
/* Site marks: KC-X's letter tiles, one hue per site. */
.kx-mark {
display: inline-grid; place-items: center; flex: none;
width: 40px; height: 40px; border-radius: 11px;
color: #fff; font-size: 0.84rem; font-weight: 850; letter-spacing: -0.01em; line-height: 1;
background: linear-gradient(140deg, hsl(var(--h, 250) 74% 60%), hsl(calc(var(--h, 250) + 26) 66% 36%));
box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%), 0 4px 12px rgb(0 0 0 / 28%);
text-shadow: 0 1px 1px rgb(0 0 0 / 28%);
position: relative;
overflow: hidden;
}
/* The site's own icon (2026-10-18), over its letters, which stay as the fallback
(SpankBang answers with a bot check, so it keeps its letters, as in the app). */
.kx-mark img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; background: #fff; }
[data-site="pornhub"] { --h: 26; }
[data-site="xvideos"] { --h: 350; }
[data-site="xnxx"] { --h: 240; }
[data-site="spankbang"] { --h: 296; }
[data-site="eporner"] { --h: 160; }
[data-site="erome"] { --h: 268; }
[data-site="faphouse"] { --h: 46; }
[data-site="onlyfans"] { --h: 192; }
[data-site="chaturbate"] { --h: 136; }
[data-site="stripchat"] { --h: 322; }
[data-site="xhamsterlive"] { --h: 8; }
[data-site="livejasmin"] { --h: 76; }
[data-site="camsoda"] { --h: 104; }
/* Built in from KC-X build 28 (2026-10-24); TNAFlix, YouJizz and CAM4 keep their hues below. */
[data-site="imlive"] { --h: 250; }
[data-site="flirt4free"] { --h: 4; }
[data-site="camster"] { --h: 190; }
/* Built in from KC build 37 (2026-11-01), like YouPorn, Beeg, RedGIFs and RedTube below. */
[data-site="thumbzilla"] { --h: 140; }
[data-site="empflix"] { --h: 210; }
/* More popular sites (2026-10-18): the rest of the 30 most visited, added in KC-X with Add website. */
[data-site="fanza"] { --h: 14; }
[data-site="tnaflix"] { --h: 200; }
[data-site="youporn"] { --h: 330; }
[data-site="beeg"] { --h: 280; }
[data-site="dlsite"] { --h: 180; }
[data-site="redgifs"] { --h: 120; }
[data-site="pornone"] { --h: 60; }
[data-site="youjizz"] { --h: 170; }
[data-site="redtube"] { --h: 340; }
[data-site="bongacams"] { --h: 0; }
[data-site="fansly"] { --h: 220; }
[data-site="cam4"] { --h: 90; }
[data-site="clips4sale"] { --h: 30; }
[data-site="myfreecams"] { --h: 150; }
[data-site="manyvids"] { --h: 310; }
[data-site="brazzers"] { --h: 52; }
/* 2. Your platforms: library on the left, a live preview of Home on the right. */
.kx-picker { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(300px, 0.88fr); gap: 24px; align-items: start; }
.kx-library { padding: 22px; border: 1px solid var(--kx-line); border-radius: 20px; background: var(--kx-card); }
.kx-library-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.kx-library-top h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: #fff; font-size: 1.05rem; font-weight: 850; }
.kx-library-top h3 svg { width: 20px; height: 20px; color: var(--kx-red); }
.kx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kx-chips button {
padding: 7px 12px; border: 1px solid var(--kx-line-2); border-radius: 999px; background: transparent;
color: var(--kx-text-2); font: inherit; font-size: 0.8rem; font-weight: 750; cursor: pointer;
}
.kx-chips button small { margin-inline-start: 3px; opacity: 0.6; font-size: inherit; }
.kx-chips button:hover { border-color: rgb(255 255 255 / 36%); color: #fff; }
.kx-chips button[aria-pressed="true"] { border-color: #fff; background: #fff; color: #111; }
.kx-group + .kx-group { margin-top: 22px; }
.kx-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--kx-text-2); font-size: 0.84rem; font-weight: 800; }
.kx-group h4 small { color: var(--kx-text-3); font-size: inherit; font-weight: 700; }
.kx-cards { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.kx-card {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
min-height: 62px; padding: 10px 10px 10px 12px;
border: 1px solid var(--kx-line); border-radius: 13px; background: rgb(255 255 255 / 3%);
transition: border-color .2s ease, background .2s ease;
}
.kx-card:hover { border-color: var(--kx-line-2); background: rgb(255 255 255 / 5%); }
.kx-card .kx-mark { transition: filter .2s ease, opacity .2s ease; }
.kx-card.is-off .kx-mark { filter: grayscale(0.9); opacity: 0.5; }
.kx-card-name { min-width: 0; }
.kx-card-name b { display: block; overflow: hidden; color: #fff; font-size: 0.93rem; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.kx-card-name small { display: block; overflow: hidden; margin-top: 2px; color: var(--kx-text-3); font-size: 0.75rem; white-space: nowrap; text-overflow: ellipsis; }
.kx-card-note { max-width: 8.5em; color: var(--kx-text-3); font-size: 0.72rem; line-height: 1.3; text-align: end; }
.kx-group-note { margin: -4px 0 12px; color: var(--kx-text-3); font-size: 0.8rem; line-height: 1.5; }
/* A live site among them: a LIVE strip across the foot of its mark. */
[data-group="more"] .kx-card[data-kind="live"] .kx-mark::after { content: "LIVE"; position: absolute; inset: auto 0 0; z-index: 1; padding: 1px 0; background: var(--kx-red); color: #fff; font-size: 0.5rem; font-weight: 900; letter-spacing: 0.06em; line-height: 1.2; text-align: center; }
.kx-card-actions { display: flex; align-items: center; gap: 6px; }
.kx-toggle {
display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 6px 12px;
border: 1px solid rgb(37 244 238 / 36%); border-radius: 999px; background: rgb(37 244 238 / 11%);
color: #9af9f6; font: inherit; font-size: 0.78rem; font-weight: 800; white-space: nowrap; cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.kx-toggle::before { content: "✓"; font-weight: 900; }
.kx-toggle[aria-pressed="false"] { border-color: var(--kx-red); background: var(--kx-red); color: #fff; }
.kx-toggle[aria-pressed="false"]::before { content: "+"; font-size: 1.05em; }
.kx-toggle:hover { border-color: rgb(37 244 238 / 70%); }
.kx-toggle[aria-pressed="false"]:hover { background: var(--kx-red-dark); border-color: var(--kx-red-dark); }
.kx-card-delete {
display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
background: transparent; color: var(--kx-text-3); font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.kx-card-delete:hover { background: rgb(255 255 255 / 8%); color: #fff; }
.kx-add { display: flex; gap: 8px; margin: 0 0 10px; }
.kx-add[hidden] { display: none; }
.kx-add input {
flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px;
border: 1px solid var(--kx-line-2); border-radius: 11px; background: rgb(0 0 0 / 30%);
color: #fff; font: inherit; font-size: 16px;
}
.kx-add input::placeholder { color: var(--kx-text-3); }
.kx-add button { flex: none; padding: 0 16px; border: 0; border-radius: 11px; background: #fff; color: #111; font: inherit; font-size: 0.88rem; font-weight: 850; cursor: pointer; }
.kx-add button:hover { background: #e9e9ee; }
.kx-add-note { margin: 0 0 12px; color: var(--kx-text-3); font-size: 0.82rem; line-height: 1.55; overflow-wrap: anywhere; }
.kx-add-note.is-error { color: #ff8aa2; }
.kx-cards:empty { display: none; }
.kx-preview { position: sticky; top: 96px; }
.kx-preview-label { margin: 0 0 10px; color: var(--kx-text-2); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.kx-preview-window { overflow: hidden; border: 1px solid var(--kx-line-2); border-radius: 16px; background: #000; box-shadow: 0 30px 70px rgb(0 0 0 / 50%); }
.kx-preview-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--kx-line); background: #141419; }
.kx-preview-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a44; }
.kx-preview-bar .kx-wordmark { margin-inline-start: 10px; color: #fff; font-size: 0.86rem; }
.kx-preview-body { padding: 14px 14px 16px; }
.kx-row + .kx-row { margin-top: 10px; }
.kx-row-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--kx-text-2); font-size: 0.74rem; font-weight: 800; }
.kx-row-title svg { width: 14px; height: 14px; }
.kx-row-title small { color: var(--kx-text-3); font-size: inherit; }
/* The row title folds its row, as in KC-X build 32 (2026-10-25); the script makes it a button. */
.kx-row-fold { display: inline-flex; align-items: center; gap: 6px; margin: -3px -6px; padding: 3px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.kx-row-fold:hover { color: #fff; }
.kx-row-fold:focus-visible { outline: 2px solid var(--kx-cyan); outline-offset: 1px; }
.kx-row-fold::after { content: ""; width: 5px; height: 5px; margin-inline-start: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: 0.7; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.kx-row-fold[aria-expanded="false"]::after { transform: rotate(-45deg); }
[dir="rtl"] .kx-row-fold[aria-expanded="false"]::after { transform: rotate(135deg); }
.kx-circles[hidden] { display: none; }
/* Ten sites and + in a row, as KC-X build 28 (2026-10-24); smaller circles to fit. */
.kx-circles { list-style: none; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; }
.kx-circles li { display: grid; justify-items: center; gap: 4px; min-width: 0; color: var(--kx-text-2); font-size: 0.56rem; font-weight: 700; text-align: center; }
.kx-circles li > span:last-child { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kx-circles .kx-row-empty { grid-column: 1 / -1; justify-items: start; padding: 14px 4px; color: var(--kx-text-3); font-size: 0.74rem; font-weight: 600; }
.kx-circle {
display: grid; place-items: center; width: 36px; height: 36px; padding: 2px; border: 0; border-radius: 50%;
background: conic-gradient(from 200deg, var(--kx-cyan), var(--kx-red), var(--kx-cyan)); cursor: pointer;
animation: kx-pop .28s ease both;
}
.kx-circle .kx-mark { width: 100%; height: 100%; border: 2px solid #000; border-radius: 50%; font-size: 0.6rem; box-shadow: none; }
.kx-circle.is-selected { outline: 2px solid #fff; outline-offset: 2px; }
.kx-circle-add {
background: radial-gradient(circle closest-side, #23232c calc(100% - 4px), #000 calc(100% - 3.5px) calc(100% - 2px), transparent calc(100% - 1.5px)),
conic-gradient(from 200deg, var(--kx-cyan), var(--kx-red), var(--kx-cyan));
color: #fff; font: inherit; font-size: 1.3rem; font-weight: 400; line-height: 1; cursor: pointer; animation: none;
}
.kx-circle-add:hover { filter: brightness(1.25); }
.kx-circle-add[aria-expanded="true"] { outline: 2px solid rgb(255 255 255 / 55%); outline-offset: 2px; }
.kx-circle-add.is-selected { outline: 2px solid #fff; outline-offset: 2px; }
/* The sites waiting under "+" (kcx-home.js), opened from the row. */
.kx-more { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 8px; border: 1px solid var(--kx-line); border-radius: 12px; background: #0d0d12; }
.kx-more[hidden] { display: none; }
.kx-more-site { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 3px; border: 1px solid var(--kx-line-2); border-radius: 999px; background: transparent; color: var(--kx-text-2); font: inherit; font-size: 0.7rem; font-weight: 750; cursor: pointer; }
.kx-more-site:hover { border-color: rgb(255 255 255 / 36%); color: #fff; }
.kx-more-site[aria-pressed="true"] { border-color: #fff; background: #fff; color: #111; }
.kx-more-site .kx-mark { width: 22px; height: 22px; border-radius: 50%; font-size: 0.46rem; box-shadow: none; }
.kx-more-site > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@keyframes kx-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.kx-feed { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kx-line); }
.kx-feed-head { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 10px; }
.kx-feed-title { display: flex; flex: 1; align-items: center; gap: 7px; min-width: 0; margin: 0; color: #fff; font-size: 0.82rem; }
.kx-feed-title .kx-mark { width: 22px; height: 22px; border-radius: 50%; font-size: 0.48rem; box-shadow: none; }
/* Sorting, shown where it works (Eporner's real posters, kcx-home.js). */
.kx-feed-sort { display: flex; gap: 6px; }
.kx-feed-sort[hidden] { display: none; }
.kx-feed-sort button { padding: 4px 9px; border: 0; border-radius: 999px; background: var(--kx-card-2); color: var(--kx-text-2); font: inherit; font-size: 0.66rem; font-weight: 700; cursor: pointer; }
.kx-feed-sort button:hover { background: rgb(255 255 255 / 14%); color: #fff; }
.kx-feed-sort button[aria-pressed="true"] { background: #fff; color: #111; }
.kx-feed-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kx-feed-tiles > span { aspect-ratio: 16 / 10; border-radius: 6px; background: #222 center / cover no-repeat; }
/* Drawn sample pictures (kcx-media-composite.py), as in the app screens below. */
.kx-feed-tiles > span:nth-child(1) { background-image: url("/assets/kcx/samples/coast.webp?v=20261018-kcx1"); }
.kx-feed-tiles > span:nth-child(2) { background-image: url("/assets/kcx/samples/city.webp?v=20261018-kcx1"); }
.kx-feed-tiles > span:nth-child(3) { background-image: url("/assets/kcx/samples/sunday.webp?v=20261018-kcx1"); }
.kx-feed-tiles > span:nth-child(4) { background-image: url("/assets/kcx/samples/mountains.webp?v=20261018-kcx1"); }
.kx-feed-tiles > span:nth-child(5) { background-image: url("/assets/kcx/samples/pool.webp?v=20261018-kcx1"); }
.kx-feed-tiles > span:nth-child(6) { background-image: url("/assets/kcx/samples/neon.webp?v=20261018-kcx1"); }
/* Once the visitor is 18+: the selected site's real videos (posters from Eporner's API, or the site's own player). */
.kx-feed-video { position: relative; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #111; cursor: pointer; }
.kx-feed-video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kx-feed-video::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--kx-red); clip-path: circle(50%); box-shadow: 0 2px 8px rgb(0 0 0 / 45%); }
.kx-feed-video::before { content: ""; position: absolute; z-index: 1; right: 12px; bottom: 11px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.kx-feed-video:hover img, .kx-feed-video:focus-visible img { filter: brightness(1.12); }
.kx-feed-player { grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.kx-feed-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kx-feed-hint { margin: 8px 0 0; color: var(--kx-text-3); font-size: 0.72rem; line-height: 1.45; }
.kx-feed-hint[hidden] { display: none; }
.kx-feed-ask { display: grid; place-items: center; background: radial-gradient(60% 70% at 50% 40%, rgb(254 44 85 / 16%), transparent 70%), #0b0b10; }
.kx-feed-load { display: grid; justify-items: center; gap: 10px; padding: 16px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 0.84rem; font-weight: 800; cursor: pointer; }
.kx-feed-load img { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--kx-red); }
.kx-feed-load span { padding: 8px 14px; border-radius: 999px; background: var(--kx-red); }
.kx-feed-load:hover span, .kx-feed-load:focus-visible span { background: var(--kx-red-dark); }
.kx-feed-note { grid-column: 1 / -1; margin: 4px 0 0; color: var(--kx-text-3); font-size: 0.72rem; line-height: 1.45; }
/* A site this page cannot show: why, over the dimmed samples, and the sites it can show. */
.kx-feed-tiles.has-note > span { opacity: 0.13; filter: saturate(0.4); }
.kx-feed-tiles.has-note > span:nth-child(1) { grid-area: 1 / 1; }
.kx-feed-tiles.has-note > span:nth-child(2) { grid-area: 1 / 2; }
.kx-feed-tiles.has-note > span:nth-child(3) { grid-area: 1 / 3; }
.kx-feed-tiles.has-note > span:nth-child(4) { grid-area: 2 / 1; }
.kx-feed-tiles.has-note > span:nth-child(5) { grid-area: 2 / 2; }
.kx-feed-tiles.has-note > span:nth-child(6) { grid-area: 2 / 3; }
.kx-feed-blocked { grid-area: 1 / 1 / 3 / -1; z-index: 1; align-self: center; display: grid; justify-items: center; gap: 6px; padding: 12px 10px; text-align: center; }
.kx-feed-blocked p { max-width: 48ch; margin: 0; color: var(--kx-text-2); font-size: 0.72rem; line-height: 1.45; }
.kx-feed-blocked .kx-feed-blocked-title { color: #fff; font-size: 0.86rem; font-weight: 800; }
.kx-feed-blocked .kx-feed-blocked-label { margin-top: 4px; color: var(--kx-text-3); font-size: 0.66rem; font-weight: 700; }
.kx-feed-switches { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.kx-feed-switch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--kx-line-2); border-radius: 999px; background: rgb(255 255 255 / 6%); color: #fff; font: inherit; font-size: 0.7rem; font-weight: 700; cursor: pointer; }
.kx-feed-switch:hover { border-color: rgb(255 255 255 / 30%); background: rgb(255 255 255 / 12%); }
.kx-feed-switch img { width: 20px; height: 20px; border-radius: 50%; background: #fff; }
/* "How it works" once the visitor is 18+: live KC-X screens with real Eporner videos. */
.kx-shot-frame.is-live > picture, .kx-shot-frame.is-live > .kx-shot-inset { display: none; }
.kx-live-screen { position: relative; width: 100%; aspect-ratio: 1600 / 1010; }
.kx-live-window { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 0 0 1px var(--kx-line-2), 0 40px 90px rgb(0 0 0 / 55%); }
.kx-live-screen .kx-preview-bar { flex: none; }
.kx-live-body { display: flex; flex: 1; flex-direction: column; gap: clamp(8px, 1.5vw, 16px); min-height: 0; padding: clamp(10px, 2.2vw, 24px); overflow: hidden; }
.kx-live-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: #fff; font-size: clamp(0.78rem, 1.3vw, 1.05rem); }
.kx-live-head .kx-mark { width: 26px; height: 26px; border-radius: 50%; font-size: 0.5rem; box-shadow: none; }
.kx-live-head b { margin-inline-end: auto; }
.kx-live-head i { padding: 3px 10px; border-radius: 999px; background: var(--kx-card-2); color: var(--kx-text-2); font-size: 0.72em; font-style: normal; font-weight: 700; }
.kx-live-head i:first-of-type { background: #fff; color: #111; }
.kx-live-sort { display: flex; flex-wrap: wrap; gap: 8px; }
.kx-live-sort button { padding: 3px 10px; border: 0; border-radius: 999px; background: var(--kx-card-2); color: var(--kx-text-2); font: inherit; font-size: 0.72em; font-weight: 700; cursor: pointer; }
.kx-live-sort button:hover { background: rgb(255 255 255 / 14%); color: #fff; }
.kx-live-sort button[aria-pressed="true"] { background: #fff; color: #111; }
.kx-live-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1.2vw, 14px); }
.kx-live-library { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 18px); }
.kx-live-card .kx-feed-video { width: 100%; }
.kx-live-caption { display: flex; justify-content: space-between; gap: 6px; margin: 6px 0 0; color: var(--kx-text-3); font-size: clamp(0.66rem, 1vw, 0.82rem); }
.kx-live-caption b { color: #fff; }
.kx-live-player { position: absolute; inset-inline-end: -3%; bottom: -12%; width: 50%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; background: #000; box-shadow: 0 0 0 1px rgb(255 255 255 / 22%), 0 30px 60px rgb(0 0 0 / 65%); }
.kx-live-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 1000px) { .kx-live-player { inset-inline-end: 0; } }
@media (max-width: 720px) { .kx-live-player { width: 56%; bottom: -16%; } }
.kx-preview-note { margin: 12px 0 0; color: var(--kx-text-3); font-size: 0.82rem; line-height: 1.55; }
.kx-howto { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0; }
.kx-howto li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--kx-line); border-radius: 14px; background: var(--kx-card); }
.kx-howto-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgb(254 44 85 / 16%); color: #ff6b88; font-size: 1.05rem; font-weight: 900; }
.kx-howto strong { color: #fff; font-size: 0.98rem; }
.kx-howto p { margin: 4px 0 0; color: var(--kx-text-2); font-size: 0.88rem; line-height: 1.55; }
/* 3. How it works: three real screens. */
.kx-steps { list-style: none; display: grid; gap: clamp(64px, 9vw, 112px); margin: 0; padding: 0; }
.kx-step { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.kx-step:nth-child(even) { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.82fr); }
.kx-step:nth-child(even) .kx-step-copy { order: 2; }
.kx-step-num { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 12px; background: linear-gradient(135deg, var(--kx-cyan), var(--kx-red)); color: var(--kx-bg); font-size: 1.1rem; font-weight: 900; }
.kx-step h3 { margin: 0; color: #fff; font-size: clamp(1.6rem, 2.7vw, 2.2rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 900; }
.kx-step-copy > p { margin: 14px 0 0; color: var(--kx-text-2); font-size: 1.04rem; line-height: 1.65; }
.kx-step ul { list-style: none; display: grid; gap: 10px; margin: 18px 0 0; padding: 0; }
.kx-step ul li { position: relative; padding-inline-start: 22px; color: var(--kx-text); font-size: 0.95rem; line-height: 1.55; }
.kx-step ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--kx-cyan), var(--kx-red)); }
.kx-home kbd { display: inline-block; min-width: 1.7em; padding: 0 5px; border: 1px solid var(--kx-line-2); border-bottom-width: 2px; border-radius: 5px; background: rgb(255 255 255 / 8%); color: #fff; font: 700 0.8em/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.kx-shot-frame { position: relative; margin: 0; }
.kx-shot-frame img { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; box-shadow: 0 0 0 1px var(--kx-line-2), 0 40px 90px rgb(0 0 0 / 55%); }
.kx-shot-stack { margin-bottom: 9%; }
.kx-shot-frame .kx-shot-inset { position: absolute; inset-inline-end: -3%; bottom: -12%; width: 50%; border-radius: 9px; box-shadow: 0 0 0 1px rgb(255 255 255 / 22%), 0 30px 60px rgb(0 0 0 / 65%); }
/* Everything else (cards from the published page content). */
.kx-home .kx-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kx-home .kx-features article { padding: 24px; border: 1px solid var(--kx-line); border-radius: 16px; background: var(--kx-card); }
.kx-home .kx-features article > span { display: none; }
.kx-home .kx-features article::before {
content: ""; display: block; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 13px;
background: rgb(37 244 238 / 10%) center / 24px no-repeat;
}
.kx-home .kx-features article:nth-child(6n+1)::before { background-image: url("data:image/svg+xml,"); }
.kx-home .kx-features article:nth-child(6n+2)::before { background-image: url("data:image/svg+xml,"); }
.kx-home .kx-features article:nth-child(6n+3)::before { background-image: url("data:image/svg+xml,"); }
.kx-home .kx-features article:nth-child(6n+4)::before { background-image: url("data:image/svg+xml,"); }
.kx-home .kx-features article:nth-child(6n+5)::before { background-image: url("data:image/svg+xml,"); }
.kx-home .kx-features article:nth-child(6n)::before { background-image: url("data:image/svg+xml,"); }
.kx-home .kx-features h3 { margin: 0 0 8px; color: #fff; font-size: 1.12rem; letter-spacing: -0.01em; }
.kx-home .kx-features p { margin: 0; color: var(--kx-text-2); line-height: 1.6; }
/* 4. Download (keeps the market-* hooks used by scripts and tests). */
.kx-home .kx-download {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
max-width: 940px; margin: 0 auto 16px; padding: 26px 28px;
border: 1px solid rgb(254 44 85 / 38%); border-radius: 20px;
background: linear-gradient(120deg, rgb(254 44 85 / 15%), rgb(37 244 238 / 6%)), var(--kx-bg);
box-shadow: 0 24px 60px rgb(254 44 85 / 12%);
}
.kx-home .market-download-product { display: flex; gap: 20px; align-items: center; min-width: 0; }
.kx-home .market-download-product img { flex: none; border-radius: 22%; }
.kx-home .market-download-product h3 { margin: 0; color: #fff; font-size: 1.4rem; font-weight: 900; letter-spacing: -0.02em; }
.kx-home .market-download-product p { margin: 6px 0 10px; color: var(--kx-text-2); font-size: 0.92rem; line-height: 1.5; }
.kx-home .market-version { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border: 1px solid var(--kx-line-2); border-radius: 999px; background: var(--kx-card-2); color: #fff; font-size: 0.78rem; font-weight: 800; }
.kx-download-cta { display: grid; justify-items: center; gap: 10px; }
.kx-home .market-buy { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 26px; border-radius: 12px; font-size: 1rem; font-weight: 850; white-space: nowrap; box-shadow: 0 10px 28px rgb(254 44 85 / 32%); }
.kx-home .market-buy svg { width: 20px; height: 20px; }
.kx-text-link { color: var(--kx-text-2); font-size: 0.86rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.kx-text-link:hover { color: #fff; }
.kx-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 940px; margin: 0 auto; }
.kx-plan { padding: 26px; border: 1px solid var(--kx-line); border-radius: 18px; background: var(--kx-card); }
.kx-plan-member { border-color: rgb(254 44 85 / 42%); }
.kx-plan h3 { margin: 0; color: #fff; font-size: 1.2rem; }
.kx-plan-kind { margin: 4px 0 0; color: var(--kx-text-3); font-size: 0.82rem; }
.kx-plan .kx-plan-price { margin: 12px 0 0; color: #fff; font-size: 2.1rem; font-weight: 900; letter-spacing: -0.03em; }
.kx-plan .market-price { font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.kx-plan .kx-plan-price small { margin-inline-start: 8px; color: var(--kx-text-2); font-size: 0.9rem; font-weight: 700; letter-spacing: 0; }
.kx-plan-currency { margin: 4px 0 0; color: var(--kx-text-3); font-size: 0.8rem; }
.kx-plan ul { list-style: none; display: grid; gap: 9px; margin: 16px 0 0; padding: 0; }
.kx-plan li { position: relative; padding-inline-start: 24px; color: var(--kx-text-2); line-height: 1.5; }
.kx-plan li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--kx-red); font-weight: 900; }
.kx-plan-link { display: inline-block; margin-top: 18px; color: #ff6b88; font-weight: 800; }
.kx-home .market-note { max-width: 940px; margin: 14px auto 0; color: var(--kx-text-3); font-size: 0.86rem; line-height: 1.6; text-align: center; }
.kx-home .market-note:empty { display: none; }
.kx-home .market-note a { color: #ff6b88; font-weight: 700; }
/* Questions and guides. */
.kx-faq-layout { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.kx-guides { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--kx-line); border-radius: 14px; background: var(--kx-card); }
.kx-guides h3 { margin: 0 0 10px; color: var(--kx-text-3); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.kx-guides ul { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.kx-guides a { color: #fff; font-size: 0.94rem; font-weight: 700; }
.kx-guides a::after { content: " →"; color: #ff6b88; }
.kx-guides a:hover { color: #ff6b88; }
.kx-home .market-faq { display: grid; gap: 10px; }
.kx-home .market-faq details { border: 1px solid var(--kx-line); border-radius: 14px; background: var(--kx-card); }
.kx-home .market-faq details[open] { background: var(--kx-card-2); }
.kx-home .market-faq summary { position: relative; display: block; padding: 18px 52px 18px 20px; color: #fff; font-weight: 800; line-height: 1.45; list-style: none; cursor: pointer; }
.kx-home .market-faq summary::-webkit-details-marker { display: none; }
.kx-home .market-faq summary::after { content: "+"; position: absolute; inset-inline-end: 20px; top: 50%; transform: translateY(-50%); color: var(--kx-text-3); font-size: 1.25rem; line-height: 1; }
.kx-home .market-faq details[open] summary::after { content: "−"; }
.kx-home .market-faq p { margin: 0; padding: 0 20px 18px; color: var(--kx-text-2); line-height: 1.65; }
/* Footer. */
.kx-footer { padding-block: 34px; border-top: 1px solid rgb(255 255 255 / 8%); background: var(--kx-night); color: rgb(255 255 255 / 62%); font-size: 0.86rem; }
.kx-footer .container { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand nav" "copy nav" "legal legal"; align-items: center; gap: 8px 40px; }
.kx-footer .brand { grid-area: brand; color: #fff; font-size: 1.25rem; }
.kx-footer .container > span { grid-area: copy; }
.kx-footer nav { grid-area: nav; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 22px; }
.kx-footer nav a { color: rgb(255 255 255 / 78%); }
.kx-footer nav a:hover { color: #fff; }
.kx-footer-legal { grid-area: legal; margin: 14px 0 0; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 8%); color: rgb(255 255 255 / 45%); font-size: 0.78rem; }
@media (max-width: 1000px) {
.kx-hero-inner, .kx-picker, .kx-step, .kx-step:nth-child(even), .kx-faq-layout { grid-template-columns: minmax(0, 1fr); }
.kx-step:nth-child(even) .kx-step-copy { order: 0; }
.kx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kx-preview { position: static; order: -1; }
.kx-home .kx-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kx-howto { grid-template-columns: 1fr; }
/* The player inset hung 2-5px past the page edge between 721 and 1000px. */
.kx-shot-frame .kx-shot-inset { inset-inline-end: 0; }
}
@media (max-width: 720px) {
.kx-button { width: 100%; }
.kx-library { padding: 16px; }
.kx-cards { grid-template-columns: 1fr; }
.kx-home .kx-features, .kx-plans { grid-template-columns: 1fr; }
.kx-circle { width: 28px; height: 28px; }
.kx-circles li { font-size: 0.5rem; }
.kx-home .kx-download { flex-direction: column; align-items: stretch; padding: 22px; }
.kx-home .market-download-product { align-items: flex-start; }
.kx-home .market-download-product img { width: 64px; height: 64px; }
.kx-home .market-buy { width: 100%; }
.kx-shot-frame .kx-shot-inset { inset-inline-end: 0; width: 56%; bottom: -16%; }
.kx-shot-stack { margin-bottom: 14%; }
.kx-footer .container { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "copy" "nav" "legal"; }
.kx-footer nav { justify-content: flex-start; margin-top: 10px; }
}
/* Phones: the library becomes a grid of tiles; tapping a tile adds or removes it. */
@media (max-width: 720px) {
.kx-facts li { flex-direction: column; gap: 8px; padding: 14px; }
.kx-facts strong { font-size: 0.92rem; }
.kx-facts span { font-size: 0.8rem; }
.kx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kx-card { position: relative; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; min-height: 0; padding: 14px 6px 12px; text-align: center; }
.kx-card:not(.is-off):not(.kx-card-fixed) { border-color: rgb(37 244 238 / 32%); }
.kx-card.is-off { border-style: dashed; }
.kx-card-name { max-width: 100%; }
.kx-card-name b { font-size: 0.8rem; }
.kx-card-name small, .kx-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kx-card-note { max-width: none; font-size: 0.64rem; text-align: center; }
.kx-card-actions { display: contents; }
.kx-toggle, .kx-toggle[aria-pressed="false"], .kx-toggle:hover, .kx-toggle[aria-pressed="false"]:hover {
position: absolute; inset: 0; min-height: 0; padding: 0; border: 0; border-radius: inherit; background: transparent;
}
.kx-toggle::before { position: absolute; top: 6px; inset-inline-end: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--kx-cyan); color: var(--kx-bg); font-size: 0.68rem; }
.kx-toggle[aria-pressed="false"]::before { background: var(--kx-red); color: #fff; font-size: 0.9rem; }
.kx-card-delete { position: absolute; top: 2px; inset-inline-start: 2px; z-index: 1; }
.kx-home .kx-features article { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
.kx-home .kx-features article::before { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
.kx-home .kx-features h3 { margin: 2px 0 4px; font-size: 1.02rem; }
.kx-home .kx-features p { font-size: 0.9rem; }
}
@media (max-width: 360px) {
.kx-facts, .kx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.kx-button, .kx-button-primary:hover { transition: none; transform: none; }
.kx-circle { animation: none; }
}
.kx-chips[hidden], .kx-mark[hidden] { display: none; }
/* Real videos, adults only (2026-10-18; in the hero since the evening): the sites' own
embed players behind an 18+ gate. Until the script shows it, the box keeps its place
(invisible) so the hero does not jump. */
.kx-watch { padding: 16px; border: 1px solid var(--kx-line-2); border-radius: 20px; background: rgb(255 255 255 / 4%); box-shadow: 0 40px 90px rgb(0 0 0 / 45%); }
.kx-watch[hidden] { display: block; visibility: hidden; }
.kx-watch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kx-watch-head h2 { margin: 0; color: #fff; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
.kx-watch-tag { flex: none; padding: 3px 9px; border: 2px solid var(--kx-red); border-radius: 999px; color: #fff; font-size: 0.74rem; font-weight: 900; }
.kx-watch-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kx-watch-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border: 1px solid var(--kx-line-2); border-radius: 999px; background: transparent; color: var(--kx-text-2); font: inherit; font-size: 0.84rem; font-weight: 800; cursor: pointer; }
.kx-watch-tabs button:hover { border-color: rgb(255 255 255 / 36%); color: #fff; }
.kx-watch-tabs button[aria-pressed="true"] { border-color: #fff; background: #fff; color: #111; }
.kx-watch-tabs .kx-mark { width: 24px; height: 24px; border-radius: 50%; font-size: 0.5rem; box-shadow: none; }
.kx-watch-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 320px; overflow: hidden; border: 1px solid var(--kx-line); border-radius: 14px; background: #000; }
.kx-watch-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.kx-watch-gate { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 18px 22px; text-align: center; background: radial-gradient(60% 70% at 50% 40%, rgb(254 44 85 / 18%), transparent 70%), #07070b; }
.kx-watch-gate[hidden], .kx-watch-bar[hidden] { display: none; }
.kx-watch-badge { display: grid; place-items: center; width: 52px; height: 52px; margin: 0; border: 3px solid var(--kx-red); border-radius: 50%; color: #fff; font-size: 1.1rem; font-weight: 900; }
.kx-watch-gate h3 { margin: 2px 0 0; color: #fff; font-size: 1.2rem; }
.kx-watch-gate p { max-width: 32rem; margin: 0; color: var(--kx-text-2); font-size: 0.9rem; line-height: 1.55; }
.kx-watch-gate .kx-button { margin-top: 6px; }
.kx-watch-gate .kx-watch-fine { color: var(--kx-text-3); font-size: 0.76rem; }
.kx-watch-bar { margin-top: 12px; }
.kx-watch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kx-watch-actions button { padding: 8px 14px; border: 1px solid var(--kx-line-2); border-radius: 10px; background: transparent; color: #fff; font: inherit; font-size: 0.86rem; font-weight: 800; cursor: pointer; }
.kx-watch-actions button:first-child { border-color: var(--kx-red); background: var(--kx-red); }
.kx-watch-actions button:hover { border-color: rgb(255 255 255 / 40%); }
/* The way to the site itself is only a fallback, for when a browser blocks the player. */
.kx-watch-note { margin: 10px 0 0; color: var(--kx-text-3); font-size: 0.78rem; line-height: 1.55; }
.kx-watch-note a { color: var(--kx-text-2); text-decoration: underline; text-underline-offset: 2px; }
.kx-watch-note a:hover { color: #fff; }
.kx-watch-about { margin: 10px 0 0; color: var(--kx-text-3); font-size: 0.74rem; line-height: 1.5; }
@media (max-width: 720px) {
.kx-watch { padding: 12px; }
.kx-watch-stage { aspect-ratio: auto; height: 400px; min-height: 0; }
/* The gate needs the height for its text; a playing video is 16:9. */
.kx-watch-stage:has(iframe) { aspect-ratio: 16 / 9; height: auto; }
.kx-watch-gate { padding: 16px; }
.kx-watch-gate .kx-button { width: auto; }
}
/* The KC-X tour opens "How it works". */
.kx-tour { max-width: 980px; margin: 0 auto clamp(36px, 5vw, 60px); }
/* The tour's play button, shown only while the tour is paused (pause button or reduced motion). */
.kx-stage { position: relative; }
.kx-stage-play {
position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1600 / 1010;
display: grid; place-items: center; padding: 0; border: 0; border-radius: 18px;
background: rgb(0 0 0 / 28%); color: #fff; cursor: pointer;
}
.kx-stage-play[hidden] { display: none; }
.kx-stage-pause { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 55%); color: #fff; cursor: pointer; opacity: 0.8; }
.kx-stage-pause[hidden] { display: none; }
.kx-stage-pause:hover, .kx-stage-pause:focus-visible { opacity: 1; }
.kx-stage-pause svg { width: 18px; height: 18px; }
.kx-stage-play svg { width: 84px; height: 84px; padding: 22px 18px 22px 26px; border-radius: 50%; background: var(--kx-red); box-shadow: 0 12px 34px rgb(254 44 85 / 45%); }
.kx-stage-play:hover svg { background: var(--kx-red-dark); }
.kx-button-live { border-color: rgb(254 44 85 / 55%); }
.kx-button-live svg { color: var(--kx-red); }