/* VMX web kit: the Arc menu's pastel theme as CSS.
   Values come from menu_neo (style/theme.em pastel_theme, style/metrics.em, render/text.em). */

/* web fallbacks for visitors without Bahnschrift / Consolas, served from this site (latin subset from Google Fonts) */
@font-face { font-family: "Barlow Semi Condensed"; src: url("assets/fonts/barlow-sc-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("assets/fonts/barlow-sc-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("assets/fonts/barlow-sc-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

@font-face { font-family: "HX Heading"; src: local("Bahnschrift"), local("Bahnschrift SemiBold"); font-weight: 400 700; }
@font-face { font-family: "HX Mono"; src: local("Consolas"); font-weight: 400 700; }

:root {
  --accent: #ecb9ff;
  --accent-deep: color-mix(in srgb, var(--accent) 28%, var(--window));
  --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--window));
  --accent-faint: color-mix(in srgb, var(--accent) 12%, var(--window));
  --accent-back: color-mix(in srgb, var(--accent) 10%, var(--window));
  --on-accent: #1a1015;

  --page: #050505;
  --window: #0d0d0d;
  --window-edge: #2a2a2a;
  --sidebar: #0a0a0a;
  --panel: #0a0a0a;
  --panel-edge: #1c1c1c;
  --row-line: #131313;
  --dash: #262626;
  --text: #d3d3d3;
  --dim: #7a7a7a;
  --faint: #4a4a4a;
  --off-edge: #2e2e2e;
  --off-body: #111111;
  --off-knob: #3c3c3c;
  --rail: #131313;
  --thumb: var(--accent);
  --live: #8fe0b0;
  --button: #141414;
  --button-edge: #2e2e2e;
  --tab-off: #131313;
  --canvas: #080808;
  --grid: #141414;
  --popup: #111111;

  --font-heading: "HX Heading", "Barlow Semi Condensed", "Segoe UI", sans-serif;
  --font-mono: "HX Mono", "JetBrains Mono", ui-monospace, monospace;
  --size-logo: 17px;
  --size-heading: 13.5px;
  --size-body: 14px;
  --size-mono: 12px;
  --size-tiny: 10.5px;
  --size-micro: 9px;
  --track-logo: 4.8px;
  --track-heading: 3px;
  --track-nav: 2.6px;
  --track-tiny: 1.3px;

  --corner-cut: 18px;
  --title-h: 52px;
  --footer-h: 26px;
  --sidebar-w: 190px;
  --panel-header: 38px;
  --panel-pad: 14px;
  --row-h: 44px;
  --control-h: 28px;
  --gap: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --anim: 160ms;
}

*, *::before, *::after { box-sizing: border-box; }
.hx [hidden] { display: none !important; }
html { color-scheme: dark; }
body.hx {
  margin: 0; min-height: 100vh; background: var(--page); color: var(--text);
  font: var(--size-body)/1.4 var(--font-mono); -webkit-font-smoothing: antialiased;
}
.hx ::selection { background: var(--accent); color: var(--on-accent); }
.hx a { color: var(--accent); text-decoration: none; }

/* ---------- type ---------- */
.hx-logo { font: 700 var(--size-logo) var(--font-heading); letter-spacing: var(--track-logo); text-transform: uppercase; }
.hx-wordmark { display: block; height: 1em; width: auto; }
.hx-wordmark-x { fill: var(--accent); }
.hx-logo:hover .hx-wordmark { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); }
.hx-heading { font: 700 var(--size-heading) var(--font-heading); letter-spacing: var(--track-heading); text-transform: uppercase; }
.hx-tiny { font-size: var(--size-tiny); letter-spacing: var(--track-tiny); text-transform: uppercase; color: var(--dim); }
.hx-micro { font-size: var(--size-micro); letter-spacing: var(--track-tiny); color: var(--faint); }
.hx-dim { color: var(--dim); }
.hx-faint { color: var(--faint); }
.hx-accent { color: var(--accent); }

/* ---------- theme toggle: colour <-> mono ---------- */
html[data-theme="mono"] { --accent: #ffffff; --on-accent: #000000; }
.hx-theme-toggle { display: none; background: none; border: 1px solid var(--dash); color: var(--text); width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin-left: -10px; flex: none; transition: color .15s, border-color .15s; }
body.in .hx-theme-toggle { display: inline-flex; }
.hx-theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.hx-theme-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
html[data-theme="mono"] .hx-theme-toggle .ico-sun { display: none; }
html:not([data-theme="mono"]) .hx-theme-toggle .ico-moon { display: none; }

/* ---------- logo mark: diamond outline + core ---------- */
.hx-mark { width: 18px; height: 18px; position: relative; flex: none; }
.hx-mark::before, .hx-mark::after { content: ""; position: absolute; inset: 0; margin: auto; transform: rotate(45deg); }
.hx-mark::before { width: 12.7px; height: 12.7px; border: 2px solid var(--accent); }
.hx-mark::after { width: 5.6px; height: 5.6px; background: var(--accent); }

/* ---------- window ---------- */
.hx-frame { position: relative; padding: 6px; }
.hx-frame::before, .hx-frame::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; }
.hx-frame::before { top: 0; right: 0; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.hx-frame::after { bottom: 0; left: 0; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }

.hx-window {
  position: relative; display: grid;
  grid-template-rows: var(--title-h) 1fr var(--footer-h);
  grid-template-columns: var(--sidebar-w) 1fr;
  background: color-mix(in srgb, var(--window) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%);
  min-height: 480px;
}
.hx-window-edge { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hx-window-edge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hx-window-edge .edge { fill: none; stroke: var(--window-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hx-window-edge .sweep {
  fill: none; stroke: color-mix(in srgb, var(--accent) 65%, var(--text)); stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linecap: round; filter: drop-shadow(0 0 3px var(--accent));
}
.hx-titlebar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 0 16px 0 24px;
  border-bottom: 1px solid var(--window-edge);
  background: color-mix(in srgb, var(--window) 56%, transparent);
}
.hx-titlebar .hx-logo { display: flex; align-items: center; gap: 12px; }
.hx-vsep { width: 1px; height: 22px; background: var(--window-edge); flex: none; }
.hx-crumb { font-size: var(--size-mono); letter-spacing: 1px; color: var(--dim); }
.hx-crumb b { color: var(--accent); font-weight: 400; margin-right: 6px; }
.hx-crumb span { color: var(--text); }
.hx-spacer { flex: 1; }
.hx-status { display: flex; align-items: center; gap: 7px; font-size: var(--size-tiny); letter-spacing: var(--track-tiny); color: var(--dim); text-transform: uppercase; }
.hx-status b { color: var(--text); font-weight: 400; }
.hx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.hx-dot.live { background: var(--live); box-shadow: 0 0 6px var(--live); }
.hx-wbtn {
  width: 28px; height: 28px; display: grid; place-items: center; background: var(--button);
  border: 1px solid var(--button-edge); color: var(--dim); cursor: pointer; padding: 0;
  transition: border-color var(--anim), color var(--anim);
}
.hx-wbtn:hover { border-color: color-mix(in srgb, var(--button-edge) 65%, var(--text)); color: var(--text); }
.hx-wbtn.danger { border-color: var(--accent); color: var(--accent); }
.hx-wbtn svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1.2; fill: none; }
.hx-footer {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 22px;
  border-top: 1px solid var(--window-edge); font-size: var(--size-tiny); letter-spacing: var(--track-tiny);
  color: var(--dim); text-transform: uppercase;
}
.hx-footer .hx-dot { width: 4px; height: 4px; border-radius: 0; transform: rotate(45deg); }
.hx-footer b { color: var(--text); font-weight: 400; }
.hx-grip { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; z-index: 4; }
.hx-grip::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 3px, var(--faint) 3px 4px);
  clip-path: polygon(100% 4px, 100% 100%, 4px 100%);
}
.hx-grip:hover::before { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--accent) 3px 4px); }

/* ---------- sidebar nav ---------- */
.hx-sidebar {
  position: relative; display: flex; flex-direction: column; padding: 14px 12px 10px;
  background: color-mix(in srgb, var(--sidebar) 44%, transparent); border-right: 1px solid var(--window-edge);
  overflow: hidden;
}
.hx-sidebar > canvas.hx-snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hx-nav { position: relative; display: flex; flex-direction: column; gap: 6px; z-index: 1; }
.hx-nav-glide {
  position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent-faint));
  transition: transform 260ms var(--ease), height 260ms var(--ease);
}
.hx-nav-glide::before {
  content: ""; position: absolute; inset: -2px;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 9px 2px,
    linear-gradient(var(--accent), var(--accent)) top left / 2px 9px,
    linear-gradient(var(--accent), var(--accent)) top right / 9px 2px,
    linear-gradient(var(--accent), var(--accent)) top right / 2px 9px,
    linear-gradient(var(--accent), var(--accent)) bottom left / 9px 2px,
    linear-gradient(var(--accent), var(--accent)) bottom left / 2px 9px,
    linear-gradient(var(--accent), var(--accent)) bottom right / 9px 2px,
    linear-gradient(var(--accent), var(--accent)) bottom right / 2px 9px;
  background-repeat: no-repeat;
}
.hx-nav-item {
  position: relative; display: grid; grid-template-columns: 26px 1fr; padding: 14px 10px;
  cursor: pointer; color: var(--dim); background: none; border: 0; text-align: left; font: inherit;
}
.hx-nav-item .num { font-size: var(--size-tiny); color: var(--faint); padding-top: 4px; }
.hx-nav-item .title { font: 700 var(--size-heading) var(--font-heading); letter-spacing: var(--track-nav); text-transform: uppercase; transition: color var(--anim); }
.hx-nav-item .sub { font-size: var(--size-tiny); color: var(--faint); margin-top: 3px; line-height: 1.3; }
.hx-nav-item:hover .title, .hx-nav-item.on .title { color: var(--text); }
.hx-nav-item.on .num, .hx-nav-item.on .sub { color: color-mix(in srgb, var(--dim) 65%, var(--text)); }
.hx-ruler {
  height: 32px; flex: none; margin: 4px 0;
  background: repeating-linear-gradient(90deg, var(--dash) 0 1px, transparent 1px 9px) center / 100% 9px no-repeat;
}
.hx-sidebar-space { position: relative; flex: 1; min-height: 120px; display: grid; place-items: center; }
.hx-sidebar-space canvas.hx-heart { width: 100%; height: 96px; }

/* profile card */
.hx-profile {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 10px;
  background: var(--panel); border: 1px solid var(--panel-edge);
}
.hx-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 0 1px var(--panel-edge), 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: hx-glow 2.4s ease-in-out infinite;
}
.hx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hx-avatar svg { width: 60%; height: 60%; fill: var(--accent); }
@keyframes hx-glow { 50% { box-shadow: 0 0 0 1px var(--panel-edge), 0 0 20px color-mix(in srgb, var(--accent) 55%, transparent); } }
.hx-profile .name { font-size: var(--size-body); color: var(--text); }
.hx-profile .sub { font-size: var(--size-tiny); color: var(--dim); }

/* sidebar search */
.hx-search { position: relative; z-index: 1; margin-bottom: 10px; }
.hx-search .hx-input { height: 30px; font-size: var(--size-mono); }
.hx-search-results { display: grid; gap: 3px; margin-top: 3px; }
.hx-search-hit {
  display: block; width: 100%; text-align: left; padding: 5px 8px; background: var(--button); border: 1px solid var(--button-edge);
  color: var(--dim); font: var(--size-mono) var(--font-mono); cursor: pointer; position: relative;
}
.hx-search-hit small { display: block; font-size: var(--size-tiny); color: var(--faint); margin-top: 2px; }
.hx-search-hit:hover { background: var(--accent-back); border-color: var(--accent); color: var(--text); box-shadow: inset 2px 0 var(--accent); }
.hx-search-hit:hover small { color: var(--accent); }

/* ---------- page ---------- */
.hx-main { position: relative; padding: 14px 22px 22px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.hx-main::-webkit-scrollbar { width: 3px; }
.hx-main::-webkit-scrollbar-thumb { background: var(--accent); }
.hx-page { animation: hx-page-in 220ms var(--ease); }
@keyframes hx-page-in { from { opacity: 0; transform: translateY(14px); } }
.hx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); align-items: start; }
.hx-stack { display: grid; gap: var(--gap); align-content: start; }

/* slanted tabs */
.hx-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.hx-tab {
  position: relative; height: 34px; min-width: 110px; padding: 0 29px; display: grid; place-items: center;
  font: 700 var(--size-heading) var(--font-heading); letter-spacing: var(--track-heading); text-transform: uppercase;
  color: var(--dim); background: var(--tab-off); border: 0; cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: background var(--anim), color var(--anim);
}
.hx-tab:hover { color: var(--text); background: color-mix(in srgb, var(--tab-off) 65%, var(--text)); }
.hx-tab.on { background: var(--accent); color: var(--on-accent); }
.hx-tab .lamp { position: absolute; left: 16px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--faint); }
.hx-tab .lamp.lit { background: var(--live); }
.hx-tab.on .lamp { background: var(--accent-deep); }
.hx-tab.on .lamp.lit { background: var(--on-accent); }
.hx-tabs .note { margin-left: auto; }

/* panel */
.hx-panel { background: var(--panel); border: 1px solid var(--panel-edge); position: relative; }
.hx-panel-head { height: var(--panel-header); display: flex; align-items: center; gap: 10px; padding: 0 var(--panel-pad); border-bottom: 1px solid var(--panel-edge); }
.hx-panel-head::before { content: ""; width: 5.6px; height: 5.6px; background: var(--accent); transform: rotate(45deg); flex: none; margin: 0 1px; }
.hx-panel-head h3 { margin: 0; font: 700 var(--size-heading) var(--font-heading); letter-spacing: var(--track-heading); text-transform: uppercase; color: var(--text); white-space: nowrap; }
.hx-panel-head .rule { flex: 1; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); min-width: 12px; }
.hx-panel-head .rule.dashed { height: 1px; background: repeating-linear-gradient(90deg, var(--dash) 0 3px, transparent 3px 6px); }
.hx-panel-head .tag { display: flex; align-items: center; gap: 6px; font-size: var(--size-tiny); letter-spacing: var(--track-tiny); text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.hx-panel-body { padding: 0; }
.hx-panel-body.padded { padding: var(--panel-pad); }

/* rows */
.hx-row {
  position: relative; min-height: var(--row-h); display: flex; align-items: center; gap: 12px; padding: 0 var(--panel-pad);
  border-bottom: 1px solid var(--row-line); transition: background var(--anim);
}
.hx-row:last-child { border-bottom: 0; }
.hx-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.hx-row .label { flex: 1; color: var(--dim); transition: color var(--anim); }
.hx-row.on .label, .hx-row:has(.hx-switch:checked) .label, .hx-row:hover .label { color: var(--text); }
.hx-row:has(.hx-switch:not(:checked)) .label { color: var(--dim); }
.hx-row:has(.hx-switch):hover .label { color: var(--text); }
.hx-row .end { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* switch */
.hx-switch {
  position: relative; width: 41px; height: 19px; flex: none; cursor: pointer; appearance: none; margin: 0;
  background: var(--off-body); border: 1px solid var(--off-edge);
  transition: background var(--anim), border-color var(--anim);
}
.hx-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; background: var(--off-knob);
  transition: left var(--anim) var(--ease), background var(--anim);
}
.hx-switch:hover { border-color: color-mix(in srgb, var(--off-edge) 65%, var(--text)); }
.hx-switch:checked { background: var(--accent-deep); border-color: var(--accent); }
.hx-switch:checked::after { left: 25px; background: var(--accent); }
.hx-switch:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* colour swatch (parallelogram) */
.hx-swatch {
  width: 24px; height: 9px; flex: none; border: 0; padding: 0; cursor: pointer; background: var(--c, var(--accent));
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); position: relative;
}
.hx-swatch:hover, .hx-swatch.open { outline: 1px solid var(--text); outline-offset: 1px; }

/* slider */
.hx-slider { padding: 14px var(--panel-pad) 12px; border-bottom: 1px solid var(--row-line); }
.hx-slider:last-child { border-bottom: 0; }
.hx-slider-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.hx-value {
  min-width: 56px; height: 25px; padding: 0 8px; display: grid; place-items: center;
  background: var(--accent-back); border: 1px solid var(--accent); color: var(--accent); font-size: var(--size-mono);
}
.hx-range {
  --fill: 50%; appearance: none; -webkit-appearance: none; width: 100%; height: 18px; margin: 0; cursor: pointer;
  background: linear-gradient(var(--accent), var(--accent)) 0 50% / var(--fill) 4px no-repeat, linear-gradient(var(--rail), var(--rail)) 0 50% / 100% 4px no-repeat;
}
.hx-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--thumb); border: 0;
  transition: transform var(--anim), box-shadow var(--anim);
}
.hx-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--thumb); border: 0; }
.hx-range:hover::-webkit-slider-thumb, .hx-range:active::-webkit-slider-thumb { transform: scale(1.25); box-shadow: 0 0 0 4px color-mix(in srgb, var(--thumb) 27%, transparent); }
.hx-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--size-tiny); letter-spacing: var(--track-tiny); text-transform: uppercase; color: var(--dim); }

/* buttons */
.hx-btn {
  height: var(--control-h); padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--button); border: 1px solid var(--button-edge); color: var(--dim); cursor: pointer;
  font: var(--size-mono) var(--font-mono); letter-spacing: 1.6px; text-transform: uppercase;
  transition: border-color var(--anim), color var(--anim), background var(--anim);
}
.hx-btn:hover { border-color: var(--accent); color: var(--text); }
.hx-btn:active { background: var(--accent-back); }
.hx-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hx-btn.primary:hover { background: color-mix(in srgb, var(--accent) 80%, white); }
.hx-btn.wide { width: 100%; }
.hx-cells { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 8px; padding: 8px var(--panel-pad); }
.hx-choice { composes: hx-btn; }
.hx-cells .hx-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* text field / dropdown / list */
.hx-input {
  width: 100%; height: var(--control-h); padding: 0 10px; background: var(--canvas); border: 1px solid var(--panel-edge);
  color: var(--text); font: var(--size-body) var(--font-mono); outline: none; caret-color: var(--accent);
  transition: border-color var(--anim);
}
.hx-input::placeholder { color: var(--faint); }
.hx-input:hover { border-color: var(--off-edge); }
.hx-input:focus { border-color: var(--accent); }
.hx-select { position: relative; }
.hx-select > button {
  width: 100%; height: var(--control-h); padding: 0 30px 0 10px; text-align: left; background: var(--canvas);
  border: 1px solid var(--panel-edge); color: var(--text); font: var(--size-body) var(--font-mono); cursor: pointer;
}
.hx-select > button::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim); transform: rotate(45deg); transition: transform var(--anim);
}
.hx-select.open > button { border-color: var(--accent); }
.hx-select.open > button::after { border-color: var(--accent); transform: translateY(3px) rotate(225deg); }
.hx-select .hx-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; display: none; background: var(--popup); border-color: var(--accent); }
.hx-select.open .hx-list { display: block; }
.hx-list { background: var(--canvas); border: 1px solid var(--panel-edge); padding: 4px; max-height: 200px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.hx-list-item { display: block; width: 100%; height: 24px; padding: 0 10px; text-align: left; background: none; border: 0; color: var(--dim); font: var(--size-body) var(--font-mono); cursor: pointer; }
.hx-list-item:hover { color: var(--text); }
.hx-list-item.on { background: var(--accent-back); color: var(--text); box-shadow: inset 2px 0 var(--accent); }

/* keybind */
.hx-key { display: flex; gap: 6px; }
.hx-key .hx-btn { min-width: 84px; }
.hx-key .hx-btn.mode { min-width: 64px; }
.hx-key .hx-btn.listening { border-color: var(--accent); color: var(--accent); animation: hx-blink 1s steps(2) infinite; }
@keyframes hx-blink { 50% { color: var(--dim); } }

/* grid canvas (preview area) */
.hx-canvas {
  position: relative; min-height: 200px; background-color: var(--canvas);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 18px 18px; background-position: -1px -1px; overflow: hidden;
}

/* popup (cog) */
.hx-cog {
  width: 28px; height: 28px; display: grid; place-items: center; background: var(--button); border: 1px solid var(--button-edge);
  color: var(--text); cursor: pointer; position: relative; flex: none;
}
.hx-cog:hover, .hx-cog.open { border-color: var(--accent); }
.hx-cog svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.hx-popup { position: absolute; z-index: 30; width: 190px; background: var(--popup); border: 1px solid var(--accent); animation: hx-pop 140ms var(--ease); }
.hx-popup .hx-panel-head { height: 30px; }
.hx-popup .hx-row { min-height: 38px; }
@keyframes hx-pop { from { opacity: 0; transform: translateY(-4px); } }

/* colour picker popup */
.hx-picker { position: fixed; z-index: 40; width: 196px; padding: 12px; background: var(--popup); border: 1px solid var(--accent); animation: hx-pop 140ms var(--ease); }
.hx-picker-top { display: flex; gap: 8px; }
.hx-picker-field { position: relative; width: 150px; height: 150px; cursor: crosshair; background: linear-gradient(transparent, #000), linear-gradient(90deg, #fff, hsl(var(--h, 0) 100% 50%)); }
.hx-picker-bar { position: relative; width: 12px; height: 150px; cursor: ns-resize; background: linear-gradient(red, #ff0 17%, lime 33%, cyan 50%, blue 67%, #f0f 83%, red); }
.hx-picker-field i { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border: 1px solid #fff; box-shadow: 0 0 0 1px #000; pointer-events: none; }
.hx-picker-bar i { position: absolute; left: -1px; right: -1px; height: 4px; margin-top: -2px; background: #fff; box-shadow: 0 0 0 1px #000; pointer-events: none; }
.hx-picker-foot { display: flex; justify-content: space-between; align-items: center; height: 22px; margin-top: 8px; font-size: var(--size-mono); }
.hx-picker-foot .hex { cursor: pointer; color: var(--text); }
.hx-picker-foot .hex:hover { color: var(--accent); }
.hx-picker-foot .title { color: var(--accent); }

/* toasts */
.hx-toasts { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.hx-toast {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; background: var(--window);
  border: 1px solid var(--accent); box-shadow: inset 3px 0 var(--accent); color: var(--text);
  animation: hx-toast-in 220ms var(--ease), hx-toast-out 450ms ease-in 1950ms forwards;
}
.hx-toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 4px; }
@keyframes hx-toast-in { from { opacity: 0; transform: translateX(60px); } }
@keyframes hx-toast-out { to { opacity: 0; } }

/* copy row */
.hx-copy { cursor: pointer; }
.hx-copy:hover .label, .hx-copy:hover .value { color: var(--accent); }

/* website-scale helpers built from the same parts */
.hx-site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; height: var(--title-h); padding: 0 24px; background: color-mix(in srgb, var(--window) 80%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--window-edge); }
.hx-site-nav { display: flex; gap: 4px; }
.hx-site-nav a { padding: 8px 14px; font: 700 var(--size-heading) var(--font-heading); letter-spacing: var(--track-nav); text-transform: uppercase; color: var(--dim); position: relative; }
.hx-site-nav a:hover, .hx-site-nav a.on { color: var(--text); text-decoration: none; }
.hx-site-nav a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--accent); }
.hx-hero { position: relative; padding: 96px 24px 72px; text-align: center; overflow: hidden; }
.hx-hero h1 { margin: 0 0 14px; font: 700 clamp(36px, 7vw, 76px) / 1 var(--font-heading); letter-spacing: .14em; text-transform: uppercase; }
.hx-hero h1 em { font-style: normal; color: var(--accent); text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); }
.hx-hero p { max-width: 560px; margin: 0 auto 28px; color: var(--dim); }
.hx-hero .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hx-hero .hx-btn { height: 40px; padding: 0 22px; }
.hx-section { max-width: 1180px; margin: 0 auto; padding: 48px 24px; }
.hx-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hx-section-head::before { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.hx-section-head h2 { margin: 0; font: 700 18px var(--font-heading); letter-spacing: var(--track-logo); text-transform: uppercase; }
.hx-section-head .rule { flex: 1; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); }
.hx-card { background: var(--panel); border: 1px solid var(--panel-edge); padding: 18px; transition: border-color var(--anim), transform var(--anim); }
.hx-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.hx-card h4 { margin: 0 0 6px; font: 700 var(--size-heading) var(--font-heading); letter-spacing: var(--track-heading); text-transform: uppercase; }
.hx-card p { margin: 0; color: var(--dim); font-size: 13px; }
.hx-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border: 1px solid var(--accent); background: var(--accent-back); color: var(--accent); font-size: var(--size-tiny); letter-spacing: var(--track-tiny); text-transform: uppercase; }
.hx-site-footer { border-top: 1px solid var(--window-edge); padding: 18px 24px; display: flex; align-items: center; gap: 10px; font-size: var(--size-tiny); letter-spacing: var(--track-tiny); text-transform: uppercase; color: var(--dim); }
canvas.hx-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

@media (max-width: 760px) {
  .hx-window { grid-template-columns: 1fr; grid-template-rows: var(--title-h) auto 1fr var(--footer-h); }
  .hx-sidebar { border-right: 0; border-bottom: 1px solid var(--window-edge); }
  .hx-sidebar-space, .hx-profile { display: none; }
  .hx-nav { flex-direction: row; overflow-x: auto; }
  .hx-crumb { display: none; }
}

/* site top bar: links and wordmark a step up from the kit's tiny label size */
.topbar .hx-tiny, .top .right.hx-tiny, .top .right .hx-tiny { font-size: 12.5px; letter-spacing: 1.8px; }
.hx .topbar, .hx .top .right { gap: 24px; }
.topbar .hx-logo, .top .hx-logo { font-size: calc(var(--size-logo) * 1.2); }
/* the account name / Register-Login next to VMX uses the logo's font and size */
.topbar #account, .top #account { font: 700 calc(var(--size-logo) * 1.2) var(--font-heading); letter-spacing: var(--track-logo); text-transform: uppercase; }

/* "Free Keys" (creator program) in the top bars: accent text with a small key */
a.free-keys { display: inline-flex; align-items: center; gap: 7px; color: var(--accent) !important; }
a.free-keys svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 60%, transparent)); }
a.free-keys:hover { text-decoration: none; text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
a.cart-link { display: inline-flex; align-items: center; gap: 7px; }
a.cart-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
a.cart-link b { min-width: 16px; height: 16px; padding: 0 4px; display: inline-grid; place-items: center; box-sizing: border-box; background: var(--accent); color: var(--on-accent); font: 700 9.5px var(--font-mono); letter-spacing: 0; }
a.cart-link b:empty { display: none; }
a.cart-link:hover { text-decoration: none; }
/* top-bar "Preview" dropdown (Menu, Web Radar); hisixie.js closes it on an outside click */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; color: var(--dim); cursor: pointer; user-select: none; transition: color var(--anim); }
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.nav-drop summary .caret { width: 11px; height: 11px; stroke-width: 1.8; transition: transform var(--anim); }
.nav-drop[open] summary .caret { transform: rotate(180deg); }
.nav-drop summary:hover, .nav-drop[open] summary, .nav-drop.on summary { color: var(--accent); }
.nav-drop .drop { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 20; min-width: 190px; display: grid; padding: 6px; border: 1px solid var(--window-edge); background: rgba(10, 10, 10, 0.96); box-shadow: 0 14px 40px rgba(0, 0, 0, .6), 0 0 24px color-mix(in srgb, var(--accent) 8%, transparent); animation: nav-drop-in 160ms var(--ease); }
.nav-drop .drop::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
@keyframes nav-drop-in { from { opacity: 0; transform: translate(-50%, -4px); } }
.nav-drop .drop a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--dim) !important; white-space: nowrap; transition: color var(--anim), background var(--anim); }
.nav-drop .drop a svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-drop .drop a:hover, .nav-drop .drop a.on { color: var(--accent) !important; background: var(--accent-back); text-decoration: none; }

/* ---------- phones, tablets and small laptops: top-bar links fold into a menu button (hisixie.js builds .hx-navlinks + .hx-burger) ---------- */
.hx-navlinks { display: contents; }
.hx-burger { display: none; }
@media (max-width: 1180px) {
  .hx .topbar { gap: 14px; padding: 0 16px; }
  .hx .topbar, .hx header.top { background: rgba(5, 5, 5, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--row-line); }
  .topbar .hx-logo, .top .hx-logo, .topbar #account, .top #account { font-size: var(--size-logo); letter-spacing: 3px; }
  .topbar #account, .top #account { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hx-burger { display: grid; align-content: center; justify-items: center; gap: 4px; width: 40px; height: 40px; flex: none; margin-left: auto; padding: 0; border: 1px solid var(--button-edge); background: var(--button); cursor: pointer; }
  .hx-burger span { display: block; width: 16px; height: 1.5px; background: var(--text); transition: transform var(--anim), opacity var(--anim); }
  .nav-open .hx-burger { border-color: var(--accent); }
  .nav-open .hx-burger span { background: var(--accent); }
  .nav-open .hx-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-open .hx-burger span:nth-child(2) { opacity: 0; }
  .nav-open .hx-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .hx header .hx-navlinks { display: none; position: fixed; top: var(--title-h); left: 0; right: 0; z-index: 40; flex-direction: column; gap: 0; max-height: calc(100dvh - var(--title-h)); overflow-y: auto; padding: 6px 16px 18px; box-sizing: border-box;
    background: rgba(6, 6, 6, 0.98); border-bottom: 1px solid var(--window-edge); box-shadow: 0 20px 40px rgba(0, 0, 0, .6); }
  .hx header.nav-open .hx-navlinks { display: flex; }
  .hx-navlinks > a, .hx-navlinks > .nav-drop > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px; border-bottom: 1px solid var(--row-line); font-size: 13px !important; letter-spacing: 2px !important; }
  .hx-navlinks > .nav-drop { border-bottom: 1px solid var(--row-line); }
  .hx-navlinks > .nav-drop > summary { border-bottom: 0; }
  .hx-navlinks .nav-drop .drop { position: static; transform: none; min-width: 0; padding: 0 0 8px 18px; border: 0; background: none; box-shadow: none; animation: none; }
  .hx-navlinks .nav-drop .drop::before { display: none; }
  .hx-navlinks .nav-drop .drop a { min-height: 44px; padding: 0 8px; font-size: 12.5px; }
  .hx-navlinks a.cart-link b { margin-left: auto; }
}
/* phones: the fixed status footer drops its "updated" dates so both products fit on one line */
@media (max-width: 620px) {
  .hx .bottombar { padding: 0 14px; gap: 8px; }
  .bottombar .status i { display: none; }
  .bottombar .status { white-space: nowrap; }
}
/* in-page links (#ranks, #write, #plans) land below the fixed top bar */
[id] { scroll-margin-top: calc(var(--title-h) + 16px); }

/* ---------- page entrances ----------
   Each page's content plays its own short entrance once it loads (plain CSS: works everywhere and never blocks clicks;
   the browser's page-to-page View Transitions blocked input for the whole animation). The top bar and footer sit outside
   <main>, so they stay still. fill-mode backwards: nothing is left transformed afterwards. */
html[data-page] body > main, html[data-page="menu"] #menu { animation: zt-rise 520ms cubic-bezier(.2, .8, .2, 1) backwards; }
/* front page: settles in from a hair larger */
html[data-page="home"] body > main { animation-name: zt-settle; animation-duration: 640ms; }
@keyframes zt-settle { from { opacity: 0; transform: scale(1.03); } }
/* games: rises into place */
html[data-page="games"] body > main { animation-name: zt-rise; }
@keyframes zt-rise { from { opacity: 0; transform: translateY(18px); } }
/* product: comes into focus */
html[data-page="product"] body > main { animation-name: zt-focus; }
@keyframes zt-focus { from { opacity: 0; filter: blur(10px); } }
/* status: drops gently into place from above */
html[data-page="status"] body > main { animation-name: zt-drop; }
@keyframes zt-drop { from { opacity: 0; transform: translateY(-16px); } }
/* reviews: slides in from the right */
html[data-page="reviews"] body > main { animation-name: zt-from-right; }
@keyframes zt-from-right { from { opacity: 0; transform: translateX(30px); } }
/* cart: slides in from the left */
html[data-page="cart"] body > main { animation-name: zt-from-left; }
@keyframes zt-from-left { from { opacity: 0; transform: translateX(-30px); } }
/* account: grows in from slightly small */
html[data-page="account"] body > main { animation-name: zt-grow; }
@keyframes zt-grow { from { opacity: 0; transform: scale(.97); } }
/* free keys: lifts up out of a soft blur */
html[data-page="creators"] body > main { animation-name: zt-lift; }
@keyframes zt-lift { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
/* web radar: opens from the centre like a radar ping */
html[data-page="radar"] body > main { animation-name: zt-ping; animation-duration: 900ms; }
@keyframes zt-ping { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
/* menu: powers on out of the dark */
html[data-page="menu"] #menu { animation-name: zt-power; animation-duration: 600ms; }
@keyframes zt-power { from { opacity: 0; filter: brightness(.25); } }

/* ---------- plan picker rows (purchase dropdown on product pages, purchase page) ---------- */
.hx-plan { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 16px; border: 1px solid var(--window-edge); background: var(--button); cursor: pointer; transition: border-color var(--anim), background var(--anim); }
.hx-plan:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.hx-plan input { position: absolute; opacity: 0; pointer-events: none; }
.hx-plan .dot { width: 14px; height: 14px; box-sizing: border-box; border: 1px solid var(--button-edge); border-radius: 50%; transition: border-color var(--anim), box-shadow var(--anim); }
.hx-plan .len { display: flex; align-items: center; gap: 10px; min-width: 0; font: 700 14px var(--font-heading); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.hx-plan .len i { font: 9.5px var(--font-mono); font-style: normal; letter-spacing: 1.2px; padding: 3px 7px; background: var(--accent); color: var(--on-accent); white-space: nowrap; }
.hx-plan .pr { text-align: right; font: 700 18px / 1.1 var(--font-heading); letter-spacing: .04em; color: var(--text); }
.hx-plan .pr small { display: block; margin-top: 3px; font: 10.5px var(--font-mono); letter-spacing: 1px; color: var(--faint); }
.hx-plan:has(input:checked) { border-color: var(--accent); background: linear-gradient(90deg, var(--accent-back), transparent 85%), var(--button); }
.hx-plan:has(input:checked) .dot { border: 4px solid var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
.hx-plan:has(input:focus-visible) { outline: 1px solid var(--accent); outline-offset: 2px; }
.hx-qty { display: inline-flex; align-items: center; border: 1px solid var(--button-edge); background: var(--button); }
.hx-qty button { width: 34px; height: 34px; border: 0; background: none; color: var(--dim); cursor: pointer; font: 15px var(--font-mono); }
.hx-qty button:hover { color: var(--accent); }
.hx-qty b { min-width: 30px; text-align: center; font: 13px var(--font-mono); color: var(--text); }

/* ---------- legal links (hisixie.js adds them): bottom centre on desktop, a row at the end of the phone menu ---------- */
.hx-legal { position: fixed; left: 50%; bottom: 0; z-index: 5; height: var(--footer-h); display: flex; align-items: center; gap: 18px; transform: translateX(-50%); }
.hx-legal a, .hx-legal-menu a { color: var(--faint); }
.hx-legal a:hover, .hx-legal-menu a:hover { color: var(--accent); text-decoration: none; }
.hx-legal-menu { display: none; }
@media (max-width: 1180px) {
  .hx-legal { display: none; }
  .hx header .hx-navlinks .hx-legal-menu { display: flex; gap: 18px; padding: 16px 4px 4px; }
}

/* ---------- site footer (hisixie.js builds it at the end of scrolling pages) ---------- */
.hx-sitefoot { position: relative; z-index: 1; width: min(1160px, 100% - 48px); margin: 40px auto 0; padding: 34px 0 calc(var(--footer-h) + 30px); display: grid; gap: 18px; }
/* full-width separator above the footer: a hairline that fades out at both ends, with a soft lavender glow under its middle */
.hx-sitefoot::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent) 30%, color-mix(in srgb, var(--accent) 45%, transparent) 50%, color-mix(in srgb, var(--accent) 22%, transparent) 70%, transparent); }
.hx-sitefoot::after { content: ""; position: absolute; top: 0; left: 50%; width: min(900px, 80vw); height: 60px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); }
.sf-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 4px; }
.sf-top .hx-logo { color: var(--text); }
.sf-top .hx-logo:hover { color: var(--accent); text-decoration: none; }
.sf-tag { color: var(--faint); padding-left: 18px; border-left: 1px solid var(--window-edge); text-transform: none; letter-spacing: .5px; }
.sf-state { margin-left: auto; }
.sf-state a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--window-edge); color: var(--dim); text-transform: uppercase; }
.sf-state a:hover { text-decoration: none; border-color: var(--accent); }
.sf-state i { width: 6px; height: 6px; background: var(--faint); }
.sf-state.ok a { border-color: color-mix(in srgb, var(--live) 40%, transparent); color: var(--live); }
.sf-state.ok i { background: var(--live); box-shadow: 0 0 6px var(--live); }
.sf-state.warn a { border-color: #f2b33d80; color: #f2b33d; }
.sf-state.warn i { background: #f2b33d; }
.sf-social { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--window-edge); color: var(--dim); }
.sf-social:hover { color: var(--accent); border-color: var(--accent); }
.sf-social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.sf-cols { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 26px 28px; border: 1px solid var(--window-edge); background: rgba(10, 10, 10, 0.88); }
.sf-cols::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.sf-col { display: grid; gap: 9px; align-content: start; }
.sf-col > span { margin-bottom: 4px; color: var(--accent); }
.sf-col a, .sf-products #sfProducts a { color: var(--dim); font-size: 13px; }
.sf-col a:hover { color: var(--text); text-decoration: none; }
.sf-products #sfProducts { display: grid; gap: 9px; }
.sf-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--faint); text-transform: none; letter-spacing: .5px; }
@media (max-width: 860px) { .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-state { margin-left: 0; } }
@media (max-width: 620px) { .hx-sitefoot { width: calc(100% - 32px); } .sf-cols { padding: 20px 18px; } .sf-tag { border-left: 0; padding-left: 0; } }

/* password reveal: eye button inside the field (wired by hisixie.js) */
.hx-pw { position: relative; display: block; }
.hx-pw > input { width: 100%; padding-right: 44px; box-sizing: border-box; }
.hx-eye { position: absolute; top: 0; right: 0; bottom: 0; width: 42px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--dim); transition: color var(--anim, .15s); }
.hx-eye:hover, .hx-eye.on { color: var(--accent); }
.hx-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hx-eye .slash { opacity: 0; transition: opacity var(--anim, .15s); }
.hx-eye.on .slash { opacity: 1; }