/* Cursores v2 shell. Copyright (c) 2026 HorizonX.
   Built on the HorizonX /tools editor look: a #171717 page, #1c1c1c
   panels and white text at fixed alphas; the catalogue rail on the
   left (two card columns), the stage in the middle with its floating
   action bar, the settings panel on the right. Motion animates opacity
   and transform only. */

/* the UI face, a variable Latin subset of Inter (100 to 900) */
@font-face {
  font-family: "HX Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-latin.woff2?v=3100e775") format("woff2");
}
/* cursor demos ask for "Inter" by name; serve them the same file */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter"), url("fonts/Inter-latin.woff2?v=3100e775") format("woff2");
}
/* metric-matched local stand-in while the file loads, so swapping in the
   real face does not move the layout */
@font-face {
  font-family: "HX Inter Stand-in";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107%;
  ascent-override: 90.5%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

/* Reset, before the tokens. Every box sizes border-box; spacing is
   cleared only on the elements browsers give default margin or padding,
   including what cursor demos may place on the stage. */
:where(*, ::before, ::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, menu, dl, dd, figure,
  figcaption, blockquote, pre, hr, fieldset, legend, details, summary, table,
  caption, th, td, button, input, select, option, textarea, output, label) {
  margin: 0;
  padding: 0;
}

:root {
  --color-brand-navy: #171717;
  --color-brand-ink: #2a2a2a;

  --page: #171717;
  --panel: #1c1c1c;
  --stage: #171717;
  --stage-panel: #1c1c1c;
  --popover: #1b1b1b;

  --w-25: rgba(255, 255, 255, 0.25);
  --w-15: rgba(255, 255, 255, 0.15);
  --w-12: rgba(255, 255, 255, 0.12);
  --w-10: rgba(255, 255, 255, 0.10);
  --w-08: rgba(255, 255, 255, 0.08);
  --w-06: rgba(255, 255, 255, 0.06);
  --w-05: rgba(255, 255, 255, 0.05);
  --w-04: rgba(255, 255, 255, 0.04);
  --w-03: rgba(255, 255, 255, 0.03);

  --radius-panel: 1.25rem;
  --radius-card: 12px;
  --radius-chip: 100px;

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-enter: 520ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-enter: cubic-bezier(0.33, 1, 0.68, 1);
  --motion-distance-sm: 12px;

  --type-ui: "HX Inter", "HX Inter Stand-in", ui-sans-serif, "Segoe UI", Roboto, sans-serif;
  --type-code: ui-monospace, "Cascadia Mono", "SF Mono", "Roboto Mono", "DejaVu Sans Mono", monospace;

  --gutter: 14px;
  --rail-w: 340px;
  --insp-w: 300px;
}

html, body { height: 100%; }

body {
  background: var(--page);
  color: #fff;
  font-family: var(--type-ui);
  font-size: 14px;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

button, input { font: inherit; color: inherit; background: none; border: 0; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
::selection { background: #fff; color: var(--color-brand-navy); }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
[hidden] { display: none !important; }

/* ── shell ─────────────────────────────────────────────── */
.app {
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--insp-w);
  gap: var(--gutter);
  padding: var(--gutter);
}

.panel {
  min-height: 0;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--w-08);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.mbar { display: none; }

/* thin scrollbars, as .panel-scroll in the tool editor */
.panel-scroll { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.panel-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.panel-scroll::-webkit-scrollbar-track { background: transparent; }
.panel-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 999px; }
.panel-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.34); }

/* ── segmented control (OptionControl) ─────────────────── */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 4px; padding: 4px;
  border: 1px solid var(--w-06);
  background: var(--w-04);
  border-radius: 12px;
}
.seg button {
  min-height: 36px; padding: 8px 10px;
  border-radius: 9px; border: 1px solid transparent;
  font-size: 12px; font-weight: 500; line-height: 16px;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.seg button:hover { background: var(--w-06); color: #fff; }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: #fff; color: var(--color-brand-navy); border-color: var(--w-15); }
.seg--sm button { min-height: 30px; padding: 5px 12px; }

/* ── buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.btn--light { height: 34px; padding: 0 14px; font-size: 13px; background: #fff; color: var(--color-brand-navy); }
.btn--light:hover { background: rgba(255, 255, 255, 0.88); }
.btn--light svg { width: 14px; height: 14px; }

.iconbtn {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--w-10);
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.iconbtn:hover { color: #fff; background: var(--w-06); }
.iconbtn svg { width: 18px; height: 18px; }
/* the 32px square header button of the tool editor */
.iconbtn--sq { width: 32px; height: 32px; margin: -6px 0; border-radius: 8px; background: var(--w-05); }
.iconbtn--sq svg { width: 15px; height: 15px; }

/* ── catalogue rail ────────────────────────────────────── */
.rail__head { flex: none; padding: 20px; }
.back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255, 255, 255, 0.5);
  transition: color var(--duration-fast) var(--ease-out);
}
.back:hover { color: #fff; }
.back svg { width: 14px; height: 14px; }

.nav {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 24px;
  padding: 0 20px 20px;
}
.nav > * { flex: none; }

.nav__head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin-bottom: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.52);
  text-align: left;
  transition: color var(--duration-fast) var(--ease-out);
}
.nav__head:hover { color: rgba(255, 255, 255, 0.8); }
.nav__count { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.5); }
.nav__head svg { width: 12px; height: 12px; flex: none; transition: transform 300ms var(--ease-out); }
.nav__cat.is-folded .nav__head svg { transform: rotate(-90deg); }
.nav__cat.is-folded .nav__body { display: none; }
.nav__body { display: flex; flex-direction: column; gap: 16px; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.item {
  display: block; width: 100%; min-width: 0;
  overflow: hidden; text-align: left;
  border-radius: var(--radius-card); border: 1px solid var(--w-08);
  background: var(--w-03);
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
  opacity: 0;
  animation: enter var(--duration-enter) var(--ease-enter) forwards;
}
.item:hover { border-color: var(--w-15); background: var(--w-06); }
.item[aria-current="true"] { border-color: var(--w-25); background: var(--w-10); }
.item__thumb {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; width: 100%;
  overflow: hidden; background: var(--stage);
  color: #fff;
}
.item__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item__thumb > svg { width: 40px; height: 40px; }
.item__thumb[data-pixel="1"] svg { image-rendering: pixelated; }
.item__name {
  display: block; padding: 8px 10px;
  font-size: 12px; line-height: 1.25; color: rgba(255, 255, 255, 0.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 300ms var(--ease-out);
}
.item:hover .item__name { color: rgba(255, 255, 255, 0.85); }
.item[aria-current="true"] .item__name { color: #fff; }


@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── stage ─────────────────────────────────────────────── */
.center {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  border-radius: var(--radius-panel);
  border: 1px solid var(--w-08);
  background: var(--stage);
  isolation: isolate;
}
.dot-grid {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.075) 1px, transparent 1.2px);
  background-size: 18px 18px;
  background-position: center;
}

.stage {
  position: absolute; inset: 0;
  overflow: hidden; isolation: isolate;
  display: grid; place-items: center;
  color: #fff;
  touch-action: none;
}

/* "Hover to run": a quiet tag pinned to the top edge of the stage, clear of
   the action bar; it steps aside once the pointer is in */
.stage__hint {
  position: absolute; z-index: 8; top: 18px; left: 0; right: 0;
  width: fit-content; margin-inline: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 11px;
  border-radius: var(--radius-chip);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font: 500 12px/1.35 var(--type-ui); color: rgba(255, 255, 255, 0.7);
  white-space: nowrap; pointer-events: none; user-select: none;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.stage__hint::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.stage.is-live .stage__hint { opacity: 0; transform: translateY(-6px); }

/* demo content a cursor puts on the stage; plain chips get the ghost look.
   The layer covers the whole stage, so a demo laid out with position:absolute
   (a card at inset 7%, a full-bleed scene) is sized against the stage itself,
   while plain chips still sit centred in the middle. It stops above the
   floating action bar so the bar never covers a demo's text. */
.stage__demo {
  position: absolute; inset: 0 0 84px; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 12px;
  padding: 32px;
}
.stage__demo :is(button, a, [data-cursor-hot]):not([class]):not([style]) {
  padding: 11px 22px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.85);
  transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.stage__demo :is(button, a, [data-cursor-hot]):not([class]):not([style]):hover { border-color: rgba(255, 255, 255, 0.5); color: #fff; }


.ghost-chip {
  padding: 11px 22px;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.8);
  transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.ghost-chip:hover { border-color: rgba(255, 255, 255, 0.5); color: #fff; }

.demo-card {
  width: min(340px, 74vw); padding: 24px;
  border: 1px solid var(--w-08); border-radius: var(--radius-panel);
  display: flex; flex-direction: column; gap: 28px; text-align: left;
  background: var(--stage-panel);
}
.demo-card b { font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -0.02em; color: #fff; }
.demo-card i { font-style: normal; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.45); }
.demo-pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  background: #fff; color: var(--color-brand-navy);
  font-size: 13px; font-weight: 500;
}

/* design preview */
.dsp { display: grid; place-items: center; gap: 24px; }
.dsp__art { transition: transform var(--duration-fast) var(--ease-out); }
.dsp__art.is-press { transform: scale(0.94); }
/* pixel art presses down instead of shrinking: a 0.94 scale breaks the whole-pixel grid */
.dsp__art[data-pixel="1"].is-press { transform: translateY(2px); }
.dsp__art svg { width: 128px; height: 128px; }
.dsp__art[data-pixel="1"] svg { image-rendering: pixelated; }

/* ── floating action bar (ToolActionBar) ───────────────── */
.abar {
  position: absolute; left: 24px; bottom: 24px; z-index: 30;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.abar.is-hidden { opacity: 0; transform: translateY(8px); }
.abar.is-hidden .abar__pill { pointer-events: none; }
.abar__pill {
  pointer-events: auto;
  position: relative; isolation: isolate;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 4px;
  max-width: 100%;
  padding: 6px 6px 6px 8px;
  border: 1px solid var(--w-10); border-radius: 999px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
}
.abar__pill::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: rgba(28, 28, 28, 0.9);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 100px;
  font-size: 13px; font-weight: 500; line-height: 1.2;
  color: rgba(255, 255, 255, 0.72); white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.action:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.action svg { width: 14px; height: 14px; flex: none; }
.action .action__ico--sm { display: none; }
.abar__div { width: 1px; height: 20px; margin: 0 4px; background: var(--w-12); flex: none; }
/* white Export pill: format logo + "Export", then the dark format chip */
.xport {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 0; border-radius: 999px;
  background: #fff; color: var(--color-brand-navy);
  font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.xport__go {
  /* the whole left part of the pill is the button, not just its label */
  display: inline-flex; align-items: center; gap: 8px;
  align-self: stretch; margin-block: -8px; padding: 0 2px 0 12px;
  border-radius: 999px 8px 8px 999px;
}
.xport__ico { display: inline-flex; }
.xport__ico svg { width: 14px; height: 14px; flex: none; }
.xport__fmt { position: relative; display: flex; }
.xport__chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 10px; border-radius: 999px;
  background: var(--color-brand-navy); color: #fff;
  font-size: 12px; font-weight: 600; outline: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.xport__chip:hover { background: var(--color-brand-ink); }
.xport__chip:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-brand-navy); }
.xport__chip svg { width: 12px; height: 12px; }
.xport__chip[aria-expanded="true"] svg { transform: rotate(180deg); }
/* the shared light menu card (app.css .menu-card), opening upward from the chip */
.xport__menu {
  position: absolute; right: 0; bottom: calc(100% + 14px); z-index: 40;
  min-width: 168px; padding: 12px;
  border: 1px solid #e7e9ee; border-radius: 16px; background: #fff;
  box-shadow: 0 16px 48px rgba(23, 23, 23, 0.14);
  color: var(--color-brand-navy);
  animation: menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.xport__menu[hidden] { display: none; }
.xport__cap { margin: 0; padding: 0 8px 8px; font-size: 12px; font-weight: 500; color: rgba(23, 23, 23, 0.66); }
.xport__menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px;
  font-size: 13px; font-weight: 500; color: var(--color-brand-navy); outline: none;
  transition: background-color 0.15s ease;
}
.xport__menu button:hover, .xport__menu button:focus-visible, .xport__menu button[aria-checked="true"] { background: rgba(0, 0, 0, 0.05); }
.xport__menu button:focus-visible { box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.3); }
.xport__menu button svg { width: 16px; height: 16px; }
@keyframes menu-in { from { opacity: 0; transform: translateY(4px) scale(0.97); } }

.action.is-open { background: rgba(255, 255, 255, 0.09); color: #fff; }
.action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* MCP popover: the shared glass surface (Popover.svelte), placed by app.js above its button */
.mcp {
  position: fixed; z-index: 45; pointer-events: auto;
  width: min(21rem, calc(100vw - 2.5rem)); max-height: calc(100vh - 24px); overflow: auto;
  padding: 12px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  color: var(--color-brand-navy); text-align: left;
  animation: menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mcp[hidden] { display: none; }
.mcp p { margin: 0; }
.mcp__cap { padding: 0 4px; font-size: 12px; font-weight: 600; color: rgba(23, 23, 23, 0.66); }
.mcp__lead { margin-top: 8px !important; padding: 0 4px; font-size: 12px; line-height: 1.375; color: rgba(23, 23, 23, 0.7); }
.mcp__step { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 0 4px; }
.mcp__k { font-size: 12px; font-weight: 600; color: rgba(23, 23, 23, 0.66); }
.mcp__k--ask { margin-top: 12px !important; padding: 0 4px; }
.mcp__sel {
  flex: none; height: 28px; padding: 0 28px 0 12px; border-radius: 999px;
  border: 1px solid rgba(23, 23, 23, 0.14); background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23171717'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px;
  -webkit-appearance: none; appearance: none;
  font: 500 12px/1 var(--type-ui); color: var(--color-brand-navy); cursor: pointer;
}
.mcp__sel:hover { border-color: rgba(23, 23, 23, 0.28); }
.mcp__sel:focus-visible { outline: 2px solid rgba(23, 23, 23, 0.4); outline-offset: 2px; }
.mcp__one {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  padding: 4px 9px; border-radius: 100px; background: rgba(0, 0, 0, 0.05);
  font-size: 12px; font-weight: 600; color: var(--color-brand-navy); text-decoration: none;
  transition: background-color 0.18s;
}
.mcp__one[hidden] { display: none; }
.mcp__one:hover { background: rgba(0, 0, 0, 0.1); }
.mcp__one svg { width: 12px; height: 12px; }
.mcp__note { margin-top: 6px !important; padding: 0 4px; font-size: 12px; line-height: 1.4; color: rgba(23, 23, 23, 0.7); }
.mcp__foot {
  margin-top: 12px !important; padding: 10px 4px 0; border-top: 1px solid rgba(23, 23, 23, 0.08);
  font-size: 12px; line-height: 1.375; color: rgba(23, 23, 23, 0.72);
}
.mcp__foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mcp__foot a:hover { text-decoration: none; }

/* CodeBlock size sm (CodeBlock.svelte) */
.cblock {
  margin: 4px 0 0; overflow: hidden; border-radius: 12px;
  background: var(--color-brand-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.cblock__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 4px 4px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cblock__l { font: 500 12px/1.2 var(--type-code); color: rgba(255, 255, 255, 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cblock__copy {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 24px; padding: 0 10px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.08); color: #fff;
  font-size: 12px; font-weight: 600; transition: background-color 0.18s;
}
.cblock__copy:hover { background: rgba(255, 255, 255, 0.14); }
.cblock__copy:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.cblock__copy svg { width: 12px; height: 12px; }
.cblock__pre {
  margin: 0; max-height: 10rem; overflow: auto; padding: 10px 12px 12px;
  font: 12px/1.65 var(--type-code); color: rgba(255, 255, 255, 0.88);
  white-space: pre-wrap; word-break: break-word;
}

/* inline status, under the bar like the tool editor note */
.status {
  padding: 6px 12px; border-radius: 999px;
  background: rgba(28, 28, 28, 0.9); border: 1px solid var(--w-10);
  font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.8);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  white-space: nowrap; order: -1;
}
.status.on { opacity: 1; transform: none; }

/* ── settings panel ────────────────────────────────────── */
.insp__head {
  flex: none; padding: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.insp__title {
  min-width: 0; flex: 1;
  font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.insp__title.is-in { animation: enter var(--duration-enter) var(--ease-enter) both; }

.insp__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 20px 20px;
  display: flex; flex-direction: column; gap: 20px;
}
.insp__body > * { flex: none; }

.about { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.625; color: rgba(255, 255, 255, 0.55); }
.about__more summary {
  cursor: pointer; user-select: none;
  font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.55);
  transition: color var(--duration-fast) var(--ease-out);
}
.about__more summary:hover { color: rgba(255, 255, 255, 0.7); }
.about__more p { margin-top: 8px; color: rgba(255, 255, 255, 0.5); }
.about__more .about__note { color: rgba(255, 255, 255, 0.5); font-size: 12px; }

.controls { display: flex; flex-direction: column; gap: 20px; }
.controls > * { flex: none; }

/* parameter sections: heading 11px white/35, "More" disclosure per fold */
.grp { display: flex; flex-direction: column; gap: 20px; }
.grp__t {
  display: flex; align-items: center; gap: 6px;
  width: 100%; margin-bottom: -4px; text-align: left;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.52);
  transition: color var(--duration-fast) var(--ease-out);
}
.grp__t:hover { color: #fff; }
.grp__t svg { width: 11px; height: 11px; flex: none; transition: transform 200ms var(--ease-out); }
.grp.is-folded .grp__t svg { transform: rotate(-90deg); }
.grp__n { font-weight: 500; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }
.grp:not(.is-folded) .grp__n { display: none; }
.grp.is-folded .grp__b { display: none; }
.grp__b { display: flex; flex-direction: column; gap: 20px; }

.ctl { display: flex; flex-direction: column; gap: 8px; }
.ctl__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; font-size: 12px; }
.ctl__lbl { font-weight: 500; color: rgba(255, 255, 255, 0.58); }
.ctl__val {
  color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%;
}
.ctl__val em { font-style: normal; }
.ctl--empty { font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }

/* range: the tool editor .tool-range (3px track, 14px white thumb) */
.tool-range {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 20px; margin: -3px 0;
  background: transparent; cursor: pointer;
}
.tool-range::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: var(--w-15); }
.tool-range::-moz-range-track { height: 3px; border-radius: 999px; background: var(--w-15); }
.tool-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%;
  background: #fff; cursor: pointer;
}
.tool-range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
.tool-range:focus-visible { outline: none; }
.tool-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px #fff; }
.tool-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px #fff; }

/* select rows hold 3 to 5 options inside the 300px panel */
.ctl .seg button { padding: 8px 4px; }

/* Switch: one element, the knob is a radial gradient layer whose position and
   colour are registered custom properties, so they animate without a pseudo element. */
@property --knob-x { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --knob-fill { syntax: "<color>"; inherits: false; initial-value: #fff; }
@property --track-fill { syntax: "<color>"; inherits: false; initial-value: rgb(255 255 255 / 0.15); }
.sw {
  inline-size: 44px; block-size: 24px; flex: none; border-radius: 12px;
  --track-fill: var(--w-15);
  background:
    radial-gradient(circle 9px at calc(12px + var(--knob-x)) 50%, var(--knob-fill) calc(100% - 0.75px), #0000 100%),
    var(--track-fill);
  transition-property: --knob-x, --knob-fill, --track-fill;
  transition-duration: var(--duration-base);
  transition-timing-function: var(--ease-out);
}
.sw[aria-checked="true"] { --knob-x: 20px; --knob-fill: var(--color-brand-navy); --track-fill: #fff; }

/* colour: a square well that carries the native picker, its hex code beside it */
.tint { display: grid; row-gap: 10px; }
.tint__line { display: grid; grid-template-columns: 36px auto 1fr; align-items: center; column-gap: 10px; }
.tint__well {
  display: grid; inline-size: 36px; aspect-ratio: 1;
  background-color: var(--well, #000); border: 1px solid var(--w-10); border-radius: 6px;
  cursor: pointer; overflow: hidden;
}
.tint__well:has(:focus-visible) { outline: 2px solid #fff; outline-offset: 0; }
.tint__well > input { grid-area: 1 / 1; inline-size: 100%; block-size: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.tint__code { color: rgba(255, 255, 255, 0.55); font-size: 12px; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.chip {
  margin-left: auto; min-height: 30px; padding: 0 12px;
  border: 1px solid var(--w-10); border-radius: 999px; background: var(--w-04);
  font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.65);
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.chip:hover { color: #fff; background: var(--w-06); }
.chip[aria-pressed="true"] { background: #fff; color: var(--color-brand-navy); border-color: var(--w-15); }

/* text field: the tool editor input */
.field {
  width: 100%; padding: 8px 12px;
  border-radius: 8px; border: 1px solid var(--w-10); background: var(--w-05);
  font-size: 13px; color: #fff;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.field::placeholder { color: rgba(255, 255, 255, 0.25); }
.field:focus { outline: none; border-color: rgba(255, 255, 255, 0.3); }
.field:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ── source drawer (sits on the stage) ─────────────────── */
.drawer {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 40;
  height: min(60%, 460px);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--stage-panel);
  border: 1px solid var(--w-08);
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  transform: translateY(var(--motion-distance-sm));
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}
.drawer.open {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s;
}
/* code drawer header: file name on the left, then format tabs, copy, close */
.drawer__bar {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--w-08);
}
.drawer__file { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; }
.drawer__glyph { width: 16px; height: 16px; flex: none; color: rgba(255, 255, 255, 0.55); }
.drawer__name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 13px/1.3 var(--type-code); color: rgba(255, 255, 255, 0.9);
}
.drawer__tabs { flex: none; }
.drawer__copy svg { width: 14px; height: 14px; }
.drawer__x { margin: 0; }
.drawer__x svg { width: 14px; height: 14px; }
.drawer__body { overflow: auto; padding: 16px 18px 24px; }
.drawer__body pre {
  font-family: var(--type-code); font-size: 12px; line-height: 1.7;
  color: rgba(255, 255, 255, 0.62); tab-size: 2;
  white-space: pre-wrap; word-break: break-word;
}
.tok-key { color: #fff; }
.tok-str { color: rgba(255, 255, 255, 0.82); }
.tok-com { color: rgba(255, 255, 255, 0.5); }
.tok-fn  { color: rgba(255, 255, 255, 0.9); }
.tok-num { color: #fff; }

.scrim { display: none; }

/* ── responsive ────────────────────────────────────────── */
@media (max-width: 1279px) {
  :root { --rail-w: 300px; --insp-w: 288px; }
}

/* below lg the editor goes full-bleed, as the tool editor on a phone */
@media (max-width: 1023px) {
  :root { --gutter: 0px; }
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 44%);
    padding: 0; gap: 0;
  }
  .mbar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; background: var(--page);
    border-bottom: 1px solid var(--w-08);
  }
  .mbar__t { flex: 1; min-width: 0; text-align: center; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .center { border-radius: 0; border: 0; }
  .insp { border-radius: 0; border: 0; border-top: 1px solid var(--w-08); }
  .insp__head { padding: 14px 16px 10px; }
  .insp__body { padding: 0 16px calc(16px + env(safe-area-inset-bottom)); gap: 16px; }
  .about { display: none; }

  .abar { left: 12px; right: 12px; bottom: 12px; }
  .stage__demo { bottom: 72px; }

  .rail {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    width: min(340px, 90vw);
    border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-slow);
  }
  body.nav-open .rail {
    transform: none; visibility: visible;
    transition: transform var(--duration-slow) var(--ease-out), visibility 0s;
  }
  .rail__head { padding: 16px; }
  .nav { padding: 0 16px 16px; }
  .scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-out);
  }
  body.nav-open .scrim { opacity: 1; pointer-events: auto; }
  .drawer { left: 8px; right: 8px; bottom: 8px; height: calc(100% - 16px); }
  .drawer__bar { flex-wrap: wrap; padding: 8px 8px 8px 14px; gap: 8px; }
  .drawer__file { flex-basis: calc(100% - 48px); }
  .drawer__x { order: 1; }
  .drawer__tabs { order: 2; }
  .drawer__copy { order: 3; margin-left: auto; }
  .status--inline { order: 4; }
}

@media (max-width: 1023px) and (min-width: 700px) {
  .app { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto minmax(0, 1fr); }
  .mbar { grid-column: 1 / -1; }
  .insp { border-top: 0; border-left: 1px solid var(--w-08); }
  .about { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .item { opacity: 1; transform: none; }
}

/* drawer copy feedback sits inline in its header */
.status--inline { order: 0; padding: 0; background: none; border: 0; transform: none; }

/* below 640px the actions drop to their icons, like ToolActionBar (sm:inline) */
@media (max-width: 639px) {
  .action .action__t { display: none; }
  .action .action__ico--sm { display: block; }
}

/* ── additions for the v2 page logic ───────────────────── */
/* thumbnails fade in once loaded; a missing file leaves a neutral tile */
.item__thumb img { opacity: 0; transition: opacity var(--duration-base) var(--ease-out); }
.item__thumb img.is-ok { opacity: 1; }
/* the moving preview sits over the still and fades in once it plays */
.item__thumb video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--duration-base) var(--ease-out);
  pointer-events: none;
}
.item__thumb video.is-on { opacity: 1; }
.item__thumb--empty { background: var(--w-04); }
.item__thumb--empty > svg { width: 32px; height: 32px; }
.item__ph {
  padding: 0 10px; text-align: center;
  font-size: 12px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.5);
}

.ctl__top--row { min-height: 24px; }
.ctl__top--row .ctl__lbl { cursor: pointer; }
.tint__more { display: grid; row-gap: 14px; }
.tint__more[hidden] { display: none !important; }

/* dropdown for selects with more than three options */
.dd {
  width: 100%; height: 36px; padding: 0 34px 0 12px;
  border-radius: 8px; border: 1px solid var(--w-10);
  background-color: var(--w-05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5l3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
  -webkit-appearance: none; appearance: none;
  font: 500 13px/1 var(--type-ui); color: #fff; cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.dd:hover { border-color: var(--w-25); }
.dd:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.dd option { background: var(--popover); color: #fff; }

.xport__mi { display: inline-flex; color: rgba(23, 23, 23, 0.7); }
.xport__go:focus-visible { outline: 2px solid var(--color-brand-navy); outline-offset: -4px; }
.seg button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.drawer__body:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: -2px; }

/* phones: 16px inputs so iOS does not zoom, 44px targets for the bar */
@media (max-width: 1023px) {
  .field, .dd { font-size: 16px; }
  .abar .action, .xport__chip { min-height: 44px; }
  .abar .action { min-width: 44px; justify-content: center; padding-inline: 13px; }
  .abar__pill { padding: 4px 4px 4px 6px; }
  .xport { padding: 3px 3px 3px 0; }
  .xport__go { margin-block: -3px; }
  .iconbtn { width: 44px; height: 44px; }
  .iconbtn--sq { width: 44px; height: 44px; margin: -8px 0; }
}

/* ── touch screens ─────────────────────────────────────── */
/* The stage runs on touch (drag a finger), but the exported cursors only start
   with a mouse or trackpad (hxMountCursor asks for pointer: fine). Touch
   screens get touch copy and a notice; mouse users keep the hover copy. */
.on-touch { display: none; }
.touch-note {
  display: none; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--w-10); background: var(--w-04);
  font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.72);
}
.touch-note strong { display: block; font-weight: 600; color: #fff; }
.touch-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: rgba(255, 255, 255, 0.72); }
@media (hover: none), (pointer: coarse) {
  .on-fine { display: none; }
  .on-touch { display: inline; }
  .touch-note { display: flex; }
  /* a demo's "Hover me" label means nothing without hover; the stage hint
     ("Touch and drag to run") stays. !important beats the demo's inline style. */
  .stage__demo [data-hover-only] { display: none !important; }
}

/* settings picked up from this browser (app/store.js), with Start over / Undo */
.restore {
  display: grid; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--w-10); background: var(--w-04);
  font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.72);
}
.restore__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.restore__acts .chip { margin-left: 0; }
/* the same fact for everyone, where the code is copied */
.drawer__note {
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--w-08);
  font: 12px/1.55 var(--type-ui); color: rgba(255, 255, 255, 0.62);
}

/* the code drawer stops above the action bar, so Reset all and Export stay
   reachable while it is open (main.js measures --abar-clear) */
.drawer {
  bottom: calc(var(--abar-clear, 0px) + 10px);
  max-height: calc(100% - var(--abar-clear, 0px) - 20px);
}

/* the catalogue sheet's close button; the rail is a sheet below 1024px only */
.rail__x { display: none; }

@media (max-width: 1023px) {
  .drawer { bottom: calc(var(--abar-clear, 0px) + 8px); height: calc(100% - var(--abar-clear, 0px) - 16px); max-height: none; }
  /* the phone bar holds the one "Show the code" button */
  #openCode2 { display: none; }
  .rail__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 16px; }
  .rail__x { display: grid; }
  .back { min-height: 44px; }
}

/* 44 px touch targets for every control (WCAG 2.5.5), on any touch screen and
   on the narrow layouts. Sliders and switches grow their hit area, not their look. */
@media (max-width: 1023px), (pointer: coarse) {
  .tool-range { height: 44px; margin: -15px 0; }
  .sw { position: relative; }
  .sw::before { content: ""; position: absolute; inset: -10px 0; }
  .seg button, .seg--sm button { min-height: 44px; }
  .chip, .btn--light, .field, .dd, .mcp__sel { min-height: 44px; }
  .tint__line { grid-template-columns: 44px auto 1fr; }
  /* the picker input fills the well, so the line is drawn inside the box
     (not as a border) and the input itself is 44x44, not 42x42 */
  .tint__well { inline-size: 44px; border: 0; box-shadow: inset 0 0 0 1px var(--w-10); }
  .grp__t, .nav__head, .about__more summary { min-height: 44px; }
  .about__more summary { display: flex; align-items: center; }
  .cblock__copy, .xport__menu button { min-height: 44px; }
  .iconbtn, .iconbtn--sq { width: 44px; height: 44px; }
  .iconbtn--sq { margin: -8px 0; }
}

/* ── export gate (app/gate.js) ─────────────────────────────
   The membership wall and its notices, drawn like the /tools editor's
   ToolPaywallModal: a #1b1b1b card over a 70% black scrim, decorative
   bars (never real code) behind a "Members only" badge, a white pill CTA. */
.gate {
  position: fixed; inset: 0; z-index: 100; display: grid; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px; background: rgba(0, 0, 0, 0.7); cursor: auto;
}
.gate__box {
  position: relative; margin: auto; width: 100%; max-width: 440px; overflow: hidden;
  border-radius: 16px; background: #1b1b1b; color: #fff; text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.gate__box:focus { outline: none; }
.gate__head { position: relative; height: 150px; overflow: hidden; border-bottom: 1px solid var(--w-08); background: #141414; }
.gate__bars { display: flex; flex-direction: column; gap: 8px; padding: 20px; filter: blur(3px); }
.gate__bar { height: 8px; border-radius: 999px; background: var(--w-10); }
.gate__veil {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, #1b1b1b, rgba(27, 27, 27, 0.7), transparent);
}
.gate__badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: var(--w-08); color: rgba(255, 255, 255, 0.6); font-size: 11px; font-weight: 600;
}
.gate__badge svg { width: 12px; height: 12px; }
.gate__main { display: flex; flex-direction: column; align-items: center; padding: 24px; }
.gate__t { margin-bottom: 8px; font-size: 19px; font-weight: 600; }
.gate__p { margin-bottom: 24px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); }
.gate__cta, .gate__ghost {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
  padding: 12px 24px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.gate__cta { border: 0; background: #fff; color: #171717; }
.gate__cta:hover { opacity: 0.9; }
.gate__ghost { margin-top: 12px; border: 1px solid var(--w-15); background: transparent; color: #fff; }
.gate__ghost:hover { background: var(--w-06); }
.gate__note { margin-top: 16px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.gate__free { width: 100%; }
.gate__login { margin-top: 8px; }
.gate__a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border-radius: 999px;
  color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.gate__browse { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-decoration: none; }
.gate__browse:hover { color: rgba(255, 255, 255, 0.7); }
.gate__x {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, 0.6); cursor: pointer;
}
.gate__x:hover { background: var(--w-08); color: #fff; }
.gate__x svg { width: 16px; height: 16px; }
.gate a:focus-visible, .gate button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gate__box--notice .gate__p { margin-bottom: 20px; }
@media (prefers-reduced-motion: reduce) { .gate__cta, .gate__ghost { transition: none; } }