/* Hysteric - monochrome Ledger-ish. Light default, dark via [data-theme="dark"].
   One stylesheet covers hub + executor pages. */

:root {
  --bg: #FFFFFF;
  --fg: #0A0A0A;
  --muted: #6B6B6B;
  --dim: #A3A3A3;
  --surface: #FAFAFA;
  --surface-2: #F0F0F0;
  --line: #E7E7E7;
  --line-2: #D1D1D1;
  --invert-bg: #0A0A0A;
  --invert-fg: #FAFAFA;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 180ms;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0A0A0A;
  --fg: #FAFAFA;
  --muted: #A3A3A3;
  --dim: #525252;
  --surface: #141414;
  --surface-2: #1F1F1F;
  --line: #242424;
  --line-2: #3A3A3A;
  --invert-bg: #FAFAFA;
  --invert-fg: #0A0A0A;
  color-scheme: dark;
}

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

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

html.theme-swap *, html.theme-anim * {
  transition: none !important;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
h1 { font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.025em; }
h3 { font-size: 18px; letter-spacing: -0.01em; }
p { color: var(--muted); }
code { font-family: var(--mono); font-size: 13px; }
ul { list-style: none; }
input { font: inherit; color: inherit; background: none; border: 0; }
input::placeholder { color: var(--dim); }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: var(--s4); top: var(--s4);
  background: var(--fg); color: var(--bg);
  padding: var(--s2) var(--s4); border-radius: var(--radius);
  z-index: 100;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s5); }

/* -------- icons -------- */
.i {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.i-lg { width: 24px; height: 24px; }
.i-sm { width: 14px; height: 14px; }

/* -------- header -------- */
.sentinel { height: 1px; }
.hdr {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  transition: border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck { border-bottom-color: var(--line); }
.hdr-in {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: var(--s5);
}
.logo {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
}
.logo-mark {
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--fg); color: var(--bg);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
}
.nav {
  display: flex; gap: var(--s6); font-size: 14px; color: var(--muted);
}
.nav a { transition: color var(--dur) var(--ease); }
.nav a:hover, .nav a[aria-current="true"] { color: var(--fg); }
.hdr-tools { display: flex; align-items: center; gap: var(--s2); }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius);
  display: grid; place-items: center;
  color: var(--muted);
  border: 1px solid var(--line);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--fg); border-color: var(--line-2); background: var(--surface); }
#themeToggle .i-sun { display: none; }
:root[data-theme="dark"] #themeToggle .i-sun { display: block; }
:root[data-theme="dark"] #themeToggle .i-moon { display: none; }

/* -------- hero -------- */
.hero {
  padding: clamp(64px, 10vw, 120px) 0 clamp(48px, 7vw, 80px);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -20% auto auto;
  width: 70vw;
  max-width: 900px;
  aspect-ratio: 1;
  background: radial-gradient(circle at center, color-mix(in oklab, var(--fg) 10%, transparent) 0%, transparent 60%);
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.hero-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s7);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 960px) {
  .hero-in { grid-template-columns: 1.08fr 1fr; gap: var(--s9); }
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 6px 12px;
  margin-bottom: var(--s5);
  background: var(--bg);
  animation: fade-up .7s var(--ease) both;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg);
  animation: pulse 2.4s var(--ease) infinite;
}
.hero h1 { max-width: 14ch; margin-bottom: var(--s5); animation: fade-up .8s .08s var(--ease) both; }
.hero .lead { max-width: 56ch; font-size: 17px; color: var(--muted); margin-bottom: var(--s6); animation: fade-up .8s .16s var(--ease) both; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); animation: fade-up .8s .24s var(--ease) both; }

/* -------- hero 3D stack visual -------- */
.hero-visual {
  position: relative;
  display: none;
  height: 460px;
  perspective: 1400px;
  perspective-origin: 50% 55%;
  animation: fade-up 1s .3s var(--ease) both;
}
@media (min-width: 960px) {
  .hero-visual { display: block; }
}
.hv-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .4s var(--ease);
  will-change: transform;
}
.hv-card {
  position: absolute;
  left: 50%; top: 50%;
  width: 300px;
  padding: var(--s5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 20px 60px -30px color-mix(in oklab, var(--fg) 40%, transparent),
    0 8px 24px -16px color-mix(in oklab, var(--fg) 25%, transparent);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
:root[data-theme="dark"] .hv-card {
  background: #1A1A1A;
  border-color: #2E2E2E;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.9),
    0 12px 30px -10px rgba(0,0,0,0.6),
    inset 0 1px 0 0 rgba(255,255,255,0.04);
}
.hv-card .tool-head { margin-bottom: var(--s3); }
.hv-card .tool-name { font-size: 15px; margin-bottom: 2px; }
.hv-card .tool-game { font-size: 10px; margin-bottom: var(--s3); }
.hv-card .tool-meta { padding: var(--s2) 0; font-size: 11px; gap: var(--s3); }
.hv-card .btn { padding: 8px 14px; font-size: 13px; }
.hv-card-front {
  transform: translate(-50%, -50%) translateZ(60px) rotateY(-8deg) rotateX(6deg);
  animation: hv-float1 7s var(--ease) infinite;
  z-index: 3;
}
.hv-card-mid {
  transform: translate(calc(-50% - 70px), calc(-50% + 40px)) translateZ(-20px) rotateY(-14deg) rotateX(10deg) scale(0.92);
  animation: hv-float2 8s var(--ease) infinite;
  z-index: 2;
  opacity: 0.86;
}
.hv-card-back {
  transform: translate(calc(-50% + 80px), calc(-50% - 60px)) translateZ(-60px) rotateY(10deg) rotateX(-4deg) scale(0.86);
  animation: hv-float3 9s var(--ease) infinite;
  z-index: 1;
  opacity: 0.7;
}
.hv-shade {
  position: absolute;
  left: 50%; bottom: 10%;
  width: 240px; height: 20px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, color-mix(in oklab, var(--fg) 25%, transparent), transparent 70%);
  filter: blur(10px);
  animation: hv-shade 7s var(--ease) infinite;
  z-index: 0;
}

@keyframes hv-float1 {
  0%, 100% { transform: translate(-50%, -50%) translateZ(60px) rotateY(-8deg) rotateX(6deg); }
  50%      { transform: translate(-50%, calc(-50% - 8px)) translateZ(72px) rotateY(-6deg) rotateX(4deg); }
}
@keyframes hv-float2 {
  0%, 100% { transform: translate(calc(-50% - 70px), calc(-50% + 40px)) translateZ(-20px) rotateY(-14deg) rotateX(10deg) scale(0.92); }
  50%      { transform: translate(calc(-50% - 72px), calc(-50% + 32px)) translateZ(-10px) rotateY(-12deg) rotateX(8deg) scale(0.93); }
}
@keyframes hv-float3 {
  0%, 100% { transform: translate(calc(-50% + 80px), calc(-50% - 60px)) translateZ(-60px) rotateY(10deg) rotateX(-4deg) scale(0.86); }
  50%      { transform: translate(calc(-50% + 82px), calc(-50% - 68px)) translateZ(-50px) rotateY(12deg) rotateX(-6deg) scale(0.87); }
}
@keyframes hv-shade {
  0%, 100% { opacity: 0.7; width: 240px; }
  50%      { opacity: 0.55; width: 220px; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.search {
  margin-top: var(--s7);
  position: relative;
  max-width: 520px;
  animation: fade-up .8s .32s var(--ease) both;
}
.search input {
  width: 100%;
  padding: 14px 44px 14px 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 15px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.search input:focus { outline: none; border-color: var(--fg); background: var(--bg); }
.search .i-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted);
}
.search-clear:hover { color: var(--fg); background: var(--surface-2); }

/* -------- buttons -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 11px 18px;
  border-radius: var(--radius);
  font-weight: 500; font-size: 14px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--invert-bg); color: var(--invert-fg);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute; top: 0; left: -40%; height: 100%; width: 30%;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--invert-fg) 25%, transparent), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease);
  pointer-events: none;
}
.btn-primary:hover { background: color-mix(in oklab, var(--invert-bg) 85%, var(--fg)); }
.btn-primary:hover::before { left: 140%; }
.btn-outline { border-color: var(--line-2); color: var(--fg); }
.btn-outline:hover { background: var(--surface); border-color: var(--fg); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--fg); background: var(--surface); }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* -------- section -------- */
.section { padding: clamp(64px, 8vw, 96px) 0; border-bottom: 1px solid var(--line); }
.section:last-of-type { border-bottom: 0; }
.section-head { margin-bottom: var(--s7); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4); }
.section-head p { max-width: 48ch; }
.section-head .label {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s2);
}

/* -------- chip bar (filter) -------- */
.chips {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s6);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  background: transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chip:hover { color: var(--fg); border-color: var(--line-2); }
.chip[aria-pressed="true"] {
  background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg);
  transform: scale(1.02);
}
.chip-n {
  font-size: 11px;
  padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip[aria-pressed="true"] .chip-n {
  background: color-mix(in oklab, var(--invert-fg) 15%, transparent);
  color: var(--invert-fg);
}

.bar-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s5);
  font-size: 13px; color: var(--muted);
  gap: var(--s4);
  flex-wrap: wrap;
}
#barReset { font-size: 13px; }

/* -------- catalogue grid -------- */
.group { margin-bottom: var(--s7); }
.group:last-child { margin-bottom: 0; }
.group-head {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.group-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.group-count { font-size: 13px; color: var(--muted); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s4);
}

.tool {
  display: flex; flex-direction: column;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  transition: border-color var(--dur) var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  position: relative;
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
  transform-style: preserve-3d;
}
.tool::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--fg) 7%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.tool:hover {
  border-color: var(--line-2);
  box-shadow:
    0 30px 60px -30px color-mix(in oklab, var(--fg) 40%, transparent),
    0 10px 20px -16px color-mix(in oklab, var(--fg) 20%, transparent);
}
.tool:hover::after { opacity: 1; }

.tool-art {
  padding: var(--s5) var(--s5) var(--s4);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface) 0%, transparent 100%);
  color: var(--fg);
  position: relative;
  overflow: hidden;
}
.tool-art::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--fg) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--fg) 4%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 75%);
  pointer-events: none;
}
.tool-game-display {
  position: relative; z-index: 1;
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
  text-transform: uppercase;
  margin-bottom: var(--s2);
  background: linear-gradient(180deg, var(--fg) 0%, color-mix(in oklab, var(--fg) 65%, var(--bg)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: letter-spacing .3s var(--ease);
}
.tool:hover .tool-game-display { letter-spacing: -0.025em; }
.tool-type-tag {
  position: relative; z-index: 1;
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--bg);
}

.tool-body {
  padding: var(--s4) var(--s5) var(--s2);
}
.tool-head-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s2);
}
.tool-name {
  font-size: 17px; font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--fg);
  margin: 0;
}
.tool-rating-inline {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  flex-shrink: 0;
}
.tool-rating-inline .i { width: 12px; height: 12px; color: var(--fg); }
.tool-desc {
  font-size: 13px; color: var(--muted); line-height: 1.5;
  margin: 0;
}

.tool-stats {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.tool-stats span {
  display: inline-flex; align-items: center; gap: 5px;
}
.tool-stats .i { width: 12px; height: 12px; }

.tool-foot {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s2);
  padding: var(--s3) var(--s5) var(--s5);
}
.tool-foot .btn-dl { padding: 11px 18px; }
.tool-foot .btn-outline { padding: 11px 18px; }

/* -------- trust strip -------- */
.trust-strip-section {
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.trust-strip {
  display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6);
  justify-content: center;
  align-items: center;
}
.trust-item {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 13px; font-weight: 500;
  color: var(--muted);
}
.trust-item .i { width: 14px; height: 14px; color: var(--fg); }

/* -------- testimonials -------- */
.tst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s4);
}
.tst-card {
  display: flex; flex-direction: column;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  transition: border-color var(--dur) var(--ease), transform .3s var(--ease);
}
.tst-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.tst-head {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4);
}
.tst-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.tst-id {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
}
.tst-name {
  font-size: 14px; font-weight: 600;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tst-role {
  font-size: 12px; color: var(--muted);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tst-stars {
  display: inline-flex; gap: 2px;
  color: var(--fg);
  flex-shrink: 0;
}
.tst-stars .i { width: 12px; height: 12px; }
.tst-text {
  font-size: 14px; line-height: 1.55;
  color: var(--fg);
  margin: 0 0 var(--s4);
  flex: 1;
}
.tst-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.tst-tool a { color: var(--muted); border-bottom: 1px dashed var(--line-2); }
.tst-tool a:hover { color: var(--fg); border-bottom-color: var(--fg); }

/* -------- hero visual tweaks (new card content) -------- */
.hv-game-band {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: var(--s3);
}
.hv-game-band span {
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
.hv-game-band-lg span { font-size: 28px; }
.hv-game-band em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hv-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--muted);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.hv-dl {
  margin-top: var(--s3);
  padding: 8px 12px;
  background: var(--invert-bg); color: var(--invert-fg);
  border-radius: var(--radius);
  text-align: center;
  font-size: 12px; font-weight: 500;
}
:root[data-theme="dark"] .hv-row { color: #A3A3A3; }

/* -------- xp (product page) game-name header -------- */
.xp-game-display {
  position: relative; z-index: 1;
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(180deg, var(--fg) 0%, color-mix(in oklab, var(--fg) 50%, var(--bg)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 var(--s4);
  word-break: break-word;
}
.xp-visual {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4);
  overflow: hidden;
}
.xp-visual::before {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--fg) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--fg) 4%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 75%);
}
.xp-type-tag {
  position: relative; z-index: 1;
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--bg);
}

.tool-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: var(--s4);
  min-height: 2.8em;
}

.tool-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s3);
}
.tool-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface-2); color: var(--fg);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: -0.02em;
}
.tool-rating {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: 12px; color: var(--muted);
}
.tool-rating .i { width: 12px; height: 12px; fill: currentColor; stroke-width: 0; }
.tool-name { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--s1); }
.tool-game { font-size: 12px; color: var(--muted); margin-bottom: var(--s4); text-transform: uppercase; letter-spacing: 0.06em; }
.tool-meta {
  display: flex; gap: var(--s4);
  font-size: 12px; color: var(--muted);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.tool-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tool-foot { display: flex; gap: var(--s2); margin-top: var(--s3); }
.tool-foot .btn-primary { flex: 1; }
.tool-foot .is-sent { animation: ping .9s var(--ease); }

@keyframes ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--invert-bg) 40%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

/* -------- empty state -------- */
.empty {
  display: none;
  text-align: center;
  padding: var(--s8) var(--s5);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
  color: var(--muted);
}
.empty.is-on { display: block; }
.empty h3 { color: var(--fg); margin-bottom: var(--s3); }
.empty .btn { margin-top: var(--s4); }

/* -------- faq -------- */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) 0;
  text-align: left;
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
}
.faq-q .i { color: var(--muted); transition: transform var(--dur) var(--ease); }
.faq-item[data-open="true"] .faq-q .i { transform: rotate(45deg); }
.faq-a {
  display: none; padding-bottom: var(--s5);
  color: var(--muted); max-width: 60ch;
}
.faq-item[data-open="true"] .faq-a { display: block; }

/* -------- executor page -------- */
.crumbs {
  padding: var(--s5) 0 0;
  font-size: 13px; color: var(--muted);
  display: flex; gap: var(--s2); flex-wrap: wrap;
}
.crumbs a:hover { color: var(--fg); }
.crumbs .sep { color: var(--dim); }
.crumbs [aria-current] { color: var(--fg); }

.xp {
  padding: var(--s6) 0 var(--s7);
  border-bottom: 1px solid var(--line);
}
.xp-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s7);
  align-items: start;
}
@media (min-width: 820px) {
  .xp-grid { grid-template-columns: 320px 1fr; gap: var(--s8); }
}
.xp-visual {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  color: var(--fg);
}
.xp-visual::before {
  content: "";
  position: absolute;
  inset: -30% -30% auto auto;
  width: 160%; aspect-ratio: 1;
  background: radial-gradient(circle at center, color-mix(in oklab, var(--fg) 6%, transparent), transparent 60%);
  pointer-events: none;
}
.xp-art {
  width: 70%; height: auto; max-height: 70%;
  position: relative; z-index: 1;
  transition: transform .5s var(--ease);
}
.xp-visual:hover .xp-art { transform: scale(1.04); }
.xp-mark {
  width: 96px; height: 96px; border-radius: 24px;
  background: var(--invert-bg); color: var(--invert-fg);
  display: grid; place-items: center;
}
.xp-mark .i { width: 44px; height: 44px; }
.xp-tags {
  position: absolute; bottom: var(--s4); left: 0; right: 0;
  display: flex; gap: var(--s2); justify-content: center;
}
.xp-tag {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  padding: 4px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--bg);
}
.xp-eyebrow {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s3);
}
.xp-title { font-size: clamp(44px, 6vw, 64px); margin-bottom: var(--s4); letter-spacing: -0.035em; line-height: 1; }
.xp-lead { font-size: 17px; color: var(--muted); max-width: 48ch; margin-bottom: var(--s5); }
.xp-meta {
  display: flex; gap: var(--s5); flex-wrap: wrap;
  margin-bottom: var(--s6);
  font-size: 13px; color: var(--muted);
}
.xp-meta span { display: inline-flex; align-items: center; gap: var(--s1); }
.xp-meta .i { color: var(--muted); }
.xp-actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }

.pw {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  max-width: 420px;
}
.pw-ic { color: var(--muted); }
.pw-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pw-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pw-code { font-family: var(--mono); font-size: 14px; letter-spacing: -0.01em; color: var(--fg); }

.xp-cols { display: grid; grid-template-columns: 1fr; gap: var(--s7); padding: var(--s7) 0 var(--s8); }
@media (min-width: 820px) {
  .xp-cols { grid-template-columns: 2fr 1fr; gap: var(--s8); }
}
.xp-body h2 { margin-bottom: var(--s4); }
.xp-body p { margin-bottom: var(--s4); font-size: 15px; max-width: 62ch; }
.xp-side {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  background: var(--surface);
}
.xp-side h2 { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s4); font-weight: 500; }
.xp-feats li {
  display: flex; gap: var(--s3); align-items: start;
  padding: var(--s2) 0;
  font-size: 14px; color: var(--fg);
}
.xp-feats .i { color: var(--muted); margin-top: 3px; }

.xp-related { display: flex; gap: var(--s3); flex-wrap: wrap; padding-bottom: var(--s8); }
.xp-rel {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.xp-rel:hover { border-color: var(--line-2); background: var(--surface); transform: translateY(-1px); }

/* -------- footer -------- */
.foot {
  padding: var(--s7) 0 var(--s6);
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.foot-in { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; justify-content: space-between; }
.foot-links { display: flex; gap: var(--s5); flex-wrap: wrap; }
.foot a:hover { color: var(--fg); }

/* -------- toasts -------- */
.toasts {
  position: fixed; z-index: 50; bottom: var(--s5); right: var(--s5);
  display: flex; flex-direction: column; gap: var(--s2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s2);
  padding: 10px 14px;
  background: var(--invert-bg); color: var(--invert-fg);
  border-radius: var(--radius);
  font-size: 13px;
  animation: toast-in .22s var(--ease);
}
.toast.is-out { animation: toast-out .18s var(--ease) forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(6px); }
}

/* -------- mobile nav -------- */
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .nav {
    position: fixed; inset: 64px 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: start;
    gap: 0;
    padding: var(--s5);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: var(--s4) 0; width: 100%; border-bottom: 1px solid var(--line); font-size: 18px; color: var(--fg); }
  .nav-toggle { display: grid; }
  body.is-locked { overflow: hidden; }
}

/* -------- reveal -------- */
.reveal {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============ Hero 'Signed Install' visual (v2) ============ */

/* Orbit chips around the stack */
.hv-orbit {
  position: absolute;
  z-index: 5;
  opacity: 0;
  transform: translateY(6px);
  animation: hv-orbit-in 700ms var(--ease) forwards;
  pointer-events: none;
}
.hv-orbit-tl { top: -16px;  left: -32px;  animation-delay: 320ms; }
.hv-orbit-tr { top: 10px;   right: -40px; animation-delay: 460ms; }
.hv-orbit-br { bottom: 36px; right: -28px; animation-delay: 600ms; }
.hv-orbit-bl { bottom: -18px; left: -12px; animation-delay: 760ms; }
@keyframes hv-orbit-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 11px/1 var(--font);
  color: var(--fg);
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--line-2), 0 10px 28px -18px rgba(0,0,0,.28);
}
.hv-chip-mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; }
.hv-chip-verified { border-color: var(--fg); }

.hv-pulse {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--fg);
  animation: hv-pulse 1.9s ease-in-out infinite;
}
@keyframes hv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

.hv-caret {
  display: inline-block;
  width: 5px;
  margin: 0 1px;
  color: var(--muted);
  animation: hv-caret 1s steps(2, end) infinite;
}
@keyframes hv-caret {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Card internals (v2 markup) */
.hv-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 700ms var(--ease), box-shadow 500ms var(--ease);
}
:root[data-theme="dark"] .hv-card {
  background: #1A1A1A;
  border-color: #2E2E2E;
}
.hv-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.hv-game {
  font: 700 20px/1 var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
}
.hv-ver {
  font: 500 10.5px/1 var(--mono);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.hv-row { display: flex; gap: 8px; align-items: center; }
.hv-pill {
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.hv-tool {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px dashed var(--line-2);
}
.hv-tool-name { font: 600 14px/1 var(--font); color: var(--fg); }
.hv-stars { font: 500 11px/1 var(--mono); color: var(--muted); }
.hv-sign {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Progress block on front card */
.hv-progress { margin-top: 4px; }
.hv-progress-meta {
  display: flex;
  justify-content: space-between;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.hv-progress-track {
  position: relative;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.hv-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--fg);
  border-radius: 2px;
  animation: hv-fill 2400ms cubic-bezier(.65,0,.2,1) 500ms forwards;
}
@keyframes hv-fill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Download → Installed flip */
.hv-dl {
  position: relative;
  margin-top: 6px;
  height: 40px;
  border-radius: 10px;
  background: var(--invert-bg);
  color: var(--invert-fg);
  border: 1px solid var(--invert-bg);
  overflow: hidden;
  cursor: default;
  isolation: isolate;
}
.hv-dl-face {
  position: absolute; inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.hv-dl-label { font: 600 13px/1 var(--font); letter-spacing: 0.02em; opacity: 1; }
.hv-dl-check {
  font: 600 11.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10%);
}
.hv-card-front.is-installed .hv-dl-label { opacity: 0; transform: translateY(-10%); }
.hv-card-front.is-installed .hv-dl-check { opacity: 1; transform: translateY(0); }

.hv-dl::before {
  content: "";
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: hv-shimmer 2.6s cubic-bezier(.4,0,.2,1) 600ms 2;
}
@keyframes hv-shimmer {
  from { transform: translateX(0); }
  to   { transform: translateX(360%); }
}
.hv-card-front.is-installed .hv-dl::before { display: none; }

/* Holographic ridge sweep across the front card on first paint */
.hv-ridge {
  position: absolute;
  top: 0; left: 0;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(0,0,0,.08) 50%, transparent 58%);
  transform: translateX(-120%);
  animation: hv-ridge 1600ms cubic-bezier(.4,0,.2,1) 200ms 1 forwards;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .hv-ridge {
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.08) 50%, transparent 58%);
  mix-blend-mode: screen;
}
@keyframes hv-ridge {
  0%   { transform: translateX(-120%); opacity: 0; }
  25%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(220%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-ridge, .hv-dl::before, .hv-pulse, .hv-caret { animation: none; }
  .hv-progress-fill { animation: none; width: 100%; }
  .hv-card-front .hv-dl-label { opacity: 0; }
  .hv-card-front .hv-dl-check { opacity: 1; transform: none; }
  .hv-orbit { opacity: 1; transform: none; animation: none; }
}

/* ============ Hero cheat-menu mocks ============ */
.hv-mock-win{display:flex;flex-direction:column;gap:6px;padding:10px 12px;height:100%;box-sizing:border-box;font-family:var(--mono);font-size:10px;letter-spacing:0.04em;color:var(--muted);overflow:hidden}
.hv-mock-titlebar{display:flex;align-items:center;gap:8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.hv-mock-dots{display:inline-flex;gap:3px}
.hv-mock-dot{width:6px;height:6px;border-radius:50%;border:1px solid var(--line-2);box-sizing:border-box}
.hv-mock-title{color:var(--fg);font-size:10px;letter-spacing:0.06em;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-mock-close{color:var(--dim);font-size:11px;letter-spacing:0.25em;line-height:1}
.hv-mock-status{color:var(--dim);font-size:9px;letter-spacing:0.02em;line-height:1.4;word-break:break-word}
.hv-mock-tabs{display:flex;gap:14px;border-bottom:1px solid var(--line);margin-top:2px}
.hv-mock-tab{padding-bottom:4px;color:var(--dim);letter-spacing:0.14em;font-size:10px}
.hv-mock-tab-active{color:var(--fg);border-bottom:1px solid var(--fg);margin-bottom:-1px}
.hv-mock-section{color:var(--dim);font-size:9px;letter-spacing:0.18em;margin-top:1px}
.hv-mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.hv-mock-check{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-mock-box{width:10px;height:10px;border:1px solid var(--line-2);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--bg)}
.hv-mock-box svg{width:8px;height:8px;display:block;visibility:hidden}
.hv-mock-box-on{background:var(--fg);border-color:var(--fg)}
.hv-mock-box-on svg{visibility:visible}
.hv-mock-slider{display:flex;align-items:center;gap:8px}
.hv-mock-track{position:relative;flex:1;height:2px;background:var(--line)}
.hv-mock-fill{display:block;height:100%;background:var(--fg)}
.hv-mock-handle{position:absolute;top:50%;width:6px;height:6px;background:var(--fg);border-radius:50%;transform:translate(-50%,-50%)}
.hv-mock-slider-val{color:var(--muted);min-width:68px;text-align:right;font-size:10px}
.hv-mock-slider-val b{color:var(--fg);font-weight:400}
.hv-mock-cell{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;border:1px solid var(--line-2);border-radius:3px;color:var(--muted)}
.hv-mock-cell-val{color:var(--fg)}
.hv-mock-foot{margin-top:auto;display:flex;align-items:center;gap:6px;padding-top:6px;border-top:1px solid var(--line)}
.hv-mock-chip{padding:2px 6px;border:1px solid var(--line-2);border-radius:3px;font-size:9px;color:var(--dim);letter-spacing:0.06em}
.hv-mock-tag{margin-left:auto;padding:2px 6px;background:var(--fg);color:var(--bg);font-size:9px;letter-spacing:0.1em;border-radius:2px}
.hv-mock-row{display:flex;gap:6px;align-items:stretch}
.hv-mock-code{background:color-mix(in oklab, var(--fg) 4%, transparent);padding:6px 8px;border-radius:4px;font:400 10px/1.5 var(--mono);color:var(--muted);margin:0;white-space:pre;overflow:hidden;flex:1;min-width:0}
.hv-mock-ticker{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:5px 7px;border:1px solid var(--line);border-radius:3px;font-size:9px;color:var(--muted);letter-spacing:0.02em;min-width:76px}
.hv-mock-ticker div{display:flex;align-items:center;gap:5px}
.hv-mock-ticker-ok{color:var(--fg);font-size:10px;line-height:1}
.hv-mock-btns{display:flex;gap:4px}
.hv-mock-btn{flex:1;padding:4px 0;text-align:center;border:1px solid var(--line-2);color:var(--muted);font-size:9px;letter-spacing:0.14em;border-radius:3px}
.hv-mock-btn-pri{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* Resize the card frame so the mock has breathing room */
.hv-card { padding: 0; width: 320px; height: 240px; }
.hv-card .hv-mock-win { height: 100%; }

/* ============ Hero ImGui-style cheat panel (v3) ============ */
.hvm-root{position:relative;width:100%;height:100%;display:grid;grid-template-columns:56px 1fr;grid-template-rows:1fr 24px;font-family:var(--mono);font-size:10.5px;line-height:1.3;color:var(--fg);background:var(--surface);overflow:hidden;border-radius:var(--radius-lg)}
.hvm-rail{grid-column:1;grid-row:1;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--surface)}
.hvm-tab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--dim);border-bottom:1px solid var(--line);padding:4px 0}
.hvm-tab:last-child{border-bottom:none}
.hvm-tab-icon{width:16px;height:16px;display:block}
.hvm-tab-label{font-size:9px;letter-spacing:0.1em}
.hvm-tab--active{background:var(--fg);color:var(--invert-fg)}
.hvm-tab--active .hvm-tab-label{font-size:11px;letter-spacing:0.08em}
.hvm-main{grid-column:2;grid-row:1;display:flex;flex-direction:column;padding:9px 12px 10px;gap:8px;min-width:0;min-height:0;overflow:hidden}
.hvm-topbar{flex:0 0 28px;display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--line)}
.hvm-crumb{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.hvm-crumb strong{color:var(--fg);font-weight:500}
.hvm-crumb .hvm-sep{color:var(--line-2);margin:0 4px}
.hvm-config{display:flex;align-items:center;gap:4px}
.hvm-config-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--line);border-radius:3px;font-size:9.5px;color:var(--fg)}
.hvm-config-btn{padding:3px 7px;border:1px solid var(--line);border-radius:3px;font-size:9px;letter-spacing:0.1em;color:var(--muted)}
.hvm-caret{font-size:8px;color:var(--muted);transform:translateY(-0.5px)}
.hvm-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:0 0 auto;min-height:0}
.hvm-group{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--surface);min-width:0}
.hvm-group > .hvm-toggle:last-child,
.hvm-group > .hvm-slider:last-child,
.hvm-group > .hvm-select:last-child { margin-bottom: 1px; }
.hvm-group-head{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);padding-bottom:4px;border-bottom:1px solid var(--line)}
.hvm-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:14px}
.hvm-toggle-l{display:inline-flex;align-items:center;gap:7px;color:var(--fg);font-size:10.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.hvm-check{flex:0 0 10px;width:10px;height:10px;border:1px solid var(--line-2);border-radius:2px;display:inline-flex;align-items:center;justify-content:center;background:transparent}
.hvm-check--on{background:var(--fg);border-color:var(--fg)}
.hvm-check svg{display:block}
.hvm-check--on svg{width:8px;height:8px;color:var(--invert-fg)}
.hvm-hotkey{flex:0 0 auto;padding:2px 6px;border:1px solid var(--line);border-radius:3px;font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--dim)}
.hvm-select{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hvm-select > span:first-child{color:var(--fg);font-size:10.5px}
.hvm-select-val{display:inline-flex;align-items:center;gap:6px;padding:2px 7px;border:1px solid var(--line);border-radius:3px;font-size:9.5px;color:var(--fg);min-width:72px;justify-content:space-between}
.hvm-slider{display:flex;align-items:center;gap:8px;min-width:0}
.hvm-slider-l{flex:0 0 auto;min-width:54px;color:var(--fg);font-size:10.5px}
.hvm-track{position:relative;flex:1 1 auto;height:2px;background:var(--line-2);border-radius:1px}
.hvm-fill{position:absolute;top:0;left:0;bottom:0;background:var(--fg);border-radius:1px}
.hvm-handle{position:absolute;top:50%;width:6px;height:6px;background:var(--fg);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px var(--bg)}
.hvm-num{flex:0 0 auto;padding:2px 7px;border:1px solid var(--line);border-radius:3px;font-size:9.5px;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.hvm-slider .hvm-num.hvm-num--plain{border:none;padding:0;color:var(--fg)}
.hvm-stat{margin-top:auto;padding-top:7px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:9px;letter-spacing:0.06em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.hvm-stat>span{display:inline-flex;align-items:baseline;gap:5px;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hvm-stat b{color:var(--fg);font-weight:500;letter-spacing:0.02em}
.hvm-status{grid-column:1 / -1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;border-top:1px solid var(--line);background:var(--surface-2);font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:0.02em}
.hvm-status-left,.hvm-status-mid,.hvm-status-right{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hvm-status-mid{flex:1 1 auto;justify-content:center;color:var(--dim)}
.hvm-status .hvm-sep{color:var(--line-2);margin:0 3px}
.hvm-pulse{width:6px;height:6px;border-radius:50%;background:var(--fg);flex:0 0 6px}

/* Single flat card frame hosting the ImGui panel */
.hero-visual.hero-visual--panel .hv-stage { position: relative; transform-style: flat; perspective: none; }
.hero-visual.hero-visual--panel .hv-card-solo {
  position: absolute;
  left: 50%; top: 50%;
  width: 480px;
  height: 320px;
  transform: translate(-50%, -50%);
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 36px 80px -40px color-mix(in oklab, var(--fg) 45%, transparent),
    0 10px 28px -14px color-mix(in oklab, var(--fg) 25%, transparent);
  overflow: hidden;
  animation: hv-card-in .7s var(--ease) both;
}
:root[data-theme="dark"] .hero-visual.hero-visual--panel .hv-card-solo {
  background: #141414;
  border-color: #2A2A2A;
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.9),
    0 14px 32px -10px rgba(0,0,0,.6);
}
@keyframes hv-card-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

@media (max-width: 1079px) {
  .hero-visual.hero-visual--panel .hv-card-solo { width: 420px; height: 290px; }
}

/* ============ Hero: panel cycle, float, orbit layout (v4) ============ */

/* Enlarge the hero-visual column so chips sit in corners without overlapping the panel. */
.hero-visual { height: 540px; }
.hero-visual.hero-visual--panel .hv-stage { position: absolute; inset: 0; }

/* Panel chrome: single flat card, floats gently, panels cross-fade inside */
.hero-visual.hero-visual--panel .hv-card-solo {
  position: absolute;
  left: 50%; top: 50%;
  width: 480px; height: 320px;
  transform: translate(-50%, -50%);
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 36px 80px -40px color-mix(in oklab, var(--fg) 45%, transparent),
    0 10px 28px -14px color-mix(in oklab, var(--fg) 25%, transparent);
  overflow: hidden;
  animation: hv-card-in .7s var(--ease) both, hv-card-float 6s 1s var(--ease) infinite;
}
:root[data-theme="dark"] .hero-visual.hero-visual--panel .hv-card-solo {
  background: #141414;
  border-color: #2A2A2A;
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.9),
    0 14px 32px -10px rgba(0,0,0,.6);
}
@keyframes hv-card-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes hv-card-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 8px)); }
}
@media (max-width: 1079px) {
  .hero-visual.hero-visual--panel .hv-card-solo { width: 420px; height: 290px; }
}

/* Each panel sits absolute inside the card; opacity cross-fade switches them. */
.hvm-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.hvm-panel.is-active { opacity: 1; }

/* Push orbit chips to the actual corners of hero-visual so they orbit around the card. */
.hv-orbit-tl { top: 22px;    left:  -8px;  bottom: auto; right: auto; animation-delay: 320ms; }
.hv-orbit-tr { top: 22px;    right: -8px;  bottom: auto; left:  auto; animation-delay: 460ms; }
.hv-orbit-br { bottom: 22px; right: -8px;  top:    auto; left:  auto; animation-delay: 600ms; }
.hv-orbit-bl { bottom: 22px; left:  -8px;  top:    auto; right: auto; animation-delay: 760ms; }
.hv-orbit { z-index: 6; }

/* ============ Roblox executor panel (Hysteric theme, original design) ============ */
.hvm2-root{display:flex;flex-direction:column;width:100%;height:100%;background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;font-family:var(--mono);font-size:10px;color:var(--fg)}
.hvm2-head{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line)}
.hvm2-dots{display:inline-flex;gap:3px}
.hvm2-dots i{width:6px;height:6px;border-radius:50%;border:1px solid var(--line-2);display:inline-block}
.hvm2-title{flex:1;color:var(--fg);font-size:10px;letter-spacing:0.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hvm2-close{color:var(--dim);font-size:11px;letter-spacing:0.2em}
.hvm2-tabs{display:flex;gap:0;padding:0 8px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.hvm2-tab{padding:5px 10px;color:var(--muted);font-size:9.5px;letter-spacing:0.06em;border-right:1px solid var(--line)}
.hvm2-tab--active{color:var(--fg);background:var(--surface);border-bottom:1px solid var(--surface);margin-bottom:-1px;position:relative}
.hvm2-tab--active::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fg)}
.hvm2-plus{color:var(--dim);padding:5px 10px;border-right:1px solid var(--line)}
.hvm2-body{display:grid;grid-template-columns:1.55fr 1fr;flex:1 1 auto;min-height:0;overflow:hidden}
.hvm2-editor{padding:8px 0;border-right:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;gap:1px}
.hvm2-codeline{display:flex;align-items:center;gap:8px;padding:0 10px 0 0;font-size:10px;line-height:1.5;color:var(--muted);white-space:nowrap;overflow:hidden}
.hvm2-ln{display:inline-block;width:22px;text-align:right;color:var(--dim);font-size:9px}
.hvm2-kw{color:var(--fg)}
.hvm2-str{color:var(--fg);opacity:0.8}
.hvm2-side{padding:9px 10px;display:flex;flex-direction:column;gap:9px;overflow:hidden;min-width:0}
.hvm2-sec{display:flex;flex-direction:column;gap:5px;min-width:0}
.hvm2-sec-head{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);padding-bottom:4px;border-bottom:1px solid var(--line)}
.hvm2-attach{display:flex;align-items:center;gap:7px;padding:3px 0}
.hvm2-attach-dot{width:6px;height:6px;border-radius:50%;background:var(--fg);flex:0 0 6px;animation:hv-pulse 1.9s ease-in-out infinite}
.hvm2-attach-info{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.hvm2-attach-info b{font-size:10px;color:var(--fg);font-weight:500;letter-spacing:0.04em}
.hvm2-attach-info small{font-size:8.5px;color:var(--muted);letter-spacing:0.04em}
.hvm2-script{padding:3px 7px;color:var(--muted);font-size:10px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hvm2-script--sel{background:var(--fg);color:var(--invert-fg)}
.hvm2-foot{display:flex;justify-content:space-between;align-items:center;padding:5px 12px;border-top:1px solid var(--line);background:var(--surface-2);font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.hvm2-foot span{display:inline-flex;align-items:center;gap:5px}
.hvm2-foot .hv-pulse{width:6px;height:6px}

/* ============ Product hero visual (v3 - typography) ============ */
.xp-visual {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--s4);
  padding: var(--s5);
  position: relative;
  overflow: hidden;
  color: var(--fg);
}
.xp-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--fg) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--fg) 4%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 25%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

.xp-stack {
  position: relative; z-index: 1;
  align-self: center;
  justify-self: center;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s3);
  width: 100%;
  text-align: center;
}
.xp-game-name {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fg);
  background: linear-gradient(180deg, var(--fg) 0%, color-mix(in oklab, var(--fg) 55%, var(--bg)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.xp-game-name[data-size="xl"]  { font-size: clamp(48px, 11cqw, 92px); }
.xp-game-name[data-size="lrg"] { font-size: clamp(40px, 9cqw, 72px); }
.xp-game-name[data-size="med"] { font-size: clamp(28px, 6.6cqw, 56px); }
.xp-game-name[data-size="sm"]  { font-size: clamp(22px, 5.4cqw, 44px); letter-spacing: -0.03em; }
.xp-visual { container-type: inline-size; }

.xp-rule {
  display: block;
  width: 36px; height: 1px;
  background: var(--line-2);
}
.xp-type-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.xp-visual .xp-tags {
  position: relative; z-index: 1;
  justify-self: center;
  display: flex; gap: var(--s2);
  margin: 0;
}
.xp-visual .xp-tag {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
}