/*
 * Frenetiq Design — site styles.
 * Quiet and precise: a grotesk close to the logo, hairlines and soft shadows, violet depth with lime
 * used only as an accent (the logo's square dot ends the headlines). Buttons keep a discreet key
 * feel: a thin edge of their own colour underneath that goes down when pressed.
 * Sections pick a theme (.theme-paper, .theme-ink, .theme-violet, .theme-lime) and components read
 * the theme's tokens.
 */

/* Inter and Inter Tight, self-hosted (variable weight; SIL Open Font License, see fonts/OFL-*.txt) */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin.woff2") format("woff2"); font-weight: 200 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2"); font-weight: 200 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/Sora-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Frenetiq Pixel"; src: url("../fonts/FrenetiqPixel-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("../fonts/PermanentMarker-Regular.ttf") format("truetype"); font-display: swap; }

:root {
	--violet: #7957ff;
	--violet-2: #a28dff;
	--violet-deep: #4a31c4;
	--lime: #dfff5e;
	--lime-deep: #a9c62e;
	--ink: #121019;
	--ink-2: #0c0a12;
	--paper: #f7f6fb;
	--game: #ff7a45; --chat: #3d9bff; --media: #a77bff; --master: #f4f6fa; --mic: #2ed3b7; --sounds: #ff5fa2;
	--display: "Inter Tight", "Inter", "Segoe UI", system-ui, sans-serif;
	--body: "Inter", "Segoe UI", system-ui, sans-serif;
	--label: "Inter", "Segoe UI", system-ui, sans-serif;
	--mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
	--r: 18px;
	--wrap: 1200px;
	--gutter: clamp(18px, 4vw, 36px);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.theme-paper, .page-paper, body { --bg: var(--paper); --text: var(--ink); --muted: #5d576f; --faint: #6f6982; --surface: #ffffff; --surface-2: #efedf6; --line: rgba(18, 16, 25, 0.09); --line-2: rgba(18, 16, 25, 0.16); --shadow: 0 1px 2px rgba(18, 16, 25, 0.04), 0 18px 40px -26px rgba(40, 24, 110, 0.28); --dot: var(--violet); --link: var(--violet-deep); --accent: var(--violet); }
.theme-ink, .page-ink { --bg: var(--ink-2); --text: #f2f0f7; --muted: #a09aaf; --faint: #6f6a80; --surface: #16131f; --surface-2: #1e1a29; --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.16); --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 50px -30px rgba(0, 0, 0, 0.9); --dot: var(--lime); --link: var(--lime); --accent: var(--lime); color-scheme: dark; }
.theme-violet { --bg: #3a24a8; --text: #ffffff; --muted: rgba(255, 255, 255, 0.78); --faint: rgba(255, 255, 255, 0.55); --surface: rgba(255, 255, 255, 0.08); --surface-2: rgba(255, 255, 255, 0.14); --line: rgba(255, 255, 255, 0.16); --line-2: rgba(255, 255, 255, 0.3); --shadow: 0 24px 60px -30px rgba(10, 4, 50, 0.7); --dot: var(--lime); --link: var(--lime); --accent: var(--lime); }
.theme-lime { --bg: var(--ink-2); --text: #f2f0f7; --muted: #a09aaf; --faint: #6f6a80; --surface: #16131f; --surface-2: #1e1a29; --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.16); --shadow: 0 24px 50px -30px #000; --dot: var(--lime); --link: var(--lime); --accent: var(--lime); }
.theme-paper, .theme-ink, .theme-violet, .theme-lime { background: var(--bg); color: var(--text); }
.theme-violet { background: radial-gradient(90% 120% at 88% -10%, #9a82ff 0%, #6b4cf2 32%, #4a2fc9 58%, #26176e 100%); }
.theme-lime { background: radial-gradient(70% 120% at 100% 0%, rgba(223, 255, 94, 0.16), transparent 60%), var(--ink-2); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
html { font-kerning: normal; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.62; letter-spacing: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern", "liga", "calt"; }
p, li, dd { text-wrap: pretty; hanging-punctuation: first; }
/* Figures that line up: counters, numbers, prices. */
.hero-stats b, .collection-no, .collection-big-no, .skin-no-big, .skin-card-no, .feature-no, .price-key, .product-price, .chips b, .chips small, .hero-count, .pager small, .try-no { font-variant-numeric: tabular-nums lining-nums; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.04; text-wrap: balance; margin: 0; font-weight: 600; font-feature-settings: "kern", "liga", "calt", "case"; }
h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.018em; }
h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.014em; }
h3 { font-size: 19px; line-height: 1.25; letter-spacing: -0.006em; }
/* The logo's square dot, after headlines. The "." stays in the text for readers. */
.dot-word { white-space: nowrap; }
.dot { display: inline-block; width: 0.15em; height: 0.15em; margin-left: 0.06em; background: var(--dot); color: transparent; overflow: hidden; vertical-align: baseline; font-style: normal; }
p { margin: 0 0 14px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--ink); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.i { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em; }

.eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--label); font-weight: 600; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--dot); flex: none; }
.lede { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; letter-spacing: -0.005em; color: var(--muted); max-width: 56ch; margin: 20px 0 0; }

/* --- Buttons: a discreet key ------------------------------------------------------------------------ */
.btn {
	--key: #ffffff; --key-ink: var(--ink); --key-edge: #d8d3e6;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.004em; line-height: 1.2;
	padding: 13px 20px; border-radius: 12px; text-decoration: none; cursor: pointer; border: 0;
	background: var(--key); color: var(--key-ink);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 3px 0 var(--key-edge), 0 12px 24px -16px rgba(20, 10, 60, 0.6);
	transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.2s;
	margin-bottom: 3px;
}
.btn:hover { color: var(--key-ink); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 0 var(--key-edge), 0 16px 30px -16px rgba(20, 10, 60, 0.6); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 var(--key-edge), 0 6px 12px -10px rgba(20, 10, 60, 0.6); }
.btn-lime { --key: var(--lime); --key-edge: var(--lime-deep); }
.btn-primary { --key: var(--violet); --key-ink: #fff; --key-edge: var(--violet-deep); }
.btn-white { --key: #fff; }
.btn-ink { --key: var(--ink); --key-ink: #fff; --key-edge: #000; }
.btn-ghost { --key: transparent; --key-ink: var(--text); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--text); transform: none; }
.btn-ghost:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px var(--text); }
.btn-sm { padding: 9px 14px; font-size: 14px; border-radius: 10px; }
.btn-lg { padding: 15px 24px; font-size: 16px; border-radius: 13px; }

.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--label); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; font-size: 10.5px; padding: 4px 9px 3px; border-radius: 999px; background: var(--surface-2); color: var(--text); white-space: nowrap; }
.badge-lime { background: rgba(169, 198, 46, 0.18); color: #4d5e0a; }
.theme-ink .badge-lime, .page-ink .badge-lime, .theme-violet .badge-lime { background: rgba(223, 255, 94, 0.14); color: var(--lime); }
.badge-soon { background: rgba(121, 87, 255, 0.12); color: var(--violet-deep); }
.theme-ink .badge-soon, .page-ink .badge-soon, .theme-violet .badge-soon { background: rgba(162, 141, 255, 0.18); color: #cfc3ff; }
.badge-type { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--label); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* --- Top bar -------------------------------------------------------------------------------------- */
/* No backdrop blur: over the animated heroes it was re-blurred every frame (Simone saw the home stutter, 30/09/2026) */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(12, 10, 18, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: #fff; }
.topbar-in { display: flex; align-items: center; gap: 12px; min-height: 68px; }
.logo { display: block; margin-right: auto; padding-block: 6px; }
.logo img { height: 22px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a:not(.btn) { position: relative; font-family: var(--display); font-weight: 500; font-size: 15px; color: rgba(255, 255, 255, 0.78); text-decoration: none; padding: 8px 12px; border-radius: 9px; transition: color 0.2s; }
.nav-links a:not(.btn):hover { color: #fff; }
.nav-links a[aria-current] { color: #fff; }
.nav-links a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; margin-left: -2.5px; background: var(--lime); }
.nav-links .nav-cta { margin: 0 0 3px 12px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: #fff; transition: transform 0.2s; }
.nav-toggle span:first-child { top: 16px; }
.nav-toggle span:last-child { top: 24px; }
.menu-open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 940px) {
	.nav-toggle { display: block; }
	.nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; padding: 10px var(--gutter) 22px; background: rgba(12, 10, 18, 0.97); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
	.menu-open .nav-links { display: flex; }
	.nav-links a:not(.btn) { padding: 13px 0; font-size: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; }
	.nav-links a[aria-current]::after { left: auto; right: 0; top: 50%; bottom: auto; margin: -2.5px 0 0; }
	.nav-links .nav-cta { margin: 16px 0 3px; }
}

/* --- Sections, heroes ----------------------------------------------------------------------------- */
.section { padding-block: clamp(72px, 10vw, 136px); }
.section-tight { padding-block: clamp(40px, 6vw, 72px) clamp(64px, 9vw, 120px); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 48px; }
.section-head h2 { max-width: 18ch; }
.section-head .lede { max-width: 50ch; }
@media (max-width: 760px) { .section-head { flex-direction: column; align-items: start; } }
.crumbs { font-size: 13px; color: var(--faint); margin-bottom: 28px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs span { color: var(--text); }

.hero, .page-hero, .p-hero, .support-hero { position: relative; overflow: hidden; isolation: isolate; }
.hero { padding-block: clamp(56px, 8vw, 112px) 0; }
.hero::after, .page-hero.theme-violet::after, .p-hero.theme-violet::after, .support-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(80% 80% at 70% 20%, #000, transparent 75%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(40px, 4.8vw, 68px); }
.hero-sub { display: block; color: rgba(255, 255, 255, 0.55); margin-top: 4px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-deck { position: relative; }
.hero-deck::before { content: ""; position: absolute; inset: 10% 6% -4%; background: radial-gradient(closest-side, rgba(223, 255, 94, 0.22), transparent); filter: blur(30px); z-index: -1; }
.hero-deck-note { text-align: center; color: var(--muted); font-size: 13px; margin: 18px 0 0; min-height: 1.6em; }
.hero-deck-note b { color: #fff; font-weight: 600; }
.hero-deck-note a { color: var(--lime); }
.hero-stats { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(56px, 7vw, 96px) auto 0; padding-block: 0; }
.hero-stats li { display: flex; align-items: baseline; gap: 12px; padding: 26px 0 34px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.hero-stats b { font-family: var(--display); font-weight: 300; font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -0.01em; line-height: 1; color: #fff; }
.hero-stats li > span { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
@media (max-width: 640px) { .hero-stats { grid-template-columns: 1fr 1fr; column-gap: 20px; } }

.page-hero { padding-block: clamp(64px, 9vw, 120px) clamp(56px, 7vw, 96px); }
.page-hero h1 { max-width: 16ch; }
.caps { display: none; }

/* --- Stream Deck + simulator ---------------------------------------------------------------------- */
/* Stream Deck + in proportion: four columns; each key sits over its strip segment and its dial.
   Sizes are in cqw (percent of the deck's width), so the device scales as one piece. */
.deck { width: 100%; max-width: 640px; margin-inline: auto; user-select: none; -webkit-user-select: none; container-type: inline-size; }
.deck-body {
	position: relative;
	padding: 7cqw 6cqw 6.5cqw;
	border-radius: 7cqw;
	background: linear-gradient(180deg, #26262b 0%, #1a1a1e 22%, #131316 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.8), 0 0 0 1px #050506, 0 2.5cqw 5cqw -1cqw rgba(0, 0, 0, 0.55), 0 10cqw 20cqw -8cqw rgba(0, 0, 0, 0.8);
}
.deck-keys { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 7cqw; justify-items: center; }
.deck-key { width: 14.2cqw; aspect-ratio: 1; padding: 0; border: 0; border-radius: 1.8cqw; background: #000; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 0.45cqw #0b0b0d, 0 0 0 0.6cqw rgba(255, 255, 255, 0.05), 0 0.6cqw 0.9cqw rgba(0, 0, 0, 0.6); transition: transform 0.08s, filter 0.08s; }
.deck-key span, .deck-key svg { display: block; width: 100%; height: 100%; }
.deck-key:active, .deck-key.is-pressed { transform: scale(0.965); filter: brightness(0.92); }
.deck-strip { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 6.2cqw; border-radius: 1.4cqw; overflow: hidden; background: #000; aspect-ratio: 8 / 1; box-shadow: 0 0 0 0.45cqw #0b0b0d, 0 0 0 0.6cqw rgba(255, 255, 255, 0.05); }
.deck-strip[data-backdrop="dark"] { background: linear-gradient(115deg, #0f2a3a, #3a1b4a 45%, #0b3b2e), #000; }
.deck-strip[data-backdrop="dark"]::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 60%, rgba(255, 255, 255, 0.08) 0 14%, transparent 15%), radial-gradient(circle at 55% 30%, rgba(255, 255, 255, 0.05) 0 10%, transparent 11%), radial-gradient(circle at 82% 70%, rgba(255, 255, 255, 0.06) 0 12%, transparent 13%); }
.deck-strip[data-backdrop="light"] { background: linear-gradient(90deg, #f6e7f2, #e4eef8 50%, #f7f1df); }
.deck-strip-cell { position: relative; aspect-ratio: 2 / 1; }
.deck-strip-cell svg { display: block; width: 100%; height: 100%; }
.deck-dials { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; margin-top: 6cqw; }

/* A dial: a knurled knob that turns (grip and marker) under a light that stays put. */
.deck-dial { position: relative; width: 12.6cqw; aspect-ratio: 1; border: 0; padding: 0; background: none; border-radius: 50%; cursor: grab; touch-action: none; }
.deck-dial:active { cursor: grabbing; }
.deck-dial::before { content: ""; position: absolute; inset: -0.7cqw; border-radius: 50%; background: radial-gradient(circle, #050506 62%, rgba(255, 255, 255, 0.06) 64%, transparent 70%); }
.deck-knob { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(#2b2b31 0 3deg, #141417 3deg 6deg); box-shadow: 0 0.8cqw 1.4cqw rgba(0, 0, 0, 0.75); will-change: transform; }
.deck-knob::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: #1d1d22; box-shadow: inset 0 0 0 0.25cqw rgba(0, 0, 0, 0.55); }
.deck-notch { position: absolute; z-index: 1; left: 50%; top: 14%; width: 1.1cqw; height: 1.1cqw; margin-left: -0.55cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0.6cqw rgba(255, 255, 255, 0.25); }
.deck-knob-light { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, 0.16), transparent 45%), radial-gradient(90% 70% at 70% 100%, rgba(0, 0, 0, 0.35), transparent 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: transform 0.1s; }
.deck-dial.is-pressed .deck-knob, .deck-dial.is-pressed .deck-knob-light { scale: 0.95; }
.deck-knob, .deck-knob-light { transition: scale 0.1s; }
.deck-hint { text-align: center; font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.deck-hero .deck-hint { display: none; }

/* Cards: white (or dark) surfaces, a hairline and a soft shadow that deepens on hover. */
.card-base, .gesture, .feature, .collection-card, .skin-card, .world, .product-card, .price-key, .faq details, .pager a, .custom-type, .form, .guide-feature, .guide-card, .kinds > div, .form-embed, .try-current, .try-picker, .mp-band { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }

.sim-controls { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 22px; padding: 16px 18px; border-radius: var(--r); background: rgba(12, 10, 18, 0.35); color: #fff; border: 1px solid rgba(255, 255, 255, 0.09); }
.sim-controls fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.sim-controls legend { padding: 0; margin-bottom: 8px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { font: 500 13px var(--body); color: rgba(255, 255, 255, 0.75); background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: all 0.15s; }
.seg button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }

/* --- Ticker ------------------------------------------------------------------------------------- */
.ticker { position: relative; overflow: hidden; padding-block: 22px; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.ticker-track { display: flex; gap: 14px; width: max-content; animation: ticker 60s linear infinite; will-change: transform; }
.ticker.is-off .ticker-track { animation-play-state: paused; } /* off screen: polish.js */
.ticker img { height: 56px; width: auto; border-radius: 8px; opacity: 0.9; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* --- Gestures, features --------------------------------------------------------------------------- */
.gesture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
@media (max-width: 800px) { .gesture-grid { grid-template-columns: 1fr; } }
.gesture { padding: 34px 32px 38px; border: 0; border-radius: 0; box-shadow: none; }
.g-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); color: var(--violet); margin-bottom: 22px; }
.g-icon .i { width: 24px; height: 24px; }
.gesture h3 { font-size: 28px; font-weight: 600; letter-spacing: -0.016em; margin-bottom: 10px; }
.gesture p { color: var(--muted); margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-grid-2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 8px; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feature-grid, .feature-grid-2 { grid-template-columns: 1fr; } }
.feature { padding: 26px 26px 28px; }
.feature-no { display: block; font-family: var(--display); font-weight: 300; font-size: 14px; color: var(--faint); margin-bottom: 18px; letter-spacing: 0.02em; }
.feature h3 { margin-bottom: 8px; }
.feature p { color: var(--muted); margin: 0; font-size: 15px; }

/* --- Collections ---------------------------------------------------------------------------------- */
.collection-rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 24px; margin-inline: -4px; scrollbar-width: none; }
.collection-rail::-webkit-scrollbar { display: none; }
.collection-card { flex: 1 0 270px; min-width: 0; scroll-snap-align: start; display: grid; gap: 2px; padding: 24px; text-decoration: none; color: var(--text); transition: transform 0.25s var(--ease), border-color 0.25s; }
.collection-card:hover { color: var(--text); transform: translateY(-4px); border-color: var(--line-2); }
.collection-no { font-family: var(--display); font-weight: 200; font-size: 56px; line-height: 0.9; letter-spacing: -0.01em; color: var(--accent); }
.collection-name { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.014em; margin-top: 10px; }
.collection-stack { display: grid; gap: 6px; margin: 18px 0 14px; }
.collection-stack img { border-radius: 6px; aspect-ratio: 8 / 1; object-fit: cover; }
.collection-count { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: center; white-space: nowrap; }
.collection-more { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 16px; position: sticky; top: 68px; z-index: 5; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.chips button { display: inline-flex; align-items: baseline; gap: 7px; font: 500 14px/1 var(--body); letter-spacing: 0; white-space: nowrap; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px 9px 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(18, 16, 25, 0.04); transition: border-color 0.15s, background 0.15s, color 0.15s; }
.chips button b { font-weight: 500; font-size: 12px; color: var(--faint); letter-spacing: 0; }
.chips button small { font-size: 12px; color: var(--faint); }
.chips button:hover { border-color: var(--line-2); }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips button[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.55); }
@media (max-width: 760px) {
	.chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
	.chips::-webkit-scrollbar { display: none; }
}
.collection { padding-block: 56px 16px; scroll-margin-top: 140px; }
.collection[hidden], .product-card[hidden] { display: none; }
.collection-head { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: end; margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.collection-head h2 { margin-bottom: 10px; }
.collection-head p { color: var(--muted); max-width: 60ch; margin: 0; }
.collection-big-no { font-family: var(--display); font-weight: 200; font-size: clamp(72px, 9vw, 120px); line-height: 0.8; letter-spacing: -0.012em; color: var(--violet); }
.collection-meta { color: var(--muted); font-size: 14px; white-space: nowrap; }
@media (max-width: 760px) { .collection-head { grid-template-columns: auto 1fr; } .collection-meta { grid-column: 1 / -1; } }

.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.skin-card { position: relative; display: grid; gap: 0; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.skin-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(18, 16, 25, 0.04), 0 30px 60px -30px color-mix(in srgb, var(--skin-a, var(--violet)) 65%, rgba(40, 24, 110, 0.5)); }
/* The whole card is one link (to the skin page); "Try live" sits above it. */
.skin-card-name a { color: inherit; text-decoration: none; }
.skin-card-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.skin-card-name a:focus-visible { outline: none; }
.skin-card:has(.skin-card-name a:focus-visible) { outline: 2px solid var(--violet); outline-offset: 3px; }
.skin-card-device { display: grid; gap: clamp(10px, 1.6vw, 16px); padding: clamp(16px, 2.4vw, 26px) clamp(14px, 2vw, 22px); background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--skin-a) 22%, transparent), transparent 70%), linear-gradient(180deg, #202025, #121215); }
.skin-card-keys { width: 84%; justify-self: center; }
.skin-card-strip { position: relative; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 0 0 2px #0a0a0c; }
.skin-card-strip img, .skin-card-live { display: block; width: 100%; aspect-ratio: 8 / 1; }
.skin-card-live { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.skin-card-live svg { display: block; width: 100%; height: 100%; }
.skin-card-body { display: grid; gap: 2px; padding: 16px 20px 18px; }
.skin-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; }
.skin-card-no { font-family: var(--display); font-size: 13px; color: var(--faint); letter-spacing: 0.01em; }
.skin-card-price { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.004em; }
.skin-card-name { font-size: 22px; letter-spacing: -0.012em; line-height: 1.15; margin: 0; }
.skin-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0 0; }
.skin-card-note { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.skin-card-note .i { width: 14px; height: 14px; color: var(--skin-a, var(--violet)); }
.skin-card-try { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px var(--display); color: var(--text); text-decoration: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); transition: border-color 0.15s, background 0.15s; }
.skin-card-try:hover { color: var(--text); border-color: var(--text); background: var(--surface-2); }
.skin-card-try .i { width: 14px; height: 14px; }

.worlds { padding-top: 0; }
.world-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 800px) { .world-grid { grid-template-columns: 1fr; } }
.world { display: grid; gap: 16px; padding: 8px 8px 20px; text-decoration: none; color: var(--muted); font-size: 15px; transition: transform 0.25s var(--ease), border-color 0.25s; }
.world:hover { color: var(--muted); transform: translateY(-3px); border-color: color-mix(in srgb, var(--skin-a, #fff) 50%, transparent); }
.world img { border-radius: 10px; aspect-ratio: 8 / 1; width: 100%; }
.world-text { padding-inline: 12px; }
.world-text b { color: var(--text); font-family: var(--display); font-weight: 600; }

/* --- Products ------------------------------------------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.product-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--text); transition: transform 0.25s var(--ease); }
.product-card:hover { color: var(--text); transform: translateY(-4px); }
.product-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 22px; background: radial-gradient(90% 120% at 90% 0%, #8d74ff, #5236d8 50%, #24166a); }
.product-art img { border-radius: 7px; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.7); }
.product-art-stack { display: grid; place-content: center; gap: 7px; background: var(--ink); }
.product-art-stack img { aspect-ratio: 8 / 1; width: 100%; box-shadow: none; }
.product-art-no { position: absolute; left: 18px; top: 10px; font-family: var(--display); font-weight: 200; font-size: 34px; letter-spacing: -0.022em; color: var(--lime); }
.product-art-cat { background: radial-gradient(90% 120% at 90% 0%, #2a2440, var(--ink)); }
.product-art-cat .keycap { width: 88px; height: 88px; }
.product-body { display: grid; gap: 4px; padding: 20px 22px 24px; align-content: start; justify-items: start; }
.product-type { font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; color: var(--faint); }
.product-name { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.014em; }
.product-text { color: var(--muted); font-size: 15px; margin-bottom: 10px; }

/* Product and skin pages */
.p-hero { padding-block: 36px clamp(64px, 8vw, 104px); }
.p-hero-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (max-width: 1040px) { .p-hero-grid { grid-template-columns: 1fr; } }
.p-title { font-size: clamp(48px, 6.4vw, 88px); margin-top: 18px; letter-spacing: -0.02em; line-height: 0.98; }
.p-tagline { font-family: var(--display); font-weight: 500; font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.01em; margin: 16px 0 0; }
.p-summary { color: var(--muted); font-size: 17px; max-width: 52ch; margin: 18px 0 0; }
.p-requires { margin: 14px 0 0; font-weight: 500; }
.p-stage { padding-top: 8px; }
.buybar { display: grid; grid-template-columns: auto 1fr; gap: 18px 22px; align-items: center; margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.price-key { display: grid; align-content: center; min-width: 150px; padding: 16px 20px; border-radius: 14px; color: var(--ink); background: #fff; border: 0; font-family: var(--display); font-weight: 300; font-size: 34px; letter-spacing: -0.02em; line-height: 1; box-shadow: 0 3px 0 #d8d3e6, 0 18px 36px -20px rgba(10, 4, 50, 0.6); }
.price-key small { font-family: var(--body); font-weight: 500; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #8f89a0; margin-bottom: 8px; }
.price-key em { font-style: normal; font-family: var(--body); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #8f89a0; margin-top: 6px; }
.price-soon { font-size: 24px; font-weight: 400; }
.buybar-main { display: grid; justify-items: start; gap: 6px; }
.buybar-note { font-size: 12.5px; color: var(--faint); }
.buybar-starter { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: inherit; text-underline-offset: 3px; }
.buybar-starter svg { width: 13px; height: 13px; }
.facts { grid-column: 1 / -1; list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--muted); }
.facts .i { color: var(--accent); }
@media (max-width: 520px) { .buybar { grid-template-columns: 1fr; } .price-key { justify-self: start; } }

.skin-hero { --bg: var(--skin-bg); --text: var(--skin-ink); --muted: color-mix(in srgb, var(--skin-ink) 72%, transparent); --faint: color-mix(in srgb, var(--skin-ink) 50%, transparent); --dot: var(--skin-a); --link: var(--skin-a); --accent: var(--skin-a); --line: color-mix(in srgb, var(--skin-ink) 14%, transparent); --line-2: color-mix(in srgb, var(--skin-ink) 28%, transparent); background: radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--skin-a) 30%, transparent), transparent 70%), radial-gradient(50% 80% at 0% 100%, color-mix(in srgb, var(--skin-b) 20%, transparent), transparent 70%), var(--skin-bg); color: var(--text); }
.skin-no-big { display: block; font-family: var(--display); font-weight: 200; font-size: clamp(56px, 7vw, 96px); line-height: 0.8; letter-spacing: -0.012em; color: var(--skin-a, var(--lime)); margin-bottom: 26px; }
.skin-hero .p-title { margin-top: 0; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(36px, 6vw, 96px); align-items: start; }
@media (max-width: 1040px) { .content-grid { grid-template-columns: 1fr; } }
.prose h2 { font-size: clamp(26px, 3vw, 36px); margin: 60px 0 22px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 26px 0 8px; }
.prose p, .prose li { max-width: 66ch; }
.big-text { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.45; letter-spacing: -0.01em; }
.side { position: sticky; top: 100px; display: grid; gap: 14px; justify-items: start; }
.side h3 { font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; color: var(--faint); font-family: var(--body); }
.side .faq { width: 100%; }
@media (max-width: 1040px) { .side { position: static; } }
.checks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; }
.checks .i { color: var(--violet); margin-top: 3px; }
.pager { display: flex; justify-content: space-between; gap: 14px; margin-top: 56px; }
.pager a { display: flex; align-items: center; gap: 14px; padding: 16px 20px; text-decoration: none; color: var(--text); font-family: var(--display); font-weight: 600; transition: transform 0.2s var(--ease); }
.pager a:hover { color: var(--text); transform: translateY(-2px); }
.pager small { display: block; font-weight: 300; color: var(--faint); font-size: 13px; }
.pager a:last-child { text-align: right; }

.faq { display: grid; gap: 8px; }
.faq details { border-radius: 14px; box-shadow: none; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 18px; font-family: var(--display); font-weight: 600; letter-spacing: -0.004em; }
.faq summary::-webkit-details-marker { display: none; }
.faq-key { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); color: var(--text); font-weight: 400; transition: rotate 0.25s var(--ease), background 0.2s; }
.faq details[open] .faq-key { rotate: 45deg; background: var(--violet); color: #fff; }
.faq details p { padding: 0 18px 18px; margin: 0; color: var(--muted); }

/* --- Bands ---------------------------------------------------------------------------------------- */
.band { padding-block: clamp(72px, 9vw, 120px); }
.band-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.band h2 { margin-bottom: 14px; max-width: 20ch; }
.band p { color: var(--muted); margin: 0; max-width: 54ch; }
.band-support { grid-template-columns: 1fr minmax(0, 480px); align-items: center; }
@media (max-width: 900px) { .band-grid, .band-support { grid-template-columns: 1fr; align-items: start; } }
.key-links { display: flex; flex-wrap: wrap; gap: 10px; }
.band .key-links .btn-white { --key: rgba(255, 255, 255, 0.1); --key-ink: #fff; --key-edge: rgba(0, 0, 0, 0.25); backdrop-filter: blur(6px); }
.mp-band { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 64px; padding: 34px; }
.mp-band h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 8px; }
.mp-band p { color: var(--muted); margin: 0; max-width: 58ch; }

/* --- Try (simulator page) ------------------------------------------------------------------------- */
.try { padding-block: clamp(36px, 4vw, 56px) clamp(64px, 8vw, 104px); }
.try-head { margin-bottom: 32px; }
.try-head h1 { font-size: clamp(34px, 4vw, 52px); max-width: 20ch; }
.try-head .lede { margin-top: 14px; }
.try-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 1040px) { .try-layout { grid-template-columns: 1fr; } }
.try-main { min-width: 0; }
.try-stage { position: relative; padding: clamp(20px, 4vw, 48px); border-radius: 22px 22px 0 0; background: radial-gradient(90% 120% at 90% 0%, #363a45, #202329 55%, #15171b); border: 1px solid var(--line); border-bottom: 0; }

/* Now showing, with previous and next next to it */
.try-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 0 0 22px 22px; background: var(--surface); }
.try-step { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.try-step:hover { background: var(--surface-2); border-color: var(--text); }
.try-step .i { width: 20px; height: 20px; }
.try-bar-now { display: flex; align-items: baseline; justify-content: center; gap: 10px; min-width: 0; white-space: nowrap; }
.try-swatch { align-self: center; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--violet); }
.try-no { font-family: var(--display); font-weight: 300; font-size: 15px; color: var(--muted); }
.try-bar-now b { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }
.try-col { font-size: 13px; color: var(--faint); }
@media (max-width: 560px) { .try-col { display: none; } }

.try-howto { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 18px 0 0; padding: 0; font-size: 13px; color: var(--muted); }
.try-howto li { text-wrap: nowrap; }
kbd { font: 500 11.5px var(--body); letter-spacing: 0.02em; padding: 2px 6px 1px; border-radius: 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; color: var(--text); background: var(--surface); }
@media (hover: none) { .try-howto li:nth-child(4), .try-howto li:nth-child(5) { display: none; } }

/* Current skin and the skin browser */
.try-side { position: sticky; top: 92px; display: grid; gap: 14px; max-height: calc(100vh - 108px); grid-template-rows: auto minmax(0, 1fr); }
@media (max-width: 1040px) { .try-side { position: static; max-height: none; } }
.try-current { padding: 22px 22px 20px; }
.try-current-meta { margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.try-current h2 { font-size: 30px; letter-spacing: -0.014em; margin-bottom: 8px; }
.try-current-text { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin-bottom: 16px; }
.try-current-cta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.try-share { margin-left: auto; }
.try-browser { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.try-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.try-tabs::-webkit-scrollbar { display: none; }
.try-tabs button { display: inline-flex; align-items: baseline; gap: 6px; flex: none; font: 500 13px/1 var(--body); color: var(--muted); background: transparent; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.try-tabs button b { font-weight: 400; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.try-tabs button:hover { color: var(--text); background: var(--surface-2); }
.try-tabs button[aria-selected="true"] { color: var(--text); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--violet); }
.try-list { position: relative; overflow-y: auto; padding: 8px; scrollbar-width: thin; scrollbar-color: #3a3d46 transparent; }
@media (max-width: 1040px) { .try-list { max-height: 420px; } }
.try-group { display: grid; gap: 4px; }
.try-group[hidden] { display: none; }
@media (min-width: 640px) and (max-width: 1040px) { .try-group { grid-template-columns: 1fr 1fr; } }
.try-group button { display: grid; gap: 7px; padding: 7px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; text-align: left; transition: background 0.12s; }
.try-group button:hover { background: var(--surface-2); }
.try-group button[aria-pressed="true"] { background: var(--surface-2); border-color: var(--violet); }
.try-group img { width: 100%; aspect-ratio: 8 / 1; border-radius: 5px; }
.try-group button span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-inline: 2px; }
.try-group button b { font: 500 13.5px var(--body); letter-spacing: 0; }
.try-group button small { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* --- Custom --------------------------------------------------------------------------------------- */
.custom-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .custom-types { grid-template-columns: 1fr; } }
.custom-type { position: relative; display: grid; gap: 6px; padding: 26px 26px 30px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.custom-type:hover { border-color: var(--line-2); }
.custom-type:has(input:checked) { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet), var(--shadow); }
.custom-type input { position: absolute; top: 24px; right: 24px; accent-color: var(--violet); width: 18px; height: 18px; }
.custom-type b { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.014em; }
.custom-type span:not(.g-icon) { color: var(--muted); font-size: 15px; }
.custom-type .g-icon { margin-bottom: 14px; }
.process { list-style: none; padding: 0; margin: 48px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
@media (max-width: 900px) { .process { grid-template-columns: 1fr 1fr; } }
.process li { padding-top: 18px; display: grid; gap: 4px; border-top: 1px solid var(--line-2); }
.process b { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.process span { color: var(--muted); font-size: 14px; }
.form { padding: clamp(24px, 4vw, 48px); border-radius: 24px; }
.form h2 { margin-bottom: 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form label { display: grid; gap: 7px; font-weight: 500; font-size: 14px; }
.form .span-2 { grid-column: 1 / -1; }
.form input:not([type="checkbox"]), .form select, .form textarea { font: 16px var(--body); color: var(--text); background: var(--paper); border: 1px solid var(--line-2); border-radius: 11px; padding: 12px 14px; width: 100%; transition: border-color 0.15s, box-shadow 0.15s; }
.form select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23121019' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.form select:hover { border-color: rgba(18, 16, 25, 0.3); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; background-color: #fff; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(121, 87, 255, 0.14); }
/* Glide Select (glideselect.js, adapted from React Bits): the button and menu over every <select> */
.glide-select { --gs-pop: 180ms; --gs-pop-out: 120ms; --gs-glide: 220ms; --gs-ease-out: cubic-bezier(0.23, 1, 0.32, 1); position: relative; display: block; min-width: 0; }
.glide-select[data-open] { z-index: 30; }
.glide-select > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.glide-select[data-disabled] { opacity: 0.5; }
.glide-select__trigger { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s, transform 160ms var(--gs-ease-out); }
.glide-select__trigger:disabled { cursor: default; }
.glide-select__trigger:not(:disabled):active { transform: scale(0.99); }
.glide-select__label { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.glide-select__label[data-empty] { color: var(--faint); }
.glide-select[data-swap] .glide-select__label { animation: gs-swap 160ms ease; }
@keyframes gs-swap { from { opacity: 0.6; filter: blur(2px); } }
.glide-select__chevron { display: inline-flex; flex-shrink: 0; color: var(--muted); transition: transform 200ms var(--gs-ease-out); }
.glide-select[data-open] .glide-select__chevron { transform: rotate(180deg); }
.glide-select__menu { position: absolute; z-index: 20; left: 0; min-width: 100%; padding: 5px; border-radius: 13px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -12px rgba(18, 16, 25, 0.22), 0 2px 6px rgba(18, 16, 25, 0.06); opacity: 0; transform: scale(0.97); transform-origin: top left; transition: opacity var(--gs-pop) var(--gs-ease-out), transform var(--gs-pop) var(--gs-ease-out); }
.glide-select__menu[data-state="open"] { opacity: 1; transform: none; }
.glide-select__menu[data-state="closed"] { transition-duration: var(--gs-pop-out); pointer-events: none; }
.glide-select__menu[data-side="bottom"] { top: calc(100% + 6px); }
.glide-select__menu[data-side="top"] { bottom: calc(100% + 6px); transform-origin: bottom left; }
.glide-select__list { position: relative; display: grid; gap: 1px; max-height: min(360px, 60vh); overflow-y: auto; overscroll-behavior: contain; touch-action: none; }
.glide-select__pill { position: absolute; top: 0; left: 0; right: 0; height: 40px; border-radius: 9px; background: #f1eefb; opacity: 0; pointer-events: none; transition: transform var(--gs-glide) var(--gs-ease-out), opacity 150ms ease; }
.glide-select__option { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px 0 12px; border-radius: 9px; font-size: 15px; font-weight: 500; color: var(--text); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 150ms ease; }
.glide-select__option[aria-selected="true"] { background: rgba(241, 238, 251, 0.6); }
.glide-select__list[data-live] .glide-select__option[aria-selected="true"] { background: transparent; }
.glide-select__name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.glide-select__tag { flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--faint); }
.glide-select__check { display: inline-flex; flex-shrink: 0; color: var(--violet); visibility: hidden; }
.glide-select__option[aria-selected="true"] .glide-select__check { visibility: visible; }
/* In the forms: the same field as the inputs */
.form .glide-select__trigger { font: 16px var(--body); font-weight: 400; color: var(--text); background: var(--paper); border: 1px solid var(--line-2); border-radius: 11px; padding: 12px 14px 12px 14px; min-height: 48px; }
.form .glide-select__trigger:not(:disabled):hover { border-color: rgba(18, 16, 25, 0.3); }
.form .glide-select__trigger:focus { outline: none; }
.form .glide-select__trigger:focus-visible, .form .glide-select[data-open] .glide-select__trigger { background-color: #fff; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(121, 87, 255, 0.14); }
.form .glide-select[data-invalid] .glide-select__trigger { border-color: #d6456b; box-shadow: 0 0 0 4px rgba(214, 69, 107, 0.12); }
.form .glide-select__chevron { margin-right: 2px; }
@media (prefers-reduced-motion: reduce) {
	.glide-select__menu { transform: none !important; transition: opacity var(--gs-pop) ease; }
	.glide-select__menu[data-state="closed"] { transition-duration: var(--gs-pop-out); }
	.glide-select__pill { transition: opacity 150ms ease; }
	.glide-select__chevron, .glide-select__trigger { transition: none; }
	.glide-select__trigger:not(:disabled):active { transform: none; }
	.glide-select[data-swap] .glide-select__label { animation: none; }
}
.form .check { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 24px 0; }
.form .check input { accent-color: var(--violet); width: 18px; height: 18px; }
.form-status { margin: 14px 0 0; font-weight: 500; color: var(--violet-deep); min-height: 1.4em; }

/* --- Support -------------------------------------------------------------------------------------- */
.support-hero { padding-block: clamp(48px, 7vw, 96px) clamp(44px, 6vw, 72px); }
.support-hero h1 { font-size: clamp(40px, 5.2vw, 68px); }
.support-hero-home { text-align: center; padding-block: clamp(80px, 11vw, 150px) clamp(64px, 8vw, 110px); }
.support-hero-home .lede { margin-inline: auto; }
.support-hero-home .eyebrow { justify-content: center; }
.guide-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr; gap: 32px; align-items: center; margin: 0 0 22px; padding: 10px 28px 10px 10px; text-decoration: none; color: var(--muted); transition: transform 0.25s var(--ease); }
.guide-feature:hover { color: var(--muted); transform: translateY(-3px); }
.guide-feature-screen { padding: 12px; border-radius: 12px; background: #0b0a10; }
.guide-feature img { border-radius: 7px; }
.guide-feature b { display: block; font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.014em; color: var(--text); margin-bottom: 8px; }
.guide-feature em { display: flex; gap: 6px; align-items: center; font-style: normal; color: var(--violet-deep); font-weight: 600; margin-top: 14px; }
@media (max-width: 800px) { .guide-feature { grid-template-columns: 1fr; padding-right: 10px; } }
.guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .guide-grid { grid-template-columns: 1fr 1fr; } }
.guide-card { display: grid; gap: 6px; padding: 0 0 22px; overflow: hidden; text-decoration: none; color: var(--muted); font-size: 15px; transition: transform 0.25s var(--ease); }
.guide-card:hover { color: var(--muted); transform: translateY(-4px); }
.guide-art { display: grid; place-items: center; aspect-ratio: 1.3; background: radial-gradient(80% 90% at 50% 0%, #241d3a, var(--ink)); margin-bottom: 14px; }
.guide-art .keycap { width: 96px; height: 96px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5)); }
.guide-card b, .guide-card > span:last-child { padding-inline: 22px; }
.guide-card b { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--text); }
.support-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 64px; padding-block: 56px 80px; }
@media (max-width: 900px) { .support-layout { grid-template-columns: 1fr; gap: 24px; } }
.support-nav { display: grid; gap: 2px; align-content: start; position: sticky; top: 100px; }
.support-nav a { padding: 8px 12px; border-radius: 9px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; }
.support-nav a:hover { background: var(--surface-2); color: var(--text); }
.support-nav a[aria-current] { color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.support-nav-links { display: contents; }
/* Narrow screens: the search on its own row, the guides in one row that scrolls sideways. */
@media (max-width: 900px) {
	.support-nav { position: static; display: block; min-width: 0; }
	.support-nav-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 4px 40px 8px 0; }
	.support-nav-links { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
	.support-nav-links::-webkit-scrollbar { display: none; }
	.support-nav a { white-space: nowrap; flex: none; }
}
.support-body { min-width: 0; }
.support-body > h2 { margin-top: 48px; }
.support-body > h2:first-child { margin-top: 0; }
.support-body h2 { font-size: clamp(24px, 2.8vw, 34px); }
.steps-list { padding-left: 22px; display: grid; gap: 12px; }
.steps-list li::marker { color: var(--violet); font-weight: 600; }
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px) { .kinds { grid-template-columns: 1fr; } }
.kinds > div { padding: 22px; }
.kinds h3 { margin: 0 0 6px; }
.kinds p { color: var(--muted); margin: 0; font-size: 15px; }
.form-embed { margin-top: 28px; overflow: hidden; background: #fff; }
.form-embed iframe { width: 100%; height: 1100px; border: 0; display: block; }
code, .path { font-family: var(--mono); font-size: 0.88em; background: var(--surface-2); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.chips-static { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chip { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(12, 10, 18, 0.45); }
.c-game { color: var(--game); } .c-chat { color: var(--chat); } .c-media { color: var(--media); } .c-master { color: var(--master); } .c-mic { color: var(--mic); } .c-sounds { color: var(--sounds); }
/* Levels User Guide (content from the plugin project); darker channel colours for paper */
.guide { --game: #d4541d; --chat: #1f73d6; --media: #7446d9; --master: #3a4250; --mic: #0b8f7a; --sounds: #c93274; }
.guide nav.toc { position: sticky; top: 100px; align-self: start; font-size: 15px; }
.guide .toc-title { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.guide .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.guide .toc li { counter-increment: toc; }
.guide .toc a { display: flex; gap: 10px; padding: 6px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-weight: 500; }
.guide .toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--label); font-weight: 600; color: var(--faint); }
.guide .toc a:hover { background: var(--surface); color: var(--text); }
.guide .toc a.is-active { background: var(--surface); color: var(--violet-deep); box-shadow: var(--shadow); }
@media (max-width: 900px) { .guide nav.toc { position: static; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; } .guide .toc ol { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.guide section { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.guide section:last-child { border-bottom: 0; }
.guide ol.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 14px; }
.guide ol.steps > li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.guide ol.steps > li::before { content: counter(step); font-family: var(--display); font-weight: 800; font-size: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; }
.guide .ui { font-family: var(--label); font-weight: 600; letter-spacing: 0.02em; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 6px; white-space: nowrap; color: var(--text); }
.guide .table-scroll { overflow-x: auto; margin: 6px 0 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.guide table { border-collapse: collapse; width: 100%; font-size: 15px; }
.guide th, .guide td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--text); }
.guide tr:last-child td { border-bottom: 0; }
.guide th { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; color: var(--muted); background: var(--surface-2); }
.guide td:first-child { font-weight: 600; white-space: nowrap; }
.guide td.c-game, .guide th.c-game { color: var(--game); } .guide td.c-chat, .guide th.c-chat { color: var(--chat); } .guide td.c-media, .guide th.c-media { color: var(--media); } .guide td.c-master { color: var(--master); } .guide td.c-mic { color: var(--mic); } .guide td.c-sounds { color: var(--sounds); }
.guide .num { font-variant-numeric: tabular-nums; }
.guide .note { border: 0; border-left: 2px solid var(--violet); background: var(--surface); border-radius: 0 12px 12px 0; box-shadow: var(--shadow); }
.guide .note.warn { border-left-color: var(--violet-2); }
.guide .note .tag { font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; color: var(--violet-deep); display: block; margin-bottom: 2px; }
.guide .note p:last-child { margin: 0; }
.guide .figure { display: grid; gap: 18px; grid-template-columns: minmax(0, 420px) 1fr; align-items: center; margin: 8px 0 22px; }
@media (max-width: 720px) { .guide .figure { grid-template-columns: 1fr; } }
.guide .figure svg { width: 100%; height: auto; border-radius: 12px; }
.guide .legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.guide .legend li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; }
.guide .legend b { font-size: 13px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); margin-top: 2px; }
.guide .caption { font-size: 14px; color: var(--muted); }
.guide .g-deck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 520px; margin: 8px 0 18px; }
.guide .g-dial { aspect-ratio: 1; border-radius: 50%; border: 3px solid currentColor; display: grid; place-items: center; font-family: var(--label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; background: var(--surface); }
.guide .pos { font-family: var(--label); font-size: 13px; color: var(--muted); text-align: center; }
.guide .pagegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 420px; margin: 8px 0 6px; }
.guide .pagegrid div { border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); padding: 8px 4px; text-align: center; font-family: var(--label); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; min-height: 48px; display: grid; place-items: center; line-height: 1.15; }
.guide .pagegrid .dialrow { border-radius: 999px; min-height: 34px; }
.guide .pagegrid .hl { border-color: var(--sounds); color: var(--sounds); }
.guide pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: 14px; margin: 0; }
.guide .codeblock { position: relative; margin: 6px 0 18px; }
.guide .copy { position: absolute; top: 8px; right: 8px; font-family: var(--label); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); border-radius: 6px; padding: 3px 10px; cursor: pointer; }


/* --- Footer --------------------------------------------------------------------------------------- */
.footer { padding-top: clamp(64px, 8vw, 104px); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.footer-big { font-family: var(--display); font-weight: 300; font-size: clamp(44px, 8.4vw, 124px); letter-spacing: -0.02em; line-height: 0.95; margin-bottom: clamp(48px, 6vw, 80px); color: rgba(255, 255, 255, 0.92); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
.footer-grid > div { display: grid; gap: 9px; align-content: start; justify-items: start; }
.footer-grid p { color: var(--muted); margin: 8px 0 14px; }
.footer .logo img { height: 20px; }
.footer h3 { font-family: var(--body); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11.5px; color: var(--faint); margin-bottom: 8px; }
.footer-grid a:not(.btn):not(.logo) { color: var(--muted); text-decoration: none; font-size: 15px; transition: color 0.15s; }
.footer-grid a:not(.btn):not(.logo):hover { color: #fff; }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-block: 32px; margin-top: 56px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; }

/* --- Levels: its own identity (graphite, warm white, the violet cursor) ---------------------------- */
.theme-levels, .page-levels { --bg: #17191d; --text: #f5f5f2; --muted: rgba(245, 245, 242, 0.68); --faint: rgba(245, 245, 242, 0.45); --surface: #1f2227; --surface-2: #292c33; --line: rgba(245, 245, 242, 0.09); --line-2: rgba(245, 245, 242, 0.18); --shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9); --dot: var(--violet); --link: var(--violet-2); --accent: var(--violet); color-scheme: dark; }
.theme-levels { background: radial-gradient(70% 90% at 85% 0%, rgba(121, 87, 255, 0.28), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(121, 87, 255, 0.1), transparent 70%), #17191d; color: var(--text); }
.theme-levels .btn-lime, .page-levels .btn-lime { --key: var(--violet); --key-ink: #fff; --key-edge: var(--violet-deep); }
.theme-levels .btn-white { --key: #f5f5f2; --key-edge: #c9c8c2; }
.theme-levels .eyebrow::before, .page-levels .eyebrow::before { background: var(--violet); }
.theme-levels .badge-soon, .page-levels .badge-soon { background: rgba(121, 87, 255, 0.2); color: #cfc3ff; }
.theme-levels .hero-sub { color: rgba(245, 245, 242, 0.5); }
.theme-levels .hero-deck::before { background: radial-gradient(closest-side, rgba(121, 87, 255, 0.32), transparent); }
.theme-levels .hero-stats b { color: #f5f5f2; }
.theme-levels .skin-no-big, .page-levels .skin-no-big { color: var(--skin-a, var(--violet-2)); }
.theme-levels .price-soon { color: var(--ink); }
.hero-brand { display: flex; align-items: center; gap: 16px; margin: 0 0 30px; color: var(--muted); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.hero-brand .levels-logo { height: 40px; width: auto; }
.p-title-logo { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.p-title-logo .levels-signature { height: clamp(92px, 11vw, 140px); width: auto; }
.p-title-logo .levels-logo { height: clamp(64px, 8vw, 104px); width: auto; }
.p-title-sub { font-weight: 300; font-size: clamp(36px, 4.6vw, 60px); letter-spacing: -0.02em; line-height: 1; padding-bottom: 0.12em; color: var(--muted); }
.product-art-levels { background: radial-gradient(80% 100% at 85% 0%, rgba(121, 87, 255, 0.35), transparent 65%), #17191d; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.product-art-levels .product-levels-logo { width: 58%; height: auto; border-radius: 0; box-shadow: none; }
.product-levels-sub { color: rgba(245, 245, 242, 0.7); font-family: var(--display); font-weight: 300; font-size: 22px; letter-spacing: -0.014em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.product-art-cover { padding: 0; aspect-ratio: 2 / 1; background: var(--ink); }
.product-art-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.product-meta { display: flex; align-items: center; gap: 10px; }
.product-price { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }

.hero-count { margin: 18px 0 0; font-size: 13px; letter-spacing: 0.04em; color: var(--faint); }
.product-note { font-size: 12.5px; color: var(--faint); }
.collection-meta b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Touch strip: tappable, and Stream Deck's alert when a channel has no apps to show */
.deck-strip-cell { cursor: pointer; }
.deck-strip-cell:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.deck-strip-cell.is-alert::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 21h20z' fill='%23F5C518'/%3E%3Cpath d='M12 9v6M12 17.5v.5' stroke='%23111' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 34% no-repeat; animation: strip-alert 1s ease-out forwards; }
@keyframes strip-alert { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* --- Feature demos: a slice of the device (strip + dial), drawn live ------------------------------ */
[data-demo] { container-type: inline-size; }
.mini-deck { display: grid; grid-template-columns: repeat(var(--cols, 1), 1fr); padding: 8cqw 7cqw 7cqw; border-radius: 6cqw; background: linear-gradient(180deg, #26262b 0%, #1a1a1e 30%, #131316 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px #050506, 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.mini-col { display: grid; justify-items: center; gap: 8cqw; }
.mini-strip { position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; background: #000; }
.mini-col:first-child .mini-strip { border-top-left-radius: 2cqw; border-bottom-left-radius: 2cqw; }
.mini-col:last-child .mini-strip { border-top-right-radius: 2cqw; border-bottom-right-radius: 2cqw; }
.mini-strip svg { display: block; width: 100%; height: 100%; }
.mini-dial { width: calc(34cqw / var(--cols, 1)); pointer-events: none; }
.mini-tap { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; border-radius: 50%; background: rgba(255, 255, 255, 0.28); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); opacity: 0; pointer-events: none; }
.mini-tap.is-on { animation: tap 0.6s ease-out; }
@keyframes tap { 0% { opacity: 0; transform: scale(0.6); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.mini-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6%; padding: 7%; border-radius: 22px; background: linear-gradient(180deg, #26262b, #131316); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px #050506, 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.mini-key { aspect-ratio: 1; border-radius: 12%; overflow: hidden; background: #000; box-shadow: 0 0 0 2px #0b0b0d; }
.mini-key svg { display: block; width: 100%; height: 100%; }

/* Skin showcase: four live strips in a slice of the device */
[data-showcase] { container-type: inline-size; }
.showcase-device { padding: 3.5cqw; border-radius: 3cqw; background: linear-gradient(180deg, #26262b, #131316); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px #050506, 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.showcase-strips { display: grid; grid-template-columns: repeat(4, 1fr); aspect-ratio: 8 / 1; border-radius: 1cqw; overflow: hidden; background: #000; }
.showcase-cell svg { display: block; width: 100%; height: 100%; }

/* --- Levels product page ------------------------------------------------------------------------ */
.lv-hero { padding-bottom: clamp(72px, 9vw, 120px); }
.lv-claim { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.016em; margin: 26px 0 0; }
.lv-hero .p-summary { font-size: 18px; max-width: 46ch; }

.lv-problem { padding-block: clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.lv-problem p { margin: 0; max-width: 24ch; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.016em; text-wrap: balance; }
.lv-problem span { color: var(--faint); }

.lv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); }
.lv-steps li { padding: 28px 32px 8px 0; }
.lv-steps li + li { padding-left: 32px; border-left: 1px solid var(--line); }
@media (max-width: 860px) {
	.lv-steps { grid-template-columns: 1fr; }
	.lv-steps li, .lv-steps li + li { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}
.lv-step-no { display: block; font-family: var(--display); font-weight: 200; font-size: 64px; line-height: 0.9; letter-spacing: -0.01em; color: var(--violet); margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.lv-steps h3 { font-size: 22px; margin-bottom: 8px; }
.lv-steps p { color: var(--muted); margin: 0; max-width: 34ch; }

.lv-gesture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 900px) { .lv-gesture-grid { grid-template-columns: 1fr; max-width: 420px; } }
.lv-gesture-grid h3 { font-size: 26px; margin: 26px 0 6px; }
.lv-gesture-grid p { color: var(--muted); margin: 0; max-width: 32ch; }

.lv-stories .wrap { display: grid; gap: clamp(72px, 10vw, 140px); }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.story-flip .story-demo { order: 2; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } .story-flip .story-demo { order: 0; } }
.story-demo { padding: clamp(24px, 4vw, 56px); border-radius: 28px; background: radial-gradient(80% 90% at 80% 0%, rgba(121, 87, 255, 0.22), transparent 60%), #17191d; }
.story-demo > div { max-width: 460px; margin-inline: auto; }
.story-text h3 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -0.015em; margin-bottom: 18px; }
.story-text > p:not(.eyebrow) { font-size: 17px; color: var(--muted); max-width: 46ch; }
.story-text > p.story-note { font-size: 15px; padding-left: 14px; border-left: 2px solid var(--violet); }

.lv-skins-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; margin-bottom: 40px; }
@media (max-width: 900px) { .lv-skins-head { grid-template-columns: 1fr; } }
.lv-skins-head h2 { margin-bottom: 4px; }
.lv-skin-facts { list-style: none; margin: 0; padding: 0; display: flex; gap: 36px; }
.lv-skin-facts li { display: grid; gap: 4px; }
.lv-skin-facts b { font-family: var(--display); font-weight: 200; font-size: 48px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.lv-skin-facts li > span { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .lv-skin-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .lv-skin-facts b { font-size: clamp(26px, 8vw, 34px); } }
.lv-showcase-bar { display: grid; gap: 16px; margin: 22px 0 36px; }
.lv-showcase-now { margin: 0; color: var(--muted); font-size: 14px; }
.lv-showcase-now b { color: var(--text); font-weight: 600; }
.lv-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-picks button { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px/1 var(--body); color: var(--muted); background: transparent; border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 13px 8px 9px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.lv-picks button:hover { color: var(--text); border-color: var(--text); }
.lv-picks button[aria-pressed="true"] { color: var(--ink); background: #f5f5f2; border-color: #f5f5f2; }
.lv-pick-swatch { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--skin-a), var(--skin-b)); }

.lv-more-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .lv-more-grid { grid-template-columns: 1fr; } }
.lv-expansion { display: grid; grid-template-columns: 200px 1fr; overflow: hidden; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; color: var(--text); transition: transform 0.25s var(--ease); }
.lv-expansion:hover { color: var(--text); transform: translateY(-3px); }
@media (max-width: 560px) { .lv-expansion { grid-template-columns: 1fr; } }
.lv-expansion-art { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 28px; background: radial-gradient(80% 100% at 85% 0%, rgba(121, 87, 255, 0.35), transparent 65%), #17191d; }
.lv-expansion-art .product-levels-logo { width: 80%; }
.lv-expansion-text { display: grid; gap: 8px; align-content: center; padding: 26px 28px; }
.lv-expansion-text .eyebrow { margin: 0; }
.lv-expansion-text b { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.012em; }
.lv-expansion-text > span:not(.eyebrow) { color: var(--muted); font-size: 15px; }
.lv-expansion-text em { font-style: normal; font-weight: 600; color: var(--violet-deep); display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
.lv-works ul { list-style: none; margin: 0; padding: 0; display: grid; }
.lv-works li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.lv-works li:last-child { border-bottom: 1px solid var(--line); }
.lv-works b { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.008em; }
.lv-works span { color: var(--muted); font-size: 15px; }

.lv-final { text-align: center; }
.lv-final-in { display: grid; justify-items: center; }
.lv-final-logo { width: min(320px, 70%); height: auto; }
.lv-final-price { font-family: var(--display); font-weight: 200; font-size: clamp(56px, 7vw, 96px); line-height: 1; letter-spacing: -0.014em; margin: 30px 0 10px; font-variant-numeric: tabular-nums; }
.lv-final-text { color: var(--muted); max-width: 44ch; margin: 0; }
.lv-final .hero-cta { justify-content: center; }

.lv-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(23, 25, 29, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(245, 245, 242, 0.08); color: #f5f5f2; transform: translateY(100%); transition: transform 0.3s var(--ease); }
.lv-sticky.is-shown { transform: none; }
.lv-sticky-in { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.lv-sticky-logo { height: 22px; width: auto; }
.lv-sticky-price { margin-right: auto; font-size: 14px; color: rgba(245, 245, 242, 0.7); font-variant-numeric: tabular-nums; }
.lv-more { padding-bottom: 0; }
[data-nav-demo] { container-type: inline-size; }
.deck-body.is-demo, .deck-body.is-demo * { pointer-events: none; }

/* Levels Soundboard page */
.lv-sticky-name { font-family: var(--display); font-weight: 300; font-size: 18px; letter-spacing: -0.01em; color: rgba(245, 245, 242, 0.8); margin-left: -8px; }
.lv-sb-skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 32px); }
@media (max-width: 900px) { .lv-sb-skins { grid-template-columns: 1fr; max-width: 520px; } }
.lv-final-mark { justify-content: center; margin: 0; }
.lv-final-mark .levels-logo { height: clamp(56px, 7vw, 80px); width: auto; }

/* --- Levels bar: everything about Levels, under the main navigation ------------------------------ */
.subnav { background: #17191d; border-top: 1px solid rgba(245, 245, 242, 0.06); }
.subnav-in { display: flex; align-items: center; gap: 4px; min-height: 48px; overflow-x: auto; scrollbar-width: none; }
.subnav-in::-webkit-scrollbar { display: none; }
.subnav-logo { height: 18px; width: auto; margin-right: 18px; flex: none; }
.subnav a { flex: none; font-family: var(--display); font-weight: 500; font-size: 14px; color: rgba(245, 245, 242, 0.7); text-decoration: none; padding: 7px 11px; border-radius: 8px; }
.subnav a:hover { color: #f5f5f2; background: rgba(245, 245, 242, 0.06); }
.subnav a[aria-current] { color: #f5f5f2; background: rgba(121, 87, 255, 0.22); }
.subnav-price { margin-left: auto; flex: none; padding-left: 16px; font-size: 13px; color: rgba(245, 245, 242, 0.55); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .subnav-logo, .subnav-price { display: none; } }

/* --- Skin collections: a sidebar that stays in view -------------------------------------------- */
.collections-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; padding-top: 24px; }
.collections-nav { position: sticky; top: 136px; display: grid; gap: 2px; padding-top: 48px; }
.collections-nav-title { margin: 0 0 10px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.collections-nav a { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; transition: color 0.15s, background 0.15s; }
.collections-nav a b { font-family: var(--display); font-weight: 300; font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.collections-nav a:hover { color: var(--text); background: var(--surface-2); }
.collections-nav a[aria-current] { color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.collections-nav a[aria-current] b { color: var(--violet); }
.collections-nav .collections-nav-try { margin-top: 14px; color: var(--violet-deep); font-weight: 600; font-size: 14px; }
.collections-list { min-width: 0; }
.collections-list .skin-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.collection { scroll-margin-top: 130px; }
@media (max-width: 900px) {
	.collections-layout { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
	.collections-nav { top: 116px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 12px var(--gutter); margin-inline: calc(var(--gutter) * -1); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); scrollbar-width: none; }
	.collections-nav::-webkit-scrollbar { display: none; }
	.collections-nav-title, .collections-nav .collections-nav-try { display: none; }
	.collections-nav a { flex: none; white-space: nowrap; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; padding: 7px 13px; }
	.collection { scroll-margin-top: 180px; }
}

/* --- Profiles ---------------------------------------------------------------------------------- */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.profile-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.profile-card-art { aspect-ratio: 2 / 1; background: var(--ink); }
.profile-card-art img { width: 100%; height: 100%; object-fit: cover; }
.profile-card-body { display: grid; align-content: start; gap: 6px; padding: 18px 22px 22px; }
.profile-card-body p { margin: 0; color: var(--muted); font-size: 15px; }
.profile-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.profile-card-body h3 { font-size: 23px; letter-spacing: -0.012em; }
.profile-card-body .profile-card-devices { font-size: 13.5px; color: var(--faint); margin-bottom: 6px; }
.profile-card-body .profile-card-needs { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.profile-card-needs b { color: var(--text); font-weight: 600; margin-right: 4px; }

/* --- Icon sets --------------------------------------------------------------------------------- */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.icon-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); text-decoration: none; color: var(--text); transition: transform 0.25s var(--ease); }
.icon-card:hover { color: var(--text); transform: translateY(-4px); }
.icon-card[hidden] { display: none; }
.icon-card-art { aspect-ratio: 2 / 1; background: var(--ink); }
.icon-card-art img { width: 100%; height: 100%; object-fit: cover; }
.icon-card-body { display: grid; align-content: start; justify-items: start; gap: 4px; padding: 16px 18px 20px; }
.icon-card-top { display: flex; justify-content: space-between; gap: 10px; width: 100%; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.icon-card-price { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.004em; text-transform: none; color: var(--text); }
.icon-card-body b { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.012em; }
.icon-card-meta { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.fine-print { margin: 36px 0 0; font-size: 13px; color: var(--faint); max-width: 80ch; }
.page-paper .chips { position: static; }

/* --- Profile and icon set simulators ---------------------------------------------------------- */
.collections-nav.collections-nav-top { top: 92px; }
@media (max-width: 900px) { .collections-nav.collections-nav-top { top: 68px; } }
.psim { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 1000px) { .psim { grid-template-columns: 1fr; } }
.psim-stage { padding: clamp(18px, 3vw, 36px); border-radius: 24px; background: radial-gradient(90% 120% at 90% 0%, #363a45, #202329 55%, #15171b); }
.psim-side { display: grid; gap: 16px; align-content: start; }
.psim-side fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.psim-side legend, .isim-controls legend { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; padding: 0; }
.psim-side .seg button { color: var(--muted); border-color: var(--line-2); }
.psim-side .seg button:hover { color: var(--text); border-color: var(--text); }
.psim-side .seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.psim-side .seg button:disabled { opacity: 0.35; cursor: not-allowed; }
.psim-trail { margin: 0; font-size: 13px; color: var(--faint); letter-spacing: 0.02em; }
.psim-readout { margin: 0; min-height: 4.8em; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 15px; line-height: 1.5; color: var(--text); }
.psim-readout kbd { font-size: 12px; }
.sim-muted { color: var(--faint); font-size: 13px; }
.psim-needs { margin: 0; font-size: 14px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }
.psim-needs b { color: var(--text); margin-right: 4px; }

/* Keys of a profile: its own image, with Stream Deck's title drawn on top */
.deck-key span { position: relative; }
.deck-key img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deck-key.is-empty { cursor: default; }
.sim-title { position: absolute; left: 0; right: 0; padding: 0 6%; text-align: center; font: 700 calc(var(--size) / 72 * 14.2cqw) / 1.1 Arial, "Helvetica Neue", sans-serif; letter-spacing: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); pointer-events: none; }
.sim-title-bottom { bottom: 7%; }
.sim-title-top { top: 7%; }
.sim-title-middle { top: 50%; transform: translateY(-50%); }
.sim-strip-cell { display: grid; place-items: center; position: relative; overflow: hidden; }
.deck-strip { background-size: cover; background-position: center; }
.sim-strip-cell img { position: absolute; inset: 12% 30%; width: 40%; height: 76%; object-fit: contain; }
.sim-cell-title { position: absolute; left: 6%; top: 6%; font: 600 2.1cqw/1.2 var(--body); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.sim-cell-sub { position: absolute; left: 6%; bottom: 7%; right: 6%; font: 500 1.8cqw/1.2 var(--body); color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Other Stream Deck models */
.deck[data-model="mk2"] .deck-keys { grid-template-columns: repeat(5, 1fr); row-gap: 3.4cqw; }
.deck[data-model="mk2"] .deck-key { width: 13.2cqw; }
.deck[data-model="mk2"] .sim-title { font-size: calc(var(--size) / 72 * 13.2cqw); }
.deck[data-model="xl"] .deck-keys { grid-template-columns: repeat(8, 1fr); row-gap: 2cqw; }
.deck[data-model="xl"] .deck-key { width: 8.6cqw; border-radius: 1.2cqw; }
.deck[data-model="neo"] .deck-keys { row-gap: 5cqw; }
.neo-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4cqw; margin-top: 5cqw; }
.neo-touch { width: 9cqw; height: 5cqw; border-radius: 1.2cqw; background: #0b0b0d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.neo-info { height: 6cqw; border-radius: 1.2cqw; background: #000; color: #d8d8de; display: grid; place-items: center; font: 500 2.4cqw/1 var(--body); box-shadow: 0 0 0 0.45cqw #0b0b0d; }

/* Icon set page */
.isim { display: grid; gap: 0; }
.isim .psim-stage { border-radius: 22px 22px 0 0; }
.isim-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 22px 22px; background: var(--surface); text-align: center; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.isim-controls { margin-top: 18px; }
.isim .psim-readout { margin-top: 14px; min-height: 0; }
.theme-ink .psim-readout { background: var(--surface); }

/* Anything marked hidden stays hidden, whatever its display style. */
[hidden] { display: none !important; }
.profile-card { position: relative; transition: transform 0.25s var(--ease); }
.profile-card:hover { transform: translateY(-4px); }
.profile-card-link { color: inherit; text-decoration: none; }
.profile-card-link::after { content: ""; position: absolute; inset: 0; }

/* Stream Deck + XL: 9 × 4 keys, six dials under a wider strip */
.deck[data-model="plusxl"] { max-width: 820px; }
.deck[data-model="plusxl"] .deck-body { padding: 5cqw 4.5cqw 4.5cqw; border-radius: 4.5cqw; }
.deck[data-model="plusxl"] .deck-keys { grid-template-columns: repeat(9, 1fr); row-gap: 2.6cqw; }
.deck[data-model="plusxl"] .deck-key { width: 8cqw; border-radius: 1.1cqw; }
.deck[data-model="plusxl"] .deck-strip { grid-template-columns: repeat(6, 1fr); aspect-ratio: 12 / 1; margin-top: 4cqw; }
.deck[data-model="plusxl"] .deck-dials { grid-template-columns: repeat(6, 1fr); margin-top: 3.4cqw; }
.deck[data-model="plusxl"] .deck-dial { width: 8.6cqw; }
.deck[data-model="plusxl"] .sim-title { font-size: calc(var(--size) / 72 * 8cqw); }
/* Galleon 100 SD: the Stream Deck section of the keyboard */
.deck[data-model="galleon"] { max-width: 300px; }
.deck[data-model="galleon"] .deck-body { padding: 9cqw 8cqw 10cqw; border-radius: 6cqw; background: linear-gradient(180deg, #232327, #121215); }
.deck[data-model="galleon"] .deck-dials { grid-template-columns: repeat(2, auto); justify-content: end; gap: 6cqw; margin: 0 0 6cqw; }
.deck[data-model="galleon"] .deck-dial { width: 17cqw; }
.gal-screen { aspect-ratio: 16 / 9; border-radius: 2.5cqw; background: radial-gradient(90% 120% at 50% 0%, #2a2440, #0b0a10); box-shadow: 0 0 0 0.8cqw #0b0b0d; display: grid; place-items: center; color: #d8d8de; font: 500 5cqw/1.2 var(--body); text-align: center; padding: 4cqw; margin-bottom: 7cqw; }
.deck[data-model="galleon"] .deck-keys { grid-template-columns: repeat(3, 1fr); row-gap: 5cqw; }
.deck[data-model="galleon"] .deck-key { width: 24cqw; border-radius: 3cqw; }
.deck[data-model="galleon"] .sim-title { font-size: calc(var(--size) / 72 * 24cqw); }

.collections-nav-group { margin: 16px 0 4px; padding-left: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.collections-nav-title + .collections-nav-group { margin-top: 0; }
.collection-head-plain { grid-template-columns: 1fr; }
.collection-head-plain .eyebrow { margin-bottom: 10px; }
@media (max-width: 900px) { .collections-nav-group { display: none; } }

/* --- Simulator stage: a fixed box, the chosen device fits inside it (nothing moves when switching) --- */
.psim-stage { container-type: size; aspect-ratio: 6 / 5; display: grid; place-items: center; }
.psim-stage > .deck { max-width: none; width: min(100cqw, calc(var(--ar, 1.2) * 100cqh)); }
.psim-stage > .deck[data-model="plus"] { --ar: 1.181; }
.psim-stage > .deck[data-model="plusxl"] { --ar: 1.372; }
.psim-stage > .deck[data-model="mk2"] { --ar: 1.67; }
.psim-stage > .deck[data-model="xl"] { --ar: 1.856; }
.psim-stage > .deck[data-model="neo"] { --ar: 1.728; }
.psim-stage > .deck[data-model="galleon"] { --ar: 0.483; }
/* Device picker: tabs attached to the top of the stage */
.sim-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 6px; border-radius: 22px 22px 0 0; background: #202329; scrollbar-width: none; }
.sim-tabs::-webkit-scrollbar { display: none; }
.sim-tabs button { flex: 1 0 auto; font: 500 13px/1 var(--body); color: rgba(245, 245, 242, 0.65); background: transparent; border: 0; border-radius: 16px; padding: 10px 12px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.sim-tabs button:hover { color: #f5f5f2; background: rgba(245, 245, 242, 0.06); }
.sim-tabs button[aria-pressed="true"] { color: var(--ink); background: #f5f5f2; }
.isim .sim-tabs + .psim-stage { border-radius: 0; }
.isim-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.isim-options fieldset { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 12px; }
.isim-options legend { float: left; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 0; }
.isim-options .seg button { color: rgba(245, 245, 242, 0.75); border-color: rgba(245, 245, 242, 0.16); }
.isim-options .seg button[aria-pressed="true"] { background: #f5f5f2; color: var(--ink); }
.isim .psim-readout { margin-top: 14px; min-height: 3.2em; }
/* The strip button keeps its place when hidden, so switching device never moves the page. */
.isim-options [data-strip-next][hidden] { display: inline-flex !important; visibility: hidden; }
.sim-tabs { align-items: center; }
.sim-tabs-label { flex: none; padding: 0 8px 0 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 245, 242, 0.45); }
.sim-tabs button { flex: 1 1 0; min-width: max-content; padding: 10px 10px; }
/* Phones: every model fits in one row without scrolling; the "Stream Deck" label gives way. */
@media (max-width: 520px) {
	.sim-tabs-label { display: none; }
	.sim-tabs button { padding: 10px 6px; }
}

.collections-nav a b:empty { min-width: 1.4em; }

/* --- Buying: icon cards with a Buy button, "out now" rows ------------------------------------------ */
.icon-card { position: relative; }
.icon-card-link { color: inherit; text-decoration: none; }
.icon-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.icon-card:has(.icon-card-link:focus-visible) { outline: 2px solid var(--violet); outline-offset: 3px; }
.icon-card-link:focus-visible { outline: none; }
.icon-card-art { position: relative; }
.icon-card-flag { position: absolute; left: 12px; top: 12px; z-index: 2; font: 600 11px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--lime); padding: 6px 9px; border-radius: 999px; }
.icon-card-buy { position: relative; z-index: 2; margin-top: 4px; }
.icon-card.is-live { border-color: color-mix(in srgb, var(--lime) 55%, var(--line)); }
.out-now-head { display: grid; gap: 4px; margin-bottom: 24px; }
/* The latest sets (Simone, 30/09/2026): the newest as a full card, the next ones as a short list beside it */
.out-now-show { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.out-now-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.out-row { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 8px 12px 0; border-bottom: 1px solid var(--line); transition: background 0.2s; }
.out-row:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.out-row-art { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px; }
.out-row-text { display: grid; gap: 2px; min-width: 0; }
.out-row-top { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.out-row-link { font: 600 16px/1.3 var(--display); letter-spacing: -0.01em; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-row-link::after { content: ""; position: absolute; inset: 0; } /* the whole row opens the set */
.out-row-price { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.out-row-buy { position: relative; z-index: 1; }
@media (max-width: 860px) { .out-now-show { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .out-row { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; padding-right: 0; } .out-row-link { font-size: 15px; } }
.out-now-head h2 { margin: 0; }
.out-now-head p:not(.eyebrow) { color: var(--muted); margin: 6px 0 0; max-width: 56ch; }
.out-now-top { padding-top: clamp(40px, 5vw, 64px); }
.out-now-top .out-now { padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.icon-card-flag { left: auto; right: 12px; }

/* --- Collection header: name and story on the left, the pack offer on the right ------------------ */
.collection-head-offer { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 32px; }
.collection-head-offer h2 { margin-bottom: 12px; }
/* "Collection" written across the big number, in ink over the thin violet figures */
.collection-big-no { position: relative; }
.collection-big-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px 8px 3px; border-radius: 6px; background: var(--bg); color: var(--ink); font: 600 11px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 760px) { .collection-head-offer { grid-template-columns: auto 1fr; } .collection-head-offer .pack-box { grid-column: 1 / -1; } }
.pack-box { display: grid; justify-items: start; gap: 6px; min-width: 220px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pack-box-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.pack-box-prices { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.pack-box-price { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.pack-box-prices s { color: var(--faint); font-size: 15px; font-variant-numeric: tabular-nums; }
.pack-box-note { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.pack-box-included .pack-box-price { color: var(--violet-deep); }

/* --- Skin page: what you get, shown with the skin's own strip and keys ----------------------------- */
.gets-title { font-size: clamp(26px, 3vw, 36px); margin: 0 0 24px; }
.gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.get { display: grid; align-content: start; gap: 4px; margin: 0; padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.get b { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.006em; }
.get span:not(.get-icon):not(.get-shot), .get figcaption span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.get-art { padding: 0; overflow: hidden; }
.get-art figcaption { display: grid; gap: 4px; padding: 16px 20px 18px; }
.get-shot { display: grid; place-items: center; aspect-ratio: 16 / 6; padding: 18px; background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--skin-bg) 70%, #fff 8%), var(--skin-bg)); }
.get-shot img { width: 100%; border-radius: 6px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.7); }
.get-shot .get-keys { width: 88%; border-radius: 0; box-shadow: none; }
.get-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 10px; border-radius: 10px; background: var(--surface-2); color: var(--violet-deep); }
.get-icon .i { width: 19px; height: 19px; }
@media (max-width: 600px) { .gets { grid-template-columns: 1fr; } }
.needs-levels { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding: 16px 18px; border-radius: var(--r); background: var(--surface-2); }
.needs-levels img { flex: none; width: 44px; height: 44px; border-radius: 11px; }
.needs-levels p { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.needs-levels p b { color: var(--text); font-weight: 600; }
.needs-levels .btn { flex: none; }
@media (max-width: 600px) { .needs-levels { flex-wrap: wrap; } .needs-levels .btn { margin-left: 60px; } }

/* Previous and next skin, with their strips */
.skin-pager-section { padding-block: 0 clamp(64px, 9vw, 112px); }
.skin-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skin-pager a { display: grid; gap: 12px; padding: 16px 18px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform 0.2s var(--ease), border-color 0.2s; }
.skin-pager a:hover { transform: translateY(-2px); border-color: var(--line-2); color: var(--text); }
.skin-pager img { width: 100%; border-radius: 6px; }
.skin-pager-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.skin-pager-label .i { width: 16px; height: 16px; }
.skin-pager-name { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.skin-pager-name small { font-weight: 300; font-size: 14px; color: var(--faint); font-variant-numeric: tabular-nums; }
.skin-pager-next { text-align: right; }
.skin-pager-next .skin-pager-label, .skin-pager-next .skin-pager-name { justify-content: flex-end; }
@media (max-width: 600px) { .skin-pager-name { font-size: 16px; } .skin-pager a { padding: 12px; } }

/* --- Simulator: compact head, one card (stage, now showing, options), one scrolling skin list -------- */
.try-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 12px 48px; margin-bottom: 28px; }
.try-head h1 { max-width: none; margin: 0; font-size: clamp(32px, 3.6vw, 48px); }
.try-head .lede { margin: 0; max-width: 46ch; justify-self: end; font-size: 16px; }
@media (max-width: 900px) { .try-head { grid-template-columns: 1fr; } .try-head .lede { justify-self: start; } }
.try-stage { padding: clamp(16px, 3vw, 36px); }
.try { padding-top: clamp(28px, 3vw, 40px); }
/* The whole deck and the bar under it fit in the first screen */
.try-stage .deck { max-width: clamp(420px, calc((100svh - 420px) * 1.18), 640px); }
.try-bar { border-radius: 0; }
.try-tools { padding: 18px 20px 16px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 22px 22px; background: color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.try-tools .sim-controls { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.try-tools .try-howto { justify-content: flex-start; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.try-current-cta { flex-wrap: nowrap; }
.try-share { flex: none; width: 38px; padding: 0; height: 38px; justify-content: center; }
.try-browser { grid-template-rows: auto minmax(0, 1fr); }
.try-jump { display: grid; grid-template-columns: repeat(auto-fit, minmax(26px, 1fr)); gap: 2px; padding: 8px; border-bottom: 1px solid var(--line); }
.try-jump button { height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--faint); font: 500 12px/1 var(--body); font-variant-numeric: tabular-nums; cursor: pointer; transition: background 0.12s, color 0.12s; }
.try-jump button:hover { color: var(--text); background: var(--surface-2); }
.try-jump button[aria-current="true"] { color: var(--text); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--violet); }
.try-list { padding: 0 8px 8px; }
.try-group { gap: 2px; }
.try-group-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 8px; margin: 0 -8px; padding: 12px 16px 8px; background: var(--surface); font: 600 12px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.try-group-head b { font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }

/* --- Sticky offsets follow the header: taller on Levels pages, which add their own sub-navigation ---- */
:root { --head: 68px; }
body:has(.subnav) { --head: 118px; }
.side, .support-nav, .guide nav.toc { top: calc(var(--head) + 32px); }
.chips { top: var(--head); }
.try-side { top: calc(var(--head) + 20px); max-height: calc(100vh - var(--head) - 36px); }
.collections-nav.collections-nav-top { top: calc(var(--head) + 24px); }
@media (max-width: 900px) { .collections-nav.collections-nav-top { top: var(--head); } }
.section-tight:has(+ .skin-pager-section) { padding-bottom: 32px; }

/* --- New releases: violet (lime already means "on sale") --------------------------------------------- */
.badge-new { background: var(--violet); color: #fff; }
.eyebrow .badge-new { margin-left: 10px; vertical-align: 1px; letter-spacing: 0.08em; }
.card-flag-new { position: absolute; left: 12px; top: 12px; z-index: 2; font: 600 11px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--violet); padding: 6px 9px; border-radius: 999px; box-shadow: 0 6px 16px -8px rgba(40, 24, 110, 0.8); }
.skin-card-device { position: relative; }
.profile-card-top > span:last-child { display: inline-flex; gap: 6px; }
.nav-new { display: inline-block; margin-left: 8px; padding: 3px 6px 2px; border-radius: 999px; background: var(--violet); color: #fff; font: 600 9.5px/1 var(--body); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 2px; }
.try-jump button[data-new] { position: relative; }
.try-jump button[data-new]::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--violet-2, var(--violet)); }

/* --- Icon cards: clean cover, one price, the action always on the bottom line ------------------------ */
.icon-card-body { grid-template-rows: auto auto auto 1fr; justify-items: stretch; }
.icon-card-top { align-items: center; min-height: 20px; }
.icon-card-meta { margin-bottom: 14px; }
.icon-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; align-self: end; padding-top: 14px; border-top: 1px solid var(--line); }
.icon-card-buy { margin-top: 0; }
.icon-card-price { font-size: 17px; }
.icon-card-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 500; color: var(--muted); transition: color 0.15s; }
.icon-card-more .i { width: 15px; height: 15px; transition: translate 0.2s var(--ease); }
.icon-card:hover .icon-card-more { color: var(--text); }
.icon-card:hover .icon-card-more .i { translate: 3px 0; }
.icon-card.is-live { border-color: var(--line); }
.icon-card-top { height: 22px; min-height: 0; }
.icon-card-foot > * { white-space: nowrap; flex: none; }

/* Sidebars: "New" is a violet dot next to the name, so names never wrap for it (the word stays for screen readers) */
.collections-nav .nav-new { flex: none; align-self: center; width: 7px; height: 7px; margin-left: 8px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; overflow: hidden; box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 18%, transparent); }
/* Room for the longest names (Gray Zone Warfare, Graphic Design) on one line, dot included */
@media (min-width: 901px) { .collections-layout { grid-template-columns: 220px minmax(0, 1fr); } }
.collections-nav a { gap: 8px; }

/* Fine print at the end of a sidebar page: in the content column, set off by a line, with room before the footer */
.collections-list > .fine-print { max-width: 72ch; margin: clamp(48px, 6vw, 72px) 0 clamp(72px, 9vw, 120px); padding-top: 20px; border-top: 1px solid var(--line); line-height: 1.6; text-wrap: pretty; }
.collections-list > .fine-print { max-width: none; padding-right: max(0px, calc(100% - 72ch)); margin-bottom: 0; }
/* The space above the footer belongs to the layout, so pages without the fine print get it too */
.collections-layout { padding-bottom: clamp(72px, 9vw, 120px); }
@media (min-width: 901px) { .collections-nav a.collections-nav-try { display: block; text-wrap: balance; } .collections-nav a.collections-nav-try .i { display: inline-block; vertical-align: -3px; margin-left: 4px; } }

/* Previous / next skin: navigation, not products. No card, a hairline above, small strip, arrow in a circle */
.skin-pager { gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
.skin-pager a { grid-template-columns: auto clamp(96px, 12vw, 150px) minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px; background: transparent; border: 0; box-shadow: none; border-radius: 14px; transition: background 0.2s; }
.skin-pager a:hover { transform: none; background: var(--surface-2); }
.skin-pager img { border-radius: 4px; }
.skin-pager-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--text); transition: background 0.2s, border-color 0.2s, color 0.2s; }
.skin-pager-arrow .i { width: 18px; height: 18px; }
.skin-pager a:hover .skin-pager-arrow { background: var(--ink); border-color: var(--ink); color: #fff; }
.skin-pager-text { display: grid; gap: 3px; min-width: 0; }
.skin-pager-label { font-size: 11px; letter-spacing: 0.14em; }
.skin-pager-name { font-size: 16px; gap: 8px; }
.skin-pager-name small { font-size: 12.5px; }
.skin-pager-next { grid-template-columns: minmax(0, 1fr) clamp(96px, 12vw, 150px) auto !important; }
.skin-pager-next .skin-pager-text { order: -2; text-align: right; }
.skin-pager-next img { order: -1; }
.skin-pager-next .skin-pager-name { justify-content: flex-end; }
@media (max-width: 600px) { .skin-pager { grid-template-columns: 1fr 1fr; gap: 8px; } .skin-pager a { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 8px; } .skin-pager-next { grid-template-columns: minmax(0, 1fr) auto !important; } .skin-pager img { display: none; } .skin-pager-arrow { width: 34px; height: 34px; } }

/* Skin page: "Collection" across the collection part of the big number, in the skin's own colours */
.skin-no-col { position: relative; display: inline-block; }
.skin-hero .collection-big-label { background: var(--skin-ink); color: var(--skin-bg); }
.skin-pager { border-top: 0; background: linear-gradient(var(--line), var(--line)) 50% 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.skin-no-col .collection-big-label { left: 0; transform: translate(0, -50%); }
@media (max-width: 600px) { .collection-big-label { font-size: 9px; letter-spacing: 0.1em; padding: 3px 5px 2px; } }

/* Skin page: the collection pack under the single skin */
.pack-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; max-width: 560px; margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.pack-offer-text { display: grid; gap: 2px; }
.pack-offer-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.pack-offer-text > b { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.006em; }
.pack-offer-prices { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.pack-offer-prices b { font-family: var(--display); font-weight: 600; font-size: 16px; }
.pack-offer-prices s { color: var(--faint); font-size: 14px; }
.pack-offer-prices em { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--bg); }
.pack-offer-buy { background: var(--text); color: var(--bg); }
.pack-offer-buy:hover { color: var(--bg); }
.pack-offer-soon { display: grid; justify-items: end; gap: 8px; }
.pack-offer-soon a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; }
.pack-offer-soon a .i { width: 15px; height: 15px; transition: translate 0.2s var(--ease); }
.pack-offer-soon a:hover .i { translate: 3px 0; }
@media (max-width: 480px) { .pack-offer-soon { justify-items: start; } }
.buybar > .pack-offer { grid-column: 1 / -1; margin-top: 0; max-width: none; }

/* Simulator controls: a solid graphite panel, like the device body, so it reads the same on every skin colour */
.sim-controls { background: #1b1d22; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.55); color-scheme: dark; }
.try-tools .sim-controls { box-shadow: none; }

/* Levels sub-navigation: Get Levels, a small lime button on the right */
.subnav .subnav-buy { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; background: var(--lime); color: var(--ink); font: 600 13px/1 var(--body); text-decoration: none; white-space: nowrap; transition: filter 0.15s; }
.subnav .subnav-buy:hover { color: var(--ink); background: var(--lime); filter: brightness(1.05); }
.subnav .subnav-buy span { font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0.75; }
.subnav .subnav-buy em { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 5px 2px; border-radius: 5px; background: rgba(18, 16, 25, 0.12); }
.subnav .subnav-buy .i { width: 13px; height: 13px; }
@media (max-width: 600px) { .subnav .subnav-buy { display: none; } }

/* --- Levels page: the three pages of the Levels profile, as still pictures ---------------------------- */
.lv-pages-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.lv-page { margin: 0; display: grid; gap: 16px; align-content: start; }
.lv-page img { width: 100%; filter: drop-shadow(0 22px 34px rgba(18, 16, 25, 0.28)); }
.lv-page figcaption { display: grid; gap: 4px; }
.lv-page figcaption b { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.008em; }
.lv-page figcaption span { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 860px) { .lv-pages-grid { grid-template-columns: 1fr; max-width: 520px; } }

/* --- Levels User Guide, reviewed --------------------------------------------------------------------- */
.guide-hero .p-title-logo { margin: 18px 0 18px; }
.guide-hero .lede { max-width: 52ch; }
.guide-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 860px; margin-top: 34px; }
.guide-quick a { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 14px; background: rgba(245, 245, 242, 0.05); border: 1px solid rgba(245, 245, 242, 0.1); color: var(--muted); text-decoration: none; font-size: 14px; transition: background 0.15s, border-color 0.15s; }
.guide-quick a:hover { background: rgba(245, 245, 242, 0.09); border-color: rgba(245, 245, 242, 0.2); color: var(--muted); }
.guide-quick .i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--violet-2, #a48fff); }
.guide-quick span { display: grid; gap: 2px; }
.guide-quick b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--text); }
@media (max-width: 760px) { .guide-quick { grid-template-columns: 1fr; } }

/* One reading column: text, tables and figures share the same width */
.support-layout.guide { grid-template-columns: 240px minmax(0, 720px); gap: clamp(40px, 6vw, 88px); padding-block: 64px 112px; }
@media (max-width: 900px) { .support-layout.guide { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; } }
.guide article p, .guide article li { max-width: none; }
.guide article { counter-reset: gsec; font-size: 16.5px; line-height: 1.65; }

/* Sections: the number of the contents list above each title */
.guide section { counter-increment: gsec; padding-bottom: 56px; margin-bottom: 56px; }
.guide section > h2 { font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -0.016em; margin: 0 0 18px; }
.guide section > h2::before { content: counter(gsec, decimal-leading-zero); display: block; margin-bottom: 10px; font: 600 12px/1 var(--body); letter-spacing: 0.14em; color: var(--violet); }
.guide section h3 { font-size: 19px; letter-spacing: -0.006em; margin: 34px 0 10px; }

/* Contents: numbers in their own column, so long names wrap under the name */
.guide .toc a { display: grid; grid-template-columns: 26px 1fr; gap: 6px; font-size: 14.5px; line-height: 1.35; padding: 7px 10px; }
.guide .toc a::before { font-size: 12px; padding-top: 2px; }
.guide .toc-title { font-family: var(--body); font-size: 11px; letter-spacing: 0.14em; color: var(--faint); margin-bottom: 12px; }

/* Lists: the brand's square instead of the round bullet */
.guide article ul:not([class]) { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.guide article ul:not([class]) > li { position: relative; padding-left: 20px; }
.guide article ul:not([class]) > li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; background: var(--violet); }

/* Troubleshooting: the site's question cards */
.guide details.faq { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); max-width: none; }
.guide details.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 18px; font-family: var(--display); font-weight: 600; letter-spacing: -0.004em; line-height: 1.35; }
.guide details.faq summary::-webkit-details-marker { display: none; }
.guide details.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); color: var(--text); font: 400 16px/1 var(--body); transition: rotate 0.25s var(--ease), background 0.2s; }
.guide details.faq[open] summary::after { content: "+"; rotate: 45deg; background: var(--violet); color: #fff; }
.guide details.faq .answer { padding: 0 18px 16px; color: var(--muted); }
.guide details.faq .answer p:last-child, .guide details.faq .answer ul:last-child { margin-bottom: 0; }

/* The Levels pages: the real thing */
.guide .g-page { display: block; width: 100%; max-width: 520px; margin: 10px 0 12px; filter: drop-shadow(0 20px 30px rgba(18, 16, 25, 0.25)); }

/* The Soundboard pages: drawn as a small deck */
.guide .pagegrid { max-width: 460px; gap: 8px; padding: 14px; border-radius: 18px; background: #131417; margin: 10px 0 12px; }
.guide .pagegrid div { min-height: 52px; border-radius: 9px; border: 1px solid #30333a; background: #202227; color: #f5f5f2; font-size: 11.5px; }
.guide .pagegrid .dialrow { min-height: 36px; margin-top: 6px; background: transparent; border: 2px solid currentColor; border-radius: 999px; }
.guide .pagegrid .dialrow.c-game { color: #f07a45; } .guide .pagegrid .dialrow.c-chat { color: #5ea2ff; } .guide .pagegrid .dialrow.c-media { color: #a48fff; } .guide .pagegrid .dialrow.c-master { color: #c9ced8; }
.guide .pagegrid .hl { border-color: #e0569b; color: #ff8cc4; }
.guide .caption { margin-top: 0; font-size: 14px; }
.guide .g-page { max-width: 440px; }
@media (max-width: 760px) { .guide-quick { gap: 8px; margin-top: 24px; } .guide-quick a { padding: 12px 14px; align-items: center; } .guide-quick .i { margin-top: 0; } .guide-quick span { font-size: 0; } .guide-quick b { font-size: 15px; } }

/* --- Guide: spacing and readability pass ------------------------------------------------------------- */
@media (min-width: 901px) { .support-layout.guide { grid-template-columns: 240px minmax(0, 680px); } }
.guide article p { margin: 0 0 14px; }
.guide article p + h3, .guide article ul + h3, .guide article .table-scroll + h3, .guide article ol + h3 { margin-top: 38px; }
.guide section > h2 + p { font-size: 17.5px; color: var(--muted); margin-bottom: 20px; }
/* Notes: room inside, set apart from the steps around them */
.guide .note { margin: 22px 0; padding: 16px 20px 16px 22px; border-left-width: 3px; }
.guide .note .tag { font-family: var(--body); font-size: 11px; letter-spacing: 0.14em; margin-bottom: 6px; }
.guide .note p { margin: 0 0 8px; }
/* Steps: number and text on the same baseline, more air between steps */
.guide ol.steps { gap: 16px; margin: 6px 0 20px; }
.guide ol.steps > li { grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.guide ol.steps > li > div { padding-top: 3px; }
/* Figures: picture and legend both start at the top */
.guide .figure { align-items: start; gap: 24px; margin: 12px 0 10px; grid-template-columns: minmax(0, 360px) 1fr; }
@media (max-width: 720px) { .guide .figure { grid-template-columns: 1fr; gap: 16px; } }
.guide .legend { gap: 12px; font-size: 15px; line-height: 1.5; }
/* Tables: a touch more room, labels that don't shout */
.guide .table-scroll { margin: 10px 0 22px; }
.guide th, .guide td { padding: 12px 16px; line-height: 1.5; }
.guide th { font-family: var(--body); font-size: 11px; letter-spacing: 0.12em; }
.guide .caption { color: var(--faint); margin: 0 0 16px; }

/* --- Support guides by product type ------------------------------------------------------------------ */
.kinds-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; }
.kinds-4 > a { display: grid; align-content: start; gap: 6px; padding: 20px 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform 0.2s var(--ease), border-color 0.2s; }
.kinds-4 > a:hover { color: var(--text); transform: translateY(-2px); border-color: var(--line-2); }
.kinds-4 h3 { margin: 0; font-size: 18px; }
.kinds-4 em { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--violet-deep); }
.kinds-4 em .i { width: 15px; height: 15px; }
@media (max-width: 640px) { .kinds, .kinds-4 { grid-template-columns: 1fr; } }
.support-body > h2 { margin-top: 44px; }
.support-body h3 { margin: 26px 0 8px; font-size: 18px; }
.support-body ul:not([class]) { padding-left: 0; list-style: none; display: grid; gap: 8px; margin: 0 0 16px; }
.support-body ul:not([class]) > li { position: relative; padding-left: 20px; }
.support-body ul:not([class]) > li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; background: var(--violet); }
.support-body .table-scroll { overflow-x: auto; margin: 8px 0 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.support-body table { border-collapse: collapse; width: 100%; font-size: 15px; }
.support-body th, .support-body td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.support-body tr:last-child td { border-bottom: 0; }
.support-body th { font: 600 11px/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.support-body td:first-child { font-weight: 600; }
.support-body code { font-size: 0.9em; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); }
.support-body .faq { margin-bottom: 12px; }
/* Five guide cards on the support home: one row on wide screens */
.guide-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.support-layout:not(.guide) { grid-template-columns: 230px minmax(0, 720px); }
@media (max-width: 900px) { .support-layout:not(.guide) { grid-template-columns: 1fr; } }

/* --- Search over the guides ---------------------------------------------------------------------------- */
.search { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); transition: border-color 0.15s, box-shadow 0.15s; }
.search:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 18%, transparent); }
.search > .i { flex: none; width: 18px; height: 18px; color: var(--faint); }
.search input { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 15px var(--body); }
.search input::placeholder { color: var(--faint); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { flex: none; }
.search:focus-within kbd { visibility: hidden; }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; max-height: min(460px, 60vh); overflow-y: auto; padding: 6px; border-radius: 14px; background: #fff; color: var(--ink); border: 1px solid rgba(18, 16, 25, 0.1); box-shadow: 0 24px 60px -20px rgba(20, 12, 60, 0.45); text-align: left; }
.search-results a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.search-results a:hover, .search-results a[aria-selected="true"] { background: #f1eefb; }
.search-results b { font-family: var(--display); font-weight: 600; font-size: 15px; }
.search-results small { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6f6982; }
.search-results span { font-size: 13.5px; line-height: 1.45; color: #5d576f; }
.search-results mark { background: color-mix(in srgb, var(--lime) 60%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-none { margin: 0; padding: 14px; font-size: 14px; color: #5d576f; }
/* The big one on the landing page */
.search-lg { max-width: 640px; margin: 34px auto 0; padding: 0 16px; border-radius: 16px; border-color: transparent; box-shadow: 0 20px 50px -24px rgba(10, 4, 50, 0.8); background: #fff; }
.search-lg input { height: 58px; font-size: 17px; color: var(--ink); }
.search-lg input::placeholder { color: #8a849c; }
.search-lg > .i { width: 21px; height: 21px; color: #6f6982; }
.search-lg kbd { color: var(--ink); background: #f1eefb; border-color: rgba(18, 16, 25, 0.16); }
/* In the side menu of the guides */
.support-nav .search { margin-bottom: 14px; }
.support-nav .search input { height: 38px; font-size: 14px; }
.support-nav .search-results { right: auto; width: min(420px, 80vw); }

/* --- Support landing ---------------------------------------------------------------------------------------- */
.support-hero-home { padding-block: clamp(64px, 9vw, 120px) clamp(56px, 7vw, 96px); }
.support-hero-home h1 { font-size: clamp(44px, 6vw, 80px); }
.support-quick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 22px auto 0; max-width: 720px; font-size: 14px; color: var(--muted); }
.support-quick span { margin-right: 2px; }
.support-quick a { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; text-decoration: none; transition: background 0.15s; }
.support-quick a:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

.support-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1080px) { .support-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .support-kinds { grid-template-columns: 1fr; } }
.sk { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform 0.25s var(--ease); }
.sk:hover { transform: translateY(-3px); }
.sk-main { display: grid; color: var(--text); text-decoration: none; }
.sk-main:hover { color: var(--text); }
.sk-art { display: grid; place-items: center; aspect-ratio: 2 / 1; overflow: hidden; background: #17191d; }
.sk-art img { width: 100%; }
.sk-cover img { height: 100%; object-fit: cover; }
.sk-levels { gap: 12px; padding: 18px; align-content: center; }
.sk-levels .sk-logo { width: 42%; height: auto; }
.sk-levels img:last-child { border-radius: 5px; }
.sk-skins { padding: 20px; background: radial-gradient(90% 120% at 50% 0%, #3a2463, #140f1f); }
.sk-body { display: grid; gap: 4px; padding: 18px 20px 6px; }
.sk-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.sk-body b { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.012em; }
.sk-body > span:last-child { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.sk-links { list-style: none; margin: 0; padding: 10px 12px 14px; align-self: end; }
.sk-links a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 8px; border-top: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; }
.sk-links li:first-child a { border-top: 0; }
.sk-links a .i { width: 15px; height: 15px; color: var(--faint); transition: translate 0.2s var(--ease), color 0.2s; }
.sk-links a:hover { color: var(--violet-deep); }
.sk-links a:hover .i { translate: 3px 0; color: var(--violet-deep); }

.support-common-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.support-common-grid h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 10px; }
.support-common-grid .lede { margin: 0 0 20px; }
@media (max-width: 860px) { .support-common-grid { grid-template-columns: 1fr; } }
.support-hero-home { overflow: visible; overflow-x: clip; position: relative; z-index: 5; } /* search results drop below; nothing spills sideways */
@media (hover: none) { .search kbd { display: none; } }
.support-nav { z-index: 10; }
/* Common questions on the support landing: two groups side by side */
.support-common-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.support-common-title { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-family: var(--body); }
@media (max-width: 860px) { .support-common-grid { grid-template-columns: 1fr; } }

/* Product search at the top of the side column (Profiles, Icon sets) */
.collections-nav .search { margin: 0 0 18px; }
.collections-nav .search input { height: 38px; font-size: 14px; }
.collections-nav .search-results { right: auto; width: min(400px, 80vw); }
.collections-nav { z-index: 10; }
@media (max-width: 900px) { .collections-nav .search { display: none; } }

/* --- Side column of Profiles and Icon sets: fixed width, names aligned, the count as a quiet tag on the right --- */
.collections-layout > .collections-nav { min-width: 0; }
.collections-nav .search { min-width: 0; width: 100%; box-sizing: border-box; }
.collections-nav .search input { width: 100%; }
@media (min-width: 901px) {
	.collections-nav-counts a { align-items: center; }
	.collections-nav-counts a b { order: 3; margin-left: auto; min-width: 0; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); font: 600 11px/1.3 var(--body); color: var(--faint); }
	.collections-nav-counts a b:empty { display: none; }
	.collections-nav-counts a .nav-new { order: 2; }
	.collections-nav-counts a[aria-current] b { background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet-deep); }
}

/* --- Motion ----------------------------------------------------------------------------------------------
   Slow light behind every hero, the Levels wave running under the Levels heroes, hero content rising in,
   sections easing in as they arrive. "Reduce motion" (the global rule at the top) turns all of it off. */
.hero, .page-hero, .p-hero, .support-hero { --glow-a: rgba(164, 143, 255, 0.55); --glow-b: rgba(223, 255, 94, 0.14); --glow-c: rgba(58, 30, 190, 0.6); }
.theme-levels.hero, .theme-levels.p-hero, .theme-levels.support-hero, .theme-ink.p-hero { --glow-a: rgba(121, 87, 255, 0.3); --glow-b: rgba(164, 143, 255, 0.1); --glow-c: rgba(121, 87, 255, 0.14); }
.theme-lime.page-hero { --glow-b: rgba(223, 255, 94, 0.22); }
.skin-hero { --glow-a: color-mix(in srgb, var(--skin-a) 40%, transparent); --glow-b: color-mix(in srgb, var(--skin-b) 22%, transparent); --glow-c: color-mix(in srgb, var(--skin-a) 18%, transparent); }
.hero::before, .page-hero::before, .p-hero::before, .support-hero::before {
	content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
	background:
		radial-gradient(28% 34% at 22% 30%, var(--glow-a), transparent 70%),
		radial-gradient(26% 30% at 78% 68%, var(--glow-c), transparent 70%),
		radial-gradient(16% 20% at 62% 22%, var(--glow-b), transparent 70%);
	animation: glow-drift 28s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes glow-drift {
	0% { transform: translate3d(-5%, -3%, 0) rotate(0deg) scale(1); }
	50% { transform: translate3d(4%, 4%, 0) rotate(7deg) scale(1.08); }
	100% { transform: translate3d(7%, -4%, 0) rotate(-5deg) scale(1.03); }
}
/* Levels: its wave, sliding under the hero */
.theme-levels.p-hero::after, .support-hero.theme-levels::after {
	content: ""; position: absolute; inset: auto 0 6% 0; height: 180px; z-index: -1; pointer-events: none;
	background: url("/assets/img/wave.svg") repeat-x 0 0 / 900px 180px;
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	animation: wave-run 36s linear infinite;
}
@keyframes wave-run { to { background-position-x: -900px; } }
/* No Levels wave anywhere any more, nor grid lines under it: the aurora only (Simone, 29/09/2026) */
.hero.theme-levels::after, .theme-levels.p-hero::after, .support-hero.theme-levels::after { content: none; }

/* Hero content rises in, one line after the other; the headline's square blinks twice like a cursor */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes dot-blink { 50% { opacity: 0; } }
.hero .wrap > *, .page-hero .wrap > *, .support-hero .wrap > *, .p-hero .crumbs, .p-hero-grid > div:first-child > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
:is(.hero .wrap, .page-hero .wrap, .support-hero .wrap, .p-hero-grid > div:first-child) > :nth-child(2) { animation-delay: 0.07s; }
:is(.hero .wrap, .page-hero .wrap, .support-hero .wrap, .p-hero-grid > div:first-child) > :nth-child(3) { animation-delay: 0.14s; }
:is(.hero .wrap, .page-hero .wrap, .support-hero .wrap, .p-hero-grid > div:first-child) > :nth-child(4) { animation-delay: 0.21s; }
:is(.hero .wrap, .page-hero .wrap, .support-hero .wrap, .p-hero-grid > div:first-child) > :nth-child(5) { animation-delay: 0.28s; }
:is(.hero .wrap, .page-hero .wrap, .support-hero .wrap, .p-hero-grid > div:first-child) > :nth-child(n + 6) { animation-delay: 0.35s; }
.p-stage { animation: rise 1.1s 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
h1 .dot { display: inline-block; animation: dot-blink 1s steps(1) 1s 2; }

/* Sections ease in as they arrive (classes set by site.js, only below the first screen) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--ri, 0) * 70ms); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Arrows move with the pointer */
.btn .i { transition: translate 0.2s var(--ease); }
.btn:hover .i { translate: 2px 0; }

/* Touch on the demo strips: a soft fingertip that presses, then a thin ring that widens and fades, once. */
.mini-art, .mini-art svg { display: block; width: 100%; height: 100%; }
.mini-tap { width: 20%; margin: -10% 0 0 -10%; background: radial-gradient(circle, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12) 62%, transparent 72%); box-shadow: none; }
.mini-tap::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.55); opacity: 0; }
.mini-tap.is-on { animation: finger 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.mini-tap.is-on::after { animation: ring 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both; }
@keyframes finger { 0% { opacity: 0; transform: scale(1.15); } 18% { opacity: 1; transform: scale(0.92); } 45% { opacity: 0.9; transform: scale(0.95); } 100% { opacity: 0; transform: scale(1); } }
@keyframes ring { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 0; transform: scale(2.2); } }
/* The same fingertip on a dial that is pressed (a bigger print on the knob) */
.mini-dial .mini-tap { z-index: 3; width: 44%; margin: -22% 0 0 -22%; }
/* Skin page: where the skin comes from, above what it does */
.p-origin { margin: 16px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--text); }
.p-origin span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.p-origin + .p-summary { margin-top: 10px; font-size: 15.5px; }

/* --- Skin page hero, less crowded ------------------------------------------------------------------------ */
.skin-top { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 36px); }
.skin-top .crumbs { margin: 0; }
.skin-step { display: flex; gap: 8px; }
.skin-step a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 500; line-height: 1.2; backdrop-filter: blur(6px); transition: border-color 0.15s, background 0.15s; }
.skin-step a:last-child { padding: 7px 9px 7px 12px; }
.skin-step a:hover { color: var(--text); border-color: var(--c, var(--text)); background: color-mix(in srgb, var(--c, var(--text)) 16%, var(--bg)); }
.skin-step a .i { width: 15px; height: 15px; flex: none; }
.skin-step span { display: inline-flex; align-items: baseline; gap: 6px; }
.skin-step small { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.skin-step a::before { content: ""; order: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; }
.skin-step a:first-child::before { order: 2; }
.skin-step a:first-child span { order: 1; }
.skin-step a:first-child .i { order: 0; }
@media (max-width: 600px) { .skin-step { width: 100%; justify-content: space-between; } .skin-step small { display: none; } }

.skin-head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.skin-head .skin-no-big { margin: 0; font-size: clamp(48px, 5vw, 68px); }
.skin-head .eyebrow { margin: 0; }
.skin-head .eyebrow a { color: inherit; text-decoration: none; }
.skin-head .eyebrow a:hover { text-decoration: underline; }
.skin-hero .p-title { margin-bottom: 0; }
.skin-hero .p-origin { margin-top: 18px; }

.skin-buy { display: grid; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 520px; }
.skin-buy-main { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.skin-price { display: grid; line-height: 1.1; }
.skin-price b { font-family: var(--display); font-weight: 300; font-size: 34px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.skin-price small { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.skin-pack { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--text); text-decoration: none; font-size: 14px; transition: border-color 0.15s, background 0.15s; }
.skin-pack:hover { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--text) 5%, transparent); }
.skin-pack > .i { width: 16px; height: 16px; flex: none; }
.skin-pack-price { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; font-variant-numeric: tabular-nums; }
.skin-pack-price b { font-weight: 600; }
.skin-pack-price s { color: var(--faint); font-size: 13px; }
.skin-pack-price em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--bg); }
.skin-needs { margin: 0; font-size: 12.5px; color: var(--faint); }

/* Compact simulator options on skin pages */
.sim-controls-compact { display: grid; gap: 10px; padding: 12px 14px; margin-top: 18px; }
.sim-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.sim-more summary::-webkit-details-marker { display: none; }
.sim-more summary::after { content: "+"; font-size: 14px; }
.sim-more[open] summary::after { content: "−"; }
.sim-more summary:hover { color: #fff; }
.sim-more[open] { display: grid; gap: 12px; }
.sim-more fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.sim-more legend { padding: 0; margin-bottom: 6px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.skin-head .skin-no-big { flex: none; white-space: nowrap; }
.skin-head .eyebrow { min-width: 0; }

/* Skin page: the collection pack as one clear row (name on the left, price on the right, arrow in a circle) */
.skin-pack { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; flex-wrap: nowrap; padding: 12px 12px 12px 16px; }
.skin-pack-text { display: grid; gap: 3px; min-width: 0; }
.skin-pack-text small { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.skin-pack-text small em { font-style: normal; letter-spacing: 0.02em; padding: 2px 6px; border-radius: 999px; background: var(--accent); color: var(--bg); }
.skin-pack-text b { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -0.006em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-pack-price { display: grid; justify-items: end; gap: 1px; margin: 0; line-height: 1.15; }
.skin-pack-price b { font-family: var(--display); font-size: 18px; }
.skin-pack-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); transition: background 0.15s, border-color 0.15s, color 0.15s; }
.skin-pack-go .i { width: 16px; height: 16px; }
.skin-pack:hover .skin-pack-go { background: var(--text); border-color: var(--text); color: var(--bg); }
.skin-pack > .i { display: none; }


/* Contact Support: our own form */
.support-form { margin-top: 24px; }
.support-form .optional { margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

/* Currency menu in the header */
.currency select { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 26px 0 10px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center; color: #fff; font: 600 13px var(--body); cursor: pointer; }
.currency select:hover { border-color: rgba(255, 255, 255, 0.35); }
.currency select option { color: #121019; }
.currency .glide-select { display: inline-block; }
.currency .glide-select__trigger { width: auto; gap: 7px; height: 32px; padding: 0 9px 0 10px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #fff; font: 600 13px var(--body); }
.currency .glide-select__trigger:not(:disabled):hover, .currency .glide-select[data-open] .glide-select__trigger { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); }
.currency .glide-select__trigger:focus { outline: none; }
.currency .glide-select__trigger:focus-visible { box-shadow: 0 0 0 3px rgba(162, 141, 255, 0.45); }
.currency .glide-select__chevron { color: rgba(255, 255, 255, 0.6); }
.currency .glide-select__chevron svg { width: 10px; height: 7px; }
.currency .glide-select__menu { left: auto; right: 0; min-width: 132px; transform-origin: top right; background: #1c1926; border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.6); }
.currency .glide-select__pill { height: 34px; background: rgba(255, 255, 255, 0.1); }
.currency .glide-select__option { min-height: 34px; font-size: 13px; color: #fff; }
.currency .glide-select__option[aria-selected="true"] { background: rgba(255, 255, 255, 0.05); }
.currency .glide-select__check { color: var(--lime); }
@media (max-width: 940px) { .currency .glide-select__menu { left: 0; right: auto; transform-origin: top left; } }
.money { font-variant-numeric: tabular-nums; }

/* "Collection" sits on the bottom edge of the big number, never over the whole figures */
.collection-big-label { top: 100%; transform: translate(-50%, -70%); padding: 3px 7px 2px; font-size: 10px; letter-spacing: 0.14em; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.4); }
.skin-no-col .collection-big-label { top: 100%; transform: translate(0, -70%); }
@media (max-width: 600px) { .collection-big-label { font-size: 8.5px; padding: 2px 5px 1px; } }

/* Privacy page */
.p-note { color: var(--faint); font-size: 13px; }
.prefs { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 14px 0 6px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.prefs p { margin: 0; }
.prefs span { color: var(--muted); margin-left: 6px; }

/* Skins sold only on their own (outside their collection's pack) */
.single-tag { margin-right: 8px; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.skin-single { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-2); font-size: 14px; color: var(--muted); }
.skin-single a { color: var(--text); }

/* Soft Aurora behind the heroes of Levels and its pages (aurora.js, loaded only under /levels/; Simone,
   29/09/2026), in our palette: Levels warm white and violet cursor. With WebGL it replaces the CSS glow above. */
.hero, .page-hero, .p-hero, .support-hero { --aurora-1: #f5f5f2; --aurora-2: #7957ff; --aurora-brightness: 0.8; --aurora-band: 0.42; }
.theme-levels.p-hero, .theme-levels.support-hero { --aurora-brightness: 0.75; }
.theme-levels.hero { --aurora-1: #dfff5e; --aurora-2: #7957ff; --aurora-brightness: 1.15; --aurora-band: 0.36; } /* home: Frenetiq brand colours, lime and violet; most of it sits behind the deck */
.skin-hero { --aurora-bg: var(--skin-bg); }
.aurora { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; animation: aurora-in 1.6s ease-out 0.2s forwards;
	/* softer behind the text (on the left), full on the other side */
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5) 38%, #000 72%); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5) 38%, #000 72%); }
.aurora.light { mix-blend-mode: multiply; }
@media (max-width: 900px) { .aurora { mask-image: linear-gradient(rgba(0, 0, 0, 0.35), #000); -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.35), #000); } }
@keyframes aurora-in { to { opacity: 1; } }
.has-aurora::before { display: none; }
@media (prefers-reduced-motion: reduce) { .aurora { opacity: 1; } }

/* Collection of the week (schedule in publish.json): ink and lime, apart from New (violet) and on sale (lime) */
.week-tag { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin: 0 0 10px; padding: 5px 10px 4px; border-radius: 999px; background: #121019; color: var(--lime); font: 600 10.5px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.week-tag::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--lime); }
.theme-ink .week-tag, .collection-card .week-tag { background: var(--lime); color: #121019; }
.theme-ink .week-tag::before, .collection-card .week-tag::before { background: #121019; }
.collection-card.is-week { border-color: color-mix(in srgb, var(--lime) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lime) 30%, transparent), 0 24px 50px -30px rgba(223, 255, 94, 0.35); }
.badge-week { background: #121019; color: var(--lime); }
.nav-week { flex: none; align-self: center; margin-left: 8px; padding: 3px 6px 2px; border-radius: 999px; background: #121019; color: var(--lime); font: 600 9px/1 var(--body); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }

/* Skins index hero: copy and buttons, and a tilted wall of skin pieces drifting in columns (Drift Wall, site.js) */
.skins-hero { --hero-pad: clamp(48px, 6vw, 84px); padding-block: var(--hero-pad); }
.skins-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.skins-hero .hero-cta { margin-top: 30px; }
.skins-hero .btn-ghost { --text: #fff; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.skins-hero .btn-ghost:hover { box-shadow: inset 0 0 0 1px #fff; }
.skins-hero-copy { position: relative; z-index: 1; }
.skins-hero-art { position: relative; z-index: 0; }
/* Desktop: the wall fills the right side of the hero, top to bottom, with no fade */
@media (min-width: 901px) {
	/* in the page column, so it keeps the right margin; top to bottom of the hero past its padding */
	.skins-hero-art { align-self: stretch; margin-block: calc(var(--hero-pad) * -1); }
	.skins-hero-grid { min-height: calc(560px - 2 * var(--hero-pad)); }
	.skins-hero .drift-wall { --dw-w: 112px; --dw-gap: 14px; height: 100%; } /* four columns fill the window at any width */
	.skins-hero .wall-shuffle { position: absolute; left: 50%; bottom: 22px; z-index: 2; margin: 0; transform: translateX(-50%); background: rgba(12, 10, 18, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
.drift-wall { --dw-w: 120px; --dw-gap: 16px; --dw-radius: 14px; --dw-lift: 44px; position: relative; height: clamp(420px, 38vw, 540px); overflow: hidden; perspective: 1200px; perspective-origin: 50% 50%; }
.dw-plane { position: absolute; top: 50%; left: 50%; display: flex; transform-style: preserve-3d; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(1.18) rotateX(16deg) rotateY(-14deg) translateZ(-120px); will-change: transform; cursor: pointer; }
.dw-col { position: relative; width: calc(var(--dw-w) + var(--dw-gap)); transform-style: preserve-3d; }
.dw-track { display: flex; flex-direction: column; transform-style: preserve-3d; will-change: transform; }
.dw-tile { position: relative; display: block; flex: none; width: 100%; height: calc(var(--dw-w) + var(--dw-gap)); outline: none; transform-style: preserve-3d; }
.dw-seg { height: calc(var(--dw-w) / 2 + var(--dw-gap)); }
.dw-inner { position: absolute; inset: calc(var(--dw-gap) / 2); display: block; overflow: hidden; border-radius: var(--dw-radius); background: #0b0b12; opacity: 0.82; transform: translateZ(0); pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
.dw-seg .dw-inner { border-radius: 10px; }
.dw-art { position: absolute; inset: 0; background-repeat: no-repeat; background-position-y: 0; }
.dw-key .dw-art { background-size: 433.33% 100%; }
.dw-seg .dw-art { background-size: 400% 100%; }
.dw-name { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 2; padding: 4px 7px 3px; border-radius: 7px; background: rgba(12, 10, 18, 0.82); color: #fff; font: 600 10.5px/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 0.2s; }
.dw-tile.is-active .dw-inner, .dw-tile:focus-visible .dw-inner { opacity: 1; transform: translateZ(var(--dw-lift)); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7), 0 0 0 2px var(--lime); }
.dw-tile.is-active .dw-name, .dw-tile:focus-visible .dw-name { opacity: 1; }
/* The piece that came forward keeps the pointer while it is over it, so the active piece does not flicker to its neighbours */
.dw-tile.is-active .dw-inner { pointer-events: auto; }
/* Pixel Swap: the incoming picture arrives pixel by pixel */
.dw-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dw-px { position: absolute; overflow: hidden; opacity: 0; contain: paint; }
.dw-px-content { position: absolute; }
.dw-px-content .dw-art { inset: 0; }
/* Shuffle, under the wall */
.wall-shuffle { display: flex; margin: 4px auto 0; gap: 8px; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.wall-shuffle:hover { box-shadow: inset 0 0 0 1px #fff; }
.wall-shuffle.spin svg { animation: shuffle-spin 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes shuffle-spin { 50% { transform: scaleX(-1); } }
@media (max-width: 900px) {
	.skins-hero-grid { grid-template-columns: 1fr; }
	/* Phone: a self-contained window, rounded and framed, with Shuffle inside */
	.skins-hero-art { margin-top: 32px; }
	.drift-wall { --dw-w: 92px; --dw-gap: 12px; height: 320px; border-radius: 22px; isolation: isolate; background: rgba(12, 6, 48, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 24px 50px -24px rgba(10, 4, 50, 0.8); }
	.skins-hero .wall-shuffle { position: absolute; left: 50%; bottom: 14px; z-index: 2; margin: 0; transform: translateX(-50%); background: rgba(12, 10, 18, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
@media (prefers-reduced-motion: reduce) { .dw-plane, .dw-track { will-change: auto; } }

/* Simulator skin browser (Simone, 29/09/2026): search, collections by name, one collection at a time */
.try-browse-head { display: grid; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.try-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
.try-search:focus-within { color: var(--text); box-shadow: inset 0 0 0 1px var(--violet); }
.try-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 14px/1 var(--body); outline: none; }
.try-search input::placeholder { color: var(--faint); }
.try-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.try-cols button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: 500 12.5px/1.1 var(--body); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.try-cols button:hover { color: var(--text); border-color: var(--text); }
.try-cols button[aria-selected="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }
.try-cols button i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet-2); }
.try-cols button[aria-selected="true"] i { background: #fff; }
.try-group-head { position: static; display: grid; gap: 4px; margin: 0; padding: 12px 8px 8px; background: none; font: inherit; letter-spacing: 0; text-transform: none; }
.try-group-head p { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 600 12px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.try-group-head p b { color: var(--faint); font-weight: 600; }
.try-group-head small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.try-group button[hidden] { display: none; }
.try-empty { margin: 0; padding: 20px 8px; color: var(--muted); font-size: 14px; }

/* Simulator: the buy button on its own row, then Skin page and the link; labels never wrap (Simone, 29/09/2026) */
.try-current-cta { flex-wrap: wrap; }
.try-current-cta .btn { white-space: nowrap; }
.try-current-cta [data-current-buy] { flex: 1 1 100%; }
.try-current-cta [data-current-page] { flex: 1; }

/* Simulator: the description always takes exactly two lines, so the buttons below never move (Simone, 29/09/2026) */
.try-current-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.5em); }
/* The collection's name above its skins only while searching (the selected pill already says it) */
.try-group-head { display: none; }
.try-list.is-search .try-group-head { display: grid; }
.try-list:not(.is-search) .try-group:first-child, .try-list:not(.is-search) .try-group { padding-top: 6px; }

/* Simulator: ranked search results; the meta row on one line, with Live meter as a tag */
.try-results { display: grid; gap: 2px; padding-top: 6px; }
.try-results[hidden] { display: none; }
.try-results button { display: grid; gap: 7px; padding: 7px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; text-align: left; transition: background 0.12s; }
.try-results button:hover { background: var(--surface-2); }
.try-results button[aria-pressed="true"] { background: var(--surface-2); border-color: var(--violet); }
.try-results img { width: 100%; aspect-ratio: 8 / 1; border-radius: 5px; }
.try-results button span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-inline: 2px; }
.try-results button b { font: 500 13.5px var(--body); letter-spacing: 0; }
.try-results button small { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.try-empty em { font-style: normal; color: var(--text); }
.try-current-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; white-space: nowrap; }
.try-current-meta [data-current-no] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.try-live { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--lime) 14%, transparent); color: var(--lime); font-size: 10.5px; letter-spacing: 0.08em; }
.try-live[hidden] { display: none; }
.try-live .i { width: 12px; height: 12px; }

/* Simulator bar: arrows with the name of the skin they go to, the current number in the middle */
.try-bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.try-step-named { display: inline-flex; align-items: center; gap: 8px; width: auto; max-width: 100%; padding: 0 14px 0 10px; font: 500 14px/1 var(--body); }
.try-step-named[data-step="1"] { justify-self: end; padding: 0 10px 0 14px; }
.try-step-named span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try-step-named .i { flex: none; }
.try-bar-now { align-items: center; }
@media (max-width: 560px) { .try-step-named span { display: none; } .try-step-named { padding: 0; width: 44px; justify-content: center; } }
/* A buy button for a skin not out yet: greyed out, not clickable */
.btn[aria-disabled="true"] { background: var(--surface-2); color: var(--muted); box-shadow: none; cursor: default; pointer-events: none; transform: none; }

/* Simulator bar: square arrows, the deck controls as three compact menus in between (open upwards, over the deck) */
.try-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
.try-bar .try-step { width: 44px; padding: 0; justify-self: auto; }
.bar-menus { display: flex; justify-content: center; gap: 8px; min-width: 0; }
.bar-menu { position: relative; min-width: 0; }
.bar-menu summary { list-style: none; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.bar-menu summary::-webkit-details-marker { display: none; }
.bar-menu summary:hover, .bar-menu[open] summary { background: var(--surface-2); border-color: var(--text); }
.bar-menu summary small { grid-column: 1; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); line-height: 1.1; }
.bar-menu summary b { grid-column: 1; font: 500 13.5px/1.25 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.bar-chev { grid-column: 2; grid-row: 1 / 3; width: 12px; height: 12px; color: var(--faint); transition: rotate 0.15s; }
.bar-menu[open] .bar-chev { rotate: 180deg; }
.bar-pop { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5; min-width: 230px; padding: 6px; border-radius: 14px; background: #1b1d22; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.8); transform: translateX(-50%); animation: bar-pop 0.14s ease-out; }
@keyframes bar-pop { from { opacity: 0; transform: translate(-50%, 6px); } }
.bar-pop .seg { display: grid; gap: 2px; padding: 0; background: none; border: 0; }
.bar-pop .seg button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 9px; border: 0; background: transparent; color: var(--text); font: 500 13.5px/1.2 var(--body); text-align: left; cursor: pointer; white-space: nowrap; box-shadow: none; }
.bar-pop .seg button:hover { background: rgba(255, 255, 255, 0.06); }
.bar-pop .seg button::after { content: ""; width: 14px; height: 14px; flex: none; }
.bar-pop .seg button[aria-pressed="true"] { color: #fff; background: rgba(121, 87, 255, 0.18); }
.bar-pop .seg button[aria-pressed="true"]::after { background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5 9.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5 9.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 640px) {
	.try-bar { grid-template-columns: 44px minmax(0, 1fr) 44px; row-gap: 10px; }
	.try-bar .try-step[data-step="-1"] { grid-column: 1; grid-row: 1; }
	.try-bar .try-step[data-step="1"] { grid-column: 3; grid-row: 1; }
	.bar-menus { grid-column: 1 / -1; grid-row: 2; justify-content: stretch; gap: 6px; }
	.bar-menu { flex: 1 1 0; min-width: 0; }
	.bar-menu summary { min-width: 0; padding: 0 8px; column-gap: 4px; }
	.bar-menu summary b { max-width: none; min-width: 0; }
	.bar-menu summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.bar-menu summary small { font-size: 9px; letter-spacing: 0.05em; }
	.bar-menu:first-child { flex-grow: 1.35; } /* "Background" is the longest label */
	.bar-menu summary b { font-size: 12.5px; }
	.bar-menu:first-child .bar-pop { left: 0; transform: none; }
	.bar-menu:last-child .bar-pop { left: auto; right: 0; transform: none; }
}
/* The simulator columns may shrink below their content (long one-line rows are cut with an ellipsis instead) */
.try-side, .try-current, .try-browser { min-width: 0; }
@media (max-width: 1040px) { .try-layout { grid-template-columns: minmax(0, 1fr); } }

/* The bar menus fill the space between the arrows (Simone, 29/09/2026) */
.bar-menus { justify-content: stretch; }
.bar-menu { flex: 1 1 0; min-width: 0; }
.bar-menu summary { grid-template-columns: minmax(0, 1fr) auto; min-width: 0; padding: 0 12px 0 14px; }
.bar-menu summary b { max-width: none; min-width: 0; }
.bar-menu:first-child { flex-grow: 1; }
.bar-menu:nth-child(2) { flex-grow: 1.4; }
.bar-menu .bar-pop { left: 0; transform: none; min-width: 100%; }
.bar-menu:last-child .bar-pop { left: auto; right: 0; }
@keyframes bar-pop { from { opacity: 0; transform: translateY(6px); } }
.v-short { display: none; }
@media (max-width: 640px) {
	.v-full { display: none; }
	.v-short { display: inline; }
	.bar-menu:nth-child(2) { flex-grow: 1; }
	.bar-menu:first-child { flex-grow: 1.35; }
}

/* --- Simulator on phones, bespoke (Simone, 29/09/2026) -------------------------------------------------------
   One column in this order: deck · arrows with the skin's name, then the three menus · a horizontal skin carousel
   (collections and search above it) · description and buy · the touch hints. */
.try-bar-name { display: none; }
@media (max-width: 640px) {
	.try-head .lede { display: none; }
	.try-layout { gap: 0; }
	.try-main, .try-side { display: contents; }
	.try-stage { order: 1; padding: 14px; border-radius: 20px 20px 0 0; }
	.try-bar { order: 2; border-radius: 0 0 20px 20px; padding: 10px; }
	.try-browser { order: 3; margin-top: 16px; overflow: hidden; grid-template-columns: minmax(0, 1fr); }
	.try-list, .try-browse-head, .try-group, .try-results { min-width: 0; }
	.try-current { order: 4; margin-top: 16px; }
	.try-tools { order: 5; margin-top: 16px; }
	/* the arrows around the skin's name; the menus under them */
	.try-bar-name { display: grid; grid-column: 2; grid-row: 1; justify-items: center; align-content: center; gap: 2px; margin: 0; min-width: 0; text-align: center; }
	.try-bar-name b { max-width: 100%; font: 600 17px/1.15 var(--display); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.try-bar-name small { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
	/* the name is in the bar: the card keeps description and buttons */
	.try-current h2 { display: none; }
	.try-current { padding: 16px; }
	/* collections in one scrolling row */
	.try-browse-head { padding: 12px 12px 8px; border-bottom: 0; }
	.try-cols { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
	.try-cols::-webkit-scrollbar { display: none; }
	.try-cols button { flex: none; }
	/* the skins of the collection: a horizontal carousel */
	.try-list { max-height: none; overflow: visible; padding: 0 0 12px; }
	.try-group:not([hidden]), .try-results:not([hidden]) { position: relative; display: flex; gap: 10px; padding: 4px 12px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 12px; scrollbar-width: none; }
	.try-group::-webkit-scrollbar, .try-results::-webkit-scrollbar { display: none; }
	.try-group button, .try-results button { flex: 0 0 74%; scroll-snap-align: center; background: var(--surface-2); }
	.try-group button:not([hidden]) { display: grid; }
	.try-empty { padding: 8px 12px 4px; }
	/* touch hints only */
	.try-howto li:nth-child(n + 4) { display: none; }
}
.profile-status { display: flex; gap: 6px; margin: 12px 0 0; }

/* One product presentation (Simone, 29/09/2026): the same foot on every product card */
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.card-price { display: grid; gap: 2px; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.004em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-price small { font: 600 10.5px/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet-deep); }
.theme-ink .card-price small, .theme-levels .card-price small { color: var(--violet-2); }
.card-more { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font: 600 13.5px var(--display); color: var(--text); text-decoration: none; white-space: nowrap; }
.card-more .i { width: 14px; height: 14px; transition: translate 0.2s var(--ease); }
.card-more:hover .i, .icon-card:hover .card-more .i { translate: 3px 0; }
.skin-card-body, .profile-card-body { display: flex; flex-direction: column; }
.skin-card-body { gap: 0; }
.skin-card-name { margin-bottom: 4px; }
.profile-card-body .card-foot { margin-top: 16px; }
.icon-card-body .card-foot { width: 100%; align-self: end; }
/* A profile section: the offer box on the right, like a collection */
.collection-head-noicon { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 760px) { .collection-head-noicon { grid-template-columns: 1fr; } .collection-head-noicon .pack-box { grid-column: auto; } }

/*! Status Mark, Spring Check, Spotlight Card, Gradual Blur and Noise: adapted from React Bits (reactbits.dev).
 *  Copyright (c) 2026 David Haz. MIT + Commons Clause License Condition v1.0 (see polish.js). */

/* Status Mark: the form's state (site.js). A ring that spins while sending, then a tick or a cross */
.form-status .status-mark[data-status="idle"] { display: none; }
.status-mark { --sm-done: var(--violet); --sm-error: #d6456b; --sm-ease-out: cubic-bezier(0.23, 1, 0.32, 1); display: inline-flex; align-items: flex-start; gap: 10px; vertical-align: middle; }
.status-mark__glyph { flex: none; width: 20px; height: 20px; margin-top: 1px; overflow: visible; color: var(--muted); transition: color 200ms ease; }
.status-mark[data-status="note"] .status-mark__glyph { display: none; }
.status-mark[data-status="done"] .status-mark__glyph { color: var(--sm-done); }
.status-mark[data-status="failed"] .status-mark__glyph { color: var(--sm-error); }
.status-mark__track { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 2; stroke-opacity: 0.2; transition: fill-opacity 180ms ease; }
.status-mark[data-status="done"] .status-mark__track, .status-mark[data-status="failed"] .status-mark__track { fill-opacity: 0.08; stroke-opacity: 0; }
.status-mark__ring { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 68 100; transform-box: fill-box; transform-origin: center; rotate: -90deg; transition: stroke-dasharray 300ms var(--sm-ease-out); }
.status-mark[data-status="running"] .status-mark__ring { animation: sm-spin 1100ms linear infinite; }
.status-mark[data-status="done"] .status-mark__ring, .status-mark[data-status="failed"] .status-mark__ring { stroke-dasharray: 100 0; }
@keyframes sm-spin { to { rotate: 270deg; } }
.status-mark__check, .status-mark__cross { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.05; opacity: 0; }
.status-mark[data-status="done"] .status-mark__check, .status-mark[data-status="failed"] .status-mark__cross { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 240ms var(--sm-ease-out) 120ms, opacity 0ms linear 120ms; }
.status-mark__label { line-height: 1.35; }

/* Spring Check: the consent box. The real checkbox stays on top, invisible (focus, required, click) */
.form .check { position: relative; }
.form .check input { position: absolute; left: 0; top: 50%; width: 22px; height: 22px; margin: -11px 0 0; opacity: 0; cursor: pointer; }
.spring-check { --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--paper); transition: box-shadow 120ms ease, transform 160ms var(--sc-ease-out); pointer-events: none; }
.form .check:hover .spring-check { box-shadow: inset 0 0 0 1.5px rgba(18, 16, 25, 0.4); }
.form .check input:active + .spring-check { transform: scale(0.92); }
.form .check input:focus-visible + .spring-check { outline: 2px solid var(--violet); outline-offset: 3px; }
.form .check input:user-invalid + .spring-check { box-shadow: inset 0 0 0 1.5px #d6456b; }
.spring-check__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--violet); transform: scale(0); transition: transform 200ms cubic-bezier(0.34, 1.5, 0.64, 1); }
.spring-check svg { position: relative; width: 70%; height: 70%; overflow: visible; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 160ms ease; }
.form .check input:checked + .spring-check { animation: sc-swell 320ms var(--sc-ease-out); }
.form .check input:checked + .spring-check .spring-check__fill { transform: scale(1); }
.form .check input:checked + .spring-check svg { stroke-dashoffset: 0; transition: stroke-dashoffset 220ms var(--sc-ease-out) 90ms; }
@keyframes sc-swell { 45% { transform: scale(1.1); } }

/* Spotlight Card: a soft light under the mouse and a brighter line on the card's edge (polish.js) */
.skin-card, .product-card, .collection-card, .icon-card, .profile-card { --spot: rgba(121, 87, 255, 0.07); --spot-edge: rgba(121, 87, 255, 0.5); }
:is(.theme-ink, .page-ink, .theme-levels, .theme-violet) :is(.skin-card, .product-card, .collection-card, .icon-card, .profile-card) { --spot: rgba(255, 255, 255, 0.06); --spot-edge: rgba(255, 255, 255, 0.35); }
:is(.product-card, .collection-card, .icon-card, .profile-card):has(> .spot) { position: relative; }
.spot { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 350ms ease; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 65%); }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--spot-edge), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
[data-spot] > .spot { opacity: 1; }

/* Gradual Blur: blurred edges on the horizontal carousels, where more cards are hidden (polish.js) */
.gblur { display: none; position: sticky; z-index: 2; flex: 0 0 var(--gb-w); align-self: stretch; pointer-events: none; opacity: 0; transition: opacity 250ms ease; }
.has-gblur { --gb-w: 44px; --gb-gap: 18px; --gb-pad: 4px; } /* --gb-pad: the scroller's side padding, where sticky edges would stop */
.subnav-in > .gblur { display: block; }
.subnav-in.has-gblur { --gb-w: 40px; --gb-gap: 4px; --gb-pad: var(--gutter); }
.gblur-start { left: calc(-1 * var(--gb-pad)); order: -1; margin-right: calc(-1 * var(--gb-w) - var(--gb-gap)); }
.gblur-end { right: calc(-1 * var(--gb-pad)); order: 99; margin-left: calc(-1 * var(--gb-w) - var(--gb-gap)); }
[data-more-start] > .gblur-start, [data-more-end] > .gblur-end { opacity: 1; }
.gblur i { position: absolute; inset: 0; }
.gblur-start i { transform: scaleX(-1); }
.gblur i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask: linear-gradient(90deg, transparent 0%, #000 25%, #000 50%, transparent 75%); mask: linear-gradient(90deg, transparent 0%, #000 25%, #000 50%, transparent 75%); }
.gblur i:nth-child(2) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask: linear-gradient(90deg, transparent 25%, #000 50%, #000 75%, transparent 100%); mask: linear-gradient(90deg, transparent 25%, #000 50%, #000 75%, transparent 100%); }
.gblur i:nth-child(3) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask: linear-gradient(90deg, transparent 50%, #000 75%, #000 100%); mask: linear-gradient(90deg, transparent 50%, #000 75%, #000 100%); }
.gblur i:nth-child(4) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask: linear-gradient(90deg, transparent 75%, #000 100%); mask: linear-gradient(90deg, transparent 75%, #000 100%); }
@media (max-width: 640px) {
	.try-group > .gblur, .try-results > .gblur { display: block; }
	.try-group.has-gblur, .try-results.has-gblur { --gb-w: 36px; --gb-gap: 10px; --gb-pad: 12px; }
	.try-cols > .gblur { display: block; }
	.try-cols.has-gblur { --gb-w: 32px; --gb-gap: 6px; --gb-pad: 12px; }
}

/* Noise: a fine still grain over the heroes (polish.js adds the layer) */
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("/assets/img/grain.png") 0 0 / 160px 160px; }

@media (prefers-reduced-motion: reduce) {
	.status-mark[data-status="running"] .status-mark__ring { animation: sm-breathe 1400ms ease-in-out infinite; }
	.status-mark__ring, .status-mark__check, .status-mark__cross, .spring-check, .spring-check__fill, .spring-check svg, .gblur { transition: none !important; }
	.form .check input:checked + .spring-check { animation: none; }
}
@keyframes sm-breathe { 50% { opacity: 0.45; } }

/* Next drop: the next skin drop on a split-flap board (Split Flap Text, React Bits; polish.js) */
.next-drop { --flap-size: clamp(26px, 3.4vw, 40px); --flap-tile: #1d1a26; --flap-text: #f5f5f2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 40px; padding: 22px 24px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--r); background: rgba(255, 255, 255, 0.025); }
.next-drop[hidden] { display: none; }
.next-drop-label { margin: 0; font: 600 12px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); }
.next-drop-in { margin: 0; color: var(--muted); font-size: 15px; }
.next-drop-in b { color: #fff; font-weight: 600; }
.next-drop-hero { --flap-size: clamp(22px, 2.2vw, 28px); --flap-tile: rgba(12, 10, 20, 0.55); margin-top: 32px; padding: 16px 18px; gap: 10px 16px; background: rgba(12, 10, 20, 0.18); border-color: rgba(255, 255, 255, 0.14); }
.next-drop-hero .next-drop-in { color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.flap { display: inline-flex; gap: calc(var(--flap-size) * 0.1); font: 700 var(--flap-size)/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--flap-text); user-select: none; }
.flap-tile { position: relative; width: 0.78em; height: 1.12em; border-radius: calc(var(--flap-size) * 0.14); overflow: hidden; background: var(--flap-tile); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0.14em 0.34em rgba(0, 0, 0, 0.3); perspective: 520px; isolation: isolate; }
.flap-tile.flap-gap { width: 0.34em; background: none; box-shadow: none; }
.flap-tile:not(.flap-gap)::before { content: ""; position: absolute; z-index: 8; top: calc(50% - 0.5px); left: 0; right: 0; height: 1px; background: rgba(0, 0, 0, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); pointer-events: none; }
.flap-half, .flap-leaf { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: var(--flap-tile); backface-visibility: hidden; }
.flap-gap .flap-half { background: none; }
.flap-top, .flap-front { top: 0; }
.flap-bottom, .flap-back { bottom: 0; background: color-mix(in srgb, var(--flap-tile) 88%, black); }
.flap-gap .flap-bottom { background: none; }
.flap-char { position: absolute; left: 0; width: 100%; height: 200%; display: flex; align-items: center; justify-content: center; }
.flap-top .flap-char, .flap-front .flap-char { top: 0; }
.flap-bottom .flap-char, .flap-back .flap-char { bottom: 0; }
.flap-leaf { z-index: 6; }
.flap-front { transform-origin: center bottom; animation: flap-front 120ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.flap-back { transform-origin: center top; transform: rotateX(90deg); animation: flap-back 120ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes flap-front { from { transform: rotateX(0deg); filter: brightness(1.08); } to { transform: rotateX(-90deg); filter: brightness(0.55); } }
@keyframes flap-back { 0%, 45% { transform: rotateX(90deg); filter: brightness(0.6); } to { transform: rotateX(0deg); filter: brightness(1); } }
@media (max-width: 640px) { .next-drop { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .flap-leaf { animation: none !important; } }

/* Simulator menus on phones: each opens across the whole row of menus, never past the screen edge */
@media (max-width: 640px) {
	.bar-menus { position: relative; }
	.bar-menus .bar-menu { position: static; }
	.bar-menus .bar-menu .bar-pop { left: 0; right: 0; min-width: 0; transform: none; }
}

/* Touch screens: small links and pills get a bigger touch area without changing how they look */
@media (pointer: coarse) {
	.crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
	.seg button { min-height: 36px; }
	.collections-nav a, .try-cols button { min-height: 34px; }
}
@media (max-width: 900px) {
	.collections-nav > .gblur { display: block; }
	.collections-nav.has-gblur { --gb-w: 36px; --gb-gap: 6px; --gb-pad: var(--gutter); }
}

/* Sticky buy bar on narrow phones: shorter button, smaller type, nothing cut at the edge */
@media (max-width: 480px) {
	.lv-sticky-in { gap: 10px; }
	.lv-sticky-logo { height: 18px; }
	.lv-sticky-name { font-size: 15px; margin-left: -4px; }
	.lv-sticky-price { font-size: 12.5px; line-height: 1.3; text-wrap: balance; }
	.lv-sticky .btn { flex: none; white-space: nowrap; }
	.sticky-more { display: none; }
	/* the Levels menu fits in one row from 390 px; narrower screens scroll it */
	.subnav a { padding: 7px 7px; }
}
/* The fixed buy bar never covers the last lines of the footer */
body:has(.lv-sticky) footer.footer { padding-bottom: 72px; }

/*! Circular Carousel, adapted from React Bits (reactbits.dev/components/circular-carousel).
 *  Copyright (c) 2026 David Haz. MIT + Commons Clause License Condition v1.0: use, copy, modify, publish and
 *  distribute as part of an application, website or product; the components themselves may not be sold,
 *  sublicensed or redistributed. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND. */
/* --- Ring of collections (home "collect the set", ringcarousel.js): the row becomes a slowly turning 3D ring --- */
.collection-rail.rc { display: block; position: relative; overflow: clip; padding: 0; margin-inline: calc(-1 * var(--gutter)); scroll-snap-type: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.collection-rail.rc[data-dragging] { cursor: grabbing; }
.rc-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 2500px; }
.collection-rail.rc:not(.rc-in) .rc-stage { opacity: 0; } /* until the intro starts (first time on screen) */
.rc-camera, .rc-ring { position: relative; width: 0; height: 0; transform-style: preserve-3d; }
.rc-ring { will-change: transform; }
.rc-slot { position: absolute; left: calc(var(--rc-w, 260px) / -2); top: calc(var(--rc-h, 0px) / -2); width: var(--rc-w, 260px); height: var(--rc-h, auto); transform-style: preserve-3d; }
.rc .collection-card { position: relative; width: 100%; height: var(--rc-h, auto); scroll-snap-align: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-user-drag: none; }
.rc .collection-card img { pointer-events: none; }
/* depth fade: far cards sink into the section's background (opacity set per frame) */
.rc-shade { position: absolute; inset: 0; z-index: 4; border-radius: inherit; background: var(--bg); opacity: 0; pointer-events: none; }
/* the inside of the ring: the back of each card, a dim violet panel with a hairline */
.rc-back { position: absolute; inset: 0; border-radius: var(--r); background: linear-gradient(180deg, color-mix(in srgb, var(--violet-deep) 16%, var(--ink-2)), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line); opacity: 0.55; transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none; }
@media (max-width: 559px) {
	.rc .collection-card { padding: 20px; }
	.rc .collection-no { font-size: 48px; }
	.rc .collection-name { font-size: 22px; }
}