/* DM Sans, Xakto's typeface: the extension's panel and overlay are set in it too. */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-latin-ext.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --canvas: #0b0b0c;
  --sunk: #111113;
  --raised: #16161a;
  --ink: #f3f2f0;
  --ink-soft: #b4b3bb;
  --ink-faint: #8d8c95;
  --line: #232327;
  --line-strong: #3b3b41;
  /* Xakto's red again since 5 Nov (the owner's call; blue from 3 to 5 Nov), for fills, outlines, runs and marks. Words,
     icons and the focus ring stay the greys (4 Nov). */
  --brand: #ff3200;
  --brand-soft: #2a120c;
  --on-brand: #ffffff;
  --pro: var(--ink);
  --pro-soft: var(--brand-soft);
  --ok: #6fcf98;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -16px rgb(0 0 0 / 0.7);
  --display: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --page: 1180px;
  --gutter: 16px;
  /* Spacing scale (27 Oct), the only gaps, paddings and margins used:
     0 / 2 / 4 / 6 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 128px.
     Section spacing steps up it at 761px and 1100px, as the type does. */
  --space-hero: 48px;
  --space-stage: 48px;
  --space-band: 40px;
  --space-section: 64px;
  --space-columns: 32px;
  --space-steps: 24px;
  --space-closing: 80px;
  --radius: 12px;
  color-scheme: dark;
}

@media (min-width: 761px) {
  :root {
    --gutter: 32px;
    --space-hero: 80px;
    --space-stage: 64px;
    --space-band: 48px;
    --space-section: 96px;
    --space-columns: 48px;
    --space-steps: 32px;
    --space-closing: 96px;
  }
}

@media (min-width: 1100px) {
  :root {
    --gutter: 40px;
    --space-hero: 96px;
    --space-stage: 80px;
    --space-band: 64px;
    --space-section: 128px;
    --space-columns: 80px;
    --space-steps: 48px;
    --space-closing: 128px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.6 var(--text);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--brand);
  color: var(--on-brand);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--canvas);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

/* ---------- type ---------- */

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

/* Type scale (27 Oct), the only sizes used: 11 / 12 / 14 / 16 / 18 / 20 / 24 / 32 / 48 / 56 / 64 / 76px.
   Headings step up the scale at breakpoints rather than sliding between sizes. */
h1 {
  font-size: 48px;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

h2 {
  font-size: 32px;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

h3 {
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.lede {
  max-width: 34em;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (min-width: 761px) {
  h1 {
    font-size: 64px;
  }

  h2 {
    font-size: 48px;
  }

  .lede {
    font-size: 18px;
  }
}

/* The one exception to 6px corners, the owner's call (27 Oct): the nav's Add to Chrome is a pill. */
.nav-cta .btn {
  border-radius: 999px;
}

/* The landing page's lead runs as two lines on a wide screen, balanced. */
@media (min-width: 1100px) {
  #hero-title + .lede {
    max-width: 56em;
    text-wrap: balance;
  }
}

/* The pricing page's lead is four lines on a phone: balanced, so none ends on a word or two. */
#pricing-title + .lede {
  text-wrap: balance;
}

/* The pricing page's headline is a whole sentence: it stays a step or two below the landing page's. */
#pricing-title {
  font-size: 32px;
}

@media (min-width: 761px) {
  #pricing-title {
    font-size: 48px;
  }
}

@media (min-width: 1100px) {
  #pricing-title {
    font-size: 56px;
  }
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: 600 16px/1 var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* The primary button is the ink itself: black on the light page, white on the dark one. */
.btn-primary {
  background: var(--ink);
  color: var(--canvas);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--ink), var(--canvas) 16%);
}

/* Accent: Xakto red, for the one call to action the page leads with. Primary is the ink, black or white by theme. */
.btn-accent {
  background: var(--brand);
  color: var(--on-brand);
}

.btn-accent:hover {
  background: color-mix(in srgb, var(--brand), black 12%);
}

/* Secondary: a quiet fill of the ink with no border - the system has no outlined button (27 Oct). */
.btn-secondary {
  background: color-mix(in srgb, var(--ink) 8%, var(--canvas));
  color: var(--ink);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--ink) 13%, var(--canvas));
}

/* The extension's sizes, by name: default 36px with 6px corners; the site's own .btn is xl (44px), .btn-lg 2xl (52px). */
.btn-default {
  min-height: 36px;
  gap: 6px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
}

.btn-default svg {
  width: 16px;
  height: 16px;
}

.btn-lg {
  min-height: 52px;
  padding: 0 20px;
  font-size: 16px;
  border-radius: 8px;
}

.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: isolate;
}

/* The nav's ground and its blur fade out downward: solid behind the links, clear at its bottom edge, so the page
   slides under it with no line where the nav stops. */
.nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 -24px;
  background: linear-gradient(var(--canvas), color-mix(in srgb, var(--canvas) 60%, transparent) 50%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  mask-image: linear-gradient(#000 40%, transparent);
  pointer-events: none;
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 700 14px/1 var(--display);
  letter-spacing: 0;
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: auto;
  height: 20px;
  fill: var(--brand);
}

.nav-links {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

/* hovered or current: a white wash over whatever is behind the bar, not a dark tile */
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
  background: rgb(255 255 255 / 0.08);
}

.nav-cta {
  margin-left: auto;
}

@media (max-width: 760px) {
  .nav-links {
    display: none;
  }
}

/* ---------- hero ---------- */

/* Behind the first fold, a grid of rounded tiles 10px apart, drifting slowly up, each its own faint outline: a few sparkle now
   and then, and those under the pointer light up and fade behind it (site.js draws it from these three tokens). */
.hero {
  --grid-line: color-mix(in srgb, var(--ink) 8%, transparent);
  --grid-lit: color-mix(in srgb, var(--ink) 6%, transparent);
  --grid-edge: color-mix(in srgb, var(--ink) 30%, transparent);
  position: relative;
  isolation: isolate;
  padding-block: var(--space-hero) 0;
}

/* On the dark ground the lines sit just above the ground and a lit tile reads a quiet grey. */
.hero-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Faded in under the nav and out toward the sides and the bottom: the two masks multiply. */
  -webkit-mask-image: linear-gradient(transparent, #000 160px), radial-gradient(ellipse 85% 90% at 50% 10%, #000 45%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 160px), radial-gradient(ellipse 85% 90% at 50% 10%, #000 45%, transparent 100%);
  mask-composite: intersect;
}

/* Centred, as the store pages of tools like it are: the headline, the action, then the product at full width. */
.hero-head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.hero h1 {
  max-width: 16ch;
}

/* Three groups, not one even stack (28 Oct): the headline and its lede close together, a clear break before
   the call to action, and the facts tucked under the buttons as their small print. */
.hero .lede {
  margin-top: 16px;
  margin-inline: auto;
}

.hero-head .actions {
  justify-content: center;
}

.hero-head .actions {
  margin-top: 32px;
}


@media (min-width: 761px) {
  .hero .lede {
    margin-top: 20px;
  }

  .hero-head .actions {
    margin-top: 40px;
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* What sets Xakto apart, under the buttons: an icon and a few words each, no box, so nothing competes with the
   buttons. One at a time turns white, slowly, the rest staying grey (4 Nov). On a phone they sit two by two. */
.h-usp {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.h-usp li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-faint);
  font: 500 14px/1.4 var(--text);
  white-space: nowrap;
  transition: color 0.8s ease;
}

.h-usp li[data-on] {
  color: var(--ink);
}

.h-usp svg {
  flex: none;
  width: 16px;
  height: 16px;
}

@media (max-width: 760px) {
  .h-usp {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 12px 20px;
  }

  .h-usp li {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .h-usp li {
    color: var(--ink-soft);
    transition: none;
  }
}

/* ---------- sections ---------- */

.section {
  padding-block: var(--space-section);
}

.section-head {
  display: grid;
  gap: 16px;
  max-width: 760px;
  margin-bottom: var(--space-band);
}

/* The pricing page reads as one sheet (5 Nov): its sections half as far apart as the home page's, the close too. */
.pricing-page .section {
  padding-block: calc(var(--space-section) * 0.5);
}

.pricing-page .h-section.h-closing {
  padding-block: calc(var(--space-section) * 0.5) var(--space-section);
}

/* Once a band of its own; since 5 Nov the page runs on one ground, no lines between its sections. */
.section-sunk {
  background: transparent;
}

/* The PRO badge, as the extension draws it (5 Nov, the owner's call): deep red, lit, white words at 4.7:1 or more,
   and a sheen that crosses it once when its row is hovered; still under reduced motion. */
.pro-tag {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  margin-left: 4px;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 4px;
  background: linear-gradient(180deg, #dc310a, #c42800);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 1px 2px rgb(196 40 0 / 0.35);
  color: #ffffff;
  font: 600 11px/1 var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.pro-tag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

:is(li, a, button, tr):hover .pro-tag::after {
  transform: translateX(120%);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .pro-tag::after {
    display: none;
  }
}

/* ---------- pricing ---------- */

/* The billing switch is the home page's tab track (5 Nov): a faint track, the chosen period raised on it; its
   buttons keep the site's 8px corners, the track 12px round them. */
.billing {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.03);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
}

.billing button {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font: 600 14px/1 var(--text);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.billing button:hover {
  color: var(--ink);
}

.billing button[aria-pressed="true"] {
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
  color: var(--ink);
}

.billing .save {
  margin-left: 6px;
  color: var(--ok);
  font-weight: 600;
}

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.plan {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raised);
}

/* the lit plan's edge: a white line and a faint white glow round it, a little more under the card (5 Nov) */
.plans {
  --plan-lit: 0 0 0 1px var(--ink), 0 0 24px -8px rgb(255 255 255 / 0.16), 0 24px 56px -20px rgb(255 255 255 / 0.08);
  /* and a grey ground darker than the other cards', as the compare table's lit column has (5 Nov) */
  --plan-lit-bg: color-mix(in srgb, var(--raised) 40%, var(--canvas));
}

/* the plan we lead with: a white edge, its call to action in the brand */
.plan[data-featured="true"] {
  border-color: var(--ink);
  box-shadow: var(--plan-lit);
  background: var(--plan-lit-bg);
}

.plan {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.plan > .btn {
  transition: background 0.2s ease, color 0.2s ease;
}

/* The lead follows the pointer (5 Nov): the plan hovered, or with focus inside, takes the white edge and the red
   button; Pro gives them up meanwhile and takes them back when the pointer leaves the plans. */
@media (hover: hover) {
  .plans:has(.plan:hover) .plan[data-featured="true"]:not(:hover) {
    border-color: var(--line);
    box-shadow: none;
    background: var(--raised);
  }

  .plans:has(.plan:hover) .plan[data-featured="true"]:not(:hover) > .btn {
    background: color-mix(in srgb, var(--ink) 8%, var(--canvas));
    color: var(--ink);
  }

  .plan:hover {
    border-color: var(--ink);
    box-shadow: var(--plan-lit);
    background: var(--plan-lit-bg);
  }

  .plan:hover > .btn {
    background: var(--brand);
    color: var(--on-brand);
  }

  .plan:hover > .btn:hover {
    background: color-mix(in srgb, var(--brand), black 12%);
  }
}

.plans:has(.plan:focus-within) .plan[data-featured="true"]:not(:focus-within) {
  border-color: var(--line);
  box-shadow: none;
  background: var(--raised);
}

.plans:has(.plan:focus-within) .plan[data-featured="true"]:not(:focus-within) > .btn {
  background: color-mix(in srgb, var(--ink) 8%, var(--canvas));
  color: var(--ink);
}

.plan:focus-within {
  border-color: var(--ink);
  box-shadow: var(--plan-lit);
  background: var(--plan-lit-bg);
}

.plan:focus-within > .btn {
  background: var(--brand);
  color: var(--on-brand);
}

.plan-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: 700 20px/1.2 var(--display);
  letter-spacing: -0.015em;
}

.plan-flag {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--brand);
  color: var(--on-brand);
  font: 600 11px/1 var(--text);
}

.plan-flag.quiet {
  background: var(--sunk);
  color: var(--ink-soft);
}

.plan-desc {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 14px;
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-height: 72px;
}

.price strong {
  font: 700 32px/1 var(--display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.price span {
  color: var(--ink-faint);
  font-size: 14px;
}

.price small {
  flex-basis: 100%;
  color: var(--ink-faint);
  font-size: 12px;
}

.plan .btn {
  width: 100%;
}

.plan ul {
  display: grid;
  gap: 8px;
  align-content: start;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 14px;
}

.plan li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  line-height: 1.45;
}

.plan li svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--ink);
}

.plan li.lead {
  grid-template-columns: minmax(0, 1fr);
  color: var(--ink-faint);
  font-size: 14px;
}

@media (max-width: 1080px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Wide, the table sits in the page so its header can stick under the nav; clip only rounds its corners (it is not a
   scroll container, as auto is, so sticky still works). Narrow, it scrolls sideways again. */
.compare-wrap {
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raised);
}

.compare {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 14px;
}

.compare caption {
  padding: 0;
  text-align: left;
}

.compare th,
.compare td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

/* The header: each plan's name, price and button, pinned under the nav (68px) while the table scrolls by. */
.compare thead th {
  position: sticky;
  top: 68px;
  z-index: 3;
  background: var(--raised);
  box-shadow: inset 0 -1px 0 var(--line);
  font: 700 16px/1.2 var(--display);
  vertical-align: bottom;
}

.compare-plan,
.compare-price {
  display: block;
}

.compare-price {
  margin-top: 4px;
  color: var(--ink-faint);
  font: 400 12px/1.3 var(--text);
}

.compare-cta {
  width: 100%;
  margin-top: 12px;
  font-size: 12px;
}

/* the lit column's button is the brand's, as on the plans above */
.compare thead th:nth-child(3) .compare-cta {
  background: var(--brand);
  color: var(--on-brand);
}

.compare tbody th {
  font-weight: 500;
}

.compare td {
  color: var(--ink-soft);
}

/* The lead column, Pro, on a darker grey as the plans above have it; it follows the pointer (5 Nov): the column a hovered cell is in
   lights, Pro gives it up meanwhile and takes it back when the pointer leaves the table. */
.compare :is(thead th, td):nth-child(3) {
  background: color-mix(in srgb, var(--raised) 40%, var(--canvas));
  color: var(--ink);
}

.compare :is(thead th, td) {
  transition: background 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .compare:has(:is(thead th, td):is(:nth-child(2), :nth-child(4), :nth-child(5)):hover) :is(thead th, td):nth-child(3) {
    background: transparent;
    color: var(--ink-soft);
  }

  .compare:has(:is(thead th, td):is(:nth-child(2), :nth-child(4), :nth-child(5)):hover) thead th:nth-child(3) {
    background: var(--raised);
    color: var(--ink);
  }

  .compare:has(:is(thead th, td):is(:nth-child(2), :nth-child(4), :nth-child(5)):hover) thead th:nth-child(3) .compare-cta {
    background: color-mix(in srgb, var(--ink) 8%, var(--canvas));
    color: var(--ink);
  }

  .compare:has(:is(thead th, td):nth-child(2):hover) thead th:nth-child(2) .compare-cta {
    background: var(--brand);
    color: var(--on-brand);
  }

  .compare:has(:is(thead th, td):nth-child(4):hover) thead th:nth-child(4) .compare-cta {
    background: var(--brand);
    color: var(--on-brand);
  }

  .compare:has(:is(thead th, td):nth-child(5):hover) thead th:nth-child(5) .compare-cta {
    background: var(--brand);
    color: var(--on-brand);
  }

  .compare:has(:is(thead th, td):nth-child(2):hover) :is(thead th, td):nth-child(2) {
    background: color-mix(in srgb, var(--raised) 40%, var(--canvas));
    color: var(--ink);
  }

  .compare:has(:is(thead th, td):nth-child(4):hover) :is(thead th, td):nth-child(4) {
    background: color-mix(in srgb, var(--raised) 40%, var(--canvas));
    color: var(--ink);
  }

  .compare:has(:is(thead th, td):nth-child(5):hover) :is(thead th, td):nth-child(5) {
    background: color-mix(in srgb, var(--raised) 40%, var(--canvas));
    color: var(--ink);
  }
}

/* On a narrow screen the table scrolls sideways; the feature names stay put beside the plans. */
@media (max-width: 760px) {
  .compare-wrap {
    overflow-x: auto;
  }

  .compare thead th {
    top: 0;
  }

  .compare thead th:first-child,
  .compare tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--raised);
    box-shadow: inset -1px 0 0 var(--line);
  }

  .compare thead th:first-child {
    z-index: 2;
  }

  .compare .group span {
    position: sticky;
    left: 16px;
  }
}

.compare .group th {
  padding-top: 20px;
  background: var(--sunk);
  color: var(--ink);
  font: 600 12px/1 var(--text);
}

.compare tr:last-child > * {
  border-bottom: 0;
}

.yes,
.no {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.yes svg {
  color: var(--ink);
}

.no {
  color: var(--ink-faint);
}

.promises {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.promises li {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.promises strong {
  font-weight: 600;
}

.promises span {
  color: var(--ink-soft);
  font-size: 16px;
}

@media (max-width: 860px) {
  .promises {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-columns);
  align-items: start;
}

.faq-list details {
  border-top: 1px solid var(--line);
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ink-faint);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-list details[open] summary svg {
  transform: rotate(45deg);
  color: var(--ink);
}

.faq-list details p {
  max-width: 40em;
  padding: 0 0 20px;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .faq {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- docs (5 Nov): a page list on the left, the page, and "On this page" on the right ---------- */

.docs { padding-block: 48px 96px; }
.docs-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; gap: 48px; align-items: start; }
.docs-side, .docs-toc { position: sticky; top: 88px; display: grid; gap: 2px; font-size: 14px; }
.docs-toc { gap: 0; }
.docs-side a { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; }
.docs-side a svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.docs-side a[aria-current="page"] svg, .docs-side a:hover svg { opacity: 1; }
.docs-side a:hover { background: rgb(255 255 255 / .05); color: var(--ink); }
.docs-side a[aria-current="page"] { background: rgb(255 255 255 / .08); color: var(--ink); }
.docs-toc-label { margin: 0 0 8px; color: var(--ink-faint); font-size: 12px; font-weight: 500; }
.docs-toc a { padding: 4px 0 4px 12px; border-left: 1px solid var(--line); color: var(--ink-faint); text-decoration: none; }
.docs-toc a[aria-current="true"], .docs-toc a:hover { border-left-color: var(--ink); color: var(--ink); }
.docs-body { min-width: 0; max-width: 720px; }
.docs-body :not(pre) > code { overflow-wrap: anywhere; }
.docs-crumb { margin: 0; color: var(--ink-faint); font-size: 14px; }
.docs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.docs-arrows { display: flex; gap: 8px; }
.docs-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 8%, var(--canvas)); color: var(--ink); transition: background 0.2s ease; }
.docs-arrow:hover { background: color-mix(in srgb, var(--ink) 13%, var(--canvas)); }
.docs-arrow[data-off] { color: var(--ink-faint); opacity: 0.4; }
.docs-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.docs-body h1 { margin: 0; font-size: 48px; letter-spacing: -.02em; }
.docs-lede { margin: 16px 0 0; color: var(--ink-soft); font-size: 18px; line-height: 1.6; }
.docs-body h2 { margin: 48px 0 16px; padding-top: 24px; font-size: 24px; scroll-margin-top: 96px; }
.docs-body h2:first-of-type { border-top: 0; }
.docs-body p, .docs-body li { color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.docs-body b { color: var(--ink); font-weight: 600; }
.docs-body a { color: var(--ink); }
.docs-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.docs-steps li { position: relative; padding-left: 40px; counter-increment: s; }
.docs-steps li::before { content: counter(s); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: rgb(255 255 255 / .06); color: var(--ink); font: 600 12px/1 var(--mono); }
.docs-list { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.docs-path { color: var(--ink); font-weight: 500; }
.docs-note { margin-top: 24px; padding: 16px 20px; border-radius: 12px; background: rgb(255 255 255 / .03); }
.docs-note-label { margin: 0 !important; color: var(--ink) !important; font-weight: 600; }
.docs-note p { margin: 4px 0 0; font-size: 14px; }
.docs-body code { padding: 2px 6px; border-radius: 4px; background: rgb(255 255 255 / .06); color: var(--ink); font: 500 12px var(--mono); }
.docs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.docs-table th, .docs-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-soft); }
.docs-table th { color: var(--ink-faint); font-weight: 500; }
.docs-table td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.docs-keys td:first-child { width: 200px; }
.docs-body kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; background: #1b1b1e; box-shadow: inset 0 -1px 0 rgb(255 255 255 / .08), inset 0 0 0 1px rgb(255 255 255 / .08); color: var(--ink); font: 500 12px var(--mono); }
.docs-shot { margin: 24px 0 0; }
.docs-shot-frame { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
.docs-shot img { display: block; width: 100%; height: auto; max-width: 100%; }
.docs-pin { position: absolute; display: grid; place-items: center; width: 18px; height: 18px; translate: -50% -50%; border-radius: 50%; background: rgb(11 11 12 / .85); color: var(--ink); font: 500 11px/1 var(--text); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }
.docs-legend { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: l; }
.docs-legend li { position: relative; padding-left: 32px; counter-increment: l; font-size: 14px !important; }
.docs-legend li::before { content: counter(l); position: absolute; left: 0; top: 3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); color: var(--ink-soft); font: 500 11px/1 var(--text); }

.docs-body h2 + p,
.docs-body p + p {
  margin-top: 0;
}

.docs-shot figcaption {
  margin-top: 12px;
  color: var(--ink-faint);
  font-size: 14px;
}

.docs-code {
  overflow-x: auto;
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: #0e0e10;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
}

.docs-code code {
  padding: 0;
  background: none;
  white-space: pre;
}

/* previous and next, at the foot of each page */
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 64px;
}

.docs-pager a {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.docs-pager a:hover {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.docs-pager a[data-next] {
  text-align: right;
}

.docs-pager small {
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 400;
}

/* narrower: no "On this page"; on a phone the page list becomes one row you scroll sideways, above the page */
@media (max-width: 1099px) {
  .docs-grid {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .docs-toc {
    display: none;
  }
}

@media (max-width: 760px) {
  .docs-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .docs-side {
    position: static;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .docs-side a {
    flex: none;
    white-space: nowrap;
  }

  .docs-body h1 {
    font-size: 32px;
  }
}

/* ---------- footer ---------- */

.footer {
  padding-block: 48px 40px;
  color: var(--ink-faint);
  font-size: 14px;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.footer h3 {
  margin-bottom: 12px;
  color: var(--ink);
  font: 600 14px/1 var(--text);
  letter-spacing: 0;
}

.footer ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer a {
  text-decoration: none;
}

.footer a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer-note {
  max-width: 26em;
  margin-top: 12px;
}

.footer-base {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-inner > :first-child {
    grid-column: 1 / -1;
  }
}

/* ---------- home: the landing page, rebuilt in site-src/home (3 Nov) ---------- */

/* The ground a card or plate sits on: one step up from the page, a hairline edge, nothing louder. */
.home,
.home-tokens {
  --hair: rgb(255 255 255 / 0.07);
  --hair-strong: rgb(255 255 255 / 0.14);
  --card: #111113;
  --card-up: #17171b;
}

/* A warm red light under the tiles, in the brand (5 Nov): centred a little under the line of features below the
   buttons, wide, spilling well onto the top of the plate; the headline above it sits in the dark. */
.home .hero::before {
  content: "";
  position: absolute;
  inset: -96px 0 auto;
  height: 1000px;
  z-index: -2;
  background:
    radial-gradient(ellipse 50% 28% at 50% 56%, rgb(255 50 0 / 0.22), transparent 72%),
    radial-gradient(ellipse 80% 43% at 50% 58%, rgb(255 50 0 / 0.07), transparent 80%);
  pointer-events: none;
}

@media (min-width: 1100px) {
  .home .hero h1 {
    font-size: 76px;
    max-width: 18ch;
  }
}

.home .hero .lede {
  max-width: 36em;
}

/* The plate: a big soft-cornered tray a picture sits in, as 21st.dev sets its scenes. */
.h-plate {
  padding: 12px;
  border-radius: 32px;
  background: linear-gradient(rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  box-shadow: inset 0 0 0 1px var(--hair), 0 40px 80px -40px rgb(0 0 0 / 0.8);
}

.h-hero-plate {
  margin-top: var(--space-stage);
}

/* The hero's scene (Phase B, 4 Nov): Xakto as it is - the layers rail, the tool bar, the Edit panel - on a shop's
   dark product listing, copied from the built extension photographed in dark (dist-ssr/ref-04nov). Drawn at the
   extension's own 1440 by 760 and scaled by --hx-k to the plate; on a phone only the page, 896 wide, is shown. */
.hx {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1440 / 760;
  border-radius: 22px;
  background: #0f1012;
  box-shadow: inset 0 0 0 1px var(--hair);
}

.hx-canvas {
  --x-surface: #2a2a2a;
  --x-line: #373737;
  --x-field: #313131;
  --x-ink: #eaeaea;
  --x-soft: rgb(255 255 255 / 0.65);
  --x-dim: rgb(255 255 255 / 0.42);
  --x-row: #3c3c3c;
  --x-raised: #444444;
  --x-group: #363636;
  --x-select: #60aaf3;
  --x-hover: #e11d48;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 248px 48px 896px 248px;
  width: 1440px;
  height: 760px;
  color: var(--x-ink);
  font: 400 12px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
  transform: scale(var(--hx-k, 0.77));
  transform-origin: 0 0;
}

.hx-canvas svg {
  flex: none;
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

.hx-end {
  margin-left: auto;
}

.hx-dim {
  color: var(--x-dim);
}

/* ---- the layers rail ---- */
.hx-rail {
  display: grid;
  grid-template-rows: 48px 40px 1fr 28px;
  background: var(--x-surface);
  box-shadow: inset -1px 0 0 var(--x-line);
}

.hx-rail-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  box-shadow: inset 0 -1px 0 var(--x-line);
  font-size: 14px;
}

.hx-rail-head svg.hx-mark {
  width: 20px;
  height: 20px;
  fill: var(--brand);
}

.hx-rail-head .hx-end {
  color: var(--x-soft);
}

.hx-rail-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  color: var(--x-soft);
}

.hx-rail-title b {
  margin-right: auto;
  color: var(--x-ink);
  font-weight: 500;
}

.hx-rows {
  display: grid;
  align-content: start;
}

.hx-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-right: 8px;
  color: var(--x-ink);
}

.hx-row[data-on] {
  background: var(--x-row);
}

.hx-row .hx-twist {
  width: 12px;
  height: 12px;
  color: var(--x-dim);
}

.hx-row .hx-kind {
  width: 14px;
  height: 14px;
  color: var(--x-soft);
}

.hx-row small {
  margin-left: auto;
  color: var(--x-dim);
  font: 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
}

.hx-rail-foot {
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-shadow: inset 0 1px 0 var(--x-line);
  color: var(--x-dim);
  font: 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- the tool bar ---- */
.hx-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 6px;
  background: var(--x-surface);
  box-shadow: inset -1px 0 0 var(--x-line);
}

.hx-bar hr {
  width: 24px;
  margin: 8px 0;
  border: 0;
  border-top: 1px solid var(--x-line);
}

.hx-tool {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--x-soft);
}

.hx-tool[data-small] {
  height: 16px;
}

.hx-tool[data-small] svg {
  width: 12px;
  height: 12px;
}

.hx-tool svg {
  width: 18px;
  height: 18px;
}

.hx-tool[data-on] {
  background: var(--x-raised);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  color: var(--x-ink);
}

.hx-modes {
  display: grid;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--x-group);
}

/* ---- the page ---- */
.hx-page {
  overflow: hidden;
  padding: 24px 32px;
  background: #0e0e0f;
  color: #f1f1f2;
  font-size: 14px;
}

/* The page being edited: a black and white contracts dashboard (the owner's mockup, 4 Nov). */
.hx-page svg {
  width: 16px;
  height: 16px;
  color: #8e8e93;
}

.hx-d-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 20px;
}

.hx-d-head > b {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hx-d-btn,
.hx-d-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: #161617;
  box-shadow: inset 0 0 0 1px #262628;
  font-size: 12px;
}

.hx-d-pill {
  height: 28px;
  background: #1b1b1c;
}

.hx-d-pill svg {
  width: 14px;
  height: 14px;
}

.hx-d-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.hx-d-stat {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 56px;
  height: 88px;
  border-radius: 12px;
  background: #161617;
  box-shadow: inset 0 0 0 1px #262628;
  transition: border-radius 0.2s ease;
}

.hx-d-stat-text {
  min-width: 0;
  padding: 16px;
}

.hx-d-stat small {
  display: block;
  color: #8e8e93;
  font-size: 12px;
  white-space: nowrap;
}

.hx-d-stat b {
  display: block;
  margin-top: 4px;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hx-d-art {
  display: grid;
  place-items: center;
  border-left: 1px solid #262628;
  border-radius: 0 12px 12px 0;
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(255 255 255 / 0.025) 6px 7px), #121213;
  transition: border-radius 0.2s ease;
}

.hx-d-art span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 40px;
  border-radius: 6px;
  background: #202021;
  box-shadow: inset 0 0 0 1px #2c2c2e, 0 6px 12px -6px #000000;
}

.hx-d-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.hx-d-card {
  padding: 16px;
  border-radius: 12px;
  background: #161617;
  box-shadow: inset 0 0 0 1px #262628;
}

.hx-d-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.hx-d-chart {
  display: block;
  width: 100%;
  height: auto;
}

.hx-page .hx-d-chart {
  width: 100%;
  height: auto;
}

.hx-d-chart text {
  fill: #86868c;
  font-size: 11px;
  font-family: inherit;
}

.hx-d-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 4px 8px;
  color: #86868c;
  font-size: 11px;
}

.hx-d-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 36px;
  margin-top: 6px;
  padding: 0 12px;
  border-radius: 8px;
  background: #1b1b1c;
  box-shadow: inset 0 0 0 1px #202022;
  font-size: 12px;
}

.hx-d-item > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hx-d-doc {
  width: 12px;
  height: 14px;
  border-radius: 2px;
  background: #3a3a3d;
}

.hx-d-av {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(140deg, #5a5a60, #2b2b2e);
  color: #e6e6e8;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.hx-d-folders {
  margin-top: 12px;
}

.hx-d-fgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.hx-d-folder {
  display: grid;
  padding: 12px;
  border-radius: 12px;
  background: #131314;
  box-shadow: inset 0 0 0 1px #1f1f21;
}

.hx-d-ficon {
  position: relative;
  display: block;
  width: 88px;
  height: 56px;
  margin-top: 8px;
  border-radius: 0 6px 6px;
  background: #202021;
  box-shadow: inset 0 0 0 1px #2a2a2c;
}

.hx-d-ficon::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 36px;
  height: 8px;
  border-radius: 4px 4px 0 0;
  background: #202021;
}

.hx-d-ficon::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 14px;
  height: 2px;
  background: #4a4a4e;
}

.hx-d-folder b {
  margin-top: 16px;
  font-weight: 500;
}

.hx-d-folder span {
  margin-top: 4px;
  color: #8e8e93;
  font-size: 12px;
}

/* The extension's own marks on the page: the hover box, the selection with its grips, the measured gap. */
.hx-hover {
  position: absolute;
  inset: -2px;
  border: 2px solid var(--x-hover);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.92);
  opacity: 0;
  pointer-events: none;
}

.hx-hover[data-on] {
  opacity: 1;
}

.hx-select {
  position: absolute;
  inset: -1px;
  outline: 1px solid var(--x-select);
  opacity: 0;
  pointer-events: none;
}

.hx-select[data-on] {
  opacity: 1;
}

.hx-select i {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--x-select);
  border-radius: 2px;
  background: #ffffff;
}

.hx-select i:nth-child(1) { top: -5px; left: -5px; }
.hx-select i:nth-child(2) { top: -5px; right: -5px; }
.hx-select i:nth-child(3) { bottom: -5px; left: -5px; }
.hx-select i:nth-child(4) { right: -5px; bottom: -5px; }

.hx-measure {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 100%;
  width: 24px;
  height: 1px;
  background: var(--x-hover);
  opacity: 0;
}

.hx-measure[data-on] {
  opacity: 1;
}

.hx-measure b {
  position: absolute;
  bottom: 4px;
  left: 50%;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--x-hover);
  color: #ffffff;
  font-size: 11px;
  translate: -50% 0;
}

/* ---- the Edit panel ---- */
.hx-panel {
  overflow: hidden;
  background: var(--x-surface);
  box-shadow: inset 1px 0 0 var(--x-line);
}

.hx-panel-head {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  box-shadow: inset 0 -1px 0 var(--x-line);
  font-size: 14px;
  font-weight: 600;
}

.hx-sec {
  display: grid;
  gap: 8px;
  padding: 12px;
  box-shadow: inset 0 -1px 0 var(--x-line);
}

.hx-sec-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.hx-sec-title svg {
  color: var(--x-soft);
}

.hx-target {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hx-target svg {
  color: var(--x-soft);
}

.hx-page-name {
  font-weight: 500;
}

.hx-page-url {
  color: var(--x-dim);
}

.hx-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hx-field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--x-field);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
  white-space: nowrap;
}

.hx-field[data-focus] {
  box-shadow: 0 0 0 1px var(--x-ink);
}

.hx-field em {
  color: var(--x-dim);
  font-style: normal;
}

.hx-field svg {
  width: 14px;
  height: 14px;
  color: var(--x-dim);
}

.hx-field span[data-selected] {
  background: rgb(255 255 255 / 0.25);
}

.hx-field .hx-field-caret {
  margin-left: auto;
  color: var(--x-soft);
}

.hx-radius {
  display: flex;
  flex: 1;
}

.hx-seg {
  display: flex;
  /* The extension's track is inset 1px: drawn as a clear border the fill shows through, not off-scale padding. */
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--x-group);
}

.hx-seg i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--x-soft);
}

.hx-seg i[data-on] {
  background: var(--x-raised);
  color: var(--x-ink);
}

.hx-seg svg {
  width: 14px;
  height: 14px;
}

.hx-icon-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: 6px;
  color: var(--x-soft);
}

.hx-icon-btn[data-on] {
  background: var(--x-raised);
  color: var(--x-ink);
}

.hx-faint {
  color: var(--x-dim);
}

.hx-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hx-check i {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--x-field);
}

.hx-check small {
  margin-left: auto;
  color: var(--x-dim);
  font-size: 11px;
}

.hx-export {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  border-radius: 8px;
  background: var(--x-raised);
  font-weight: 500;
}

.hx-export svg {
  width: 12px;
  height: 12px;
}

/* ---- Claude Code over the page: the hero's second act (5 Nov). The window keeps to the Claude app's own warm
   greys; the dock is macOS's, each app's own mark on its own tile. ---- */
.hx-cl {
  position: absolute;
  top: 100px;
  left: 340px;
  z-index: 2;
  display: grid;
  grid-template-rows: 40px 1fr;
  width: 780px;
  height: 470px;
  overflow: hidden;
  border-radius: 12px;
  background: #262624;
  color: #f5f4ef;
  font: 400 12px/1.45 ui-sans-serif, system-ui, -apple-system, sans-serif;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 40px 90px -20px #000000, 0 12px 30px -10px rgb(0 0 0 / 0.7);
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.hx-cl[data-on] {
  opacity: 1;
  transform: none;
}

.hx-cl svg {
  width: 14px;
  height: 14px;
  color: #a6a39a;
}

.hx-cl-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: #1f1e1d;
  box-shadow: inset 0 -1px 0 #3a3936;
}

.hx-cl-top > i {
  width: 12px;
  height: 12px;
  margin-right: -4px;
  border-radius: 50%;
  background: #ff5f57;
}

.hx-cl-top > i:nth-child(2) {
  background: #febc2e;
}

.hx-cl-top > i:nth-child(3) {
  margin-right: 8px;
  background: #28c840;
}

.hx-cl-dim {
  opacity: 0.4;
}

.hx-cl-switch {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: #2b2a28;
}

.hx-cl-switch svg {
  width: 24px;
  height: 20px;
  padding: 2px 4px;
}

.hx-cl-switch b {
  display: flex;
  border-radius: 6px;
  background: #3a3936;
}

.hx-cl-switch b svg {
  color: #f5f4ef;
}

.hx-cl-title {
  color: #f5f4ef;
  font-size: 14px;
}

.hx-cl-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 0;
}

.hx-cl-side {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 12px 8px;
  background: #1f1e1d;
  box-shadow: inset -1px 0 0 #3a3936;
  color: #c2c0b6;
}

.hx-cl-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  margin-bottom: 8px;
  padding: 0 8px;
  border-radius: 8px;
  background: #2b2a28;
  color: #8e8b82;
}

.hx-cl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  overflow: hidden;
  border-radius: 8px;
  white-space: nowrap;
}

.hx-cl-item[data-on] {
  background: #2f2e2b;
  color: #f5f4ef;
}

.hx-cl-item small {
  padding: 0 6px;
  border-radius: 4px;
  background: #3a3936;
  color: #a6a39a;
  font-size: 11px;
}

.hx-cl-new {
  animation: mx-drop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hx-cl-head {
  margin: 12px 8px 4px;
  color: #8e8b82;
  font-size: 11px;
}

.hx-cl-main {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  padding: 16px 20px;
}

.hx-cl-log {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.hx-cl-hello {
  margin-top: 96px;
  color: #c2c0b6;
  font-size: 16px;
  text-align: center;
}

.hx-cl-you {
  justify-self: end;
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 12px;
  background: #3a3936;
  color: #f5f4ef;
  font-size: 14px;
}

.hx-cl-think {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a6a39a;
}

.hx-cl-think svg {
  width: 16px;
  height: 16px;
  color: #d97757;
  animation: hx-spin 1.6s linear infinite;
}

@keyframes hx-spin {
  to {
    transform: rotate(1turn);
  }
}

.hx-cl-step {
  display: grid;
  gap: 6px;
  animation: mx-drop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hx-cl-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c2c0b6;
  font: 12px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
}

.hx-cl-tool i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6fcf98;
}

.hx-cl-tool b {
  color: #f5f4ef;
  font-weight: 500;
}

.hx-cl-out {
  display: block;
}

.hx-cl-diff {
  display: grid;
}

.hx-cl-out,
.hx-cl-diff {
  gap: 2px;
  margin-left: 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #1f1e1d;
  box-shadow: inset 0 0 0 1px #3a3936;
  color: #c2c0b6;
  font: 11px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
}

.hx-cl del {
  color: #ff8a80;
  text-decoration: none;
}

.hx-cl ins {
  color: #8fe3a5;
  text-decoration: none;
}

.hx-cl-diff del {
  margin: 0 -12px;
  padding: 0 12px;
  background: rgb(255 100 100 / 0.08);
}

.hx-cl-diff ins {
  margin: 0 -12px;
  padding: 0 12px;
  background: rgb(110 220 150 / 0.08);
}

.hx-cl-say {
  margin: 0;
  color: #f5f4ef;
  font-size: 14px;
  animation: mx-drop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hx-cl-composer {
  display: grid;
  gap: 8px;
}

.hx-cl-input {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background: #30302e;
  box-shadow: inset 0 0 0 1px #45443f;
  color: #8e8b82;
  font-size: 14px;
}

.hx-cl-input b {
  color: #f5f4ef;
  font-weight: 400;
}

.hx-cl-send {
  display: grid;
  place-items: center;
}

.hx-cl-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 4px;
  color: #a6a39a;
  font-size: 12px;
}

.hx-cl-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hx-cl-meta small {
  color: #8e8b82;
  font-size: 12px;
}

.hx-dock {
  position: absolute;
  top: 650px;
  left: 744px;
  z-index: 3;
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 24px;
  background: rgb(52 52 56 / 0.55);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 24px 48px -16px rgb(0 0 0 / 0.8);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  translate: -50% 0;
}

.hx-app {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 10px -4px rgb(0 0 0 / 0.6);
}

.hx-app svg {
  width: 36px;
  height: 36px;
}

.hx-app[data-app="claude"] {
  background: #d97757;
  color: #ffffff;
}

.hx-app[data-app="cursor"] {
  background: linear-gradient(160deg, #2e2e30, #121213);
  color: #f2f2f2;
}

.hx-app[data-app="codex"] {
  background: linear-gradient(160deg, #f4f4f5, #d4d4d8);
  color: #111111;
}

.hx-app[data-app="terminal"] {
  background: linear-gradient(160deg, #3a3a3c, #1c1c1e);
  color: #eaeaea;
}

.hx-app[data-app="terminal"] svg {
  width: 32px;
  height: 32px;
  stroke-width: 2;
}

.hx-app[data-run]::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.7);
  translate: -50% 0;
}

.hx-app[data-run] {
  animation: hx-bounce 0.6s cubic-bezier(0.3, 1.5, 0.5, 1);
}

@keyframes hx-bounce {
  40% {
    transform: translateY(-16px);
  }
}

/* ---- the cursor ---- */
.hx-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 24px;
  height: 24px;
  opacity: 0;
  pointer-events: none;
}

.hx-cursor svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: #0b0b0c;
  stroke: #ffffff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.5));
  transition: transform 0.12s ease;
}

.hx-cursor[data-press] svg {
  transform: scale(0.86);
}

.hx-key {
  position: absolute;
  top: 24px;
  left: 20px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #ffffff;
  color: #0b0b0c;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.hx-key[data-on] {
  opacity: 1;
}

/* ---- section heads ---- */

/* Between sections, half as much again as the scale's section step (5 Nov): 96 on phones, 144, then 192. */
.h-section {
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--space-section) * 1.5) 0;
}

.h-section:last-of-type {
  padding-bottom: calc(var(--space-section) * 1.5);
}

/* Each section's ground (5 Nov): a design tool's surfaces, faint, fading out at their edges. */
.h-bg-dots::before,
.h-bg-grid::before,
.h-bg-ruler::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Modes: a dot grid, as a canvas has */
.h-bg-dots::before {
  background-image: radial-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1.2px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%);
}

/* The agent: a ruler grid behind the code window */
.h-bg-grid::before {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-position: center;
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 50% 70% at 70% 50%, #000 20%, transparent 70%);
}

/* The steps: a measuring line through the three cards, in the ruler's red, with ticks */
.h-bg-ruler::before {
  top: auto;
  bottom: 30%;
  height: 12px;
  background:
    linear-gradient(90deg, transparent, rgb(255 50 0 / 0.5) 20%, rgb(255 50 0 / 0.5) 80%, transparent) center / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.12) 0 1px, transparent 1px 24px) center / 100% 6px no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

/* On one column the grid centres on the code window, below the words. */
@media (max-width: 760px) {
  .h-bg-grid::before {
    mask-image: radial-gradient(ellipse 80% 40% at 50% 75%, #000 20%, transparent 70%);
  }
}

.h-split-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 48px;
  margin-bottom: 48px;
}

.h-split-head .lede {
  margin: 0;
}

.h-center-head {
  margin-bottom: 32px;
  text-align: center;
}

.h-center-head h2 {
  margin-inline: auto;
  max-width: 20ch;
}

.h-center-head .h-small-title {
  max-width: none;
}

.h-small-title {
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ---- cards: a light under the pointer, a brighter edge on hover ---- */

.h-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  border-radius: 24px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow 240ms ease;
}

.h-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgb(255 255 255 / 0.05), transparent 60%);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.h-card:hover {
  box-shadow: inset 0 0 0 1px var(--hair-strong);
}

.h-card:hover::after {
  opacity: 1;
}

/* ---- agents: a tab each, its setup below ---- */

.h-agents {
  padding-block: calc(var(--space-section) * 1.5) 0;
  border-bottom: 0;
}

.h-agent-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 4px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.03);
  box-shadow: inset 0 0 0 1px var(--hair);
}

.h-agent-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font: 600 14px/1 var(--text);
  cursor: pointer;
  transition: color 160ms ease;
}

.h-agent-tab:hover,
.h-agent-tab[aria-selected="true"] {
  color: var(--ink);
}

.h-agent-tab > svg {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}

.h-agent-tab .agents-wordmark {
  width: auto;
  height: 14px;
}

.h-agent-pill {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px var(--hair);
}

.h-agent-panel {
  max-width: 760px;
  margin: 16px auto 0;
}

/* A setup is copied whole, so it wraps rather than hiding its end off the edge. */
.h-agent-panel .h-terminal pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A terminal or a settings file: mono, on the card ground, its label above. */
.h-terminal {
  overflow: hidden;
  border-radius: 16px;
  background: #0e0e10;
  box-shadow: inset 0 0 0 1px var(--hair);
}

.h-terminal-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 16px;
  box-shadow: inset 0 -1px 0 var(--hair);
  color: var(--ink-soft);
  font-size: 14px;
}

.h-terminal-tag {
  color: var(--ink-faint);
}

.h-terminal pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  color: var(--ink-soft);
  font: 400 14px/1.7 var(--mono);
  white-space: pre;
}

.h-terminal pre b {
  color: var(--ink);
  font-weight: 600;
}

.h-terminal pre em {
  color: var(--ink);
  font-style: normal;
}

/* An agent's run: its tool calls, lines added and the lines they replace */
.h-terminal pre [data-r] {
  color: #ff7a59;
}

.h-terminal pre [data-ok] {
  color: #7fd1a8;
}

.h-terminal pre [data-d] {
  color: var(--ink-faint);
}

/* ---- the five modes (5 Nov): 21st.dev's card layout - a picture inset 8px with nested corners, a row of
   controls, then a title, a line and a link. Edit leads. The pictures are components of the hero's contracts
   app with Xakto's marks on them; their own greys are the app's, kept apart under .mx-pic. ---- */

.mx-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.mx-cell {
  min-width: 0;
}

.mx-edit {
  grid-column: span 7;
}

.mx-inspect {
  grid-column: span 5;
}

.mx-check,
.mx-clone,
.mx-system {
  grid-column: span 4;
}

.mx-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  border: 1px solid rgb(250 250 252 / 0.075);
  border-radius: 20px;
  background: var(--sunk);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 30px 70px -36px rgb(0 0 0 / 0.8);
}

.mx-pic {
  position: relative;
  display: grid;
  place-items: center;
  /* At least 32px clear round every picture (5 Nov): nothing crowds the card's edges. */
  padding: 32px;
  height: 340px;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, #17171a, #0b0b0c 75%);
  color: #f1f1f2;
  font: 400 12px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.mx-check .mx-pic,
.mx-clone .mx-pic,
.mx-system .mx-pic {
  height: 280px;
}

.mx-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding: 20px 16px 12px;
}

.mx-foot h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.mx-foot p {
  margin: 4px 0 0;
  color: var(--ink-faint);
  font-size: 14px;
}

.mx-link {
  display: inline-flex;
  text-decoration: none;
  flex: none;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.mx-link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.mx-link:hover svg {
  transform: translateX(2px);
}

/* ---- the contracts app, as the pictures draw it ---- */

.mx-ui-card {
  position: relative;
  border-radius: 12px;
  background: #161617;
  box-shadow: inset 0 0 0 1px #262628;
}

.mx-av {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(140deg, #5a5a60, #2b2b2e);
  color: #e6e6e8;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.mx-ink-btn {
  position: relative;
  justify-self: start;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f1f1f2;
  color: #111111;
  font-weight: 600;
  transition: border-radius 0.2s ease;
}

.mx-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: #222224;
  color: #e6e6e8;
  font-size: 11px;
}

.mx-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.mx-status[data-wait] {
  color: #a1a1a6;
}

.mx-status[data-draft] {
  color: #56565b;
}

.mx-doc {
  display: inline-block;
  width: 12px;
  height: 14px;
  border-radius: 2px;
  background: #3a3a3d;
}

/* Xakto's own marks: the selection and its grips, the size tag, the panel's pieces. */
.mx-sel-host[data-sel] {
  outline: 1px solid #60aaf3;
  outline-offset: 2px;
}

.mx-grip {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid #60aaf3;
  border-radius: 2px;
  background: #ffffff;
}

.mx-grip[data-at="tl"] { top: -6px; left: -6px; }
.mx-grip[data-at="tr"] { top: -6px; right: -6px; }
.mx-grip[data-at="bl"] { bottom: -6px; left: -6px; }
.mx-grip[data-at="br"] { right: -6px; bottom: -6px; }

.mx-mark .mx-grip[data-at="tl"] { top: -4px; left: -4px; }
.mx-mark .mx-grip[data-at="tr"] { top: -4px; right: -4px; }
.mx-mark .mx-grip[data-at="bl"] { bottom: -4px; left: -4px; }
.mx-mark .mx-grip[data-at="br"] { right: -4px; bottom: -4px; }

.mx-mark {
  position: absolute;
  top: 0;
  left: 0;
  outline: 1px solid #60aaf3;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.mx-tag {
  position: absolute;
  bottom: calc(100% + 6px);
  left: -1px;
  padding: 0 6px;
  border-radius: 4px;
  background: #60aaf3;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.mx-xp {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: #2a2a2a;
  box-shadow: 0 12px 32px -12px #000000, inset 0 0 0 1px #373737;
  color: #eaeaea;
}

.mx-xp > b {
  font-weight: 600;
}

.mx-dim {
  color: rgb(255 255 255 / 0.6);
  font-weight: 400;
}

.mx-xp-row {
  display: flex;
  gap: 8px;
}

.mx-f {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: #313131;
  white-space: nowrap;
  transition: box-shadow 0.2s ease;
}

.mx-f em {
  color: rgb(255 255 255 / 0.6);
  font-style: normal;
}

.mx-f[data-focus] {
  box-shadow: 0 0 0 1px #eaeaea;
}

.mx-change {
  animation: mx-drop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes mx-drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.mx-revert {
  margin-left: auto;
  color: rgb(255 255 255 / 0.6);
}

.mx-copy {
  justify-content: center;
  margin-top: 6px;
  background: #444444;
}

.mx-copy[data-on] {
  background: #505050;
}

/* Edit */
.mx-edit-pic,
.mx-pic > .mx-edit {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* The contract card it edits, from the hero's dashboard */
.mx-contract {
  display: grid;
  gap: 12px;
  width: 240px;
  padding: 16px;
}

.mx-contract small {
  display: block;
  color: #8e8e93;
  font-size: 12px;
}

.mx-ct-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mx-ct-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.mx-ct-amt {
  position: relative;
  display: inline-block;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.mx-ct-meta {
  display: flex;
  gap: 16px;
  color: #8e8e93;
}

.mx-ct-meta > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mx-ct-meta b {
  display: block;
  color: #e6e6e8;
  font-weight: 500;
}

.mx-ct-ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #1f1f21;
  box-shadow: inset 0 0 0 1px #2a2a2c;
}

.mx-ct-ico svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #c8c8cc;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mx-ct-bar {
  position: relative;
  display: block;
  border-radius: 999px;
  background: #262628;
  transition: height 0.2s ease;
}

.mx-ct-bar > i:first-child {
  display: block;
  width: 66%;
  height: 100%;
  border-radius: inherit;
  background: #e6e6e8;
}

/* The pointer that plays the scene */
.mx-pic > .mx-edit {
  position: relative;
}

.mx-pointer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 20px;
  height: 20px;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.6));
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.3s ease, scale 0.12s ease;
}

.mx-pointer[data-on] {
  opacity: 1;
}

.mx-pointer[data-down] {
  scale: 0.85;
}

.mx-pointer path {
  fill: #ffffff;
  stroke: #000000;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.mx-side {
  display: grid;
  gap: 8px;
  width: 200px;
}

/* Inspect */
.mx-inspect-stage,
.mx-pic > .mx-inspect {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
}

.mx-signers {
  display: grid;
  gap: 8px;
  width: 220px;
  padding: 16px;
}

.mx-signers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8e8e93;
}

.mx-ghost-btn {
  padding: 4px 8px;
  border-radius: 6px;
  background: #222224;
  color: #e6e6e8;
}

.mx-signer {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
}

.mx-css {
  width: 220px;
  font: 11px/1.7 ui-monospace, "SF Mono", Menlo, monospace;
}

.mx-css span {
  color: #d6a3f5;
}

/* Check: one chart card from the app, Check's two pins on it, a note by the lit one */
.mx-chart {
  width: 236px;
  padding: 12px 16px;
}

.mx-chart-title {
  font-size: 12px;
}

.mx-chart-axis {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 6px;
  height: 64px;
  margin-top: 12px;
}

/* Faint on purpose: these numbers are the accessibility finding. */
.mx-chart-nums {
  display: grid;
  align-content: space-between;
  color: #56565b;
  font-size: 11px;
  line-height: 1;
}

.mx-chart-axis svg {
  width: 100%;
  height: 100%;
}

.mx-chart-axis path {
  fill: none;
  stroke: #f1f1f2;
  stroke-width: 1.6;
}

.mx-cpin {
  position: absolute;
  left: -10px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff1a8c;
  box-shadow: 0 0 0 3px #1c1c1e;
  opacity: 0.35;
  transform: scale(0.85);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.mx-cpin[data-kind="a11y"] {
  top: 72px;
  background: #00a693;
}

.mx-cpin[data-on] {
  opacity: 1;
  transform: scale(1);
}

.mx-cpin svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.mx-cpin circle {
  fill: #fff;
  stroke: none;
}

.mx-ctip {
  position: absolute;
  left: 16px;
  top: -56px;
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #2a2a2a;
  box-shadow: 0 12px 28px -10px #000, inset 0 0 0 1px #373737;
  color: #eaeaea;
  white-space: nowrap;
  opacity: 0;
  translate: 0 4px;
  transition: opacity 0.3s, translate 0.3s;
}

.mx-ctip[data-kind="a11y"] {
  top: auto;
  bottom: -56px;
}

.mx-ctip[data-on] {
  opacity: 1;
  translate: 0 0;
}

.mx-ctip b {
  font-weight: 600;
}

.mx-ctip small {
  color: rgb(255 255 255 / 0.6);
  font-size: 11px;
}

/* Clone: a status pill, selected, above the code it clones to */
.mx-clone-stack {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.mx-pill {
  position: relative;
  display: inline-flex;
  padding: 4px;
}

.mx-pill .mx-status {
  margin: 0;
  font-size: 12px;
}


/* Clone (before 5 Nov) */
.mx-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mx-tpl {
  display: grid;
  width: 140px;
  padding: 12px;
}

.mx-tpl b {
  margin-top: 8px;
  font-weight: 500;
}

.mx-tpl small {
  color: #8e8e93;
}

.mx-thumb {
  display: grid;
  place-items: center;
  height: 64px;
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(255 255 255 / 0.025) 6px 7px), #121213;
}

.mx-thumb span {
  display: grid;
  gap: 4px;
  align-content: start;
  width: 34px;
  height: 44px;
  padding: 6px;
  border-radius: 4px;
  background: #202021;
}

.mx-thumb i {
  height: 3px;
  border-radius: 2px;
  background: #3a3a3d;
}

/* Clone: the code it writes, in an editor with a file tab and a gutter (5 Nov) */
.mx-ed {
  width: 280px;
  overflow: hidden;
  border-radius: 12px;
  background: #0e0e10;
  box-shadow: inset 0 0 0 1px #262628, 0 24px 48px -24px #000;
  text-align: left;
}

.mx-ed-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #222224;
  color: #e6e6e8;
}

.mx-ed-head svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #8d8c95;
  stroke-width: 1.6;
}

.mx-ed-body {
  padding: 8px 0;
  font: 11px/18px ui-monospace, "SF Mono", Menlo, monospace;
}

.mx-ed-ln {
  display: grid;
  grid-template-columns: 32px 1fr;
  padding-right: 12px;
}

.mx-ed-ln > i {
  padding-right: 12px;
  color: #4a4a4f;
  font-style: normal;
  text-align: right;
}

.mx-ed-ln > span {
  overflow: hidden;
  color: #d4d4d6;
  text-overflow: ellipsis;
  white-space: pre;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mx-ed-ln[data-on] > span {
  opacity: 1;
}

.mx-ed-ln[data-cur] {
  background: rgb(255 255 255 / 0.04);
}

.mx-ed-ln[data-cur] > i {
  color: #a1a1a8;
}

/* The caret shows on the current line even before its words are in. */
.mx-ed-ln[data-cur] > span {
  opacity: 1;
}

.mx-caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  vertical-align: -2px;
  background: #a1a1a8;
}

.mx-ed [data-k] {
  color: #c792ea;
}

.mx-ed [data-s] {
  color: #8ec5ff;
}

.mx-ed [data-v] {
  color: #d6a3f5;
}

.mx-ed [data-p] {
  color: #6c6c72;
}

/* System */
/* ---- System: one part at a time under a row of labels (5 Nov) ---- */

.mx-sys {
  place-items: stretch;
}

.mx-sys-tabs {
  position: absolute;
  top: 16px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
}

.mx-sys-tabs span {
  padding: 2px 8px;
  border-radius: 6px;
  color: #8d8c95;
  font: 11px/16px ui-monospace, "SF Mono", Menlo, monospace;
  transition: color 0.2s ease, background 0.2s ease;
}

.mx-sys-tabs span[data-on] {
  background: #232327;
  color: #f1f1f2;
}

.mx-sys-stage {
  position: absolute;
  inset: 0;
}

.mx-sys-part {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 48px 24px 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mx-sys-part[data-on] {
  opacity: 1;
}

/* Each part's items come in one by one, as the swatches did. */
.mx-swatches > div,
.mx-sys-type > div,
.mx-sys-space > div,
.mx-sys-radius > div,
.mx-sys-json > div {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mx-swatches > div[data-on],
.mx-sys-type > div[data-on],
.mx-sys-space > div[data-on],
.mx-sys-radius > div[data-on],
.mx-sys-json > div[data-on] {
  opacity: 1;
  transform: none;
}

.mx-swatches {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  gap: 12px;
}

.mx-swatches i {
  display: block;
  height: 56px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #333333;
}

.mx-swatches u {
  display: block;
  height: 2px;
  margin-top: 6px;
  background: #3a3a3a;
}

.mx-swatches s {
  display: block;
  height: 100%;
  background: var(--brand);
  text-decoration: none;
}

.mx-swatches small,
.mx-sys-type small,
.mx-sys-space small,
.mx-sys-radius small {
  display: block;
  margin-top: 4px;
  color: #a1a1a6;
  font: 11px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
}

.mx-sys-type {
  display: grid;
  gap: 12px;
  width: 100%;
}

.mx-sys-type > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #1f1f22;
}

.mx-sys-type b {
  color: #f1f1f2;
  font-family: var(--display);
  line-height: 1.1;
  white-space: nowrap;
}

.mx-sys-type small,
.mx-sys-space small {
  margin-top: 0;
}

.mx-sys-space {
  display: grid;
  gap: 8px;
  width: 100%;
}

.mx-sys-space > div {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 12px;
}

.mx-sys-space em {
  display: block;
  height: 12px;
  border-radius: 2px;
  background: var(--brand);
}

.mx-sys-radius {
  display: grid;
  grid-template-columns: repeat(4, 56px);
  gap: 12px;
  text-align: center;
}

.mx-sys-radius i {
  display: block;
  width: 56px;
  height: 56px;
  border: 2px solid var(--brand);
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.mx-sys-json {
  width: 100%;
  color: #a1a1a6;
  font: 11px/20px ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre;
}

.mx-sys-json b {
  color: #f1f1f2;
  font-weight: 400;
}

.mx-sys-json em {
  color: var(--brand);
  font-style: normal;
}

/* ---- handoff ---- */

.h-handoff {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 64px;
}

.h-handoff-copy {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.h-note {
  color: var(--ink-faint);
  font-size: 14px;
}

/* The tabs above the window: the agents section's own, left-aligned */
.h-handoff-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.h-handoff-tabs {
  margin-inline: 0;
}

.h-handoff-ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One height for every tab, the bottom fading out, so switching never moves the page. */
.h-code-body {
  height: 280px;
  overflow: hidden;
  mask-image: linear-gradient(#000 65%, transparent);
}

.h-code-body > [role="tabpanel"],
.h-handoff-window pre {
  height: 100%;
}

.h-handoff-window pre {
  padding-left: 0;
}

/* The window as a code editor: a gutter of line numbers beside each line */
.h-code-ln {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  opacity: 0;
  translate: 0 4px;
  transition: opacity 0.2s ease, translate 0.2s ease;
}

.h-code-ln[data-on] {
  opacity: 1;
  translate: 0 0;
}

.h-code-ln > i {
  padding-right: 16px;
  color: #4a4a4f;
  font-style: normal;
  text-align: right;
  user-select: none;
}

/* ---- steps ---- */

.h-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.h-step {
  display: grid;
  align-content: start;
  height: 100%;
  padding: 8px;
}

.h-step-txt {
  display: grid;
  gap: 8px;
  padding: 20px 16px 16px;
}

.h-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.h-step h3 {
  margin: 0;
}

.h-step p {
  margin: 0;
}

.h-step-n {
  display: grid;
  flex: none;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.06);
  color: var(--ink);
  font: 600 12px/1 var(--mono);
}

/* ---- the steps' pictures (5 Nov): Chrome with Xakto on, the card measured, Claude Code applying it ---- */

.st-pic {
  position: relative;
  display: grid;
  place-items: center;
  height: 220px;
  overflow: hidden;
  padding: 24px;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 35%, #17171a, #0b0b0c 75%);
  color: #f1f1f2;
  font: 400 12px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.st-pointer {
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.6));
  pointer-events: none;
}

.st-pointer path {
  fill: #ffffff;
  stroke: #000000;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

/* 1 · a Chrome window, dark */
.st-pic-tab {
  place-items: start center;
  padding: 24px 16px 0;
}

.st-cw {
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: #1f1f21;
  box-shadow: inset 0 0 0 1px #2c2c2e, 0 24px 48px -24px #000;
  font: 400 11px/1 ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.st-cw-strip {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
  padding: 0 8px;
  background: #121214;
}

.st-cw-lights {
  display: flex;
  align-self: center;
  gap: 6px;
  margin-right: 8px;
}

.st-cw-lights i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a3a3d;
}

.st-cw-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 104px;
  height: 26px;
  overflow: hidden;
  padding: 0 8px;
  border-radius: 8px 8px 0 0;
  color: #8e8e93;
  white-space: nowrap;
}

.st-cw-tab[data-on] {
  background: #1f1f21;
  color: #e6e6e8;
}

.st-x {
  margin-left: auto;
  color: #6c6c72;
  font-size: 12px;
}

.st-fav {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #e6e6e8;
}

.st-fav[data-doc] {
  background: #4a4a4f;
}

.st-cw-plus {
  align-self: center;
  margin-left: 4px;
  color: #8e8e93;
  font-size: 14px;
}

.st-cw-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 8px;
  border-bottom: 1px solid #2a2a2c;
}

.st-ic {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #a1a1a8;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st-ic[data-off] {
  stroke: #4a4a4f;
}

.st-cw-url {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 26px;
  overflow: hidden;
  padding: 0 12px;
  border-radius: 999px;
  background: #2a2a2c;
  color: #e6e6e8;
  white-space: nowrap;
}

.st-cw-url svg {
  flex: none;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #8e8e93;
  stroke-width: 1.4;
}

.st-cw-ext {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  transition: background 0.2s ease, scale 0.12s ease;
}

.st-cw-ext img {
  width: 14px;
  height: 14px;
  filter: grayscale(1) brightness(0.8);
  transition: filter 0.2s ease;
}

.st-cw-ext[data-on] {
  background: #333336;
}

.st-cw-ext[data-on] img {
  filter: none;
}

.st-cw-ext[data-down] {
  scale: 0.9;
}

/* The pointer comes from the page up to the icon. */
.st-cw-ext .st-pointer {
  top: 12px;
  left: 12px;
  transform: translate(-80px, 72px);
  transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.st-cw[data-frame="1"] .st-pointer,
.st-cw[data-frame="2"] .st-pointer,
.st-cw[data-frame="3"] .st-pointer {
  transform: none;
}

.st-cw-me {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4a4a4f;
  color: #f1f1f2;
  font-size: 11px;
  font-weight: 600;
}

.st-cw-page {
  position: relative;
  display: flex;
  gap: 12px;
  height: 128px;
  padding: 12px;
  background: #0f0f10;
}

.st-cw-side {
  display: grid;
  align-content: start;
  gap: 8px;
  width: 48px;
}

.st-cw-side i {
  height: 6px;
  border-radius: 3px;
  background: #222224;
}

.st-cw-main {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 8px;
}

.st-cw-main > b {
  width: 40%;
  height: 8px;
  border-radius: 4px;
  background: #2c2c2e;
}

.st-cw-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.st-cw-cards i {
  height: 28px;
  border-radius: 6px;
  background: #161617;
  box-shadow: inset 0 0 0 1px #222224;
}

.st-cw-rows {
  display: grid;
  gap: 6px;
}

.st-cw-rows i {
  height: 12px;
  border-radius: 4px;
  background: #161617;
}

/* Xakto's bar, up on the page once it is on */
.st-cw-xbar {
  position: absolute;
  bottom: 12px;
  left: 50%;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: #2a2a2a;
  box-shadow: 0 12px 24px -8px #000, inset 0 0 0 1px #373737;
  opacity: 0;
  translate: -50% 12px;
  transition: opacity 0.3s ease, translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.st-cw-xbar[data-on] {
  opacity: 1;
  translate: -50% 0;
}

.st-cw-xbar i {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #3a3a3c;
}

.st-cw-xbar i[data-on] {
  background: #ff3200;
}

/* 2 · the contract card, measured and checked */
.st-ctc {
  position: relative;
  display: grid;
  gap: 8px;
  width: 220px;
  border-radius: 12px;
  background: #161617;
  box-shadow: inset 0 0 0 1px #262628;
  transition: padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.st-ctc small {
  color: #8e8e93;
  font-size: 12px;
}

.st-ctc-amt {
  font-size: 20px;
  font-weight: 600;
}

.st-ctc-btn {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 8px;
  background: #f1f1f2;
  color: #111111;
  font-weight: 600;
}

/* The padding, in the ruler's red */
.st-ctc-pad {
  position: absolute;
  border-radius: 4px;
  outline: 1px dashed #ff3200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, inset 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.st-ctc-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  padding: 2px 6px;
  border-radius: 4px;
  background: #ff3200;
  color: #ffffff;
  font: 600 11px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 0;
  transition: opacity 0.25s ease;
}

.st-ctc-pad[data-on],
.st-ctc-tag[data-on] {
  opacity: 1;
}

.st-pin {
  position: absolute;
  top: 20px;
  right: -9px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff1a8c;
  box-shadow: 0 0 0 3px #1c1c1e;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.st-pin[data-kind="a11y"] {
  top: auto;
  bottom: 20px;
  background: #00a693;
  transition-delay: 0.12s;
}

.st-pin[data-on] {
  transform: scale(1);
}

.st-pin svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.st-pin circle {
  fill: #ffffff;
  stroke: none;
}

/* 3 · Claude Code, applying the changes */
.st-term {
  width: 290px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #0e0e10;
  box-shadow: inset 0 0 0 1px #262628, 0 24px 48px -24px #000;
  font: 400 11px/18px var(--mono);
}

.st-term-h {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid #222224;
  color: #8e8e93;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.st-term-h i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a3a3d;
}

.st-term-h span {
  margin-left: 8px;
}

.st-term-b {
  min-height: 160px;
  padding: 8px 12px 12px;
  color: #d4d4d6;
}

.st-term-b > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.st-term-b > div[data-on] {
  opacity: 1;
}

.st-term-b [data-u] {
  color: #f1f1f2;
}

.st-term-b [data-d] {
  color: #6c6c72;
}

.st-term-b [data-ok] {
  color: #7fd1a8;
}

.st-term-b [data-r] {
  color: #ff7a59;
}

.st-caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  vertical-align: -2px;
  background: #a1a1a8;
}

/* ---- privacy ---- */

.h-privacy-head {
  display: grid;
  gap: 16px;
  max-width: 640px;
  margin-bottom: 40px;
}

/* One box for the promises and the route (5 Nov), in the same plate and ground as the code window: the grid on
   the left, the diagram in a cell on the right */
.h-privacy-box {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 16px;
  background: #0e0e10;
  box-shadow: inset 0 0 0 1px var(--hair);
}

.h-privacy-route {
  display: grid;
  place-items: center;
  padding: 32px;
}

/* The promises as a spec grid (5 Nov): 2×2, every cell the same size, hairlines between; in each an icon and its
   state read out on the top row, then the promise and its line. */
.h-promises {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.h-promises li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  align-items: center;
  gap: 4px 12px;
  padding: 20px;
  box-shadow: 1px 1px 0 var(--hair);
}

.h-promise-ico {
  display: grid;
  margin-bottom: 12px;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--ink);
}

.h-promise-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.h-promise-state {
  display: inline-flex;
  align-self: start;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--ink);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.h-promise-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--brand);
}

.h-promises b {
  grid-column: 1 / -1;
  font-weight: 600;
}

.h-promise-text {
  grid-column: 1 / -1;
  align-self: start;
  color: var(--ink-soft);
  font-size: 14px;
}

@media (max-width: 760px) {
  .h-promises {
    grid-template-columns: minmax(0, 1fr);
  }

  /* stacked: the grid, then the route under it */
  .h-privacy-box {
    grid-template-columns: minmax(0, 1fr);
  }

  .h-privacy-route {
    padding: 24px 16px;
  }
}

/* The route the data takes (5 Nov): all on your computer, pulses both ways, the way to a server of ours cut. */
.h-route {
  justify-self: center;
  width: 100%;
  max-width: 440px;
  height: auto;
  overflow: visible;
  font-family: var(--text);
}

.h-route text {
  fill: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.h-route .h-route-sub,
.h-route-agent text {
  fill: var(--ink-faint);
  font-size: 12px;
  font-weight: 400;
}

.h-route-agent text {
  text-anchor: middle;
}

.h-route-wires path,
.h-route-pulse path,
.h-route-cut {
  fill: none;
  stroke-linecap: round;
}

.h-route-wires path {
  stroke: var(--line-strong);
  stroke-width: 1.5;
}

.h-route-pulse path {
  stroke: var(--brand);
  stroke-width: 2;
  stroke-dasharray: 24 400;
  stroke-dashoffset: 424;
  animation: h-route-pulse 2.4s linear infinite;
}

.h-route-pulse[data-back] path {
  stroke: var(--ink);
  opacity: 0.7;
}

@keyframes h-route-pulse {
  to {
    stroke-dashoffset: 0;
  }
}

.h-route .h-route-wire-label {
  fill: var(--ink-faint);
  font: 500 11px/1 var(--mono);
}

.h-route-cut {
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
}

.h-route-x circle {
  fill: var(--canvas);
  stroke: var(--brand);
}

.h-route-x path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.h-route-server rect {
  fill: none;
  stroke: var(--line-strong);
  stroke-dasharray: 3 4;
}

.h-route .h-route-server text {
  fill: var(--ink-faint);
  font-size: 12px;
  font-weight: 400;
  text-anchor: middle;
  text-decoration: line-through;
}

.h-route-node > rect:first-child,
.h-route-agent circle {
  fill: var(--card-up);
  stroke: var(--hair-strong);
}

.h-route-win {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.5;
}

.h-route-ico,
.h-route-agent use {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .h-route-pulse {
    display: none;
  }
}

/* ---- FAQ ---- */

.h-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: var(--space-columns);
}

.h-faq-head {
  display: grid;
  gap: 16px;
}

/* The questions as open rows (5 Nov): no boxes, a hairline between each, the + turning to × when open */
.h-faq-list {
  display: grid;
  border-top: 1px solid var(--hair-strong);
}

.h-q {
  border-bottom: 1px solid var(--hair-strong);
}

.h-q h3 {
  font-size: 18px;
  letter-spacing: 0;
}

.h-q button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 18px/1.4 var(--text);
  text-align: left;
  cursor: pointer;
}

.h-q button svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ink-faint);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), color 200ms ease;
}

.h-q button:hover svg,
.h-q[data-open] button svg {
  color: var(--ink);
}

.h-q[data-open] button svg {
  transform: rotate(45deg);
}

.h-a {
  overflow: hidden;
}

.h-a p {
  max-width: 40em;
  padding: 0 48px 24px 0;
  color: var(--ink-soft);
}

/* ---- closing ---- */

.h-closing-plate {
  position: relative;
  overflow: hidden;
}

/* The close's red light, as the hero's (5 Nov): behind the plate, not in it, brightest at the plate's top edge and
   spilling out round it. */
.h-closing > .wrap {
  position: relative;
}

.h-closing > .wrap::before {
  content: "";
  position: absolute;
  inset: -200px 0 -80px;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 230px at 50% 200px, rgb(255 50 0 / 0.22), transparent 72%),
    radial-gradient(ellipse 80% 360px at 50% 220px, rgb(255 50 0 / 0.07), transparent 80%);
  pointer-events: none;
}

/* The close (5 Nov): the words on the left, Xakto's mark large on the right, its edges lit by a passing light */
.h-closing-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 32px;
  padding: 80px 64px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  /* a soft white light from the top left corner */
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, rgb(255 255 255 / 0.05), transparent 70%),
    #08080a;
  box-shadow: inset 0 0 0 1px var(--hair);
}

/* a faint grid inside the box, fading out before its edges */
.h-closing-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-position: center;
  background-size: 12px 12px;
  mask-image: radial-gradient(ellipse 70% 80% at 60% 50%, #000 25%, transparent 80%);
  pointer-events: none;
}

.h-closing-copy {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.h-closing-copy h2 {
  max-width: 14ch;
}

.h-closing-copy .actions {
  margin-top: 16px;
}

.h-closing-mark {
  justify-self: end;
  width: 100%;
  max-width: 320px;
  height: auto;
  overflow: visible;
  /* the mark fades out toward its foot, face and lit edges alike */
  mask-image: linear-gradient(#000 45%, transparent 95%);
}

.h-closing-mark path {
  fill: none;
  stroke-linejoin: round;
}

/* the mark's face: a step darker than the box's #08080a ground, no edge of its own */
.h-closing-mark .h-mark-body {
  fill: #040405;
  stroke: none;
}

/* lit: a white line, and the red shine round it */
.h-closing-mark .h-mark-glow {
  stroke: var(--brand);
  stroke-width: 7;
  filter: blur(6px);
}

.h-closing-mark .h-mark-edge {
  stroke: #ffffff;
  stroke-width: 1.5;
}

/* the light, unseen itself: across the top, down through the middle, out at the bottom, and back */
.h-mark-light {
  transform-box: view-box;
  animation: h-mark-light 8s ease-in-out infinite alternate;
}

@keyframes h-mark-light {
  0% {
    transform: translate(0px, 30px);
  }

  35% {
    transform: translate(230px, 10px);
  }

  70% {
    transform: translate(60px, 250px);
  }

  100% {
    transform: translate(290px, 270px);
  }
}

@media (max-width: 760px) {
  .h-closing-inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 48px 24px;
    background:
      radial-gradient(ellipse 90% 60% at 0% 0%, rgb(255 255 255 / 0.05), transparent 70%),
      #08080a;
  }

  .h-closing-mark {
    justify-self: center;
    max-width: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .h-mark-light {
    animation: none;
    transform: translate(90px, 70px);
  }
}

/* ---- narrow ---- */

@media (max-width: 1099px) {
  .mx-edit,
  .mx-inspect {
    grid-column: span 12;
  }

  .mx-check,
  .mx-clone,
  .mx-system {
    grid-column: span 6;
  }

  .mx-system {
    grid-column: span 12;
  }

}

@media (max-width: 760px) {
  .h-split-head,
  .h-handoff,
  .h-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .h-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .mx-grid > * {
    grid-column: span 12;
  }

  .mx-pic > .mx-edit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    transform: translate(-50%, -50%) scale(0.58);
  }

  .mx-edit .mx-pic {
    height: 240px;
  }

  .mx-pic > .mx-row {
    transform: scale(0.78);
  }

  .mx-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .h-plate {
    padding: 6px;
    border-radius: 24px;
  }

  /* On a phone the page alone: the canvas shifted past the rail and the tool bar, scaled to 896 wide. */
  .hx {
    aspect-ratio: 896 / 580;
    border-radius: 18px;
  }

  .hx-canvas {
    left: calc(-296px * var(--hx-k, 0.38));
  }

  .hx-dock {
    top: 476px;
  }

  .h-agent-tab {
    padding: 0 12px;
  }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* ---------- the changelog (5 Nov): a release a row, its version beside it, a line a change ---------- */

.cl {
  margin-top: 40px;
}

.cl-entry {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}

.cl-entry:first-child {
  padding-top: 0;
  border-top: 0;
}

.cl-when {
  position: sticky;
  top: 96px;
  align-self: start;
  display: grid;
  gap: 6px;
}

.cl-when b {
  color: var(--ink);
  font: 600 18px/1.2 var(--text);
}

.cl-when span {
  color: var(--ink-faint);
  font-size: 14px;
}

.cl-when i {
  justify-self: start;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  color: var(--ink-soft);
  font: 500 12px/20px var(--text);
  font-style: normal;
}

.docs-body .cl-body h2 {
  margin: 0 0 8px;
  padding-top: 0;
  border-top: 0;
  font-size: 24px;
}

.cl-body > p {
  margin: 0 0 4px;
  color: var(--ink-soft);
}

.cl-group {
  margin-top: 24px;
}

.docs-body .cl-group h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 16px;
}

.cl-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-list li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.cl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-faint);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cl-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink-faint);
}

/* New is marked in the brand; Fixed is a ring */
.cl-tag[data-k="new"]::before {
  background: var(--brand);
}

.cl-tag[data-k="fixed"]::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink-faint);
}

@media (max-width: 760px) {
  .cl-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .cl-when {
    position: static;
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: 12px;
  }

  .cl-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ---------- docs search (5 Nov): a field at the top of the page list, ⌘K or /, a window over the page ---------- */

.ds-open {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  margin-bottom: 12px;
  padding: 0 8px 0 12px;
  border: 0;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
  color: var(--ink-faint);
  font: 400 14px var(--text);
  cursor: pointer;
}

.ds-open:hover {
  background: rgb(255 255 255 / 0.08);
  color: var(--ink-soft);
}

.ds-open svg,
.ds-field svg,
.ds-open-small svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.ds-open kbd,
.ds-foot kbd,
.ds-field button {
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.06);
  color: var(--ink-faint);
  font: 500 12px var(--text);
}

.ds-open kbd {
  margin-left: auto;
}

.ds-field button {
  cursor: pointer;
}

/* the small button beside the arrows is for a narrow screen, where the page list runs across the top */
.ds-open-small {
  display: none;
  border: 0;
  cursor: pointer;
}

.ds-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 96px 16px 16px;
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(4px);
}

.ds-scrim[hidden] {
  display: none;
}

.ds {
  width: 100%;
  max-width: 640px;
  overflow: hidden;
  border-radius: 16px;
  background: #141417;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 40px 80px -24px #000;
}

.ds-field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
}

.ds-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 16px var(--text);
  outline: none;
}

.ds-field input::-webkit-search-cancel-button {
  display: none;
}

.ds-list {
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 8px;
}

.ds-group {
  padding: 12px 12px 4px;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 500;
}

.ds-hit {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink-soft);
  text-decoration: none;
}

.ds-hit b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.ds-hit span {
  overflow: hidden;
  color: var(--ink-faint);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-hit mark {
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-underline-offset: 3px;
}

.ds-hit[aria-selected="true"],
.ds-hit:hover {
  background: rgb(255 255 255 / 0.07);
}

.ds-empty {
  padding: 32px 16px;
  color: var(--ink-faint);
  font-size: 14px;
  text-align: center;
}

.ds-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 12px;
}

.ds-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 760px) {
  .docs-side .ds-open {
    display: none;
  }

  .ds-open-small {
    display: grid;
  }

  .ds-scrim {
    padding-top: 16px;
  }
}

@media (hover: none) {
  .ds-foot {
    display: none;
  }
}