/* Bundled from primitive, vendored in agent-gossip (packages/web/styles/primitive),
   copied on 2026-10-07. It is one file so that the server fingerprint works. */

/* tokens */
/* Tokens. */
:root {
  /* font size is the basis of all other measurements */
  --fontSize: 16px;

  /* line height is the basis for vertical spacing */
  --lineHeight: calc(var(--fontSize) * 1.5);

  /* horizontal and vertical spacing basis */
  --baseline: calc(var(--lineHeight) / 2);

  /* spacing below blocks */
  --blockSpacingBottom: var(--lineHeight);

  /* grid spacing */
  --columnGap: var(--lineHeight);
  --rowGap: var(--lineHeight);
  --pageMargin: calc(var(--lineHeight) * 2);

  /* fonts */
  --sansFont: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --monoFont: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type sizes */
  /* fluid: 3rem and 2rem at desktop, shrinking on phones without a breakpoint */
  --h1-size: clamp(2.25rem, 1.5rem + 3vw, 3rem);
  --h2-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --h3-size: 1.25rem;
  --h4-size: 1rem;
  --small-size: 0.8125rem;

  --hrThickness: 2px;

  /* corner radius */
  --radius: calc(var(--baseline) / 4);

  /* palette */
  --black: #000;
  --gray-1: #2a2a2a;
  --gray-2: #5a5a5a;
  --gray-3: #7e7e7e;
  --gray-4: #999;
  --gray-5: #b4b4b4;
  --gray-6: #d0d0d0;
  --white: #fff;
  --accent: #ff764d;

  /* color roles; styles use only these */
  --background-color: var(--gray-4);
  --foreground-color: var(--black);
  --muted-color: var(--gray-1);
  --rule-color: var(--black);
  --accent-color: var(--accent);
  --accent-contrast-color: var(--black); /* text on accent */
  --focus-color: var(--white);

  --button-background: var(--black);
  --button-color: var(--white);
  --button-hover-background: var(--gray-1);
  --button-active-background: var(--gray-2);
  --button-secondary-background: var(--gray-6);
  --button-secondary-color: var(--black);
  --button-secondary-hover-background: var(--white);
  --button-secondary-active-background: var(--gray-5);
  --disabled-background: var(--gray-3);
  --disabled-color: var(--gray-2);

  --field-background: var(--gray-6);
  --field-color: var(--black);
  --placeholder-color: var(--gray-2);
  --line-color: var(--gray-2); /* thin rules: table rows, field outline */
}

@media only screen and (max-width: 768px) {
  :root {
    --pageMargin: var(--lineHeight);
  }
}

/* base */
/* reset */
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

/* document */
html {
  font-family: var(--sansFont);
  font-size: var(--fontSize);
  line-height: var(--lineHeight);
  background: var(--background-color);
  color: var(--foreground-color);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  caret-color: var(--foreground-color);
}

/* Selected text swaps the two colors: the font color becomes the background. */
::selection {
  background: var(--foreground-color);
  color: var(--background-color);
}

/* The logo: a caret and a yeti on a slightly lighter box. Each glyph has a box of exactly 1em, so the logo is
   1.913em wide whatever the advance width of the emoji font is. The paddings and the caret offset are tuned so the
   ink of the caret has the same gap (.23em) above, below and to the left, and the ink of the yeti has it to the
   right. */
.logo-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding: .299em .088em .299em .225em;
  background: var(--ts-gray-1);
  line-height: 1;
  white-space: nowrap;
}
.logo-inline > span {
  display: inline-block;
  width: 1em;
  text-align: center;
  font-size: .8em;
  line-height: 1;
}
.logo-inline > .c {
  color: var(--foreground-color);
  transform: translateY(-.083em);
}
body {
  padding: var(--pageMargin);
  padding-bottom: calc(var(--pageMargin) + var(--lineHeight));
}

/* grid */
/*
Grid: 12 columns, nested grids included.

  <div class="p-grid">
    <div data-span="2" data-span-s="row">…</div>
  </div>

data-span: "2" (span 2), "2-5" (columns 2 to 5), "2+3" (from 2, span 3),
"2.." (from 2 to the row end), "row" (the whole row). data-span-s applies at
widths up to 768px, data-span-l from 1600px.
*/
.p-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--columnGap);
  row-gap: var(--rowGap);
}

.p-grid > [data-span^="1"] { --start: 1 }
.p-grid > [data-span^="2"] { --start: 2 }
.p-grid > [data-span^="3"] { --start: 3 }
.p-grid > [data-span^="4"] { --start: 4 }
.p-grid > [data-span^="5"] { --start: 5 }
.p-grid > [data-span^="6"] { --start: 6 }
.p-grid > [data-span^="7"] { --start: 7 }
.p-grid > [data-span^="8"] { --start: 8 }
.p-grid > [data-span^="9"] { --start: 9 }
.p-grid > [data-span^="10"] { --start: 10 }
.p-grid > [data-span^="11"] { --start: 11 }
.p-grid > [data-span^="12"] { --start: 12 }

.p-grid > [data-span="1"], .p-grid > [data-span$="+1"], .p-grid > [data-span$="-1"] { --size: 1; --end: 2 }
.p-grid > [data-span="2"], .p-grid > [data-span$="+2"], .p-grid > [data-span$="-2"] { --size: 2; --end: 3 }
.p-grid > [data-span="3"], .p-grid > [data-span$="+3"], .p-grid > [data-span$="-3"] { --size: 3; --end: 4 }
.p-grid > [data-span="4"], .p-grid > [data-span$="+4"], .p-grid > [data-span$="-4"] { --size: 4; --end: 5 }
.p-grid > [data-span="5"], .p-grid > [data-span$="+5"], .p-grid > [data-span$="-5"] { --size: 5; --end: 6 }
.p-grid > [data-span="6"], .p-grid > [data-span$="+6"], .p-grid > [data-span$="-6"] { --size: 6; --end: 7 }
.p-grid > [data-span="7"], .p-grid > [data-span$="+7"], .p-grid > [data-span$="-7"] { --size: 7; --end: 8 }
.p-grid > [data-span="8"], .p-grid > [data-span$="+8"], .p-grid > [data-span$="-8"] { --size: 8; --end: 9 }
.p-grid > [data-span="9"], .p-grid > [data-span$="+9"], .p-grid > [data-span$="-9"] { --size: 9; --end: 10 }
.p-grid > [data-span="10"], .p-grid > [data-span$="+10"], .p-grid > [data-span$="-10"] { --size: 10; --end: 11 }
.p-grid > [data-span="11"], .p-grid > [data-span$="+11"], .p-grid > [data-span$="-11"] { --size: 11; --end: 12 }
.p-grid > [data-span="12"], .p-grid > [data-span$="+12"], .p-grid > [data-span$="-12"] { --size: 12; --end: 13 }

.p-grid > [data-span] { grid-column: auto / span var(--size) }
.p-grid > [data-span*="+"] { grid-column: var(--start) / span var(--size) }
.p-grid > [data-span*="-"] { grid-column: var(--start) / var(--end) }
.p-grid > [data-span$=".."] { grid-column: var(--start) / -1 }
.p-grid > [data-span="row"] { grid-column: 1 / -1 }

@media only screen and (max-width: 768px) {
  .p-grid > [data-span-s^="1"] { --start: 1 }
  .p-grid > [data-span-s^="2"] { --start: 2 }
  .p-grid > [data-span-s^="3"] { --start: 3 }
  .p-grid > [data-span-s^="4"] { --start: 4 }
  .p-grid > [data-span-s^="5"] { --start: 5 }
  .p-grid > [data-span-s^="6"] { --start: 6 }
  .p-grid > [data-span-s^="7"] { --start: 7 }
  .p-grid > [data-span-s^="8"] { --start: 8 }
  .p-grid > [data-span-s^="9"] { --start: 9 }
  .p-grid > [data-span-s^="10"] { --start: 10 }
  .p-grid > [data-span-s^="11"] { --start: 11 }
  .p-grid > [data-span-s^="12"] { --start: 12 }

  .p-grid > [data-span-s="1"], .p-grid > [data-span-s$="+1"], .p-grid > [data-span-s$="-1"] { --size: 1; --end: 2 }
  .p-grid > [data-span-s="2"], .p-grid > [data-span-s$="+2"], .p-grid > [data-span-s$="-2"] { --size: 2; --end: 3 }
  .p-grid > [data-span-s="3"], .p-grid > [data-span-s$="+3"], .p-grid > [data-span-s$="-3"] { --size: 3; --end: 4 }
  .p-grid > [data-span-s="4"], .p-grid > [data-span-s$="+4"], .p-grid > [data-span-s$="-4"] { --size: 4; --end: 5 }
  .p-grid > [data-span-s="5"], .p-grid > [data-span-s$="+5"], .p-grid > [data-span-s$="-5"] { --size: 5; --end: 6 }
  .p-grid > [data-span-s="6"], .p-grid > [data-span-s$="+6"], .p-grid > [data-span-s$="-6"] { --size: 6; --end: 7 }
  .p-grid > [data-span-s="7"], .p-grid > [data-span-s$="+7"], .p-grid > [data-span-s$="-7"] { --size: 7; --end: 8 }
  .p-grid > [data-span-s="8"], .p-grid > [data-span-s$="+8"], .p-grid > [data-span-s$="-8"] { --size: 8; --end: 9 }
  .p-grid > [data-span-s="9"], .p-grid > [data-span-s$="+9"], .p-grid > [data-span-s$="-9"] { --size: 9; --end: 10 }
  .p-grid > [data-span-s="10"], .p-grid > [data-span-s$="+10"], .p-grid > [data-span-s$="-10"] { --size: 10; --end: 11 }
  .p-grid > [data-span-s="11"], .p-grid > [data-span-s$="+11"], .p-grid > [data-span-s$="-11"] { --size: 11; --end: 12 }
  .p-grid > [data-span-s="12"], .p-grid > [data-span-s$="+12"], .p-grid > [data-span-s$="-12"] { --size: 12; --end: 13 }

  .p-grid > [data-span-s] { grid-column: auto / span var(--size) }
  .p-grid > [data-span-s*="+"] { grid-column: var(--start) / span var(--size) }
  .p-grid > [data-span-s*="-"] { grid-column: var(--start) / var(--end) }
  .p-grid > [data-span-s$=".."] { grid-column: var(--start) / -1 }
  .p-grid > [data-span-s="row"] { grid-column: 1 / -1 }
}

@media only screen and (min-width: 1600px) {
  .p-grid > [data-span-l^="1"] { --start: 1 }
  .p-grid > [data-span-l^="2"] { --start: 2 }
  .p-grid > [data-span-l^="3"] { --start: 3 }
  .p-grid > [data-span-l^="4"] { --start: 4 }
  .p-grid > [data-span-l^="5"] { --start: 5 }
  .p-grid > [data-span-l^="6"] { --start: 6 }
  .p-grid > [data-span-l^="7"] { --start: 7 }
  .p-grid > [data-span-l^="8"] { --start: 8 }
  .p-grid > [data-span-l^="9"] { --start: 9 }
  .p-grid > [data-span-l^="10"] { --start: 10 }
  .p-grid > [data-span-l^="11"] { --start: 11 }
  .p-grid > [data-span-l^="12"] { --start: 12 }

  .p-grid > [data-span-l="1"], .p-grid > [data-span-l$="+1"], .p-grid > [data-span-l$="-1"] { --size: 1; --end: 2 }
  .p-grid > [data-span-l="2"], .p-grid > [data-span-l$="+2"], .p-grid > [data-span-l$="-2"] { --size: 2; --end: 3 }
  .p-grid > [data-span-l="3"], .p-grid > [data-span-l$="+3"], .p-grid > [data-span-l$="-3"] { --size: 3; --end: 4 }
  .p-grid > [data-span-l="4"], .p-grid > [data-span-l$="+4"], .p-grid > [data-span-l$="-4"] { --size: 4; --end: 5 }
  .p-grid > [data-span-l="5"], .p-grid > [data-span-l$="+5"], .p-grid > [data-span-l$="-5"] { --size: 5; --end: 6 }
  .p-grid > [data-span-l="6"], .p-grid > [data-span-l$="+6"], .p-grid > [data-span-l$="-6"] { --size: 6; --end: 7 }
  .p-grid > [data-span-l="7"], .p-grid > [data-span-l$="+7"], .p-grid > [data-span-l$="-7"] { --size: 7; --end: 8 }
  .p-grid > [data-span-l="8"], .p-grid > [data-span-l$="+8"], .p-grid > [data-span-l$="-8"] { --size: 8; --end: 9 }
  .p-grid > [data-span-l="9"], .p-grid > [data-span-l$="+9"], .p-grid > [data-span-l$="-9"] { --size: 9; --end: 10 }
  .p-grid > [data-span-l="10"], .p-grid > [data-span-l$="+10"], .p-grid > [data-span-l$="-10"] { --size: 10; --end: 11 }
  .p-grid > [data-span-l="11"], .p-grid > [data-span-l$="+11"], .p-grid > [data-span-l$="-11"] { --size: 11; --end: 12 }
  .p-grid > [data-span-l="12"], .p-grid > [data-span-l$="+12"], .p-grid > [data-span-l$="-12"] { --size: 12; --end: 13 }

  .p-grid > [data-span-l] { grid-column: auto / span var(--size) }
  .p-grid > [data-span-l*="+"] { grid-column: var(--start) / span var(--size) }
  .p-grid > [data-span-l*="-"] { grid-column: var(--start) / var(--end) }
  .p-grid > [data-span-l$=".."] { grid-column: var(--start) / -1 }
  .p-grid > [data-span-l="row"] { grid-column: 1 / -1 }
}

/* typography */
/* Typography. Every line-height and margin is a multiple of --baseline. */

/* block */
p, ul, ol, dl, pre, blockquote, figure, table, details, .p-grid, h3, h4 {
  margin-bottom: var(--blockSpacingBottom);
}
:last-child {
  margin-bottom: 0;
}

/* headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  text-wrap: balance;
}
h1 {
  font-size: var(--h1-size);
  line-height: calc(var(--lineHeight) * 2);
  letter-spacing: -0.03em;
  margin-bottom: var(--lineHeight);
}
h2 {
  font-size: var(--h2-size);
  line-height: calc(var(--baseline) * 3);
  letter-spacing: -0.02em;
  margin-bottom: var(--baseline);
}
h3 {
  font-size: var(--h3-size);
  letter-spacing: -0.01em;
}
h4 {
  font-size: var(--h4-size);
  margin-bottom: 0;
}
h5, h6 {
  font-size: var(--small-size);
}
h6 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* text */
p, li, dd, blockquote {
  max-width: 65ch;
  text-wrap: pretty;
}
b, strong {
  font-weight: 700;
}
i, em {
  font-style: italic;
}
small, figcaption {
  font-size: var(--small-size);
  color: var(--muted-color);
}
a {
  color: var(--ts-blue);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-skip-ink: auto;
}
h1 a {
  color: inherit;
}
a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* lists */
ul, ol {
  padding-left: var(--lineHeight);
}
li > ul, li > ol {
  margin-bottom: 0;
}

/* blockquote; the rule is an inset shadow */
blockquote {
  padding-left: var(--lineHeight);
  box-shadow: inset var(--hrThickness) 0 0 var(--rule-color);
}
blockquote footer {
  font-size: var(--small-size);
  color: var(--muted-color);
}

/* abbreviation */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* preformatted text */
code, pre, kbd {
  font-family: var(--monoFont);
  font-size: 0.9em;
}
pre {
  overflow-x: auto;
}
kbd {
  padding: 0 calc(var(--baseline) / 2);
  border-radius: var(--radius);
  background: var(--field-background);
  color: var(--field-color);
  box-shadow: inset 0 0 0 1px var(--line-color);
}

/* horizontal rule; takes one line, the rule sits on the line grid */
hr {
  border-top: var(--hrThickness) solid var(--rule-color);
  margin-bottom: calc(var(--lineHeight) - var(--hrThickness));
}
.p-grid > hr {
  grid-column: 1 / -1;
}

/* button */
/*
Button. Height is 3 baselines (1.5 lines); data-size="small" is 1 line.

  <button class="p-button" data-variant="outline" data-size="small" data-icon="→">…</button>

data-variant: "secondary", "accent", "outline". Default is primary.
<input type="submit|button|reset"> gets the primary look without a class.
*/
.p-button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: inline-block;
  padding: calc(var(--baseline) / 2) var(--lineHeight);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background: var(--button-background);
  color: var(--button-color);
}
.p-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  background: var(--button-hover-background);
  color: var(--button-color);
}
.p-button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
  background: var(--button-active-background);
}
.p-button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* variants */
.p-button[data-variant="secondary"] {
  background: var(--button-secondary-background);
  color: var(--button-secondary-color);
}
.p-button[data-variant="secondary"]:hover {
  background: var(--button-secondary-hover-background);
  color: var(--button-secondary-color);
}
.p-button[data-variant="secondary"]:active {
  background: var(--button-secondary-active-background);
}

.p-button[data-variant="accent"] {
  background: var(--accent-color);
  color: var(--accent-contrast-color);
}
.p-button[data-variant="accent"]:hover {
  background: color-mix(in srgb, var(--accent-color) 80%, var(--white));
  color: var(--accent-contrast-color);
}
.p-button[data-variant="accent"]:active {
  background: color-mix(in srgb, var(--accent-color) 85%, var(--black));
}

/* outline only; the line is an inset shadow, so the size stays the same */
.p-button[data-variant="outline"] {
  background: transparent;
  color: var(--foreground-color);
  box-shadow: inset 0 0 0 var(--hrThickness) var(--foreground-color);
}
.p-button[data-variant="outline"]:hover {
  background: var(--button-background);
  color: var(--button-color);
}
.p-button[data-variant="outline"]:active {
  background: var(--button-hover-background);
}

/* sizes */
.p-button[data-size="small"] {
  padding: 0 var(--baseline);
  border-radius: calc(var(--radius) * 2 / 3);
  font-size: var(--small-size);
}

/* icon on the right: one UTF-8 character, e.g. data-icon="→".
   U+FE0E keeps it as text where a platform would draw an emoji. */
.p-button[data-icon]::after {
  content: attr(data-icon) "\FE0E";
  margin-left: var(--baseline);
}
.p-button[data-size="small"][data-icon]::after {
  margin-left: calc(var(--baseline) / 2);
}

/* disabled */
.p-button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
.p-button[aria-disabled="true"] {
  background: var(--disabled-background);
  color: var(--disabled-color);
  cursor: not-allowed;
  pointer-events: none;
}
.p-button[data-variant="outline"]:disabled,
.p-button[data-variant="outline"][aria-disabled="true"] {
  background: transparent;
  box-shadow: inset 0 0 0 var(--hrThickness) var(--disabled-color);
}

/* forms */
/* Forms. Bare platform elements; fields are 3 baselines high, like buttons. */
label {
  display: block;
  font-weight: 700;
}
label:has(input[type="radio"], input[type="checkbox"]) {
  display: inline-block;
  margin-right: var(--lineHeight);
  font-weight: 400;
  cursor: pointer;
}

/* text fields */
input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="reset"],
          [type="range"], [type="file"], [type="color"], [type="image"], [type="hidden"]),
select,
textarea {
  display: block;
  width: 100%;
  height: calc(var(--baseline) * 3);
  padding: 0 var(--baseline);
  border-radius: var(--radius);
  background-color: var(--field-background);
  color: var(--field-color);
  /* the line is an inset shadow, so the height stays on the baseline */
  box-shadow: inset 0 0 0 1px var(--line-color);
  appearance: none;
  -webkit-appearance: none;
}
textarea {
  height: auto;
  padding: calc(var(--baseline) / 2) var(--baseline);
  resize: vertical;
}
::placeholder {
  color: var(--placeholder-color);
  opacity: 1;
}

/* select arrow, drawn with gradients in the text color */
select {
  padding-right: calc(var(--lineHeight) + var(--baseline));
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-size: 5px 5px;
  background-position:
    right calc(var(--baseline) + 5px) center,
    right var(--baseline) center;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* radio and checkbox stay native */
input[type="radio"],
input[type="checkbox"] {
  margin-right: calc(var(--baseline) / 2);
  accent-color: var(--foreground-color);
  vertical-align: middle;
}

/* focus recolors the field's own line instead of adding an outline */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--focus-color);
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--disabled-background);
  color: var(--disabled-color);
  cursor: not-allowed;
}

/* elements */
/* Table, details, progress. */

/* table; rows are 3 baselines high, rules are inset shadows */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
th, td {
  padding: calc(var(--baseline) / 2) var(--lineHeight) calc(var(--baseline) / 2) 0;
}
th {
  font-weight: 700;
}
thead th {
  box-shadow: inset 0 calc(var(--hrThickness) * -1) 0 var(--rule-color);
}
tbody td, tbody th {
  box-shadow: inset 0 -1px 0 var(--line-color);
}

/* details */
summary {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary::before {
  content: "+";
  display: inline-block;
  width: var(--lineHeight);
}
details[open] > summary::before {
  content: "−";
}
details > :not(summary) {
  margin-left: var(--lineHeight);
}

/* progress; 1 baseline high, half a baseline of space above and below */
progress {
  display: block;
  width: 100%;
  height: var(--baseline);
  margin: calc(var(--baseline) / 2) 0;
  border-radius: var(--radius);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--field-background);
}
progress::-webkit-progress-bar {
  background: transparent;
}
progress::-webkit-progress-value {
  background: var(--foreground-color);
}
progress::-moz-progress-bar {
  background: var(--foreground-color);
}

/* indeterminate: a band moves across the track */
progress:indeterminate {
  background-image: linear-gradient(var(--foreground-color), var(--foreground-color));
  background-size: 30% 100%;
  background-repeat: no-repeat;
  background-position: 35% 0;
}
progress:indeterminate::-moz-progress-bar {
  background: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  progress:indeterminate {
    animation: p-progress 1.5s linear infinite;
  }
}
@keyframes p-progress {
  from { background-position: -43% 0; }
  to { background-position: 143% 0; }
}

/* theme-times-square */
/*
Theme: Times Square (github.com/caiogondim/times-square), dark.
Use: <html data-theme="times-square">. Overrides roles only; the default theme stays as is.
*/
:root[data-theme="times-square"] {
  /* palette, from times-square src/colors.js */
  --ts-background: #2b2b2b;
  --ts-foreground: #b8b8b8;
  --ts-red: #eca4b2;
  --ts-yellow: #d9b264;
  --ts-green: #81c963;
  --ts-cyan: #69c7bc;
  --ts-blue: #89bdea;
  --ts-magenta: #dea2ea;
  --ts-white: #fefefe;
  --ts-comment: #757575;
  --ts-selection: #4b4b4b;
  --ts-gray-1: #414141;
  --ts-gray-2: #363636;
  --ts-gray-3: #2b2b2b;
  --ts-gray-4: #202020;
  --ts-gray-5: #161616;

  /* roles */
  --background-color: var(--ts-background);
  --foreground-color: var(--ts-foreground);
  --muted-color: var(--ts-comment);
  --rule-color: var(--ts-foreground);
  --accent-color: var(--ts-yellow);
  --accent-contrast-color: var(--ts-gray-5);
  --focus-color: var(--ts-white);

  --button-background: var(--ts-foreground);
  --button-color: var(--ts-gray-5);
  --button-hover-background: var(--ts-white);
  --button-active-background: var(--ts-comment);
  --button-secondary-background: var(--ts-gray-1);
  --button-secondary-color: var(--ts-foreground);
  --button-secondary-hover-background: var(--ts-selection);
  --button-secondary-active-background: var(--ts-gray-2);
  --disabled-background: var(--ts-gray-2);
  --disabled-color: var(--ts-comment);

  --field-background: var(--ts-gray-4);
  --field-color: var(--ts-foreground);
  --placeholder-color: var(--ts-comment);
  --line-color: var(--ts-gray-1);

  /* debug overlay, visible on the dark background */
  --debug-column: rgba(236, 164, 178, 0.14);
  --debug-cell: rgba(236, 164, 178, 0.9);
  --debug-line: rgba(137, 189, 234, 0.4);
  --debug-baseline: rgba(137, 189, 234, 0.14);
  --debug-margin: rgba(129, 201, 99, 0.9);
}