/* ═══════════════════════════════════════════════════════════════════════
   LiGMA — the landing page.

   Two looks, folded into one:

   · THE PAGE is geometric, after farm.js: one ground, hairline rules that
     run the full width of the viewport, hatched rails either side of the
     content, square buttons, and no radius anywhere. It has a light and a
     dark theme, and every colour on it is the ground or the figure at some
     strength — `--bg`, `--fg`.
   · THE OVERLAY is LiGMA's own, after Figma, and does NOT follow the theme:
     white outlines with a dark companion ring, corner handles, an identity
     tag above the element and a size label beneath it, ink plates with
     white type, round pins and bubbles. The overlay is not the page, and
     the radii are how you can tell.

   Hover an obvious component and it is peeked. Arm the picker and it is
   selected. Click and it carries a thread. That is the product, demonstrated
   on its own front door.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  --bg: #000;
  --bg-rgb: 0, 0, 0;
  --fg: #fff;
  --fg-rgb: 255, 255, 255;
  --mark-page: url('assets/pick-mark-light.png');
  --field: #b497cf;
  --paper: #f6f5f1;

  /* the drop in the mark, read off the PNG: the one hue the page owns */
  --accent: #f26f39;
  --accent-rgb: 242, 111, 57;
  --accent-text: #f26f39;
  --accent-ink: #0e0e11;
  --accent-soft: rgba(242, 111, 57, 0.12);

  --line: rgba(var(--fg-rgb), 0.12);
  --line-2: rgba(var(--fg-rgb), 0.16);
  --rule: rgba(var(--fg-rgb), 0.09);
  --dim: rgba(var(--fg-rgb), 0.52);
  --mute: rgba(var(--fg-rgb), 0.34);
  --faint: rgba(var(--fg-rgb), 0.22);
  --soft: rgba(var(--fg-rgb), 0.045);
  --softer: rgba(var(--fg-rgb), 0.035);

  /* the overlay's own: constant across themes */
  --ink: #0e0e11;
  --ink-2: #17171b;
  --ink-3: #212127;
  --ov-text: #f4f4f7;
  --ov-dim: #9a9aa4;
  --ov-line: rgba(255, 255, 255, 0.09);
  --ov-line-2: rgba(255, 255, 255, 0.16);
  --halo: rgba(6, 6, 9, 0.55);
  --warm: #ff7a6b;

  --sans: 'Geist', ui-sans-serif, -apple-system, 'Inter', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bw: 17rem;
  --grain-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.5'/></svg>");
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #fff;
  --bg-rgb: 255, 255, 255;
  --fg: #0e0e11;
  --fg-rgb: 14, 14, 17;
  --mark-page: url('assets/pick-mark.png');
  --field: #6a4a8a;
  /* the same orange as a fill; a deeper one wherever it has to be read */
  --accent-text: #c9471a;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #fff;
    --bg-rgb: 255, 255, 255;
    --fg: #0e0e11;
    --fg-rgb: 14, 14, 17;
    --mark-page: url('assets/pick-mark.png');
    --field: #6a4a8a;
    --accent-text: #c9471a;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--bg);
  scroll-behavior: smooth;
}
body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: var(--fg);
  color: var(--bg);
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
code,
kbd,
pre {
  font-family: var(--mono);
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
svg {
  display: block;
}
input[type='range'] {
  accent-color: var(--accent);
}

/* ── the indexed label ─────────────────────────────────────────────────── */
.lab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.lab .ix {
  color: var(--accent-text);
}
.lab .sl {
  color: rgba(var(--fg-rgb), 0.18);
}

/* ── the page frame ─────────────────────────────────────────────────────── */
.ann {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 20px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
  font: 10px/1 var(--mono);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.ann .d {
  color: var(--dim);
}
.ann .s {
  color: rgba(var(--fg-rgb), 0.24);
}
.ann .b {
  color: var(--accent-text);
}
@media (max-width: 639px) {
  .ann .hide-s {
    display: none;
  }
}
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
}
.rail {
  display: none;
  min-width: 0;
  border-inline: 1px solid var(--line);
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 6px,
    rgba(var(--fg-rgb), 0.07) 6px,
    rgba(var(--fg-rgb), 0.07) 7px
  );
  background-attachment: fixed;
}
.content {
  min-width: 0;
  border-inline: 1px solid var(--line);
}
@media (min-width: 768px) {
  .page {
    grid-template-columns: 40px minmax(0, 1240px) 40px;
  }
  .rail {
    display: block;
  }
  .content {
    border-inline: 0;
  }
}
.rule,
.rule-top {
  position: relative;
}
.rule::after,
.rule-top::before {
  content: '';
  position: absolute;
  right: calc(50% - 50vw);
  left: calc(50% - 50vw);
  z-index: 20;
  height: 1px;
  background: var(--rule);
  pointer-events: none;
}
.rule::after {
  bottom: -1px;
}
.rule-top::before {
  top: -1px;
}

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(var(--bg-rgb), 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.hdr-row {
  display: flex;
  align-items: stretch;
  height: 44px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1rem;
  font: 500 12px/1 var(--mono);
  color: var(--fg);
}
@media (min-width: 640px) {
  .brand {
    padding: 0 1.75rem;
  }
}
.mark {
  display: block;
  width: 18px;
  height: 18px;
  background: var(--mark-page) center / contain no-repeat;
}
.brand .b2 {
  color: var(--dim);
  font-size: 10px;
  text-transform: uppercase;
}
.nav {
  display: none;
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--line);
}
.nav a {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  padding: 0 1.1rem;
  border-right: 1px solid var(--line);
  color: rgba(var(--fg-rgb), 0.48);
  transition:
    background-color 150ms,
    color 150ms;
}
.nav a .lab {
  color: inherit;
}
.nav a:hover {
  background: var(--softer);
  color: var(--fg);
}
.hdr-end {
  display: none;
  margin-left: auto;
}
.hdr-end .sq {
  display: grid;
  place-items: center;
  width: 44px;
  border-left: 1px solid var(--line);
  color: var(--dim);
  transition:
    background-color 150ms,
    color 150ms;
}
.hdr-end .sq:hover {
  background: var(--softer);
  color: var(--fg);
}
.hdr-end .sq svg {
  width: 16px;
  height: 16px;
}
.hdr-end .cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1.25rem;
  border-left: 1px solid var(--line);
  background: var(--accent);
  color: var(--accent-ink);
  font: 500 10px/1 var(--mono);
  text-transform: uppercase;
  transition: opacity 150ms;
}
.hdr-end .cta:hover {
  opacity: 0.88;
}
@media (min-width: 1024px) {
  .nav,
  .hdr-end {
    display: flex;
  }
}
.theme .i-sun,
.theme .i-moon {
  display: none;
}
:root[data-theme='light'] .theme .i-moon,
:root:not([data-theme='light']) .theme .i-sun {
  display: block;
}
.menu {
  position: relative;
  margin-left: auto;
  border-left: 1px solid var(--line);
}
.menu summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  list-style: none;
  cursor: pointer;
  color: var(--fg);
}
.menu summary::-webkit-details-marker {
  display: none;
}
.menu summary svg {
  width: 16px;
  height: 16px;
}
.menu[open] .i-open,
.menu:not([open]) .i-close {
  display: none;
}
.menu nav {
  position: absolute;
  top: 44px;
  right: -1px;
  width: 100vw;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  background: var(--bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.menu nav a,
.menu nav button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.1);
  color: rgba(var(--fg-rgb), 0.58);
  text-align: left;
}
.menu nav a .lab,
.menu nav button .lab {
  color: inherit;
}
.menu nav > :last-child {
  border-bottom: 0;
}
.menu nav a:hover,
.menu nav button:hover {
  background: rgba(var(--fg-rgb), 0.04);
  color: var(--fg);
}
.menu nav button svg {
  width: 14px;
  height: 14px;
}
@media (min-width: 1024px) {
  .menu {
    display: none;
  }
}

/* ── buttons: square, mono, uppercase ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1.25rem;
  border: 1px solid;
  font: 400 11px/1 var(--mono);
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color 150ms,
    border-color 150ms,
    color 150ms,
    transform 150ms,
    opacity 150ms;
}
.btn:active {
  transform: translateY(1px);
}
.btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}
.btn-primary:hover {
  opacity: 0.88;
}
.btn-ghost:hover {
  border-color: var(--accent) !important;
}
.btn-ghost {
  background: var(--bg);
  border-color: rgba(var(--fg-rgb), 0.18);
  color: var(--fg);
}
.btn-ghost:hover {
  border-color: rgba(var(--fg-rgb), 0.42);
  background: rgba(var(--fg-rgb), 0.06);
}
.btn-sm {
  height: 36px;
  padding: 0 1rem;
  font-size: 10px;
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
}
.hero.rule::after {
  bottom: 0;
  background: rgba(var(--accent-rgb), 0.55);
}
.corner {
  position: absolute;
  z-index: 30;
  width: 9px;
  height: 9px;
  border: 0 solid var(--accent);
  pointer-events: none;
}
.corner.tl {
  top: -1px;
  left: -1px;
  border-top-width: 1px;
  border-left-width: 1px;
}
.corner.br {
  right: -1px;
  bottom: -1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}
/* the column takes no pointer of its own, so the art under it can be
   reached between the things on it */
.hero-in {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 58rem;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 4.5rem;
  text-align: center;
  pointer-events: none;
}
.hero-in > * {
  pointer-events: auto;
}
@media (min-width: 640px) {
  .hero-in {
    padding: 3rem 2.5rem 5.5rem;
  }
}
.frame {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.75rem;
  padding: 1rem 1.25rem;
}
.frame-b {
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 100%;
  left: 0;
  border: 1px dashed rgba(var(--accent-rgb), 0.6);
  opacity: 0;
  transform: translate3d(10px, 10px, 0);
  pointer-events: none;
  will-change: inset, opacity, transform;
}
.frame.is-vis .frame-b {
  animation: frame-cycle 7.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.frame-c {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--accent);
  background: var(--bg);
}
.frame-c.tl {
  top: -5px;
  left: -5px;
}
.frame-c.tr {
  top: -5px;
  right: -5px;
}
.frame-c.bl {
  bottom: -5px;
  left: -5px;
}
.frame-c.br {
  right: -5px;
  bottom: -5px;
}
.frame h1 {
  position: relative;
  z-index: 1;
  font: 500 clamp(1.625rem, 5.4vw, 3.25rem) / 1.02 var(--sans);
  letter-spacing: -0.015em;
  color: var(--fg);
}
.frame h1 span {
  display: block;
}
@keyframes frame-cycle {
  0%,
  100% {
    top: 0;
    right: 100%;
    bottom: 100%;
    left: 0;
    opacity: 0;
    transform: translate3d(10px, 10px, 0);
  }
  3% {
    opacity: 1;
  }
  18%,
  34% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  46%,
  50% {
    top: 100%;
    right: 0;
    bottom: 0;
    left: 100%;
    opacity: 0;
    transform: translate3d(-10px, -10px, 0);
  }
  53% {
    opacity: 1;
  }
  68%,
  84% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  96% {
    top: 0;
    right: 100%;
    bottom: 100%;
    left: 0;
    opacity: 0;
    transform: translate3d(10px, 10px, 0);
  }
}
.hero-p {
  max-width: 38rem;
  margin-top: 1.25rem;
  color: rgba(var(--fg-rgb), 0.56);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: balance;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.cmd {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  max-width: 34rem;
  height: 44px;
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  background: var(--bg);
  text-align: left;
}
.cmd .ps {
  display: grid;
  place-items: center;
  height: 100%;
  border-right: 1px solid var(--line);
  color: var(--faint);
  font: 11px var(--mono);
}
.cmd code {
  padding: 0 0.9rem;
  overflow: hidden;
  color: rgba(var(--fg-rgb), 0.86);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmd .copy {
  height: 100%;
  padding: 0 0.9rem;
  border-left: 1px solid var(--line);
  color: var(--dim);
  font: 10px var(--mono);
  text-transform: uppercase;
  transition:
    background-color 150ms,
    color 150ms;
}
.cmd .copy:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.hint {
  margin-top: 1.25rem;
  padding: 0.3rem 0.7rem;
  background: var(--bg);
  color: var(--mute);
  font: 10px/1.8 var(--mono);
  text-transform: uppercase;
  text-wrap: balance;
}
.hint kbd {
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--line);
  color: var(--dim);
}

/* ── the hero's art: a component like any other, with five treatments ─── */
.art {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 20rem;
  -webkit-mask-image: radial-gradient(
    ellipse 220% 78% at 50% -20%,
    transparent 55%,
    rgba(0, 0, 0, 0.04) 62%,
    rgba(0, 0, 0, 0.16) 70%,
    rgba(0, 0, 0, 0.42) 80%,
    rgba(0, 0, 0, 0.76) 90%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse 220% 78% at 50% -20%,
    transparent 55%,
    rgba(0, 0, 0, 0.04) 62%,
    rgba(0, 0, 0, 0.16) 70%,
    rgba(0, 0, 0, 0.42) 80%,
    rgba(0, 0, 0, 0.76) 90%,
    #000 100%
  );
}
@media (min-width: 640px) {
  .art {
    height: 24rem;
  }
}
.art canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.art[data-v='a'] canvas {
  image-rendering: pixelated;
}
.art[data-v='b'] canvas,
.art[data-v='c'] canvas,
.art[data-v='d'] canvas,
.art[data-v='e'] canvas {
  display: none;
}
.art[data-v='b'] {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 7px,
    rgba(var(--fg-rgb), 0.22) 7px,
    rgba(var(--fg-rgb), 0.22) 8px
  );
}
.art[data-v='c'] {
  background-image:
    linear-gradient(rgba(var(--fg-rgb), 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--fg-rgb), 0.16) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center bottom;
}
.art[data-v='d'] {
  background-image: repeating-radial-gradient(
    circle at 50% 110%,
    transparent 0,
    transparent 22px,
    rgba(var(--fg-rgb), 0.2) 22px,
    rgba(var(--fg-rgb), 0.2) 23px
  );
}
.art[data-v='e'] {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(var(--fg-rgb), 0.18) 3px,
    rgba(var(--fg-rgb), 0.18) 4px
  );
}

/* ── the strip: six parts ───────────────────────────────────────────────── */
.strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: 64px;
}
.strip-r {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.strip-r::-webkit-scrollbar {
  display: none;
}
.tile {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  width: 13.5rem;
  padding: 0 1rem;
  border-right: 1px solid var(--line);
  color: rgba(var(--fg-rgb), 0.48);
  font: 10px/1.35 var(--mono);
  text-transform: uppercase;
  transition:
    background-color 150ms,
    color 150ms;
}
.tile:nth-child(even) {
  background: var(--soft);
}
.tile:hover {
  background: var(--accent-soft);
  color: rgba(var(--fg-rgb), 0.82);
}
.tile b {
  color: var(--fg);
  font-weight: 500;
  text-transform: none;
}

/* ── a section ──────────────────────────────────────────────────────────── */
.side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.side-r {
  min-width: 0;
  padding: 2.5rem 1.5rem;
}
@media (min-width: 640px) {
  .side-r {
    padding: 3rem 2.5rem;
  }
}
@media (min-width: 1024px) {
  .side-r {
    padding: 3rem;
  }
}
.side h2,
.cta h2 {
  max-width: 34rem;
  font: 500 clamp(1.625rem, 3vw, 2.25rem) / 1.08 var(--sans);
  letter-spacing: -0.015em;
  color: var(--fg);
  text-wrap: balance;
}
.lede {
  max-width: 36rem;
  margin-top: 1.25rem;
  color: rgba(var(--fg-rgb), 0.48);
  font-size: 15px;
  line-height: 1.7;
}
.lede code,
.cell p code,
.key span code,
.hero-p code {
  color: rgba(var(--fg-rgb), 0.8);
  font-size: 0.92em;
}

/* ── the problem ────────────────────────────────────────────────────────── */
.notes {
  margin-top: 2rem;
  border: 1px solid var(--line);
}
.note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
.note:last-child {
  border-bottom: 0;
}
@media (min-width: 640px) {
  .note {
    grid-template-columns: 8.5rem minmax(0, 1fr);
  }
}
.note-k {
  padding: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--mute);
  font: 10px/1.5 var(--mono);
  text-transform: uppercase;
}
@media (min-width: 640px) {
  .note-k {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
}
.note-v {
  padding: 1rem;
  overflow-x: auto;
  color: rgba(var(--fg-rgb), 0.78);
  font: 12px/1.65 var(--mono);
  white-space: pre;
}
.note-v em {
  color: var(--accent-text);
  font-style: normal;
}
.note-v i {
  color: var(--mute);
  font-style: normal;
}
.note-v b {
  color: var(--fg);
  font-weight: 500;
}

/* ── feature cells ──────────────────────────────────────────────────────── */
.grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 480px;
  border-top: 1px solid var(--line);
}
.cell:first-child {
  border-top: 0;
}
@media (min-width: 1024px) {
  .grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cell:nth-child(2) {
    border-top: 0;
  }
  .cell:nth-child(even) {
    border-left: 1px solid var(--line);
  }
}
.cell-t {
  padding: 1.5rem;
}
.cell h3 {
  max-width: 31rem;
  margin-top: 0;
  font: 500 1.35rem/1.2 var(--sans);
  letter-spacing: -0.01em;
  color: rgba(var(--fg-rgb), 0.92);
  text-wrap: balance;
}
.cell p {
  max-width: 31rem;
  margin-top: 0.75rem;
  color: rgba(var(--fg-rgb), 0.48);
  font-size: 15px;
  line-height: 1.7;
}
.cell p .try {
  color: var(--accent-text);
}
@media (min-width: 640px) {
  .cell-t {
    padding: 2.5rem;
  }
  .cell h3 {
    font-size: 1.5rem;
  }
}
.vis {
  position: relative;
  height: 230px;
  margin: 0 1.5rem 1.5rem;
  border: 1px solid var(--line);
  background-color: var(--bg);
  background-image: linear-gradient(180deg, rgba(var(--fg-rgb), 0.025), transparent 36%);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(var(--fg-rgb), 0.025);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 640px) {
  .vis {
    height: 250px;
    margin: 0 2.5rem 2.5rem;
  }
}
.vis-spot::before {
  content: '';
  position: absolute;
  inset: 2% -5% 54% 0;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--fg-rgb), 0.16) 0%,
    rgba(var(--fg-rgb), 0.06) 36%,
    rgba(var(--fg-rgb), 0.02) 62%,
    transparent 86%
  );
  filter: blur(34px);
  opacity: 0.7;
  pointer-events: none;
}
.vis > * {
  position: relative;
  z-index: 1;
}

/* ── the mocks ──────────────────────────────────────────────────────────── */
.mock-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
}
.mbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 1rem;
  border: 1px solid rgba(var(--fg-rgb), 0.18);
  color: rgba(var(--fg-rgb), 0.7);
  font: 11px var(--mono);
  text-transform: uppercase;
  white-space: nowrap;
}
.mbtn.fill {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

/* ═══ the overlay's parts, drawn still inside mocks and live on the page ═══ */
.idc,
.sel {
  border: 1.5px solid #fff;
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 1px var(--halo),
    inset 0 0 0 1px var(--halo);
  pointer-events: none;
}
.idc {
  position: absolute;
  inset: -5px;
}
.idc i,
.sel i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--halo);
}
.idc i.tl,
.sel i.tl {
  top: -4px;
  left: -4px;
}
.idc i.tr,
.sel i.tr {
  top: -4px;
  right: -4px;
}
.idc i.bl,
.sel i.bl {
  bottom: -4px;
  left: -4px;
}
.idc i.br,
.sel i.br {
  right: -4px;
  bottom: -4px;
}
.tag,
.sel-tag {
  position: absolute;
  top: -1.6rem;
  left: -1.5px;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  max-width: 24rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px 6px 0 0;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--ov-line-2);
  color: var(--ov-text);
  font: 10.5px/1.4 var(--mono);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tag em,
.sel-tag em {
  color: var(--warm);
  font-style: normal;
}
.tag b,
.sel-tag b {
  overflow: hidden;
  color: var(--ov-text);
  font-weight: 400;
  opacity: 0.85;
  text-overflow: ellipsis;
}
.dim,
.sel-dim {
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  padding: 0.14rem 0.4rem;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--halo);
  color: #000;
  font: 500 9.5px/1.3 var(--mono);
  white-space: nowrap;
  translate: -50% 0;
}
.pin {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px 999px 999px 3px;
  background: #fff;
  box-shadow:
    0 0 0 2px var(--halo),
    0 4px 14px rgba(0, 0, 0, 0.45);
  color: var(--ink);
  font: 700 10.5px/1 var(--mono);
  transition: scale 120ms var(--ease);
}
.pin:hover {
  scale: 1.1;
}
.pin.is-done {
  background: var(--ink);
  color: #fff;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.55),
    0 0 0 2.5px var(--halo),
    0 4px 14px rgba(0, 0, 0, 0.45);
}
.bubble {
  width: var(--bw);
  max-width: 100%;
  padding: 0.65rem 0.7rem 0.7rem;
  border-radius: 14px;
  background: var(--ink);
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.8),
    0 0 0 1px var(--ov-line-2);
  color: var(--ov-text);
  font: 12px/1.45 var(--sans);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}
.bubble-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ov-line);
  color: var(--ov-dim);
  font: 10.5px/1.4 var(--mono);
}
.bubble-top code {
  color: #fff;
}
.bubble-top em {
  color: var(--warm);
  font-style: normal;
}
.bubble-top b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bubble-top .tb {
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  color: var(--ov-dim);
  font: 12px/1 var(--sans);
}
.bubble-top .tb:hover {
  background: var(--ink-3);
  color: #fff;
}
.bubble-top .tb.x.is-armed {
  width: auto;
  padding: 0 0.45rem;
  background: var(--warm);
  color: var(--ink);
  font: 600 10px/1 var(--sans);
}
.msgs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.msgs:empty {
  display: none;
}
.msgs .you {
  align-self: flex-end;
  max-width: 88%;
  padding: 0.4rem 0.6rem;
  border-radius: 10px 10px 2px 10px;
  background: #fff;
  color: var(--ink);
}
.msgs .them {
  align-self: flex-start;
  max-width: 92%;
  padding: 0.4rem 0.6rem;
  border-radius: 10px 10px 10px 2px;
  background: var(--ink-3);
}
.msgs .shots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}
.msgs img,
.tray img {
  display: block;
  width: 48px;
  height: 34px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: var(--paper);
}
.steps {
  margin-top: 0.5rem;
  color: var(--ov-dim);
  font: 10.5px/1.6 var(--mono);
}
.steps:empty {
  display: none;
}
.steps li {
  display: flex;
  gap: 0.4rem;
}
.steps li::before {
  content: '›';
  color: rgba(255, 255, 255, 0.22);
}
/* the variant picker: one row of chips, the original first */
.vset {
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--ov-line);
}
.vset-h {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  color: var(--ov-dim);
  font: 10px/1.4 var(--mono);
  text-transform: uppercase;
}
.vchips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.vchips button,
.presets button,
.vuse {
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--ov-dim);
  font: 500 10px/1.2 var(--sans);
  transition:
    color 120ms,
    border-color 120ms,
    background-color 120ms;
}
.vchips button:hover,
.presets button:hover {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}
.vchips button.is-on {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.vuse {
  margin-left: auto;
  background: #fff;
  border-color: #fff;
  color: var(--ink);
  font-weight: 600;
}
.vuse:hover {
  opacity: 0.88;
}
.vset.is-chosen .vchips button:not(.is-on) {
  display: none;
}
.vset.is-chosen .vuse {
  display: none;
}
/* the history slider: drag left into the element's past */
.hist {
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--ov-line);
}
.hist-r {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ov-dim);
  font: 10px/1.2 var(--mono);
  text-transform: uppercase;
}
.hist-r input {
  flex: 1;
  min-width: 0;
  margin: 0;
  accent-color: #fff;
}
.hist-r .live {
  color: #fff;
}
.hist-u {
  margin-top: 0.4rem;
}
.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.55rem;
}
.compose {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.compose textarea {
  flex: 1;
  min-width: 0;
  min-height: 2rem;
  max-height: 6rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: var(--ink-2);
  color: #fff;
  font: 12px/1.4 var(--sans);
  resize: none;
  outline: none;
}
.compose textarea:focus {
  border-color: rgba(255, 255, 255, 0.4);
}
.compose .send {
  height: 2rem;
  padding: 0 0.7rem;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 600 11px/1 var(--sans);
}
.compose .send:hover {
  opacity: 0.88;
}
/* the pencil: opens the pad, attaches to this message */
.compose .pen {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: var(--ov-dim);
}
.compose .pen:hover {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}
.compose .pen svg {
  width: 13px;
  height: 13px;
}
.tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  color: var(--ov-dim);
  font: 10px/1.2 var(--mono);
}
.tray:empty {
  display: none;
}
.tray .t {
  position: relative;
}
.tray .t button {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  display: grid;
  place-items: center;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  color: #fff;
  font: 9px/1 var(--sans);
}
.shot {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, 0.14) 3px,
    rgba(255, 255, 255, 0.14) 4px
  );
  color: var(--ov-dim);
  font: 500 8px var(--mono);
  text-transform: uppercase;
}
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem 0.3rem 0.55rem;
  border-radius: 999px;
  background: var(--ink);
  box-shadow:
    0 0 0 1px var(--ov-line-2),
    0 0 0 2px var(--halo),
    0 4px 16px rgba(0, 0, 0, 0.45);
  color: #fff;
  font: 600 10.5px/1 var(--sans);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.chip i {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #fff;
}
.chip.is-working i {
  animation: alive 1.9s ease-in-out infinite;
}
.chip.is-done {
  color: var(--ov-dim);
}
.chip.is-done i {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ov-dim);
}
.chip.is-call i {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #fff;
}
@keyframes alive {
  0%,
  100% {
    opacity: 1;
    scale: 1;
  }
  50% {
    opacity: 0.35;
    scale: 0.7;
  }
}
.outline {
  position: absolute;
  border: 1.5px dashed #fff;
  box-shadow:
    0 0 0 1px var(--halo),
    inset 0 0 0 1px var(--halo);
  pointer-events: none;
}
/* the treatment's name, rising on the component as a set plays */
.now {
  position: absolute;
  z-index: 3;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  background: var(--ink);
  box-shadow:
    0 0 0 1px var(--ov-line-2),
    0 3px 12px rgba(0, 0, 0, 0.4);
  color: var(--ov-text);
  font: 600 10.5px/1.3 var(--sans);
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  animation: now-in 420ms var(--ease);
}
@keyframes now-in {
  from {
    opacity: 0;
    translate: -0.35rem 0;
  }
}
/* the pixel field on a claimed component */
.fieldc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}

/* 03.2 — a card with a thread beside it */
.vis-thread {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
}
.mcard {
  position: relative;
  padding: 1rem;
  border: 1px solid rgba(var(--fg-rgb), 0.18);
}
.mcard .outline {
  inset: -5px;
}
.mcard .pin {
  position: absolute;
  top: -0.55rem;
  left: -0.55rem;
}
.mcard .k {
  color: var(--mute);
  font: 9px/1 var(--mono);
  text-transform: uppercase;
}
.mcard .t {
  margin-top: 0.5rem;
  color: var(--fg);
  font: 500 15px/1.2 var(--sans);
}
.mcard .p {
  margin-top: 0.25rem;
  color: var(--dim);
  font: 12px/1.3 var(--mono);
}
.mcard .mbtn {
  margin-top: 0.85rem;
  height: 30px;
  font-size: 10px;
}
.vis-thread .bubble {
  width: auto;
}
@media (max-width: 639px) {
  .vis-thread {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 0.75rem;
    padding: 1rem;
  }
  .vis-thread .bubble {
    font-size: 11px;
  }
  .vis-thread .steps {
    display: none;
  }
}

/* 03.3 — a set that plays itself */
.chips {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.3rem;
}
.chips span {
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(var(--fg-rgb), 0.16);
  border-radius: 999px;
  color: var(--dim);
  font: 500 10px/1.2 var(--sans);
  animation: chip-cycle 14.76s linear infinite;
}
.chips span:nth-child(2) {
  animation-delay: -11.07s;
}
.chips span:nth-child(3) {
  animation-delay: -7.38s;
}
.chips span:nth-child(4) {
  animation-delay: -3.69s;
}
@keyframes chip-cycle {
  0%,
  24% {
    background: var(--fg);
    border-color: var(--fg);
    color: var(--bg);
  }
  25.5%,
  100% {
    background: transparent;
    border-color: rgba(var(--fg-rgb), 0.16);
    color: var(--dim);
  }
}
.mvar {
  animation: var-cycle 14.76s linear infinite;
}
@keyframes var-cycle {
  0%,
  24% {
    border: 1px solid rgba(var(--fg-rgb), 0.18);
    border-radius: 0;
    background: transparent;
    color: rgba(var(--fg-rgb), 0.7);
    letter-spacing: 0;
    padding: 0 1rem;
  }
  25.5%,
  49% {
    border: 1px solid var(--fg);
    border-radius: 0;
    background: var(--fg);
    color: var(--bg);
    letter-spacing: 0;
    padding: 0 1.25rem;
  }
  50.5%,
  74% {
    border: 1px solid rgba(var(--fg-rgb), 0.6);
    border-radius: 999px;
    background: transparent;
    color: var(--fg);
    letter-spacing: 0.12em;
    padding: 0 1.4rem;
  }
  75.5%,
  99% {
    border: 1px dashed rgba(var(--fg-rgb), 0.5);
    border-radius: 4px;
    background: rgba(var(--fg-rgb), 0.08);
    color: var(--fg);
    letter-spacing: 0;
    padding: 0 1rem;
  }
}
.nows {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: 6rem -2.6rem;
}
.nows span {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  background: var(--ink);
  box-shadow:
    0 0 0 1px var(--ov-line-2),
    0 3px 12px rgba(0, 0, 0, 0.4);
  color: var(--ov-text);
  font: 600 10.5px/1.3 var(--sans);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  animation: now-cycle 14.76s linear infinite;
}
.nows span:nth-child(2) {
  animation-delay: -11.07s;
}
.nows span:nth-child(3) {
  animation-delay: -7.38s;
}
.nows span:nth-child(4) {
  animation-delay: -3.69s;
}
@keyframes now-cycle {
  0% {
    opacity: 0;
    translate: -0.35rem 0;
  }
  2%,
  22% {
    opacity: 1;
    translate: 0 0;
  }
  25%,
  100% {
    opacity: 0;
    translate: 0 0;
  }
}

/* 03.4 — queued, working, done (driven from the script, so the field runs) */
.vis-live {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.mhero {
  position: relative;
  width: min(100%, 22rem);
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
}
.mhero .t {
  color: var(--fg);
  font: 500 18px/1.15 var(--sans);
  letter-spacing: -0.01em;
}
.mhero .p {
  margin-top: 0.4rem;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.5;
}
.mhero .outline {
  inset: -6px;
  transition: opacity 300ms;
}
.mhero.is-done .outline {
  opacity: 0;
}
.mhero .chip {
  position: absolute;
  top: -0.9rem;
  right: -0.4rem;
}

/* 03.5 — the drawing pad, sketched */
.vis-pad {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 1.25rem;
}
.sheet {
  position: relative;
  min-height: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(0, 0, 0, 0.22) 0.8px, transparent 0.9px);
  background-size: 14px 14px;
  overflow: hidden;
}
.sheet svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vis-pad .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.vis-pad .tools {
  display: flex;
  gap: 0.25rem;
}
.vis-pad .tools span {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--line);
  color: var(--dim);
  font: 500 9px var(--mono);
}
.vis-pad .tools span.on {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

/* 03.7 — drag a box */
.vis-band {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
}
.vis-band .mcard {
  width: 7.5rem;
  padding: 0.85rem;
}
.vis-band .mcard .pin,
.vis-band .mcard .outline {
  opacity: 0;
  animation: band-pick 8s linear infinite;
}
.vis-band .mcard:nth-child(3) .pin,
.vis-band .mcard:nth-child(3) .outline {
  animation: none;
}
.mband {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 0;
  height: 0;
  border: 1.5px dashed #fff;
  box-shadow:
    0 0 0 1px var(--halo),
    inset 0 0 0 1px var(--halo);
  pointer-events: none;
  animation: band-grow 8s linear infinite;
}
@keyframes band-grow {
  0%,
  8% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  40%,
  58% {
    width: calc(100% - 2.5rem - 7.5rem - 0.5rem);
    height: calc(100% - 2.5rem);
    opacity: 1;
  }
  62%,
  100% {
    width: calc(100% - 2.5rem - 7.5rem - 0.5rem);
    height: calc(100% - 2.5rem);
    opacity: 0;
  }
}
@keyframes band-pick {
  0%,
  58% {
    opacity: 0;
  }
  62%,
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 03.8 — the history slider, live */
.vis-hist {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 1.25rem;
}
.vis-hist .stage {
  display: grid;
  place-items: center;
  min-height: 0;
}
.hcard {
  padding: 1rem 1.25rem;
  border: 1px solid rgba(var(--fg-rgb), 0.18);
  transition: all 320ms var(--ease);
}
.hcard .t {
  color: var(--fg);
  font: 500 16px/1.15 var(--sans);
  transition: all 320ms var(--ease);
}
.hcard .mbtn {
  margin-top: 0.75rem;
  height: 30px;
  font-size: 10px;
  transition: all 320ms var(--ease);
}
.hcard[data-h='1'] .t {
  font-size: 20px;
}
.hcard[data-h='1'] .mbtn {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.hcard[data-h='2'] {
  border-radius: 12px;
  background: var(--soft);
}
.hcard[data-h='2'] .t {
  font-size: 20px;
}
.hcard[data-h='2'] .mbtn {
  border-radius: 999px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.hcard[data-h='3'] {
  border-radius: 12px;
  border-style: dashed;
  background: var(--soft);
}
.hcard[data-h='3'] .t {
  font-size: 22px;
  letter-spacing: -0.02em;
}
.hcard[data-h='3'] .mbtn {
  border-radius: 999px;
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
  letter-spacing: 0.12em;
}
.hrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--dim);
  font: 10px/1.2 var(--mono);
  text-transform: uppercase;
}
.hrow input {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.hrow .live {
  color: var(--fg);
}

/* 03.9 — grain, dialled live */
.vis-grain {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem;
  gap: 1rem;
  padding: 1.25rem;
}
@media (max-width: 639px) {
  .vis-grain {
    grid-template-columns: minmax(0, 1fr) 7.5rem;
  }
}
.gcard {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 1px solid rgba(var(--fg-rgb), 0.18);
  background: var(--soft);
  color: var(--fg);
  font: 500 15px/1.2 var(--sans);
  text-align: center;
  isolation: isolate;
}
.gcard::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain-img);
  background-size: var(--grain-size, 180px);
  mix-blend-mode: var(--grain-blend, soft-light);
  opacity: var(--grain-op, 0.3);
  pointer-events: none;
}
.gctl {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--dim);
  font: 10px/1.2 var(--mono);
  text-transform: uppercase;
}
.gctl label {
  display: grid;
  gap: 0.25rem;
}
.gctl label span {
  display: flex;
  justify-content: space-between;
}
.gctl input,
.gctl select {
  width: 100%;
  margin: 0;
  min-width: 0;
}
.gctl select {
  padding: 0.25rem;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font: 10px var(--mono);
}
.gctl .copy-css {
  margin-top: auto;
  padding: 0.4rem 0;
  border: 1px solid var(--line);
  color: var(--dim);
  font: 10px var(--mono);
  text-transform: uppercase;
}
.gctl .copy-css:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}

/* 03.10 — the panel: card, or drawer */
.vis-panel {
  position: absolute;
  inset: 0;
}
.vis-panel .page-m {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 9rem;
  height: 5rem;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
}
.vis-panel .page-m i {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  height: 4px;
  background: rgba(var(--fg-rgb), 0.14);
}
.drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 13.5rem;
  padding: 0.65rem 0.7rem;
  background: var(--ink);
  box-shadow: -1px 0 0 var(--ov-line-2);
  color: var(--ov-text);
  font: 11px/1.4 var(--sans);
}
.drawer .tabs {
  display: flex;
  gap: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ov-line);
  color: var(--ov-dim);
  font: 10px/1.2 var(--mono);
  text-transform: uppercase;
}
.drawer .tabs span {
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
}
.drawer .tabs span.on {
  background: #fff;
  color: var(--ink);
}
.drawer .row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  color: var(--ov-dim);
  font: 10px/1.3 var(--mono);
}
.drawer .row b {
  color: #fff;
  font-weight: 400;
}
.drawer .row .ok {
  color: #fff;
}
.drawer .row .sl {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  position: relative;
}
.drawer .row .sl::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 60%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
}
.drawer-tab {
  position: absolute;
  top: 50%;
  right: 13.5rem;
  width: 1.1rem;
  height: 3rem;
  border-radius: 6px 0 0 6px;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--ov-line-2);
  translate: 0 -50%;
}

/* 03.11 — the armed picker, drawn still */
.vis-armed {
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 0 2px #fff,
    inset 0 0 0 3px var(--halo);
}
.vis-armed .ret {
  position: absolute;
  top: 50%;
  left: 50%;
}
.vis-armed .fab-m {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}

/* terminals */
.term {
  position: absolute;
  inset: 1.25rem;
  overflow: hidden;
  color: rgba(var(--fg-rgb), 0.72);
  font: 11px/1.75 var(--mono);
  white-space: normal;
}
.term-big {
  position: relative;
  inset: auto;
  min-height: 14rem;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  background: var(--bg);
  overflow-x: auto;
  font-size: 11.5px;
  line-height: 1.8;
}
.term .ps {
  color: var(--faint);
}
.term .c {
  color: var(--mute);
  font-style: italic;
}
.term .k {
  color: var(--fg);
}
.term .w {
  color: var(--accent-text);
}
.term .d {
  color: var(--dim);
}
.term .ln {
  display: block;
  opacity: 0;
  white-space: pre;
}
.term.play .ln {
  animation: ln-in 240ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 1s);
}
@keyframes ln-in {
  from {
    opacity: 0;
    translate: 0 3px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.term .cur::after {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 0.2em;
  background: rgba(var(--fg-rgb), 0.74);
  vertical-align: -0.15em;
  animation: blink 0.8s steps(1, end) infinite;
}
@keyframes blink {
  0%,
  48% {
    opacity: 1;
  }
  49%,
  100% {
    opacity: 0;
  }
}

/* ── the loop ───────────────────────────────────────────────────────────── */
.loop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 2rem;
}
.box {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--bg);
}
.box-h {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font: 10px/1 var(--mono);
  text-transform: uppercase;
}
.box-h b {
  color: var(--fg);
  font-weight: 500;
}
.box-b {
  flex: 1;
  padding: 0.9rem;
  color: rgba(var(--fg-rgb), 0.7);
  font: 11.5px/1.8 var(--mono);
}
.box-b li {
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}
.box-b li::before {
  content: '›';
  color: var(--faint);
}
.box-b li.k {
  color: var(--fg);
}
.conn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 3.5rem;
  color: var(--mute);
  font: 9px/1 var(--mono);
  text-transform: uppercase;
}
.conn::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
}
.conn span {
  position: relative;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--line);
  background: var(--bg);
  white-space: nowrap;
}
@media (min-width: 900px) {
  .loop {
    grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr) 4rem minmax(0, 1fr);
    align-items: stretch;
  }
  .conn::before {
    top: 50%;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
  }
}

/* ── the agent's half ───────────────────────────────────────────────────── */
.cmds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1.5rem;
  border: 1px solid var(--line);
}
@media (min-width: 640px) {
  .cmds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .cmds {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cmdc {
  padding: 1rem;
  border-top: 1px solid var(--line);
}
.cmdc:first-child {
  border-top: 0;
}
@media (min-width: 640px) {
  .cmdc:nth-child(2) {
    border-top: 0;
  }
  .cmdc:nth-child(even) {
    border-left: 1px solid var(--line);
  }
}
@media (min-width: 1024px) {
  .cmdc {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .cmdc:first-child {
    border-left: 0;
  }
}
.cmdc > code {
  display: block;
  color: var(--fg);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdc > span {
  display: block;
  margin-top: 0.4rem;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.55;
}
.cmdc > span code {
  color: rgba(var(--fg-rgb), 0.8);
  font-size: 0.92em;
}

/* ── keys ───────────────────────────────────────────────────────────────── */
.keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}
@media (min-width: 768px) {
  .keys {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .keys {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.key {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.5rem 1.25rem;
  background: var(--bg);
}
.cap {
  display: inline-grid;
  place-items: center;
  width: fit-content;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.6rem;
  border: 1px solid rgba(var(--fg-rgb), 0.22);
  box-shadow: inset 0 -2px 0 rgba(var(--fg-rgb), 0.08);
  color: var(--fg);
  font: 500 12px/1 var(--mono);
  white-space: nowrap;
}
.key b {
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
}
.key span {
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ── install ────────────────────────────────────────────────────────────── */
.steps-i {
  margin-top: 2rem;
  border: 1px solid var(--line);
}
.step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.step:first-child {
  border-top: 0;
}
.step-n {
  display: grid;
  place-items: start center;
  padding: 1rem 0;
  border-right: 1px solid var(--line);
  color: var(--accent-text);
  font: 500 10px/1.5 var(--mono);
}
.step-b {
  min-width: 0;
  padding: 1rem 1.25rem;
}
.step-b b {
  display: block;
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
}
.step-b > span {
  display: block;
  margin-top: 0.25rem;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.6;
}
.step-b > span code {
  color: rgba(var(--fg-rgb), 0.8);
  font-size: 0.92em;
}
.step-b > span a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.step-b pre {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--bg);
  color: rgba(var(--fg-rgb), 0.78);
  font-size: 11.5px;
  line-height: 1.7;
  overflow-x: auto;
}
.step-b pre .c {
  color: var(--mute);
  font-style: italic;
}
.step-b pre .k {
  color: var(--fg);
}

/* ── final CTA and footer ───────────────────────────────────────────────── */
.cta {
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.cta h2 {
  max-width: none;
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
}
.cta p {
  max-width: 36rem;
  margin: 0.5rem auto 0;
  color: rgba(var(--fg-rgb), 0.48);
  font-size: 15px;
  text-wrap: balance;
}
.cta-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--accent-soft);
}
.ftr {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ftr > div {
  min-width: 0;
  border-top: 1px solid var(--line);
}
.ftr > div:first-child {
  border-top: 0;
}
@media (min-width: 768px) {
  .ftr {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ftr > div {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .ftr > div:first-child {
    border-left: 0;
  }
}
.ftr-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 48px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
  color: rgba(var(--fg-rgb), 0.58);
  font: 9px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    background-color 150ms,
    color 150ms;
}
.ftr-h svg {
  width: 14px;
  height: 14px;
  color: rgba(var(--fg-rgb), 0.3);
  transition:
    color 150ms,
    translate 150ms;
}
a.ftr-h:hover {
  background: var(--accent-soft);
  color: var(--fg);
}
a.ftr-h:hover svg {
  color: var(--accent-text);
  translate: 2px 0;
}
.ftr-b {
  min-height: 154px;
  padding: 1rem;
}
.ftr-b h4 {
  margin: 0 0 0.5rem;
  color: rgba(var(--fg-rgb), 0.34);
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ftr-b p {
  max-width: 15rem;
  color: rgba(var(--fg-rgb), 0.42);
  font: 9px/1.9 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ftr-b li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 28px;
  color: rgba(var(--fg-rgb), 0.48);
  font: 9px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 150ms;
}
.ftr-b li a svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: transparent;
  transition:
    color 150ms,
    translate 150ms;
}
.ftr-b li a:hover {
  color: var(--accent-text);
}
.ftr-b li a:hover svg {
  color: var(--accent-text);
  translate: 2px 0;
}
.ftr-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  color: rgba(var(--fg-rgb), 0.34);
  font: 10px/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ftr-end a:hover {
  color: var(--fg);
}

/* ═══ VARIANT SETS ═════════════════════════════════════════════════════════
   Five treatments per kind of component, applied by `data-v` on the element,
   the way the real tool injects a set's ruleset: blunt, unlayered, and only
   while a thread is comparing them. `original` is the absence of the
   attribute. */
[data-vset='btn'][data-v='a'] {
  background: var(--fg) !important;
  border-color: var(--fg) !important;
  color: var(--bg) !important;
}
[data-vset='btn'][data-v='b'] {
  border-radius: 999px;
  letter-spacing: 0.12em;
  padding-inline: 1.5rem;
}
[data-vset='btn'][data-v='c'] {
  background: transparent !important;
  border-color: rgba(var(--fg-rgb), 0.4) !important;
  color: var(--fg) !important;
}
[data-vset='btn'][data-v='d'] {
  border-style: dashed;
  background: transparent !important;
  color: var(--fg) !important;
  border-color: rgba(var(--fg-rgb), 0.6) !important;
}
[data-vset='btn'][data-v='e'] {
  height: 52px;
  padding-inline: 1.75rem;
  font-size: 12px;
}
[data-vset='title'][data-v='a'] h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
[data-vset='title'][data-v='b'] h1 {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 3.6vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
[data-vset='title'][data-v='c'] h1 {
  font-weight: 600;
  letter-spacing: -0.045em;
}
[data-vset='title'][data-v='d'] h1 {
  color: transparent;
  -webkit-text-stroke: 1px var(--fg);
}
[data-vset='title'][data-v='e'] h1 {
  font-size: clamp(1.25rem, 3.2vw, 2.25rem);
}
[data-vset='title'][data-v='e'] h1 span {
  display: inline;
}
[data-vset='title'][data-v='e'] h1 span + span::before {
  content: ' ';
}
[data-vset='h2'][data-v='a'] {
  font-family: var(--mono);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
[data-vset='h2'][data-v='b'] {
  font-size: clamp(2rem, 3.8vw, 3rem);
  max-width: 40rem;
}
[data-vset='h2'][data-v='c'] {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
[data-vset='h2'][data-v='d'] {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-2);
}
[data-vset='h2'][data-v='e'] {
  font-weight: 400;
  color: var(--dim);
}
[data-vset='cell'][data-v='a'] {
  margin: 1rem;
  border: 1px solid var(--line) !important;
  min-height: calc(480px - 2rem);
}
[data-vset='cell'][data-v='b'] {
  background-image: radial-gradient(
    ellipse 84% 42% at 50% 18%,
    rgba(var(--fg-rgb), 0.06),
    rgba(var(--fg-rgb), 0.015) 42%,
    transparent 76%
  );
}
[data-vset='cell'][data-v='c'] .cell-t {
  text-align: center;
}
[data-vset='cell'][data-v='c'] .cell-t h3,
[data-vset='cell'][data-v='c'] .cell-t p {
  margin-inline: auto;
}
[data-vset='cell'][data-v='d'] h3 {
  font-family: var(--mono);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
[data-vset='cell'][data-v='e'] h3 {
  font-size: 2rem;
  letter-spacing: -0.02em;
}
[data-vset='card'][data-v='a'] {
  border-radius: 12px;
  overflow: hidden;
}
[data-vset='card'][data-v='b'] {
  background: rgba(var(--fg-rgb), 0.06) !important;
}
[data-vset='card'][data-v='c'] {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 6px,
    rgba(var(--fg-rgb), 0.05) 6px,
    rgba(var(--fg-rgb), 0.05) 7px
  ) !important;
}
[data-vset='card'][data-v='d'] {
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(var(--fg-rgb), 0.2) !important;
  translate: 0 -2px;
}
[data-vset='card'][data-v='e'] {
  border-style: dashed !important;
  border-color: rgba(var(--fg-rgb), 0.4) !important;
}
[data-vset] {
  transition: all 320ms var(--ease);
}
[data-vset] h1,
[data-vset] h3 {
  transition: all 320ms var(--ease);
}

/* ═══ THE LIVE SELECTION ═══════════════════════════════════════════════════
   One fixed node, positioned by writing four styles to it from a rAF-gated
   mousemove. Dashed while peeking, solid while the picker is armed — so you
   can tell a look from a pick. */
.sel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  border-style: dashed;
  background: transparent;
  opacity: 0;
  transition:
    top 110ms var(--ease),
    left 110ms var(--ease),
    width 110ms var(--ease),
    height 110ms var(--ease),
    opacity 140ms;
}
html.armed .sel {
  border-style: solid;
  background: rgba(255, 255, 255, 0.06);
}
.sel.is-on {
  opacity: 1;
}
.sel.no-ease {
  transition: opacity 140ms;
}
.sel-tag em:empty {
  display: none;
}
.sel.is-flip .sel-tag {
  top: auto;
  bottom: -1.6rem;
  border-radius: 0 0 6px 6px;
}
.sel.is-flip .sel-dim {
  top: -1.5rem;
  bottom: auto;
}

/* ═══ ARMED: the ring, the reticle, the band ═══════════════════════════════ */
html.armed,
html.armed *:not([data-nosel]):not([data-nosel] *) {
  cursor: none !important;
  user-select: none;
  -webkit-user-select: none;
}
.ring {
  position: fixed;
  inset: 0;
  z-index: 55;
  box-shadow:
    inset 0 0 0 2px #fff,
    inset 0 0 0 3px var(--halo);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}
html.armed .ring {
  opacity: 1;
}
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  will-change: translate;
}
html.armed .cursor.is-on {
  opacity: 1;
}
.cursor > span,
.ret > span {
  position: absolute;
  display: block;
}
.cur-ring {
  top: -11px;
  left: -11px;
  width: 22px;
  height: 22px;
  border: 1.5px solid #fff;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px var(--halo),
    inset 0 0 0 1px var(--halo);
  animation: cur-breathe 2.1s ease-out infinite;
}
.cur-dot {
  top: -9px;
  left: 0;
  width: 1.5px;
  height: 18px;
  background: #fff;
  box-shadow: 0 0 0 0.75px var(--halo);
}
.cur-dot::after {
  content: '';
  position: absolute;
  top: 8.25px;
  left: -9px;
  width: 18px;
  height: 1.5px;
  background: #fff;
  box-shadow: 0 0 0 0.75px var(--halo);
}
.cur-btn {
  top: 13px;
  left: 15px;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--ov-line-2);
  color: var(--ov-text);
  font: 600 9.5px/1.35 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition:
    translate 90ms ease,
    opacity 90ms ease;
}
.cur-btn::after {
  content: 'pick';
}
.cursor.is-down .cur-ring {
  animation-play-state: paused;
  scale: 0.78;
}
.cursor.is-down .cur-btn {
  translate: 0 2px;
  opacity: 0.55;
}
@keyframes cur-breathe {
  0% {
    opacity: 0.85;
    scale: 0.8;
  }
  70%,
  100% {
    opacity: 0;
    scale: 1.3;
  }
}
.band {
  position: fixed;
  z-index: 58;
  display: none;
  border: 1.5px dashed #fff;
  box-shadow:
    0 0 0 1px var(--halo),
    inset 0 0 0 1px var(--halo);
  pointer-events: none;
}
.band.is-on {
  display: block;
}

/* ═══ PINS: a thread on the component ══════════════════════════════════════ */
.pins {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
}
.pins.is-hidden .pin-at {
  display: none;
}
.pin-at {
  position: absolute;
  translate: -0.55rem -0.55rem;
}
.pin-at.is-open {
  z-index: 1;
}
.pin-at .pin {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.pin-at .outline {
  top: 0.55rem;
  left: 0.55rem;
  width: var(--w);
  height: var(--h);
  opacity: 0;
  transition: opacity 200ms;
}
.pin-at.is-live .outline {
  opacity: 1;
}
.pin-at.is-done .outline {
  opacity: 0;
}
.pin-at .fieldc {
  top: 0.55rem;
  left: 0.55rem;
  width: var(--w);
  height: var(--h);
}
.pin-at .chip {
  position: absolute;
  top: 0.55rem;
  left: calc(var(--w) + 0.55rem);
  translate: -100% -50%;
  opacity: 0;
  transition: opacity 200ms;
}
.pin-at.is-live .chip {
  opacity: 1;
}
.pin-at .now {
  top: 0;
  left: 1.95rem;
}
.pin-at .bubble {
  position: absolute;
  top: 0;
  left: calc(var(--w) + 1.1rem);
  z-index: 1;
  width: min(var(--bw), 78vw);
  max-width: none;
  max-height: 70vh;
  overflow-y: auto;
  pointer-events: auto;
  scrollbar-width: thin;
  cursor: default;
}
.pin-at.at-left .bubble {
  left: calc(-1 * var(--bw) - 0.55rem);
}
.pin-at.at-down .bubble {
  top: calc(var(--h) + 1.1rem);
  left: 0;
}
.pin-at.at-in .bubble {
  top: 1.9rem;
  left: 0.55rem;
}
.pin-at.is-closed .bubble {
  display: none;
}
.bubble-top {
  cursor: grab;
}
.bubble-top:active {
  cursor: grabbing;
}

/* the FAB: the mark, and a count of what is still open */
.fab-set {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  touch-action: none;
  user-select: none;
}
.fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 999px;
  background: var(--ink);
  box-shadow:
    0 0 0 1px var(--ov-line-2),
    0 0 0 2px var(--halo),
    0 12px 30px -10px rgba(0, 0, 0, 0.75);
  transition:
    background-color 200ms,
    box-shadow 200ms,
    scale 160ms var(--ease);
}
.fab:hover {
  scale: 1.06;
}
.fab .mark {
  width: 1.4rem;
  height: 1.4rem;
  background-image: url('assets/pick-mark-light.png');
}
.fab.is-armed {
  background: #fff;
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 2px var(--halo),
    0 10px 28px -8px rgba(255, 255, 255, 0.25);
}
.fab.is-armed .mark {
  background-image: url('assets/pick-mark.png');
}
.fab.is-armed::before,
.fab.is-armed::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--halo);
  pointer-events: none;
  animation: fab-pulse 1.9s ease-out infinite;
}
.fab.is-armed::after {
  animation-delay: 0.95s;
}
@keyframes fab-pulse {
  0% {
    opacity: 0.75;
    scale: 1;
  }
  70%,
  100% {
    opacity: 0;
    scale: 1.85;
  }
}
.fab-n {
  display: grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border: 1px solid var(--ov-line-2);
  border-radius: 999px;
  background: var(--ink);
  color: var(--ov-dim);
  font: 600 11px/1 var(--sans);
  transition:
    color 120ms,
    border-color 120ms;
}
.fab-n.is-on {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}

/* ═══ THE DRAWING PAD ══════════════════════════════════════════════════════
   A dark desk, a light sheet fitted onto it, and the controls as islands
   floating over the desk where every editor puts them. Modal; closes only on
   its own buttons. */
.pad {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  background: #141418;
  color: var(--ov-text);
  font: 12px/1.4 var(--sans);
}
.pad.is-open {
  display: grid;
  grid-template-rows: 2.75rem minmax(0, 1fr);
}
.pad-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--ov-line);
  color: var(--ov-dim);
  font: 10.5px/1 var(--mono);
}
.pad-bar b {
  color: #fff;
  font-weight: 600;
}
.pad-bar code {
  color: #fff;
}
.pad-bar .sp {
  flex: 1;
}
.pad-bar button,
.pad-out button {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--ov-line-2);
  border-radius: 999px;
  color: var(--ov-dim);
  font: 600 10.5px/1 var(--sans);
}
.pad-bar button:hover,
.pad-out button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.pad-bar button.fill,
.pad-out button.fill {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.pad-desk {
  position: relative;
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  min-height: 0;
}
@media (max-width: 831px) {
  .pad-desk {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
}
.pad-props {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem;
  border-right: 1px solid var(--ov-line);
  overflow: auto;
}
@media (max-width: 831px) {
  .pad-props {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--ov-line);
  }
}
.pad-props h5 {
  margin: 0 0 0.35rem;
  color: var(--ov-dim);
  font: 400 9.5px/1 var(--mono);
  text-transform: uppercase;
}
.inks,
.nibs {
  display: flex;
  gap: 0.35rem;
}
.inks button {
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: var(--c);
}
.inks button[data-ink=''] {
  background: #1c1c20;
  box-shadow: inset 0 0 0 2px var(--paper);
}
.inks button.is-on {
  box-shadow:
    0 0 0 2px var(--ink),
    0 0 0 3.5px #fff;
}
.nibs button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
}
.nibs button i {
  display: block;
  width: 1rem;
  height: var(--w);
  border-radius: 999px;
  background: #fff;
}
.nibs button.is-on {
  background: #fff;
}
.nibs button.is-on i {
  background: var(--ink);
}
.pad-props .tog {
  display: flex;
  gap: 0.35rem;
}
.pad-props .tog button {
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--ov-dim);
  font: 500 10px/1 var(--sans);
}
.pad-props .tog button.is-on {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.pad-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 4rem 1.5rem 4.25rem;
  overflow: hidden;
}
.pad-sheet {
  position: relative;
  width: min(100%, calc((100vh - 2.75rem - 8.25rem) * 1200 / 780));
  aspect-ratio: 1200 / 780;
  background: var(--paper);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  touch-action: none;
}
.pad-sheet canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.pad-sheet.t-select canvas {
  cursor: default;
}
.pad-sheet.t-text canvas {
  cursor: text;
}
.pad-sheet.t-erase canvas {
  cursor: none;
}
.pad-sheet .textin {
  position: absolute;
  z-index: 2;
  min-width: 6rem;
  padding: 0.1rem 0.2rem;
  border: 1px dashed rgba(0, 0, 0, 0.4);
  background: rgba(255, 255, 255, 0.85);
  color: #111;
  font: 500 var(--fs) / 1.2 var(--sans);
  outline: none;
}
.pad-tools {
  position: absolute;
  top: 1rem;
  left: 50%;
  z-index: 3;
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 12px;
  background: var(--ink);
  box-shadow:
    0 0 0 1px var(--ov-line-2),
    0 12px 30px rgba(0, 0, 0, 0.5);
  translate: -50% 0;
}
.pad-tools > div {
  position: relative;
}
.pad-tools button {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  color: var(--ov-dim);
}
.pad-tools button:hover {
  color: #fff;
  background: var(--ink-3);
}
.pad-tools button.is-on {
  background: #fff;
  color: var(--ink);
}
.pad-tools button svg {
  width: 16px;
  height: 16px;
}
.pad-tools button kbd {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font: 500 7.5px/1 var(--mono);
  opacity: 0.7;
}
/* the shapes flyout: on hover and on focus, with the gap made hoverable */
.flyout {
  position: absolute;
  top: 100%;
  left: 50%;
  display: none;
  grid-template-columns: repeat(4, auto);
  gap: 0.2rem;
  padding: 0.3rem;
  margin-top: 0.4rem;
  border-radius: 10px;
  background: var(--ink);
  box-shadow:
    0 0 0 1px var(--ov-line-2),
    0 12px 30px rgba(0, 0, 0, 0.5);
  translate: -50% 0;
}
.flyout::before {
  content: '';
  position: absolute;
  top: -0.5rem;
  left: 0;
  right: 0;
  height: 0.5rem;
}
.pad-tools > div:hover .flyout,
.pad-tools > div:focus-within .flyout {
  display: grid;
}
.flyout button {
  width: 2rem;
  height: 2rem;
}
.pad-hist {
  position: absolute;
  bottom: 1rem;
  left: 1.5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 10px;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--ov-line-2);
}
.pad-hist button {
  padding: 0.4rem 0.6rem;
  border-radius: 7px;
  color: var(--ov-dim);
  font: 600 10.5px/1 var(--sans);
}
.pad-hist button:hover:not(:disabled) {
  background: var(--ink-3);
  color: #fff;
}
.pad-hist button:disabled {
  opacity: 0.35;
  cursor: default;
}
.pad-hist i {
  width: 1px;
  height: 1rem;
  background: var(--ov-line-2);
}
.pad-out {
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ov-dim);
  font: 10px/1.3 var(--mono);
}
.pad-out .n {
  color: #fff;
}
@media (max-width: 639px) {
  .pad-out .hints,
  .pad-bar .hints {
    display: none;
  }
}

/* ── quiet, when asked ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .frame-b,
  .frame.is-vis .frame-b {
    inset: 0;
    opacity: 1;
    transform: none;
    animation: none;
  }
  .chips span,
  .mvar,
  .nows span,
  .chip i,
  .term .cur::after,
  .cur-ring,
  .fab.is-armed::before,
  .fab.is-armed::after,
  .mband,
  .vis-band .mcard .pin,
  .vis-band .mcard .outline,
  .now {
    animation: none;
  }
  .chips span:first-child {
    background: var(--fg);
    border-color: var(--fg);
    color: var(--bg);
  }
  .nows span:first-child {
    opacity: 1;
  }
  .mband {
    width: calc(100% - 2.5rem - 7.5rem - 0.5rem);
    height: calc(100% - 2.5rem);
  }
  .vis-band .mcard .pin,
  .vis-band .mcard .outline {
    opacity: 1;
  }
  .term .ln,
  .term.play .ln {
    opacity: 1;
    animation: none;
  }
  .sel,
  [data-vset],
  [data-vset] h1,
  [data-vset] h3,
  .hcard,
  .hcard .t,
  .hcard .mbtn {
    transition: none;
  }
}