/*
 * The store's look. Colours, rounding and fonts are gathered in the first
 * block (the palette of the old Tebex theme, slate.css). No fonts or pictures
 * are loaded from elsewhere.
 */

@font-face {
    font-family: 'Barlow Condensed';
    font-weight: 900;
    font-display: block;
    src: url(data:font/woff2;base64,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) format('woff2'); /* build.mjs puts the file itself here */
}

:root {
    color-scheme: dark;

    --bg: #0b0d12;
    --bg-deep: #07080c;
    --surface: #12151c;
    --surface-2: #191d27;
    --border: #222835;
    --border-strong: #2f3647;

    --text: #e8eaf0;
    --soft: #c5cad6;
    --muted: #9aa1b2;

    --accent: #2f6bff;
    --accent-hover: #2459e0;
    --accent-text: #7aa7ff;
    --on-accent: #ffffff;
    --tone: var(--accent-text); /* a product's own colour, set on its card or page */

    --danger: #f2706f;
    --success: #3fb950;

    --radius: 14px;
    --radius-sm: 9px;
    --width: 1240px;
    --nav: 68px;

    --swift: cubic-bezier(0.22, 1, 0.36, 1); /* quick off the mark, long to settle */

    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --display: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
    --mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
}

/* ---- Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 16px); }
/* A reloaded page goes back to where it was scrolled to by that place's number alone. Left to
   find it by what stood there (scroll anchoring), Chrome first drew the page somewhere else,
   often at its very end, and jumped back a moment later. */
html, body { overflow-anchor: none; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
/* Under the open basket the page cannot be scrolled. Its scrollbar goes, and the page keeps the
   scrollbar's width free (--gap, measured by store.js) so that nothing behind the basket shifts. */
body.locked { overflow: hidden; padding-right: var(--gap, 0px); }
.locked .buy-bar { padding-right: var(--gap, 0px); }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--width); margin-inline: auto; padding-inline: 24px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 16px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-sm); }
.skip:focus { left: 8px; }
.icon { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon.fill { fill: currentColor; stroke: none; }

.display { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.94; letter-spacing: 0.01em; }
.display b, .brand b { font-weight: inherit; color: var(--accent-text); }

/* The small line over a headline; its square stands askew, like the one in the mark. */
.label {
    display: flex; align-items: center; gap: 12px;
    font: 600 12px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.label::before { content: ''; width: 9px; height: 9px; border-radius: 2.5px; background: var(--tone); transform: rotate(20deg); }
.headline { margin-top: 16px; font-size: clamp(40px, 5.4vw, 68px); }
.lead { max-width: 56ch; font-size: 19px; line-height: 1.55; color: var(--soft); }
.lead.small { margin-top: 18px; font-size: 17px; }

/* ---- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 42px; padding: 0 18px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    font-weight: 650; font-size: 14.5px; line-height: 1; white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn-fill { background: var(--accent); color: var(--on-accent); }
.btn-fill:hover { background: var(--accent-hover); }
.btn-line { background: rgb(255 255 255 / 3%); border-color: var(--border-strong); }
.btn-line:hover { border-color: var(--accent-text); color: #fff; }
.btn.big { min-height: 52px; padding: 0 26px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn.square { width: 42px; padding: 0; }
.btn:disabled { cursor: default; opacity: 0.55; }
.btn-fill:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--border-strong); opacity: 1; }
.btn.busy { pointer-events: none; opacity: 0.7; }

/* ---- Navigation ------------------------------------------------------------ */

.nav {
    position: sticky; top: 0; z-index: 40;
    background: rgb(11 13 18 / 82%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.nav-row { display: flex; align-items: center; gap: 28px; height: var(--nav); }
.logo { display: flex; align-items: center; gap: 11px; color: var(--text); }
.logo .mark { width: 30px; height: 30px; }
.logo .brand { font-size: 27px; white-space: nowrap; padding-top: 2px; }
.nav-links { display: flex; gap: 4px; margin-right: auto; }
.nav-links a { padding: 9px 13px; white-space: nowrap; border-radius: var(--radius-sm); font: 600 12.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: color 0.15s, background-color 0.15s; }
.nav-links a:hover { color: var(--text); background: rgb(255 255 255 / 6%); }
/* Discord, YouTube and TikTok by their marks; the names come back in the folded menu */
.nav-social { display: flex; align-items: center; gap: 2px; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--border); }
.nav-links .nav-social a { display: grid; place-items: center; padding: 9px; }
.nav-social .icon { width: 18px; height: 18px; }
.nav-social span { display: none; }
.nav-actions { display: flex; gap: 10px; }
.account { max-width: 230px; }
.account span { overflow: hidden; text-overflow: ellipsis; }
.cart-button { position: relative; width: 46px; padding: 0; }
.cart-button .icon { width: 21px; height: 21px; }
.count { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--accent); color: var(--on-accent); font: 700 12px/1 var(--font); }
.burger { display: none; width: 46px; padding: 0; }

/* ---- Hero ------------------------------------------------------------------ */

.hero {
    position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(900px 620px at 88% 8%, rgb(47 107 255 / 26%), transparent 70%),
        radial-gradient(700px 520px at 4% 100%, rgb(47 107 255 / 12%), transparent 70%),
        var(--bg);
}
.hero-text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; padding-block: clamp(72px, 11vw, 132px); }
.hero-title { font-size: clamp(52px, 7.2vw, 106px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* The reel (when there is one): flat on the right, fading into the page on its left and at its top
   and foot; the hero's text stands over its faded side. In its corner the product on screen, a link
   to its page with its price (store.js gives that one .on), and the steps that jump to a part. */
.hero-reel { position: absolute; z-index: -1; top: calc(50% - 36px); right: 0; width: min(58vw, 1060px); translate: 0 -50%; }
.hero-reel-screen {
    position: relative; aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%), linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 34%), linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
    mask-composite: intersect;
}
/* two players, one over the other: the one on show (.on) fades in over the one that ran before it
   (.under, still playing until the fade is through); the free one loads the next clip meanwhile */
.hero-reel video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; }
.hero-reel video.under { z-index: 1; opacity: 1; transition: none; }
.hero-reel video.on { z-index: 2; opacity: 1; }
.with-reel .hero-text { pointer-events: none; }
.with-reel .hero-text > * { pointer-events: auto; }
.reel-bar { position: absolute; left: 36%; right: clamp(16px, 3vw, 52px); bottom: 9%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.reel-captions { display: grid; }
.reel-caption { grid-area: 1 / 1; justify-self: start; opacity: 0; translate: 0 8px; pointer-events: none; transition: opacity 0.4s var(--swift), translate 0.6s var(--swift); }
.reel-caption.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.reel-caption a {
    display: inline-flex; align-items: center; gap: 12px; padding: 7px 7px 7px 16px; white-space: nowrap;
    border-radius: 999px; border: 1px solid rgb(255 255 255 / 12%); background: rgb(11 13 18 / 64%); backdrop-filter: blur(10px);
    color: var(--text); font: 600 15px/1 var(--font); transition: border-color 0.2s;
}
.reel-caption a:hover { border-color: var(--tone); }
.reel-caption i { width: 9px; height: 9px; border-radius: 2.5px; background: var(--tone); transform: rotate(20deg); }
.reel-caption b { padding-top: 2px; font: 900 22px/1 var(--display); letter-spacing: 0.01em; text-transform: uppercase; }
.reel-caption .price { min-height: 0; font-size: 15px; color: var(--soft); }
.reel-view { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 13.5px; }
.reel-caption a:hover .reel-view { background: var(--accent-hover); }
.reel-view .icon { width: 15px; height: 15px; }
.reel-pause {
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
    border-radius: 50%; border: 1px solid rgb(255 255 255 / 14%); background: rgb(11 13 18 / 64%); backdrop-filter: blur(10px); color: var(--text);
}
.reel-pause .icon { width: 15px; height: 15px; fill: currentColor; }
.reel-pause .icon + .icon, .hero-reel.paused .reel-pause .icon:first-child { display: none; }
.hero-reel.paused .reel-pause .icon + .icon { display: block; }
.reel-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--parts, 4), 1fr); gap: 6px; }
.reel-steps button { display: flex; align-items: center; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; }
.reel-steps i { position: relative; flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / 18%); transition: background 0.2s; }
.reel-steps button:hover i { background: rgb(255 255 255 / 32%); }
/* The done part of a step, in the store's blue for all of them: one colour reads as one bar, the products' own colours as confetti. */
.reel-steps i::after { content: ''; position: absolute; inset: 0; background: var(--accent-text); transform-origin: left; transform: scaleX(var(--done, 0)); }

/* The strip under the hero. */
.strip { position: relative; overflow: hidden; border-block: 1px solid var(--border); background: var(--surface); }
.strip::before, .strip::after { content: ''; position: absolute; inset-block: 0; z-index: 1; width: min(12vw, 140px); pointer-events: none; }
.strip::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.strip::after { right: 0; background: linear-gradient(-90deg, var(--surface), transparent); }
.strip-run { display: flex; width: max-content; animation: run 56s linear infinite; will-change: transform; }
.strip:hover .strip-run { animation-play-state: paused; }
.strip span { display: flex; align-items: center; gap: 28px; padding: 17px 0 17px 28px; font: 600 12.5px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.strip span::after { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(20deg); }

@keyframes run { to { transform: translateX(-33.3333%); } }

/* ---- Sections -------------------------------------------------------------- */

.section { padding-block: clamp(64px, 9vw, 112px); }
.section.tint { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.section > .wrap > .headline { margin-bottom: 40px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 10px 16px; border-radius: 99px; border: 1px solid var(--border-strong); background: none; font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
.chip:hover { color: var(--text); border-color: var(--muted); }
.chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }
/* How many products a filter shows */
.chip i { font-style: normal; font-weight: 500; opacity: 0.55; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* The search beside the filters: a chip-shaped field; the grid narrows to what matches as one types */
.search { position: relative; display: flex; align-items: center; flex: 1; min-width: 200px; max-width: 280px; }
.search .icon { position: absolute; left: 13px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.search input { width: 100%; min-height: 36px; padding: 0 14px 0 36px; border-radius: 99px; border: 1px solid var(--border-strong); background: none; color: var(--text); font: 500 13.5px/1 var(--font); transition: border-color 0.15s; }
.search input::placeholder { color: var(--muted); }
.search input:hover { border-color: var(--muted); }
.search input:focus-visible { outline: none; border-color: var(--accent-text); }
.grid-empty { padding: 56px 0 24px; color: var(--muted); font-size: 16px; text-align: center; }
.grid-empty button { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---- Product cards ----------------------------------------------------------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
/* The whole card opens the product: its name's link is stretched over it, the basket button lies above that. */
.card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    transition: transform 0.55s var(--swift), border-color 0.4s ease, box-shadow 0.55s ease;
}
.tint .card { background: var(--bg); }
.card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--tone) 60%, var(--border)); box-shadow: 0 26px 50px -18px rgb(0 0 0 / 70%); }
.card-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-deep); }
.card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--swift); }
.card:hover .card-cover img { transform: scale(1.03); }
.card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; }
.kind { font: 600 11.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tone); }
.card h3 { font: 900 28px/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; transition: color 0.2s; }
.card h3 a::after { content: ''; position: absolute; inset: 0; }
.card:hover h3 { color: var(--tone); }
.card-line { color: var(--soft); font-size: 14.5px; line-height: 1.5; }
.card-tags { font: 500 11px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card [data-add] { position: relative; z-index: 1; min-height: 40px; padding: 0 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { padding: 5px 9px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font: 600 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }

/* A sale, top left of the cover; "New" (for NEW_DAYS from its `since`) top right, in the product's own colour, where no cover carries a ribbon of its own. */
.badge { position: absolute; top: 12px; left: 12px; padding: 6px 9px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font: 700 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-4deg); }
.badge.new { left: auto; right: 12px; background: var(--tone); color: var(--bg); transform: rotate(4deg); }

/* The newest products: a low shelf under the strip, before the store itself, so that the two do not read as two stores. */
.fresh-band { padding-block: clamp(40px, 5vw, 60px); background: var(--surface); border-bottom: 1px solid var(--border); }
.fresh-band .section-head { margin-bottom: 26px; }
.fresh-band .headline { margin-top: 12px; font-size: clamp(30px, 3.6vw, 44px); }
.fresh-band + .section { padding-top: clamp(56px, 7vw, 88px); }
.fresh-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.fresh {
    display: grid; grid-template-columns: minmax(128px, 168px) minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px 18px 12px 12px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    transition: transform 0.55s var(--swift), border-color 0.4s ease, box-shadow 0.55s ease;
}
.fresh:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone) 60%, var(--border)); box-shadow: 0 26px 50px -18px rgb(0 0 0 / 70%); }
.fresh img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-deep); }
.fresh-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fresh .kind { display: flex; align-items: baseline; gap: 10px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; }
.fresh .kind .when { color: var(--muted); letter-spacing: 0.1em; }
.fresh .kind .when::before { content: '·'; margin-right: 10px; }
.fresh b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 900 25px/0.98 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.fresh .card-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.4; }
.fresh .price { min-height: 0; margin-top: 2px; font-size: 16px; }

.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-height: 28px; font: 700 21px/1.3 var(--font); letter-spacing: -0.01em; white-space: nowrap; }
.price .was { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: line-through; }
.price .unit { font: 600 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.price .soon { font: 600 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.price .free { color: var(--success); }
.wait { display: block; width: 76px; height: 20px; align-self: center; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--border-strong) 50%, var(--surface-2) 75%) 0 0 / 200% 100%; animation: wait 1.3s linear infinite; }
@keyframes wait { to { background-position: -200% 0; } }

/* ---- Home: tiles, steps, questions, community ------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tile { padding: 26px 24px 28px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
/* The small pictures in the tiles and the steps (store.js plays them while they are in view). */
.tile-art { position: relative; display: grid; place-items: center; height: 104px; margin-bottom: 20px; overflow: hidden; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.art-model { perspective: 320px; background: radial-gradient(70% 90% at 50% 100%, rgb(47 107 255 / 16%), transparent 70%), var(--surface); }
.art-model::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 40%; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 6%) 0 1px, transparent 1px 22px); transform: perspective(120px) rotateX(55deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
.cube { position: relative; z-index: 1; width: 42px; height: 42px; transform-style: preserve-3d; animation: cube 10s linear infinite; }
.cube i { position: absolute; inset: 0; border: 1.5px solid var(--accent-text); border-radius: 3px; animation: skin 10s ease-in-out infinite; }
.cube .front { transform: translateZ(21px); }
.cube .back { transform: rotateY(180deg) translateZ(21px); }
.cube .left { transform: rotateY(-90deg) translateZ(21px); }
.cube .right { transform: rotateY(90deg) translateZ(21px); }
.cube .top { transform: rotateX(90deg) translateZ(21px); }
.cube .bottom { transform: rotateX(-90deg) translateZ(21px); }
@keyframes cube { from { transform: rotateX(-26deg) rotateY(0deg); } to { transform: rotateX(-26deg) rotateY(360deg); } }
@keyframes skin { 0%, 40%, 100% { background: rgb(47 107 255 / 4%); } 55%, 85% { background: rgb(122 167 255 / 34%); } }
.art-fw { grid-template-columns: repeat(2, auto); gap: 8px; align-content: center; justify-content: center; }
.art-fw span { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--border-strong); border-radius: 7px; color: var(--muted); font: 600 11px/1 var(--mono); transition: border-color 0.35s, color 0.35s, background-color 0.35s; }
.art-fw i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: background-color 0.35s, box-shadow 0.35s; }
.art-fw span.is-on, [data-play]:not(.playing) > span { border-color: rgb(63 185 80 / 50%); background: rgb(46 160 67 / 10%); color: var(--text); }
.art-fw span.is-on i, [data-play]:not(.playing) > span i { background: var(--success); box-shadow: 0 0 8px rgb(63 185 80 / 70%); }
.art-code { place-items: start; align-content: center; gap: 2px; padding: 0 14px; font: 11px/1.5 var(--mono); color: #c9ccd4; white-space: nowrap; }
.art-code .p { color: #9cdcfe; }
.art-code .s { color: #ce9178; }
.art-code .n { color: #b5cea8; }
.art-code .v { color: #569cd6; font-weight: 400; }
.art-code.playing b[data-at]:not(.is-on) { display: none; }
.art-code .flash.is-on { animation: flash 0.9s ease-out; }
@keyframes flash { from { background: rgb(47 107 255 / 55%); } }

.steps[data-play] li::before { transition: background-color 0.4s, border-color 0.4s, transform 0.6s var(--swift); }
.steps.playing li:not(.is-on)::before { background: var(--surface-2); border-color: var(--border-strong); transform: none; }
.steps.playing li.is-on::before { background: var(--accent); border-color: var(--accent); transform: rotate(8deg); }
.vig { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 9px; height: 118px; margin-bottom: 20px; padding: 12px 14px; overflow: hidden; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; transition: border-color 0.4s; }
.steps li.is-on .vig { border-color: var(--border-strong); }
.vig .icon { width: 15px; height: 15px; }
.vig-item { display: flex; align-items: center; gap: 10px; }
.vig-item img { width: 64px; height: 36px; object-fit: cover; border-radius: 5px; }
.vig-item b { font: 900 19px/1 var(--display); text-transform: uppercase; }
.vig-cart { position: relative; margin-left: auto; color: var(--muted); }
.vig-cart .icon { width: 20px; height: 20px; }
.vig-cart i { position: absolute; top: -8px; right: -9px; display: grid; place-items: center; min-width: 17px; height: 17px; border-radius: 99px; background: var(--accent); color: #fff; font: 700 10px/1 var(--font); font-style: normal; transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.playing .vig-cart i:not(.is-on) { scale: 0; }
.vig-btn { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 650; transition: background-color 0.3s, color 0.3s; }
.vig-btn > span { display: flex; align-items: center; gap: 7px; }
.vig-btn.is-run { animation: press 0.3s ease-out; }
.playing .vig-btn [data-at]:not(.is-on) { display: none; }
.vig-btn:has(.done.is-on), [data-play]:not(.playing) .vig-btn { background: rgb(46 160 67 / 16%); color: #8fe39b; }
.vig-btn .spin { width: 14px; height: 14px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
.vig-head { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 600 12px/1 var(--font); white-space: nowrap; }
.vig-head .icon { color: var(--accent-text); }
.vig-head b { font-weight: 400; color: var(--border-strong); }
.vig-row { display: flex; align-items: center; justify-content: space-between; min-height: 30px; padding: 0 10px; border-radius: 7px; background: var(--bg); border: 1px solid var(--border); font-weight: 600; }
.vig-got { display: flex; align-items: center; gap: 5px; color: #8fe39b; font-size: 11.5px; }
.vig-bar { position: relative; height: 4px; overflow: hidden; border-radius: 2px; background: var(--surface-2); }
.vig-bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transition: transform 0.75s linear; }
.playing .vig-bar i:not(.is-on) { transform: scaleX(0); }
.vig-console { gap: 5px; background: #07080c; font: 12px/1.5 var(--mono); }
.vig-console .ok { color: #8fe39b; }

.tile .num { font: 600 12px/1 var(--mono); letter-spacing: 0.16em; color: var(--accent-text); }
.tile h3 { margin: 16px 0 10px; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.tile p { color: var(--muted); font-size: 15px; }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.steps li { counter-increment: step; position: relative; padding-top: 62px; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border-strong); font: 900 24px/1 var(--display); }
.steps li:first-child::before { background: var(--accent); border-color: var(--accent); transform: rotate(8deg); }
.steps li::after { content: ''; position: absolute; top: 22px; left: 58px; right: -6px; height: 1px; background: var(--border-strong); transform-origin: 0 0; scale: var(--draw, 1) 1; }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 19px; letter-spacing: -0.01em; margin-bottom: 8px; }
.steps p { color: var(--muted); font-size: 15px; }
.steps a, .faq a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.steps.down { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
.steps.down li { padding: 0 0 0 64px; min-height: 44px; }
.steps.down li::after { top: 50px; bottom: -22px; left: 22px; right: auto; width: 1px; height: auto; scale: 1 var(--draw, 1); }

.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s; }
.faq details[open], .faq details:hover { border-color: var(--border-strong); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 22px; font-weight: 650; font-size: 16.5px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-2); font: 500 19px/1 var(--mono); color: var(--accent-text); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 22px 22px; color: var(--soft); max-width: 68ch; }

.cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px;
    padding: clamp(32px, 5vw, 60px);
    border: 1px solid var(--border-strong); border-radius: 22px;
    background:
        radial-gradient(rgb(232 234 240 / 7%) 1.4px, transparent 1.5px) 0 0 / 30px 30px,
        radial-gradient(700px 400px at 90% 0%, rgb(47 107 255 / 30%), transparent 70%),
        var(--surface);
}
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.lost { min-height: 60vh; display: grid; align-items: center; }
.lost .btn { margin-top: 30px; }

/* ---- Product page ---------------------------------------------------------- */

.product { padding-block: 34px clamp(48px, 7vw, 80px); background: radial-gradient(900px 520px at 100% 0%, rgb(47 107 255 / 14%), transparent 70%); }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; font: 600 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs b { color: var(--text); font-weight: 600; }
.product-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }

.gallery-main { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius); }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-prev, .gallery-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgb(11 13 18 / 70%); opacity: 0; transition: opacity 0.15s, border-color 0.15s; }
/* Pressed, an arrow gives by a pixel like every button, from where it stands: without this it would drop
   by half its height (the .btn rule knows nothing of the shift above) and slip from under the pointer. */
.gallery-prev:active, .gallery-next:active, .clip-prev:active, .clip-next:active, .clip-step:active { transform: translateY(calc(-50% + 1px)); }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-main:hover .btn, .gallery-main .btn:focus-visible { opacity: 1; }
.gallery-count { position: absolute; right: 12px; bottom: 12px; padding: 6px 9px; border-radius: 6px; background: rgb(11 13 18 / 78%); font: 600 11px/1 var(--mono); letter-spacing: 0.12em; color: var(--soft); }
.gallery-thumbs { display: grid; grid-template-columns: repeat(var(--columns, 6), 1fr); gap: 10px; margin-top: 10px; }
.gallery-thumbs button { position: relative; padding: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-sm); opacity: 0.6; transition: opacity 0.15s, border-color 0.15s; }
.gallery-thumbs button:hover { opacity: 1; }
.gallery-thumbs button.on { opacity: 1; border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs .icon { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; padding: 7px 6px 7px 8px; border-radius: 50%; background: rgb(11 13 18 / 78%); fill: currentColor; }

/* The video: the whole picture plays it, and the player then takes the picture's place.
   The button sits at the right, clear of the words on the videos' pictures. */
.gallery-play { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: flex-end; gap: 14px; padding: 18px; background: linear-gradient(0deg, rgb(7 8 12 / 62%), transparent 38%); }
.gallery-main.video .gallery-play { display: flex; }
.gallery-play:focus-visible { outline-offset: -5px; border-radius: var(--radius); }
.gallery-play .btn { pointer-events: none; box-shadow: 0 10px 30px rgb(0 0 0 / 50%); }
.gallery-play:hover .btn { background: var(--accent-hover); }
.gallery-play .icon { fill: currentColor; }
.gallery-play small { padding-bottom: 6px; font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.gallery-main iframe, .gallery-main video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.gallery-main.video .gallery-count, .gallery-main.playing .gallery-play { display: none; }
.gallery-main.loading .gallery-play { cursor: progress; }

.buy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.product-title { font-size: clamp(48px, 6vw, 84px); }
/* A product with a logo of its own shows it in place of its name in type. The logo is taller, so
   the tags move up beside the label and the link to the documentation under the gallery: the two
   columns then end about level. */
.buy-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.gallery .docs-link { margin-top: 16px; }
.gallery .docs-link + .docs-link, .buy .docs-link + .docs-link { margin-top: 10px; }
.product-title.logo { margin: -8px 0 -2px -10px; line-height: 0; }
.product-title.logo img { width: min(246px, 100%); height: auto; filter: drop-shadow(0 14px 30px rgb(0 0 0 / 55%)); }
.buy .lead { margin-top: 0; }
.buy-box { width: 100%; margin-top: 8px; padding: 24px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.buy-price { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.buy-price .price { font-size: 34px; min-height: 45px; } /* a line of the price is 44.2px: the box must not grow when it arrives */
.buy-price .price .was { font-size: 17px; }
.buy-price .badge { position: static; }
.assure { display: grid; gap: 11px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.assure li { display: flex; align-items: flex-start; gap: 11px; color: var(--soft); font-size: 14.5px; line-height: 1.45; }
.assure .icon { margin-top: 1px; color: var(--accent-text); }
.assure.plain { border: 0; padding: 0; margin-top: 26px; }
.docs-link { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 18px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--soft); font-weight: 600; font-size: 15px; transition: border-color 0.15s, color 0.15s; }
.docs-link span { margin-right: auto; }
.docs-link:hover { border-color: var(--accent-text); color: #fff; }
.docs-link .icon:first-child { color: var(--accent-text); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chips span { padding: 10px 17px; border-radius: 99px; border: 1px solid var(--tone); background: rgb(12 14 18 / 72%); font-weight: 600; font-size: 14.5px; }

/* The clips: side by side at one height, each as wide as its own shape asks. */
.moving { padding-top: 0; }
.clips { display: flex; gap: 20px; }
.clip { flex: var(--ratio) 1 0; min-width: 0; margin: 0; }
/* Those of a product in play: all of one shape, three to a row. */
.clips.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 20px; }
/* Those of what comes with a product: one under the other, beside its text. */
.clips.stack { flex-direction: column; gap: 26px; }
.clips.stack .clip { flex: none; }
.two .docs-link { margin-top: 28px; }
.two .docs-link + .docs-link { margin-top: 10px; }
/* The clip of every model: the arrows on it step through them, and its line names the one on show. */
.clip-stage { position: relative; }
.clip-prev, .clip-next, .clip-step { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); background: rgb(11 13 18 / 72%); }
.clip-prev { left: 12px; }
.clip-next { right: 12px; }
.clip-step { position: fixed; z-index: 97; }
.turn-of { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; font: 600 11.5px/1.4 var(--mono); letter-spacing: 0.08em; }
.turn-of b { color: var(--soft); font-weight: 600; overflow-wrap: anywhere; }
.turn-of i { flex: none; font-style: normal; }
.turn-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 8px; }
.turn-steps button { display: flex; align-items: center; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; }
.turn-steps i { position: relative; flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / 14%); transition: background 0.2s; }
.turn-steps button:hover i { background: rgb(255 255 255 / 30%); }
.turn-steps i::after { content: ''; position: absolute; inset: 0; background: var(--tone); transform-origin: left; transform: scaleX(var(--done, 0)); }
.clip.turning .turn-steps i::after { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
/* The picture of the model that was, giving way to the next one's film (store.js). */
.clip-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.clip-frame.large .clip-still { position: fixed; inset: auto; z-index: 96; border-radius: var(--radius); }
.turn-steps + figcaption { margin-top: 6px; }
/* the clip of every trick beside the list of them: a row a trick, its name and keys, filling as its film runs */
.tricks { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.tricks-play { min-width: 0; }
.trick-list { display: grid; gap: 2px; }
.trick-list button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; padding: 4px 12px; overflow: hidden; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); text-align: left; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.trick-list button:hover { background: rgb(255 255 255 / 4%); color: var(--soft); }
.trick-list button.on { background: var(--surface-2); color: var(--text); }
.trick-list b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.trick-list .trick-keys { display: flex; align-items: center; gap: 4px; flex: none; font: 600 11px/1 var(--mono); }
.trick-list kbd { min-width: 20px; padding: 4px 5px 3px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--bg-deep); color: var(--soft); font: inherit; text-align: center; }
.trick-list button.on kbd { border-color: color-mix(in srgb, var(--tone) 60%, transparent); color: var(--text); }
.trick-list i { position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; overflow: hidden; border-radius: 1px; }
.trick-list i::after { content: ''; position: absolute; inset: 0; background: var(--tone); transform-origin: left; transform: scaleX(var(--done, 0)); }
.trick-list button:not(.on) i::after { transform: scaleX(0); }
.clip.turning .trick-list i::after { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }

/* The showroom: the clip of every model large, under a light in the colour of the one on show
   (--light, store.js), beside the list of them and its look. The light is a lit edge round the
   clip and a glow under it, in the game's modes (data-lights): its colour, through the rainbow
   (6 s a round, Config.Light.RgbPeriod), breathing (1.8 s, PulsePeriod), or off. */
@property --hue { syntax: '<number>'; inherits: true; initial-value: 0; }
.showroom { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
.showroom-play { min-width: 0; }
.showroom .clip-frame { border-color: rgb(0 0 0 / 50%); }
.showroom .clip-frame:hover { border-color: rgb(0 0 0 / 50%); }
/* (behind the clip by coming before it: a stacking context of its own here would keep the clip under the shade when it is up large) */
.glow { --lit: var(--light); position: absolute; inset: 0; pointer-events: none; transition: opacity 0.5s; }
.glow::before { content: ''; position: absolute; inset: -2px; border-radius: calc(var(--radius) + 2px); background: var(--lit); box-shadow: 0 0 42px -8px var(--lit); transition: background-color 0.6s, box-shadow 0.6s; }
.glow::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -46px; height: 84px; border-radius: 50%; background: var(--lit); filter: blur(42px); opacity: 0.55; transition: background-color 0.6s; }
.showroom[data-lights="rgb"] .glow { --lit: hsl(calc(var(--hue) * 1deg) 100% 60%); animation: rainbow 6s linear infinite; }
.showroom[data-lights="rgb"] .glow::before, .showroom[data-lights="rgb"] .glow::after { transition: none; }
.showroom[data-lights="pulse"] .glow { animation: breathe 1.8s ease-in-out infinite; }
.showroom[data-lights="off"] .glow { opacity: 0; }
@keyframes rainbow { to { --hue: 360; } }
@keyframes breathe { 50% { opacity: 0.18; } }
.showroom-side { display: grid; gap: 18px; }
.model-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
.model-list button { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 10px; overflow: hidden; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); text-align: left; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.model-list button:hover { background: rgb(255 255 255 / 4%); color: var(--soft); }
.model-list button.on { background: var(--surface-2); color: var(--text); }
.model-list b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch { flex: none; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--paint) 50%, var(--lit) 50%); box-shadow: 0 0 0 1px rgb(255 255 255 / 18%); }
.model-list button.on .swatch { box-shadow: 0 0 0 1px rgb(255 255 255 / 30%), 0 0 10px var(--lit); }
.model-list i { position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; overflow: hidden; border-radius: 1px; }
.model-list i::after { content: ''; position: absolute; inset: 0; background: var(--light); transform-origin: left; transform: scaleX(var(--done, 0)); }
.model-list button:not(.on) i::after { transform: scaleX(0); }
.clip.turning .model-list i::after { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.look { padding: 22px 22px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.look-of { font: 600 11.5px/1 var(--mono); letter-spacing: 0.16em; color: var(--light); text-transform: uppercase; transition: color 0.6s; }
.look h3 { margin-top: 10px; font-size: 40px; }
.look ul { display: grid; gap: 6px; margin-top: 14px; }
.look li { display: flex; align-items: center; gap: 10px; color: var(--soft); font-size: 15px; }
.look li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--light); transform: rotate(45deg); transition: background-color 0.6s; }
.look-paint { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.look-paint span { display: flex; align-items: center; gap: 10px; font: 600 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.look-paint i { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 255 255 / 20%); }
.look-paint b { margin-left: auto; font: 500 14px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--text); text-align: right; }
.look-spawn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 16px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-deep); color: var(--soft); text-align: left; transition: border-color 0.15s; }
.look-spawn:hover { border-color: var(--light); }
.look-spawn code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px/1.2 var(--mono); }
.look-spawn span { flex: none; font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.look-spawn.copied span { color: var(--success); }
.lights { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.lights-name { display: flex; align-items: center; gap: 7px; margin: 0 auto 0 7px; font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lights kbd { min-width: 20px; padding: 4px 5px 3px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--bg-deep); color: var(--soft); font: 600 11px/1 var(--mono); text-align: center; }
.lights button { min-height: 32px; padding: 0 11px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 600 13px/1 var(--font); transition: background-color 0.15s, color 0.15s; }
.lights button:hover { color: var(--text); }
.lights button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--light); }
.extras-switch {
    position: absolute; left: 14px; bottom: 14px; z-index: 1; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 8px 0 14px;
    border: 1px solid color-mix(in srgb, var(--light) 55%, transparent); border-radius: 99px; background: rgb(11 13 18 / 78%); color: var(--text);
    box-shadow: 0 0 22px -4px color-mix(in srgb, var(--light) 70%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    font-size: 14.5px; transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.2s var(--swift);
}
.extras-switch:hover { transform: translateY(-1px); border-color: var(--light); }
.extras-switch .icon { width: 17px; height: 17px; color: var(--light); transition: transform 0.4s var(--swift); }
.extras-switch b { font-weight: 650; white-space: nowrap; }
.extras-switch i { position: relative; flex: none; width: 40px; height: 24px; border-radius: 99px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); transition: background-color 0.25s; }
.extras-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform 0.3s var(--swift), background-color 0.25s; }
.extras-switch[aria-checked="true"] { background: color-mix(in srgb, var(--light) 22%, rgb(11 13 18 / 85%)); border-color: var(--light); box-shadow: 0 0 30px -2px color-mix(in srgb, var(--light) 80%, transparent); }
.extras-switch[aria-checked="true"] .icon { transform: rotate(45deg); }
.extras-switch[aria-checked="true"] i { background: color-mix(in srgb, var(--light) 40%, var(--surface-2)); }
.extras-switch[aria-checked="true"] i::after { transform: translateX(16px); background: var(--light); box-shadow: 0 0 10px var(--light); }
/* until it is first used, a ring runs out from it now and then, so it is not taken for a label */
.extras-switch:not(.used)::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--light); opacity: 0; animation: beckon 3.2s ease-out 1.5s infinite; pointer-events: none; }
@keyframes beckon { 0% { opacity: 0.9; transform: scale(1); } 45%, 100% { opacity: 0; transform: scale(1.22, 1.5); } }
.extras-list { display: none; margin-top: 8px; color: var(--soft); font-size: 13.5px; }
.showroom[data-extras] .extras-list { display: block; animation: rise-in 0.4s var(--swift); }
@keyframes rise-in { from { opacity: 0; transform: translateY(-4px); } }

/* The drift: its charge levels, in the colours of the game's sparks, beside the clip of it. */
.drift-wrap { align-items: center; }
.drift-levels { --spark-1: #ffc24a; --spark-2: #ff8a2a; --spark-3: #8fd8ff; display: grid; gap: 10px; margin-top: 26px; counter-reset: level; }
.drift-levels li { display: grid; grid-template-columns: 82px 1fr auto; align-items: baseline; gap: 14px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--soft); font-size: 14.5px; }
.drift-levels b { font: 900 20px/1 var(--display); text-transform: uppercase; color: var(--spark-1); }
.drift-levels li:nth-child(2) b { color: var(--spark-2); }
.drift-levels li:nth-child(3) b { color: var(--spark-3); }
.drift-levels span:last-child { font: 600 12.5px/1 var(--mono); color: var(--text); }
.clip-frame { position: relative; display: block; width: 100%; aspect-ratio: var(--ratio); padding: 0; overflow: hidden; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s; }
.clip-frame { cursor: zoom-in; }
.clip-frame:hover { border-color: var(--tone); }
.clip-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip-frame .icon { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: rgb(11 13 18 / 80%); border: 1px solid rgb(255 255 255 / 22%); opacity: 0; transition: opacity 0.15s; }
.clip-frame:hover .icon, .clip-frame:focus-visible .icon { opacity: 1; }
.clip-frame.large .icon { opacity: 0; }
/* What a clip shows, on the clip itself: the clips of one game look alike as stills. */
.clip-tag { position: absolute; left: 12px; top: 12px; padding: 7px 10px; border-radius: 6px; background: rgb(11 13 18 / 82%); border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent); font: 600 11.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }

/* A clip that is up large (store.js gives the video its place and moves it there): over a shade,
   with its line under it. */
.clip-frame.large video { position: fixed; z-index: 96; transform-origin: 0 0; border-radius: var(--radius); box-shadow: 0 40px 120px rgb(0 0 0 / 75%), 0 0 0 1px rgb(255 255 255 / 12%); cursor: zoom-out; }
.clip-shade { position: fixed; inset: 0; z-index: 95; background: rgb(4 5 8 / 84%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: zoom-out; }
.clip-note { position: fixed; left: 50%; z-index: 96; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); color: var(--soft); font-size: 16px; text-align: center; pointer-events: none; }
.clip figcaption { margin-top: 12px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.clip figcaption > b, .feature li b { color: var(--text); font-weight: 600; }

.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.feature { padding: 28px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.feature h3 { margin-bottom: 18px; font: 900 30px/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.feature ul { display: grid; gap: 13px; }
.feature li { display: flex; align-items: flex-start; gap: 12px; color: var(--soft); font-size: 15.5px; line-height: 1.5; }
.feature .icon { margin-top: 2px; color: var(--tone); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }

.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgb(18 21 28 / 94%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border-strong); animation: rise 0.25s ease-out; }
@keyframes rise { from { transform: translateY(100%); } }
.buy-bar-row { display: flex; align-items: center; gap: 16px; height: 74px; }
.buy-bar img { width: 96px; height: 54px; object-fit: cover; border-radius: 7px; }
.buy-bar-name { margin-right: auto; min-width: 0; }
.buy-bar-name b { display: block; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy-bar .price { font-size: 16px; min-height: 22px; }

/* ---- Home: how we work (the studio) ------------------------------------------ */

/* The steps on the left, the window on the right that plays them. Each scene is drawn at 800 × 500
   and scaled to the window (store.js sets --k). An element with data-at shows itself at its
   moment (store.js gives it .is-on); while the studio plays (.playing) it waits unseen until then.
   Without the script every scene stands as it ends, less what only passes by (data-until). */
.studio-band {
    background:
        radial-gradient(900px 520px at 88% 12%, rgb(47 107 255 / 15%), transparent 70%),
        radial-gradient(600px 420px at 0% 100%, rgb(47 107 255 / 8%), transparent 70%),
        var(--bg-deep);
    border-block: 1px solid var(--border);
}
.studio-band .section-head .lead { max-width: 40ch; }
.studio { display: grid; grid-template-columns: 318px minmax(0, 1fr); gap: 32px; align-items: start; }

.studio-steps { display: grid; gap: 8px; }
.studio-step {
    position: relative; display: flex; gap: 16px; padding: 18px 20px 20px; overflow: hidden; text-align: left;
    background: none; border: 1px solid transparent; border-radius: var(--radius); color: var(--muted);
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.studio-step:hover { color: var(--soft); background: rgb(255 255 255 / 2.5%); }
.studio-step.on { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
.studio-step .num { padding-top: 5px; font: 600 12px/1 var(--mono); letter-spacing: 0.16em; transition: color 0.3s; }
.studio-step.on .num { color: var(--accent-text); }
.studio-step-text { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows 0.55s var(--swift); }
.studio-step.on .studio-step-text { grid-template-rows: auto 1fr; }
.studio-step b { font: 900 26px/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.studio-step-text > span { min-height: 0; overflow: hidden; font-size: 14.5px; line-height: 1.5; color: var(--muted); opacity: 0; transition: opacity 0.4s; }
.studio-step-text > span::before { content: ''; display: block; height: 9px; }
.studio-step.on .studio-step-text > span { opacity: 1; transition-delay: 0.12s; }
.studio-step > i { position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / 7%); opacity: 0; transition: opacity 0.3s; }
.studio-step.on > i { opacity: 1; }
.studio-step > i::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--done, 0)); }

.studio-window {
    overflow: hidden; border-radius: 16px; border: 1px solid var(--border-strong); background: #0d0f14;
    box-shadow: 0 60px 110px -40px rgb(0 0 0 / 85%), 0 0 140px -40px rgb(47 107 255 / 40%);
}
.studio-bar { display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 14px; background: #12151c; border-bottom: 1px solid var(--border); }
.studio-dots { display: flex; gap: 7px; width: 70px; }
.studio-dots i { width: 11px; height: 11px; border-radius: 50%; background: #2a2f3c; }
.studio-dots i:first-child { background: #e0575a; }
.studio-dots i:nth-child(2) { background: #d9a53b; }
.studio-dots i:last-child { background: #3fb950; }
.studio-title { flex: 1; min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font: 600 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.studio-live { display: flex; align-items: center; justify-content: flex-end; gap: 7px; width: 70px; font: 600 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.studio-live i { width: 7px; height: 7px; border-radius: 50%; background: #f2706f; box-shadow: 0 0 0 0 rgb(242 112 111 / 60%); animation: live 1.8s ease-out infinite; }
.studio.held .studio-live i { background: var(--muted); animation: none; }
@keyframes live { 70%, 100% { box-shadow: 0 0 0 7px rgb(242 112 111 / 0%); } }
.studio-screen { position: relative; aspect-ratio: 8 / 5; overflow: hidden; }
.studio-canvas { position: absolute; left: 0; top: 0; width: 800px; height: 500px; transform-origin: 0 0; scale: var(--k, 1); font: 12px/1.4 var(--font); }
.studio-canvas h5 { margin: 0; }

.scene { position: absolute; inset: 0; display: grid; overflow: hidden; opacity: 0; visibility: hidden; scale: 1.02; transition: opacity 0.4s ease, visibility 0s 0.4s, scale 0.6s var(--swift); }
.scene.on { opacity: 1; visibility: visible; scale: 1; transition: opacity 0.5s ease 0.1s, visibility 0s, scale 0.8s var(--swift) 0.1s; }
.scene:not(.on) * { transition: none !important; }
.studio:not(.playing) [data-until] { display: none !important; }
.dim { color: #5c6273; }

/* a key being pressed, as screencasts show them */
.key {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 5px; border-radius: 9px;
    background: rgb(11 13 18 / 82%); border: 1px solid rgb(255 255 255 / 12%); backdrop-filter: blur(6px);
    font: 600 11.5px/1 var(--font); color: var(--soft); white-space: nowrap;
    transition: opacity 0.25s, translate 0.45s var(--swift), scale 0.45s var(--swift);
}
.key kbd { min-width: 24px; padding: 5px 7px 4px; border: 1px solid #3a4152; border-bottom-width: 2px; border-radius: 6px; background: #1a1e28; color: #fff; font: 700 11px/1 var(--mono); text-align: center; }
.playing .key:not(.is-on) { opacity: 0; translate: 0 8px; scale: 0.94; }
.keys { position: absolute; left: 12px; bottom: 12px; display: grid; }
.keys .key { grid-area: 1 / 1; justify-self: start; }

.pop { transition: opacity 0.35s, translate 0.5s var(--swift); }
.playing .pop:not(.is-on) { opacity: 0; translate: -8px 0; }
.line.is-on { animation: line-in 0.3s ease-out; }
.playing .line:not(.is-on) { display: none; }
@keyframes line-in { from { opacity: 0; translate: 0 4px; } }

/* Blender */
.sc-model { grid-template: 26px 1fr 78px / 36px 1fr 214px; background: #16181d; color: #b9bdc7; }
.bl-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 10px; background: #1f2128; border-bottom: 1px solid #0c0d10; font-size: 11px; }
.bl-logo { width: 15px; height: 15px; fill: none; stroke: #f0903a; stroke-width: 2.2; stroke-linecap: round; }
.bl-ws { display: flex; gap: 2px; margin-left: 22px; }
.bl-ws span { padding: 4px 10px; border-radius: 5px; color: #8c91a0; transition: background-color 0.3s, color 0.3s; }
.bl-ws span.is-on { background: #30343f; color: #fff; }
.bl-tools { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 10px; background: #1b1d23; border-right: 1px solid #0c0d10; }
.bl-tools i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #262932; transition: background-color 0.25s; }
.bl-tools i::after { content: ''; width: 10px; height: 10px; border: 1.5px solid #8c91a0; border-radius: 2px; }
.bl-tools i:nth-child(2n)::after { border-radius: 50%; }
.bl-tools i.is-on { background: #4772b3; }
.bl-tools i.is-on::after { border-color: #fff; }
.bl-view { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, #2b2f3a, #18191e); }
.bl-grid {
    position: absolute; inset: 0; width: 100%; height: 100%; stroke: rgb(255 255 255 / 9%); stroke-width: 1;
    -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 82%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 62% 70% at 50% 82%, #000 30%, transparent 80%);
}
.bl-grid .y { stroke: rgb(130 200 90 / 55%); stroke-width: 1.4; }
.bl-glow { position: absolute; inset: 0; background: radial-gradient(34% 50% at 50% 54%, rgb(239 230 207 / 16%), transparent 70%); opacity: 0; transition: opacity 1.2s; }
.bl-glow.is-on { opacity: 1; }
.bl-piece { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bl-axis { stroke: rgb(230 80 80 / 55%); stroke-width: 1.4; }
.bl-shadow { fill: rgb(0 0 0 / 55%); filter: blur(7px); opacity: 0; transition: opacity 0.9s; }
.bl-shadow.is-on { opacity: 1; }
.bl-back { fill: none; stroke: rgb(200 210 230 / 22%); stroke-width: 0.8; }
.bl-front { fill: none; stroke: rgb(235 240 250 / 80%); stroke-width: 0.9; }
.bl-edge { fill: none; stroke: #f5a742; stroke-width: 1.8; stroke-linejoin: round; }
.bl-verts rect { fill: #f5a742; }
.bl-solid { transition: filter 1.2s; }
.bl-piece.rendered .bl-solid { filter: drop-shadow(0 0 22px rgb(239 230 207 / 28%)); }
.bl-head { position: absolute; left: 10px; top: 9px; display: flex; align-items: center; gap: 10px; font-size: 11px; }
.bl-mode b { padding: 4px 9px; border-radius: 5px; background: #2c2f39; color: #e8eaf0; font-weight: 600; }
.playing .bl-mode b:not(.is-on) { display: none; }
.bl-stats { position: absolute; left: 10px; top: 34px; font: 10.5px/1.5 var(--mono); color: #8c91a0; }
.bl-gizmo { position: absolute; right: 14px; top: 12px; width: 62px; height: 62px; }
.bl-gizmo i { position: absolute; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 9.5px/1 var(--font); font-style: normal; color: #111; }
.bl-gizmo .x { left: 42px; top: 30px; background: #e65050; }
.bl-gizmo .y { left: 30px; top: 6px; background: #82c85a; }
.bl-gizmo .z { left: 12px; top: 2px; background: #4d86ff; }
.bl-gizmo::before { content: ''; position: absolute; left: 20px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: rgb(255 255 255 / 5%); }
.bl-frame { position: absolute; left: 150px; top: 72px; width: 250px; height: 290px; border: 1px dashed rgb(245 167 66 / 70%); border-radius: 3px; opacity: 0; transition: opacity 0.4s; }
.bl-frame.is-on { opacity: 1; }
.bl-frame.is-on::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgb(245 167 66 / 18%) 50%, transparent); background-size: 100% 40%; background-repeat: no-repeat; animation: scan 0.8s ease-in-out forwards; }
@keyframes scan { from { background-position: 0 -60%; } to { background-position: 0 160%; } }
.bl-frame > span { position: absolute; left: -1px; bottom: 100%; margin-bottom: 4px; font: 600 10px/1 var(--mono); color: #f5a742; white-space: nowrap; }
.bl-frame > b { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; border-radius: 4px; background: #f5a742; color: #1a1206; font: 700 10px/1 var(--mono); transition: opacity 0.3s; }
.playing .bl-frame > b:not(.is-on) { opacity: 0; }
.bl-side { padding: 6px 10px; overflow: hidden; background: #1b1d23; border-left: 1px solid #0c0d10; }
.bl-side h5 { margin: 8px 0 6px; font: 600 9.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #6f7484; }
.bl-tree li { display: flex; align-items: center; gap: 8px; padding: 4px 7px; border-radius: 4px; font-size: 11.5px; }
.bl-tree li.sub { padding-left: 24px; }
.bl-tree li.pop:not(.sub) { background: #2a3550; color: #fff; }
.bl-tree i { width: 10px; height: 10px; border-radius: 2px; }
.bl-tree .cam { background: #7d8597; }
.bl-tree .lamp { background: #e3c06a; border-radius: 50%; }
.bl-tree .mesh { background: #f5a742; }
.bl-tree .mat { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #efe6cf 45%, #8d8370); }
.bl-mod, .bl-mat { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; padding: 6px 8px; border-radius: 5px; background: #23262e; color: #d7dae2; font-size: 11.5px; }
.bl-mod i { width: 8px; height: 8px; border-radius: 2px; background: #4d86ff; }
.bl-mod span { margin-left: auto; color: #7d8292; font-size: 10.5px; }
.bl-mat .swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--c, #8a8f9a); box-shadow: inset -3px -3px 6px rgb(0 0 0 / 35%); }
.bl-mat b { font-weight: 500; }
.playing .bl-mat b:not(.is-on) { display: none; }
.bl-slider { position: relative; height: 21px; margin-top: 5px; overflow: hidden; border-radius: 4px; background: #2a2d36; font-size: 10.5px; }
.bl-slider span { position: relative; z-index: 1; padding-left: 8px; line-height: 21px; }
.bl-slider i { position: absolute; inset: 0; background: #4772b3; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--swift); }
.bl-slider.is-on i { transform: scaleX(var(--to)); }
.bl-time { position: relative; grid-column: 1 / -1; padding: 0 16px 0 52px; background: #1b1d23; border-top: 1px solid #0c0d10; }
.bl-time::before { content: 'Queen'; position: absolute; left: 10px; top: 34px; font-size: 10.5px; color: #8c91a0; }
.bl-ruler { position: relative; height: 22px; border-bottom: 1px solid #2a2d36; }
.bl-ruler span { position: absolute; left: calc(var(--at) * 100%); top: 6px; translate: -50% 0; font: 10px/1 var(--mono); color: #6f7484; }
.bl-keys { position: relative; height: 54px; }
.bl-keys i { position: absolute; left: calc(var(--at) * 100%); top: 13px; width: 9px; height: 9px; translate: -50% 0; rotate: 45deg; background: #e3c06a; border: 1px solid #0c0d10; transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.playing .bl-keys i:not(.is-on) { scale: 0; }
.bl-playhead { position: absolute; top: 0; bottom: 0; left: calc(52px + (100% - 68px) * var(--t, 1)); width: 2px; translate: -1px 0; background: #4d86ff; }
.bl-playhead::before { content: ''; position: absolute; left: -6px; top: 3px; width: 14px; height: 15px; border-radius: 3px; background: #4d86ff; }

/* Visual Studio Code */
.sc-code { grid-template: 1fr 22px / 42px 168px minmax(0, 1fr); background: #0f1117; color: #c9ccd4; }
.vs-act { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 14px; background: #0b0d12; border-right: 1px solid #1b1f29; }
.vs-act i { position: relative; width: 19px; height: 19px; border: 2px solid #4b5163; border-radius: 5px; }
.vs-act i:nth-child(2) { border-radius: 50%; }
.vs-act i.on { border-color: #e8eaf0; }
.vs-act i.on::before { content: ''; position: absolute; left: -14px; top: -6px; bottom: -6px; width: 2px; background: #e8eaf0; }
.vs-tree { padding: 10px 0; background: #12151c; border-right: 1px solid #1b1f29; font-size: 12px; }
.vs-tree h5 { padding: 0 14px; font: 600 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #7b8194; }
.vs-tree p { padding: 12px 14px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.vs-tree li { display: flex; align-items: center; gap: 7px; padding: 2px 14px; color: #aab0bf; }
.vs-tree li.in { padding-left: 30px; }
.vs-tree li.dir::before { content: '▾'; width: 8px; font-size: 10px; color: #7b8194; }
.vs-tree li.shut::before { content: '▸'; }
.vs-tree li.lua::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #5b7cff; }
.vs-tree li.on { background: #1d2433; color: #fff; box-shadow: inset 2px 0 0 var(--accent); }
.vs-main { display: grid; grid-template-rows: 32px 24px 1fr 142px; min-width: 0; }
.vs-tabs { display: flex; background: #0b0d12; }
.vs-tabs span { display: flex; align-items: center; gap: 9px; padding: 0 16px; border-right: 1px solid #1b1f29; color: #7b8194; font-size: 12px; }
.vs-tabs span.on { background: #0f1117; color: #fff; box-shadow: inset 0 1px 0 var(--accent); }
.vs-tabs i { width: 8px; height: 8px; border-radius: 50%; background: #c9ccd4; transition: opacity 0.2s; }
.playing .vs-tabs i:not(.is-on) { opacity: 0; }
.vs-crumbs { display: flex; align-items: center; gap: 6px; padding: 0 18px; color: #7b8194; font-size: 11.5px; }
.vs-crumbs b { font-weight: 400; color: #4b5163; }
.vs-crumbs span { color: #dcdcaa; }
.vs-editor { position: relative; overflow: hidden; font: 12.5px/18px var(--mono); }
.vs-now { position: absolute; left: 0; right: 0; top: calc(4px + var(--line, 0) * 18px); height: 18px; background: rgb(255 255 255 / 3.5%); border-block: 1px solid rgb(255 255 255 / 4%); }
.studio:not(.playing) .vs-now { display: none; }
.vs-nums { position: absolute; left: 0; top: 4px; width: 42px; text-align: right; color: #4b5163; }
.vs-nums span { position: relative; display: block; }
.vs-nums span.on { color: #c9ccd4; }
/* the lines this change has added, marked in the gutter as git does */
.vs-nums span::after { content: ''; position: absolute; left: 50px; width: 3px; height: 18px; background: #2ea043; opacity: 0; }
.vs-nums span.added::after { opacity: 0.85; }
/* indent guides, the one of the block the cursor is in brighter */
.vs-guide { position: absolute; width: 1px; background: #343b4c; }
.vs-guide.on { background: #6b7489; }
.vs-code { position: absolute; left: 60px; right: 74px; top: 4px; margin: 0; overflow: hidden; font: inherit; white-space: pre; }
.vs-code .k { color: #c586c0; }
.vs-code .s { color: #ce9178; }
.vs-code .c { color: #6a9955; font-style: italic; }
.vs-code .f { color: #dcdcaa; }
.vs-code .n { color: #b5cea8; }
.vs-code .g { color: #4ec9b0; }
.vs-code .p { color: #9cdcfe; }
/* brackets coloured by how deep they are nested */
.vs-code .b0 { color: #ffd700; }
.vs-code .b1 { color: #da70d6; }
.vs-code .b2 { color: #179fff; }
.caret { display: inline-block; width: 2px; height: 16px; margin: 0 -1px -3px; background: #aec2ff; }
.caret.idle { animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.vs-suggest { position: absolute; z-index: 2; left: calc(var(--col) * 1ch); top: calc((var(--line) + 1) * 18px + 2px); width: 290px; padding: 3px; background: #161a23; border: 1px solid #2a3040; border-radius: 6px; box-shadow: 0 14px 30px rgb(0 0 0 / 50%); font-size: 12px; white-space: nowrap; }
.vs-suggest p { display: flex; align-items: center; gap: 8px; padding: 2px 8px; border-radius: 4px; color: #c9ccd4; }
.vs-suggest p.on { background: #1d3a7a; color: #fff; }
.vs-suggest p i { width: 11px; height: 11px; border-radius: 2px; background: #b180d7; }
.vs-suggest p b { color: #7aa7ff; font-weight: 700; }
.vs-suggest p small { margin-left: auto; color: #7b8194; font-size: 10.5px; }
.vs-mini { position: absolute; right: 12px; top: 6px; width: 56px; }
.vs-mini i { display: block; height: 2px; margin-bottom: 1.6px; border-radius: 1px; background: #8a90a0; opacity: 0.5; }
.vs-mini i.c { background: #6a9955; }
.vs-save { position: absolute; right: 80px; bottom: 12px; }
.vs-panel { padding: 0 18px; overflow: hidden; background: #0d0f14; border-top: 1px solid #1b1f29; font: 11.5px/1.6 var(--mono); }
.vs-panel-tabs { display: flex; gap: 20px; height: 32px; align-items: center; font: 600 10.5px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: #7b8194; }
.vs-panel-tabs .on { padding-block: 10px 9px; color: #fff; box-shadow: inset 0 -1px 0 var(--accent); }
.vs-term b { color: #3fb950; font-weight: 600; }
.vs-term .tag { color: #7aa7ff; white-space: pre; }
.vs-term .tag.ok { color: #3fb950; }
.vs-status { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 0 12px; background: var(--accent); color: #fff; font-size: 11px; }
.vs-status .right { margin-left: auto; }

/* FiveM, two clients and the test run */
.sc-test { grid-template: 1fr 112px / minmax(0, 1fr) 252px; grid-template-areas: 'game tests' 'console resmon'; background: #0b0d12; color: #c9ccd4; }
.qa-game { grid-area: game; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.qa-client { position: relative; overflow: hidden; border: 1px solid #232838; border-radius: 9px; background: linear-gradient(180deg, #172036 0%, #2c2541 38%, #5a3a3e 58%, #1d1a22 59%, #121318 100%); }
.qa-client::before {
    content: ''; position: absolute; left: 0; right: 0; top: 34%; height: 25%; background: #0f1016;
    clip-path: polygon(0 70%, 6% 70%, 6% 30%, 12% 30%, 12% 55%, 18% 55%, 18% 10%, 23% 10%, 23% 45%, 30% 45%, 30% 62%, 36% 62%, 36% 22%, 41% 0, 46% 22%, 46% 50%, 54% 50%, 54% 35%, 60% 35%, 60% 64%, 66% 64%, 66% 18%, 72% 18%, 72% 52%, 79% 52%, 79% 30%, 85% 30%, 85% 66%, 92% 66%, 92% 40%, 100% 40%, 100% 100%, 0 100%);
}
.qa-client::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 72%, rgb(255 200 120 / 14%), transparent 70%); pointer-events: none; }
.qa-label { position: absolute; left: 8px; top: 8px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; background: rgb(0 0 0 / 55%); font: 600 9.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #d8dbe4; }
.qa-label i { width: 6px; height: 6px; border-radius: 50%; background: #3fb950; }
.qa-table { position: absolute; inset: 30px 0 0; z-index: 1; display: grid; place-items: center; perspective: 640px; }
.qa-board {
    position: relative; width: 224px; aspect-ratio: 1; transform: rotateX(40deg) translateY(-8px); transform-style: preserve-3d; border-radius: 2px;
    background: conic-gradient(#8a6646 25%, #e9dfc8 0 50%, #8a6646 0 75%, #e9dfc8 0) 0 0 / 25% 25%;
    box-shadow: 0 0 0 8px #3b2a1c, 0 0 0 9px #0b0b0d, 0 40px 50px rgb(0 0 0 / 70%);
}
/* the squares the last move went between */
.qa-board::before, .qa-board::after { content: ''; position: absolute; width: 12.5%; height: 12.5%; background: rgb(255 214 90 / 45%); opacity: var(--moved, 0); transition: left 0.4s var(--swift), bottom 0.4s var(--swift); }
.qa-board::before { left: calc(var(--af, 0) * 12.5%); bottom: calc(var(--ar, 0) * 12.5%); }
.qa-board::after { left: calc(var(--bf, 0) * 12.5%); bottom: calc(var(--br, 0) * 12.5%); }
.qa-board.flip::before { left: calc((7 - var(--af, 0)) * 12.5%); bottom: calc((7 - var(--ar, 0)) * 12.5%); }
.qa-board.flip::after { left: calc((7 - var(--bf, 0)) * 12.5%); bottom: calc((7 - var(--br, 0)) * 12.5%); }
.pc {
    position: absolute; z-index: 1; left: calc(var(--f) * 12.5%); bottom: calc(var(--r) * 12.5%); width: 12.5%; height: 12.5%;
    display: grid; place-items: center; transform: rotateX(-40deg); transform-origin: 50% 85%;
    font: 24px/1 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', serif; font-style: normal;
    transition: left 0.5s var(--swift), bottom 0.5s var(--swift);
}
.flip .pc { left: calc((7 - var(--f)) * 12.5%); bottom: calc((7 - var(--r)) * 12.5%); }
.pc.w { color: #f7f1e3; text-shadow: 0 1px 0 #6b5a40, 0 0 3px rgb(0 0 0 / 80%); }
.pc.b { color: #18191d; text-shadow: 0 0 1px #d8c8a6, 0 1px 0 #a8987a; }
.qa-no { position: absolute; left: calc(var(--f) * 12.5%); bottom: calc(var(--r) * 12.5%); width: 12.5%; height: 12.5%; background: rgb(242 80 80 / 55%); box-shadow: inset 0 0 0 2px #f25050; transition: opacity 0.2s; }
.playing .qa-no:not(.is-on) { opacity: 0; }
.qa-pill { position: absolute; right: 8px; top: 8px; z-index: 2; padding: 5px 8px; border-radius: 5px; background: rgb(18 60 30 / 85%); border: 1px solid rgb(63 185 80 / 55%); color: #8fe39b; font: 600 9.5px/1 var(--mono); letter-spacing: 0.04em; transition: opacity 0.25s, translate 0.4s var(--swift); }
.qa-pill.bad { background: rgb(70 18 20 / 85%); border-color: rgb(242 112 111 / 60%); color: #ff9b9a; }
.playing .qa-pill:not(.is-on) { opacity: 0; translate: 0 -6px; }
.qa-tests { grid-area: tests; padding: 14px 16px; background: #10131a; border-left: 1px solid #1d2230; }
.qa-tests h5 { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; font: 700 13px/1 var(--font); color: #e8eaf0; }
.qa-tests h5 span { font: 500 10px/1 var(--mono); color: #7b8194; }
.qa-tests li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #1a1e29; font-size: 11.5px; color: #6b7180; transition: color 0.3s; }
.qa-tests li i { position: relative; flex: none; width: 15px; height: 15px; border: 1.5px solid #3a4152; border-radius: 50%; }
.qa-tests li.is-run { color: #e8eaf0; }
.qa-tests li.is-run i { border-color: #7aa7ff; border-right-color: transparent; animation: spin 0.7s linear infinite; }
.qa-tests li.is-on i { border: 0; background: #2ea043; animation: none; }
.qa-tests li.is-on i::after { content: ''; position: absolute; left: 5px; top: 2.5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.8px 1.8px 0; rotate: 45deg; }
.qa-tests li b { margin-left: auto; font: 600 10px/1 var(--mono); color: #8fe39b; opacity: 0; transition: opacity 0.3s; }
.qa-tests li.is-on b { opacity: 1; }
@keyframes spin { to { rotate: 360deg; } }
.qa-sum { margin-top: 12px; padding: 9px 11px; border-radius: 7px; background: rgb(46 160 67 / 14%); border: 1px solid rgb(63 185 80 / 45%); color: #8fe39b; font-size: 12px; transition: opacity 0.4s, translate 0.5s var(--swift); }
.qa-sum b { color: #fff; }
.playing .qa-sum:not(.is-on) { opacity: 0; translate: 0 6px; }
.qa-console { grid-area: console; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 14px; overflow: hidden; background: #07080c; border-top: 1px solid #1d2230; font: 10.5px/1.65 var(--mono); color: #aab0bf; }
.qa-console > .dim { position: absolute; z-index: 1; right: 0; top: 0; padding: 7px 12px 4px; background: #07080c; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.qa-console .tag { color: #e3a33f; }
.qa-console .bad { color: #ff8e8d; }
.qa-console .good { color: #8fe39b; }
.qa-resmon { grid-area: resmon; padding: 9px 14px; background: #0d1016; border-top: 1px solid #1d2230; border-left: 1px solid #1d2230; }
.qa-resmon h5 { display: flex; justify-content: space-between; font: 600 9.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #7b8194; }
.qa-resmon h5 span { letter-spacing: 0; text-transform: none; }
.qa-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; margin: 8px 0 6px; font: 11px/1 var(--mono); }
.qa-row b { color: #e8eaf0; font-weight: 600; }
.qa-row span:first-of-type { color: #8fe39b; }
.qa-resmon svg { display: block; width: 100%; height: 50px; }
.qa-area { fill: rgb(47 107 255 / 18%); }
.qa-line { fill: none; stroke: #7aa7ff; stroke-width: 1.4; vector-effect: non-scaling-stroke; }

/* GitBook */
.sc-docs { grid-template: 44px minmax(0, 1fr) / 196px minmax(0, 1fr) 156px; background: #111318; color: #d4d8e1; }
.gb-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #0d0f13; border-bottom: 1px solid #22262f; font-size: 12px; }
.gb-logo { width: 18px; height: 18px; fill: none; stroke: var(--accent-text); stroke-width: 1.8; stroke-linejoin: round; }
.gb-top > b { color: #fff; font-size: 12.5px; }
.gb-cr { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 5px 6px 5px 10px; border: 1px solid #2a2f3a; border-radius: 7px; color: #aab0bf; font-size: 11px; }
.gb-cr > i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid #8b92a3; }
.gb-cr em { padding: 2px 7px; border-radius: 4px; background: #262b36; color: #c9ccd4; font: 600 10px/1.3 var(--font); font-style: normal; }
.gb-cr em.ok { background: rgb(46 160 67 / 18%); color: #8fe39b; }
.playing .gb-cr em:not(.is-on) { display: none; }
.gb-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 9.5px/1 var(--font); }
.gb-merge { padding: 7px 14px; border-radius: 7px; background: var(--accent); color: #fff; font-weight: 600; font-size: 11.5px; transition: background-color 0.3s, color 0.3s; }
.gb-merge.is-run { background: #262b36; color: #8b92a3; animation: press 0.3s ease-out; }
@keyframes press { 40% { scale: 0.92; } }
.gb-side { padding: 12px 10px; overflow: hidden; background: #0d0f13; border-right: 1px solid #22262f; font-size: 12px; }
.gb-search { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding: 7px 10px; border: 1px solid #2a2f3a; border-radius: 7px; color: #6b7180; }
.gb-search kbd { font: 600 9.5px/1 var(--mono); color: #8b92a3; }
.gb-group { margin: 0 8px 6px; font: 700 10px/1 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: #6b7180; }
.gb-side li { display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 5px; color: #9aa1b2; }
.gb-side li.shut::after, .gb-side li.open::after { content: '›'; margin-left: auto; color: #5c6273; }
.gb-side li.open { color: #fff; font-weight: 600; }
.gb-side li.open::after { rotate: 90deg; }
.gb-side li.in { margin-left: 10px; padding-left: 12px; border-left: 1px solid #262b36; border-radius: 0 5px 5px 0; }
.gb-side li.on { background: rgb(47 107 255 / 14%); border-left-color: var(--accent); color: #fff; }
.gb-side li i { margin-left: auto; padding: 1px 5px; border-radius: 4px; background: var(--accent); color: #fff; font: 700 8.5px/1.4 var(--font); font-style: normal; text-transform: uppercase; }
.gb-page { position: relative; padding: 18px 34px 0; overflow: hidden; }
.gb-crumbs { margin-bottom: 8px; font-size: 11px; color: #6b7180; }
.gb-crumbs b { font-weight: 400; color: #4b5163; }
.gb-title { min-height: 34px; margin: 0 0 8px; font: 800 26px/1.3 var(--font); letter-spacing: -0.02em; color: #fff; }
.gb-title.blank::before { content: attr(data-empty); color: #3d4352; }
.gb-text { min-height: 42px; font-size: 13px; line-height: 1.62; color: #c4c9d4; }
[data-type].typing::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin: 0 0 -0.18em 1px; background: var(--accent-text); }
.gb-h { margin: 12px 0 2px; font: 700 15.5px/1.4 var(--font); color: #fff; }
.fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.5s var(--swift), opacity 0.35s ease 0.05s; }
.fold > div { min-height: 0; overflow: hidden; }
.playing .fold:not(.is-on) { grid-template-rows: 0fr; opacity: 0; }
.gb-hint { display: flex; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 7px; background: rgb(47 107 255 / 10%); border: 1px solid rgb(47 107 255 / 35%); font-size: 12.5px; line-height: 1.5; color: #c9d6ff; }
.gb-hint > i { position: relative; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--accent); }
.gb-hint > i::after { content: 'i'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: italic 700 10px/1 Georgia, serif; }
.gb-hint code { padding: 1px 5px; border-radius: 4px; background: rgb(0 0 0 / 35%); font: 11.5px/1.4 var(--mono); color: #fff; }
.gb-code { margin-top: 8px; overflow: hidden; border-radius: 7px; border: 1px solid #262b36; background: #0b0d11; }
.gb-code > p { display: flex; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid #1d2129; font: 600 10px/1.2 var(--mono); color: #8b92a3; }
.gb-code pre { min-height: 66px; margin: 0; padding: 9px 12px 10px; font: 11.5px/1.55 var(--mono); color: #c9ccd4; white-space: pre; }
.gb-code .p { color: #9cdcfe; }
.gb-code .s { color: #ce9178; }
.gb-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.gb-cards span { overflow: hidden; padding-bottom: 6px; border: 1px solid #262b36; border-radius: 7px; background: #161920; font-size: 11px; font-weight: 600; text-transform: capitalize; text-align: center; }
.gb-cards i { display: block; height: 30px; margin-bottom: 6px; background: linear-gradient(135deg, var(--a), var(--b)); }
.gb-slot { position: relative; z-index: 3; margin-top: 10px; font-size: 13px; line-height: 1.6; }
.playing .gb-slot:not(.is-on) { display: none; }
.gb-slash { margin-right: 6px; color: #fff; }
.gb-menu { position: absolute; left: 0; top: 26px; width: 210px; padding: 5px; border-radius: 9px; background: #1a1e27; border: 1px solid #2c3240; box-shadow: 0 18px 40px rgb(0 0 0 / 55%); font-size: 12px; }
.gb-slot.is-on .gb-menu { animation: menu-in 0.25s var(--swift); }
@keyframes menu-in { from { opacity: 0; translate: 0 -4px; } }
.gb-menu p { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 5px; color: #c4c9d4; }
.gb-menu p.gb-menu-head { padding: 3px 8px 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7180; }
.gb-menu p.is-on { background: rgb(47 107 255 / 22%); color: #fff; }
.gb-ico { width: 16px; height: 16px; border-radius: 4px; border: 1px solid #3a4152; background: #22262f; }
.gb-ico.hint { background: rgb(47 107 255 / 35%); border-color: var(--accent); }
.gb-ico.code { background: #0b0d11; }
.gb-page .keys { left: auto; right: 16px; bottom: 14px; }
.gb-page .keys .key { justify-self: end; }
.gb-toast { position: absolute; right: 16px; top: 12px; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 9px; border-radius: 8px; background: #16241b; border: 1px solid rgb(63 185 80 / 45%); color: #8fe39b; font-size: 11.5px; box-shadow: 0 12px 30px rgb(0 0 0 / 50%); transition: opacity 0.3s, translate 0.5s var(--swift); }
.gb-toast b { color: #fff; font-weight: 600; }
.gb-toast i { position: relative; width: 15px; height: 15px; border-radius: 50%; background: #2ea043; }
.gb-toast i::after { content: ''; position: absolute; left: 5px; top: 2.5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.7px 1.7px 0; rotate: 45deg; }
.playing .gb-toast:not(.is-on) { opacity: 0; translate: 0 -10px; }
.gb-outline { position: relative; padding: 18px 14px; border-left: 1px solid #1d2129; font-size: 11.5px; }
.gb-outline .gb-group { margin: 0 0 10px; }
.gb-outline > p:not(.gb-group) { padding: 3px 0 3px 10px; border-left: 2px solid #262b36; color: #8b92a3; }
.gb-outline > p.sub { padding-left: 20px; }
.gb-outline > p.on { border-left-color: var(--accent); color: #fff; }
.gb-meta { position: absolute; left: 14px; right: 14px; bottom: 16px; display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid #1d2129; font-size: 10.5px; color: #8b92a3; }
.gb-meta b { color: #c9ccd4; font-weight: 600; }
.gb-meta .ok { color: #8fe39b; }
.playing .gb-meta p[data-at]:not(.is-on) { display: none; }

/* Discord */
.sc-support { grid-template: minmax(0, 1fr) / 64px 186px minmax(0, 1fr); background: #15171d; color: #dbdee1; }
.dc-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 12px; background: #0b0d12; }
.dc-rail span { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #1c1f27; color: #aab0bf; font: 700 12px/1 var(--font); }
.dc-rail span.on { border-radius: 14px; background: var(--accent); color: #fff; }
.dc-rail span.on::before { content: ''; position: absolute; left: -12px; width: 4px; height: 36px; border-radius: 0 4px 4px 0; background: #fff; }
.dc-rail .add { color: #3fb950; font-size: 20px; font-weight: 400; }
.dc-rail .mark { width: 22px; height: 22px; }
.dc-rail hr { width: 26px; margin: 2px 0; border: 0; border-top: 2px solid #1f232d; }
.dc-side { position: relative; padding: 0 8px; background: #11131a; }
.dc-side h5 { display: flex; align-items: center; height: 46px; margin: 0 -8px 6px; padding: 0 14px; border-bottom: 1px solid #0b0d12; font: 700 13px/1 var(--font); color: #fff; }
.dc-cat { margin: 14px 8px 5px; font: 700 10px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: #7b8194; }
.dc-ch { padding: 5px 8px; border-radius: 5px; color: #7b8194; font-size: 12.5px; }
.dc-ch.on { background: #1f2430; color: #fff; }
.dc-me { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 10px; background: #0d0f14; }
.dc-me p { display: grid; gap: 2px; min-width: 0; }
.dc-me b { font-size: 12px; line-height: 1.1; color: #fff; }
.dc-me i { font-style: normal; font-size: 10px; line-height: 1.1; color: #7b8194; }
.dc-av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: #fff; font: 700 14px/1 var(--font); }
.dc-av.m { background: linear-gradient(135deg, #f0b21c, #e2622c); }
.dc-av.oc { background: var(--accent); }
.dc-av .mark { width: 18px; height: 18px; }
.dc-me .dc-av { position: relative; width: 30px; height: 30px; }
.dc-me .dc-av::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: #3fb950; box-shadow: 0 0 0 3px #0d0f14; }
.dc-me .dc-av .mark { width: 15px; height: 15px; }
.dc-chat { display: grid; grid-template-rows: 46px minmax(0, 1fr) auto; min-width: 0; }
.dc-head { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid #0b0d12; }
.dc-head b { color: #fff; font-size: 13.5px; }
.dc-head span { padding-left: 12px; border-left: 1px solid #2a2f3b; color: #7b8194; font-size: 12px; }
.dc-log { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 18px 4px; overflow: hidden; }
.dc-msg { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.5s var(--swift), opacity 0.4s ease 0.05s; }
.dc-msg > div { min-height: 0; overflow: hidden; }
.playing .dc-msg:not(.is-on) { grid-template-rows: 0fr; opacity: 0; }
.dc-body { position: relative; padding: 9px 0 9px 48px; }
.dc-body > .dc-av { position: absolute; left: 0; top: 12px; }
.dc-who { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.dc-who b { color: #fff; font-size: 13px; }
.dc-who b.team { color: var(--accent-text); }
.dc-who em { padding: 2px 5px; border-radius: 4px; background: var(--accent); color: #fff; font: 700 9px/1.2 var(--font); font-style: normal; letter-spacing: 0.05em; }
.dc-who i { font-style: normal; font-size: 10.5px; color: #6b7180; }
.dc-body > p { font-size: 12.5px; line-height: 1.5; color: #d6d9df; }
.dc-body > p b { color: #fff; font-weight: 600; }
.dc-body code { display: block; margin: 6px 0; padding: 8px 11px; border-radius: 6px; background: #0b0d12; border: 1px solid #232838; font: 12px/1.3 var(--mono); color: #e8eaf0; }
.dc-react { display: flex; gap: 6px; margin-top: 6px; }
.dc-react span { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 8px; background: #1b2540; border: 1px solid var(--accent); font-size: 12px; transition: opacity 0.2s, scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dc-react span b { color: #c9d6ff; font-size: 11px; }
.playing .dc-react span:not(.is-on) { opacity: 0; scale: 0.5; }
.playing .dc-react b[data-at]:not(.is-on) { display: none; }
.dc-note .dc-body { padding: 10px 0 6px; }
.dc-note p { position: relative; display: inline-block; padding: 6px 13px 6px 31px; border-radius: 99px; background: rgb(46 160 67 / 13%); border: 1px solid rgb(63 185 80 / 40%); color: #8fe39b; font-size: 12px; }
.dc-note p b { color: #fff; }
.dc-note i { position: absolute; left: 7px; top: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%; background: #2ea043; }
.dc-note i::after { content: ''; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.8px 1.8px 0; rotate: 45deg; }
.dc-input { padding: 0 18px 14px; }
.dc-typing { position: relative; height: 22px; font-size: 11px; color: #aab0bf; }
.dc-typing span { position: absolute; left: 2px; top: 3px; display: flex; align-items: center; gap: 3px; }
.playing .dc-typing span:not(.is-on) { display: none; }
.dc-typing i { width: 5px; height: 5px; border-radius: 50%; background: #aab0bf; animation: typing 1s ease-in-out infinite; }
.dc-typing i:nth-child(2) { animation-delay: 0.15s; }
.dc-typing i:nth-child(3) { animation-delay: 0.3s; }
.dc-typing b { margin-left: 6px; color: #fff; font-weight: 600; }
@keyframes typing { 30% { translate: 0 -3px; opacity: 1; } 0%, 60%, 100% { opacity: 0.45; } }
.dc-input > div { padding: 12px 14px; border-radius: 8px; background: #1c1f27; color: #6b7180; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.dc-draft.typing { color: #dbdee1; }
.dc-draft .caret { height: 15px; margin: 0 0 -3px 1px; background: #dbdee1; }

/* ---- Footer ------------------------------------------------------------------ */

.footer { border-top: 1px solid var(--border); background: var(--bg-deep); padding-block: 56px 36px; font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(6, 1fr); gap: 40px; }
.footer-about p { margin-top: 14px; max-width: 30ch; color: var(--muted); }
.footer h4 { margin-bottom: 16px; font: 600 11.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.footer-grid div > a:not(.logo) { display: block; padding: 5px 0; color: var(--soft); }
.footer-grid div > a:not(.logo):hover { color: #fff; }
.footer-legal { margin-top: 44px; display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.footer-legal::before { content: ''; height: 1px; margin-bottom: 18px; background: var(--border); }

/* ---- Basket ------------------------------------------------------------------ */

/* The basket comes in from the right, quick off the mark and long to settle, while the page
   behind it dims; it leaves a little faster than it came. store.js lets its rows follow it in. */
.scrim {
    position: fixed; inset: 0; z-index: 50; background: rgb(4 5 8 / 66%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s;
}
.scrim.open { opacity: 1; visibility: visible; transition-duration: 0.45s; }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
    width: min(440px, 100vw); display: flex; flex-direction: column;
    background: var(--surface); border-left: 1px solid var(--border-strong);
    transform: translateX(100%); visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.9, 0.6), visibility 0s 0.32s, box-shadow 0.32s ease;
}
/* It can be seen (and take the focus) from the moment it opens, and until it has left. */
.drawer.open { transform: none; visibility: visible; box-shadow: -32px 0 90px rgb(0 0 0 / 50%); transition: transform 0.52s var(--swift), visibility 0s, box-shadow 0.52s ease; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { font-size: 34px; }
.drawer-user { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px; border-bottom: 1px solid var(--border); background: var(--bg); color: var(--soft); font-size: 14px; }
.drawer-user b { color: var(--text); }
.drawer-user:empty { display: none; }
.link { padding: 0; background: none; border: 0; color: var(--accent-text); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.drawer-items { flex: 1; overflow-y: auto; padding: 8px 22px; }
.empty { padding: 56px 0; text-align: center; color: var(--muted); }
.empty .mark { width: 54px; height: 54px; margin: 0 auto 18px; color: var(--border-strong); }
.item { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
.item img, .item .blank { width: 96px; height: 54px; object-fit: cover; border-radius: 7px; background: var(--surface-2); }
.item b { display: block; font: 900 21px/1.05 var(--display); text-transform: uppercase; }
.item span { color: var(--muted); font-size: 14px; }
.item .remove { width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); }
.item .remove:hover { color: var(--danger); border-color: var(--danger); }
.drawer-foot { padding: 18px 22px 22px; border-top: 1px solid var(--border); background: var(--bg); display: grid; gap: 14px; }
.drawer-foot:empty { display: none; }
.code { display: flex; gap: 8px; }
.code input { flex: 1; min-width: 0; height: 42px; padding: 0 13px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: 14.5px; }
.code input::placeholder { color: var(--muted); }
.applied { display: flex; flex-wrap: wrap; gap: 8px; }
.applied button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 7px; font: 600 12px/1 var(--mono); letter-spacing: 0.06em; }
.applied button:hover { border-color: var(--danger); color: var(--danger); }
.totals { display: grid; gap: 6px; font-size: 14.5px; color: var(--soft); }
.totals div { display: flex; justify-content: space-between; gap: 12px; }
.totals .sum { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text); font-weight: 700; font-size: 20px; }
.fine { color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
.fine a { text-decoration: underline; text-underline-offset: 2px; }

.toasts { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translateX(-50%); display: grid; gap: 10px; width: min(460px, calc(100vw - 32px)); pointer-events: none; }
.toast { padding: 14px 18px; background: var(--surface-2); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); box-shadow: 0 16px 40px rgb(0 0 0 / 50%); font-size: 14.5px; animation: toast 0.2s ease-out; }
.toast.bad { border-left-color: var(--danger); }
.toast.good { border-left-color: var(--success); }
@keyframes toast { from { opacity: 0; transform: translateY(8px); } }

/* Shown while the basket runs without Tebex (?preview). */
.preview-note { position: fixed; left: 16px; bottom: 16px; z-index: 70; padding: 9px 12px; background: #d6a419; color: #14110a; border-radius: 8px; font: 700 11.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-2deg); }

/* A panel in the middle of the page: after paying. */
.thanks { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgb(4 5 8 / 76%); backdrop-filter: blur(4px); }
.thanks-box { width: min(540px, 100%); padding: 36px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 20px; }
.thanks-box h2 { margin: 16px 0 14px; font-size: 52px; }
.thanks-box p { color: var(--soft); }
.thanks-box ol { margin: 20px 0 26px; padding-left: 20px; list-style: decimal; display: grid; gap: 8px; color: var(--soft); }
.thanks-box a:not(.btn) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.thanks-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Motion -------------------------------------------------------------------- */

/* What store.js lets rise into view as it is scrolled to (an element with data-rise, the children
   of one with data-rises) waits out of sight until then. store.js gives the class, and only to
   what lies below the window when the visitor starts on the page: a page opens as it is. */
.waits { opacity: 0; }

/* ---- Smaller screens --------------------------------------------------------- */

@media (max-width: 1080px) {
    .tiles, .steps:not(.down) { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
    .steps:not(.down) li:nth-child(2)::after { display: none; }
    .product-top { grid-template-columns: 1fr; gap: 34px; }
    .clips.grid { grid-template-columns: repeat(2, 1fr); }
    .faq-wrap, .two { grid-template-columns: 1fr; gap: 40px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
    .studio { grid-template-columns: 1fr; gap: 20px; }
    .studio-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .studio-step { flex-direction: column; gap: 10px; padding: 14px 14px 16px; }
    .studio-step .num { padding-top: 0; }
    .studio-step b { font-size: 21px; }
    .studio-step-text > span { display: none; }
    .studio-step > i { left: 14px; right: 14px; }
    .account span { display: none; }
    .account { width: 46px; padding: 0; }
    .showroom { grid-template-columns: 1fr; gap: 50px; }
    .model-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The header's links: closer together first, then folded into the menu. */
@media (max-width: 1240px) {
    .nav-row { gap: 20px; }
    .nav-links { gap: 0; }
    .nav-links a { padding-inline: 10px; letter-spacing: 0.08em; }
    .nav-social { margin-left: 4px; padding-left: 6px; }
    .nav-links .nav-social a { padding: 9px 8px; }
    /* the tiles' code has to stay readable: two to a row */
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 980px) {
    .burger { display: inline-flex; }
    .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; gap: 0; margin: 0; padding: 10px 16px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 15px 10px; font-size: 13.5px; letter-spacing: 0.12em; }
    .nav-social { flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; border: 0; }
    .nav-links .nav-social a { display: flex; align-items: center; gap: 12px; padding: 15px 10px; }
    .nav-social span { display: inline; }
    .nav-row { gap: 12px; }
    .nav-actions { margin-left: auto; }
}

@media (max-width: 820px) {
    /* the reel under the hero's text, the whole width, its bar below it */
    .hero.with-reel { display: flex; flex-direction: column; }
    .hero.with-reel > * { min-width: 0; }
    .with-reel .hero-text { padding-bottom: 30px; }
    .hero-reel { position: relative; order: 2; top: auto; width: 100%; translate: none; margin-bottom: 34px; }
    .hero-reel-screen {
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-composite: source-over;
        mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask-composite: add;
    }
    .reel-bar { position: static; grid-template-columns: minmax(0, 1fr); margin: 6px 16px 0; }
    .reel-pause { position: absolute; top: 12px; right: 12px; }
    .reel-caption { min-width: 0; max-width: 100%; }
    .reel-caption a { max-width: 100%; gap: 10px; padding-left: 13px; }
    .reel-caption b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .reel-caption b { font-size: 18px; }
    .fresh-band .section-head { margin-bottom: 20px; }
    .search { max-width: none; }
    .fresh { grid-template-columns: minmax(108px, 132px) minmax(0, 1fr); gap: 14px; }
    .features { grid-template-columns: 1fr; }
    .clips { flex-direction: column; gap: 26px; }
    .tricks { grid-template-columns: 1fr; }
    .trick-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
    .model-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .clips.grid { grid-template-columns: 1fr; }
    .clip { flex: none; }
    .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
    .gallery-prev, .gallery-next { opacity: 1; }
    .gallery-play { padding: 12px; }
    .gallery-play .btn { min-height: 42px; padding: 0 16px; font-size: 14.5px; }
    .gallery-play small { display: none; }
}

@media (max-width: 560px) {
    .wrap { padding-inline: 18px; }
    .logo .brand { font-size: 23px; }
    .logo .mark { width: 26px; height: 26px; }
    .grid { grid-template-columns: 1fr; }
    .tiles, .steps:not(.down) { grid-template-columns: 1fr; }
    .steps:not(.down) li::after { display: none; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .hero-actions .btn, .cta-actions .btn { width: 100%; }
    .cta-actions { width: 100%; }
    .buy-bar img { display: none; }
    .feature { padding: 22px; }
    .trick-list { grid-template-columns: 1fr; }
    .lights-name kbd { display: none; }
    .extras-switch { left: 10px; bottom: 10px; gap: 7px; min-height: 34px; padding: 0 5px 0 10px; font-size: 13px; }
    .extras-switch .icon { width: 14px; height: 14px; }
    .extras-switch i { width: 34px; height: 20px; }
    .extras-switch i::after { width: 14px; height: 14px; }
    .extras-switch[aria-checked="true"] i::after { transform: translateX(14px); }
    .lights button { padding: 0 8px; }
    .drift-levels li { grid-template-columns: 1fr auto; gap: 6px 14px; }
    .drift-levels li span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
    .studio-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .studio-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .studio-step b { font-size: 19px; }
    .studio-window { border-radius: 12px; }
    .studio-bar { height: 32px; }
    .studio-dots, .studio-live { width: auto; }
    .studio-live span { display: none; }
}

/* The cards keep their soft answer to the pointer, and the basket its way in and out: like the
   clips and what store.js moves, they are small, and they are there for the many who switch
   Windows' animations off for speed alone. So do the small pictures of the home page (the studio,
   the tiles, the steps), whose few loops of their own are part of what they show, and the light of
   a showroom, which moves only as the visitor has chosen. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    :not(.strip-run, .studio *, .tile-art *, [data-play] *, .glow),
    :not(.studio *, .tile-art *, [data-play] *)::before, :not(.studio *, .tile-art *, [data-play] *)::after { animation: none !important; }
    :not(.card, .card-cover img, .drawer, .scrim, .studio *, .tile-art *, [data-play], [data-play] *, .hero-reel video, .reel-caption),
    :not(.studio *, [data-play] *)::before, :not(.studio *, [data-play] *)::after { transition: none !important; }
    /* the reel's fade from one clip into the next stays: without it the clips cut hard, which is the jolt this setting is against */
}

/* /fair/: Chaos Arcade's fairness check (fair.mjs, assets/fair.js) */
.fair .lead { margin-bottom: 40px; }
.fair-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px; align-items: start; }
.fair-form, .fair-out { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.fair-form { display: flex; flex-direction: column; gap: 16px; }
.fair-form [hidden] { display: none; }
.fair-form > div { display: flex; flex-direction: column; gap: 16px; }
.fair-form > .fair-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fair-field { display: flex; flex-direction: column; gap: 6px; }
.fair-field > span { font-size: 13px; font-weight: 600; color: var(--soft); }
.fair-field small { font-size: 12.5px; color: var(--muted); }
.fair-field input, .fair-field select { width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
                                        background: var(--bg-deep); color: var(--text); font: 14px/1.2 ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.fair-field select { font-family: var(--font); }
.fair-field input:focus-visible, .fair-field select:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.fair-out { min-height: 220px; }
.fair-result { display: flex; flex-direction: column; gap: 16px; }
.fair-big { font-family: var(--display); font-weight: 900; font-size: clamp(44px, 6vw, 72px); line-height: 1; color: var(--text); }
.fair-big.roulette { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; font-size: 52px; color: #fff; }
.fair-big.roulette.red { background: #c8102e; } .fair-big.roulette.black { background: #1b1d24; border: 1px solid var(--border-strong); }
.fair-big.roulette.green { background: #0f7a3e; }
.fair-grid { display: grid; grid-template-columns: repeat(5, 52px); gap: 6px; }
.fair-grid span { display: grid; place-items: center; height: 52px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border);
                  color: var(--muted); font-size: 13px; }
.fair-grid span.mine { background: rgb(242 112 111 / 18%); border-color: var(--danger); color: var(--danger); font-size: 20px; }
.fair-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.fair-card { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 10px 8px 8px; border-radius: 9px;
             background: #f4f5f8; color: #14161c; }
.fair-card b { font-size: 22px; line-height: 1; } .fair-card.red b { color: #c8102e; }
.fair-card small { font-size: 11px; color: #5b6070; white-space: nowrap; }
.fair-note { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.fair-hash { font-weight: 600; } .fair-hash.ok { color: var(--success); } .fair-hash.bad { color: var(--danger); }
.fair-raw summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.fair-raw code { display: block; margin-top: 8px; font-size: 12.5px; color: var(--soft); word-break: break-all; line-height: 1.6; }
.fair-how { margin-top: 64px; max-width: 760px; }
.fair-how h2 { font-size: 34px; margin-bottom: 16px; }
.fair-how ol { display: flex; flex-direction: column; gap: 12px; padding-left: 22px; color: var(--soft); line-height: 1.6; }
.fair-how code { font-size: 14px; color: var(--accent-text); }
@media (max-width: 860px) {
    .fair-layout { grid-template-columns: 1fr; }
    .fair-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}