:root {
  /* Dark, but a long way off black: easier to read for hours and less severe
     for a visitor who did not come here for the aesthetic. */
  --bg: #17191f;
  --panel: #1f222a;
  --raise: #262a33;
  --line: #2d313b;
  --line-bright: #3d424f;
  --text: #e7e9ee;
  --dim: #9aa2b1;
  --accent: #7ea6f0;
  --ok: #7fb173;
  --warn: #d3ad57;
  --bad: #d97b62;
  /* One colour per section, so the front page reads apart at a glance. */
  --c-ai: #7ea6f0;
  --c-search: #b993f4;
  --c-tools: #6fcf9a;
  --c-links: #f0b45e;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.65 var(--sans);
  letter-spacing: 0.01em;
}

::selection {
  background: var(--text);
  color: var(--bg);
}

/* ---------- structure ---------- */

:root {
  --bar-h: 54px;
}

/* One row, always. The links and the language switch never wrap under the
   mark: on a narrow screen the links fold into a panel behind a single button
   instead, so nothing is ever pushed off the edge, in either language. */
.bar {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

.bar-in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--bar-h);
  margin: 0 auto;
  padding: 0 24px;
  /* The row is as wide as the reading column, but may grow past it when the
     labels are long (they are, in Russian) rather than overflow the screen. */
  width: fit-content;
  min-width: min(780px, 100%);
  max-width: 100%;
}

.mark {
  flex: none;
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
  /* Header links do not carry the document underline. */
  border-bottom: 0;
}

.bar nav {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  /* If the labels still cannot fit, the row scrolls sideways instead of
     spilling over the switcher; the scrollbar itself is not drawn. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 6px 2px;
  margin: -6px -2px;
}

.bar nav::-webkit-scrollbar {
  display: none;
}

.bar nav a {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  border-bottom: 0;
  /* Room for the current-page underline on every link, so the marked one
     does not sit a shade higher than its neighbours. */
  padding-bottom: 4px;
  transition: color 0.12s;
}

/* Icons belong to the folded list; the wide row stays plain text. */
.bar nav a .icon {
  display: none;
}

.bar nav a:hover {
  color: var(--text);
}

.bar nav a[aria-current] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.lang {
  flex: none;
}

/* The button that folds and unfolds the links. Hidden on wide screens. */
.menu-btn {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-right: -10px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--dim);
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.12s, background 0.12s;
}

.menu-btn:hover:not(:disabled),
.bar.open .menu-btn {
  color: var(--text);
  background: var(--raise);
  opacity: 1;
}

.menu-btn .icon {
  width: 20px;
  height: 20px;
}

.menu-btn [data-icon="x"],
.bar.open .menu-btn [data-icon="menu"] {
  display: none;
}

.bar.open .menu-btn [data-icon="x"] {
  display: inline-flex;
}

@media (max-width: 900px) {
  .bar-in {
    width: auto;
    min-width: 0;
    gap: 12px;
    padding: 0 12px 0 18px;
    /* The bar grows a second row for the section strip. */
    flex-wrap: wrap;
    height: auto;
  }
  .bar-in > .mark,
  .bar-in > .lang,
  .bar-in > .menu-btn {
    height: var(--bar-h);
    display: inline-flex;
    align-items: center;
  }
  .lang {
    order: 2;
  }
  .lang button {
    padding: 8px 10px;
  }
  .menu-btn {
    display: inline-flex;
    order: 3;
  }
  /* The strip: every section as a tab with its icon, evenly spread. */
  .bar nav {
    order: 4;
    flex: 1 0 100%;
    display: flex;
    justify-content: space-around;
    gap: 4px;
    margin: 0 -12px 0 -18px;
    padding: 0 6px;
    border-top: 1px solid var(--line);
    overflow: visible;
  }
  .bar.nav-hidden nav {
    display: none;
  }
  .bar nav a {
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 4px 10px;
    font-size: 12px;
    color: var(--dim);
    border-radius: 0;
    white-space: nowrap;
  }
  .bar nav a .icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
  }
  .bar nav a[aria-current] {
    color: var(--text);
    box-shadow: inset 0 -2px 0 var(--accent);
  }
  .bar nav a[aria-current] .icon {
    color: var(--accent);
  }
  /* The fold button shows a chevron: down when the strip is open, up when hidden. */
  .menu-btn [data-icon="menu"],
  .menu-btn [data-icon="x"] {
    display: none;
  }
  .menu-btn::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.16s ease;
  }
  .bar.nav-hidden .menu-btn::after {
    transform: translateY(2px) rotate(-135deg);
  }
}

main {
  padding: 64px 0 96px;
}

footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 56px;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: baseline;
}

footer a,
footer span {
  font: 400 11px/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}

footer a:hover {
  color: var(--text);
}

/* The address is shown as itself, not shouted in capitals. */
footer a.mono {
  text-transform: none;
  letter-spacing: 0.02em;
  word-break: break-all;
}

footer .spacer {
  margin-left: auto;
}

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

h1 {
  font: 400 30px/1.2 var(--sans);
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

h2 {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 52px 0 16px;
}

h3 {
  font: 500 15px/1.4 var(--sans);
  margin: 28px 0 6px;
}

p {
  margin: 0 0 16px;
  max-width: 62ch;
}

.lede {
  color: var(--dim);
  font-size: 16px;
  max-width: 56ch;
  margin-bottom: 40px;
}

small,
.note {
  display: block;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dim);
  max-width: 62ch;
}

code,
.mono {
  font-family: var(--mono);
  font-size: 0.92em;
}

a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line-bright);
  transition: border-color 0.12s;
}

a:hover {
  border-color: var(--text);
}

ul {
  margin: 0 0 16px;
  padding-left: 18px;
  max-width: 62ch;
}

li {
  margin-bottom: 6px;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 44px 0;
}

/* ---------- controls ---------- */

button,
.btn {
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 20px;
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
  cursor: pointer;
  transition:
    opacity 0.12s,
    background 0.12s;
}

button:hover:not(:disabled),
.btn:hover {
  opacity: 0.82;
}

button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

button.ghost,
.btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-bright);
}

button.ghost:hover:not(:disabled) {
  border-color: var(--text);
  opacity: 1;
}

button.quiet {
  background: transparent;
  border-color: transparent;
  color: var(--dim);
  padding: 6px 0;
  letter-spacing: 0.1em;
}

button.quiet:hover:not(:disabled) {
  color: var(--text);
  opacity: 1;
}

input,
textarea,
select {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line-bright);
  color: var(--text);
  font: 400 14px/1.5 var(--mono);
  padding: 12px 14px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--text);
}

textarea {
  resize: vertical;
  font-family: var(--sans);
  font-size: 15px;
}

label {
  display: block;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 8px;
}

.field {
  margin-bottom: 22px;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.lang {
  display: flex;
  gap: 1px;
}

.lang button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--dim);
  padding: 6px 9px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
}

.lang button[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--line-bright);
}

/* ---------- panels, tables, status ---------- */

.panel {
  border: 1px solid var(--line);
  padding: 22px;
  background: var(--panel);
}

.panel + .panel {
  margin-top: 14px;
}

.kv {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.kv td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.kv td:first-child {
  font: 400 11px/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  width: 38%;
  padding-right: 16px;
}

.kv td:last-child {
  font-family: var(--mono);
  font-size: 12.5px;
  word-break: break-word;
}

.kv tr:last-child td {
  border-bottom: 0;
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.state::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
}

.state.ok {
  color: var(--ok);
}
.state.warn {
  color: var(--warn);
}
.state.bad {
  color: var(--bad);
}
.state.idle {
  color: var(--dim);
}

.msg {
  border-left: 2px solid var(--line-bright);
  padding: 10px 14px;
  margin: 0 0 20px;
  font-size: 13.5px;
  color: var(--dim);
}

.msg.bad {
  border-color: var(--bad);
  color: var(--text);
}
.msg.ok {
  border-color: var(--ok);
  color: var(--text);
}

.drop {
  border: 1px dashed var(--line-bright);
  padding: 44px 24px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.14s,
    background 0.14s;
}

.drop:hover,
.drop.over {
  border-color: var(--text);
  background: var(--panel);
}

/* A paragraph or note is capped at 62ch, which inside a centred frame would pin
   it to the left edge; auto margins put it back under the heading. */
.drop > *,
.empty > *,
.svc-empty > * {
  margin-left: auto;
  margin-right: auto;
}

.drop strong {
  display: block;
  font: 500 13px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.hidden {
  display: none !important;
}

/* The long legal pages ship both languages as whole blocks. Which one shows is
   decided by the `lang` attribute that lang-boot.js writes before the first
   paint, so a Russian reader never sees the English version flash past first.
   The markup still marks the Russian block `hidden`, which is what a visitor
   with no stylesheet or no script gets; these rules undo that when the page has
   actually been resolved to Russian. */
html[lang="ru"] [data-lang-block="en"] {
  display: none !important;
}

html[lang="ru"] [data-lang-block="ru"].hidden {
  display: block !important;
}

html[lang="en"] [data-lang-block="ru"] {
  display: none !important;
}

.bignum {
  font: 400 34px/1 var(--mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.08em;
  padding: 8px 12px;
  border: 1px solid var(--line-bright);
  background: transparent;
  color: var(--dim);
  text-transform: none;
}

.chip[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--text);
}

/* ---------- chat ---------- */

.turn {
  padding: 0 0 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.turn:last-child {
  border-bottom: 0;
}

.turn .who {
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.turn .body {
  white-space: pre-wrap;
  word-break: break-word;
}

.turn.blocked .body {
  color: var(--bad);
}

.caret::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--text);
  vertical-align: text-bottom;
  margin-left: 3px;
  animation: blink 1.1s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/* ---------- reveal ---------- */

.reveal {
  animation: rise 0.4s ease both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 720px) {
  .wrap {
    padding: 0 20px;
  }
  main {
    padding: 40px 0 64px;
  }
  h1 {
    font-size: 25px;
  }
  .split {
    grid-template-columns: 1fr;
  }
}

/* ---------- icons ---------- */

.icon,
i[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  color: inherit;
  vertical-align: -3px;
}

.icon svg,
i[data-icon] svg {
  width: 100%;
  height: 100%;
}

.icon.lg,
i[data-icon].lg {
  width: 24px;
  height: 24px;
}

.icon.sm,
i[data-icon].sm {
  width: 14px;
  height: 14px;
}

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

/* Every block on a page gets a heading with an icon, so the eye can find it. */
.section {
  margin: 44px 0 0;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 18px;
}

.section-head .icon,
.section-head i[data-icon] {
  color: var(--dim);
}

.section-head h2,
.section-head h3 {
  margin: 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}

/* A quiet remark next to a value: where it came from, how exact it is. */
.aside {
  color: var(--dim);
  font-size: 0.9em;
}

.section-head .aside {
  margin-left: auto;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--dim);
}

/* ---------- tool cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.card {
  --c: var(--accent);
  position: relative;
  display: block;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 20px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition:
    border-color 0.14s,
    transform 0.14s,
    background 0.14s;
}

/* A line of the section's colour along the top, and a faint wash of it behind. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c), transparent 80%);
  opacity: 0.9;
}

.card:hover {
  border-color: color-mix(in srgb, var(--c) 55%, var(--line-bright));
  background: color-mix(in srgb, var(--c) 7%, var(--panel));
  transform: translateY(-2px);
}

.card.tint-search {
  --c: var(--c-search);
}

.card.tint-tools {
  --c: var(--c-tools);
}

.card.tint-links {
  --c: var(--c-links);
}

.card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.card-top .icon,
.card > i[data-icon] {
  color: var(--c);
}

.card .tag {
  border-color: color-mix(in srgb, var(--c) 45%, var(--line-bright));
  color: color-mix(in srgb, var(--c) 80%, var(--text));
}

.card-top strong,
.card > strong {
  font: 500 16px/1.3 var(--sans);
}

.card .tag {
  margin-left: auto;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line-bright);
  padding: 4px 7px;
  white-space: nowrap;
}

.card .note {
  max-width: none;
}

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

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  font: 400 11px/26px var(--mono);
  text-align: center;
  color: var(--dim);
  border: 1px solid var(--line-bright);
  height: 26px;
}

.steps strong {
  display: block;
  font: 500 14px/1.4 var(--sans);
  margin-bottom: 2px;
}

/* On the front page the three steps sit side by side and stay short. */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.steps-row li {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.steps-row li::before {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-bright));
}

.home .how {
  margin-top: 34px;
}

.home .how .note a {
  color: var(--dim);
}

@media (max-width: 720px) {
  .steps-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- checkboxes ---------- */

/* Real checkboxes with a spelled-out label and a line of explanation, rather
   than a bare toggle whose meaning has to be guessed. */
.checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
  border: 1px solid var(--line);
  padding: 12px 14px;
  background: var(--panel);
}

.check:hover {
  border-color: var(--line-bright);
}

.check input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1px solid var(--line-bright);
  background: var(--bg);
  display: grid;
  place-content: center;
  cursor: pointer;
  padding: 0;
}

.check input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}

.check input[type="checkbox"]:checked {
  background: var(--text);
  border-color: var(--text);
}

.check input[type="checkbox"]:checked::after {
  opacity: 1;
}

.check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.check .lbl {
  font: 400 14px/1.4 var(--sans);
  color: var(--text);
}

.check .why {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim);
  margin-top: 3px;
}

/* ---------- badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line-bright);
  padding: 5px 8px;
}

.badge.on {
  color: var(--text);
  border-color: var(--text);
}

/* A badge that is a button (the section filters) must not pick up the solid
   white of the generic button rule: it stays a quiet outline, lit when chosen. */
button.badge {
  background: transparent;
  color: var(--dim);
  border-color: var(--line-bright);
  padding: 7px 11px;
  font-size: 11px;
  letter-spacing: 0.1em;
  transition:
    border-color 0.12s,
    color 0.12s,
    background 0.12s;
}

button.badge:hover:not(:disabled) {
  opacity: 1;
  color: var(--text);
  border-color: color-mix(in srgb, var(--c-links) 60%, var(--line-bright));
}

button.badge.on {
  color: var(--c-links);
  border-color: var(--c-links);
  background: color-mix(in srgb, var(--c-links) 12%, transparent);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- chat extras ---------- */

.chat-list .list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}

.turn .who {
  align-items: center;
  gap: 8px;
}

.turn .who .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.turn .body img,
.turn .body video {
  display: block;
  max-width: 100%;
  max-height: 420px;
  border: 1px solid var(--line);
  margin-top: 10px;
}

.turn .body audio {
  display: block;
  width: 100%;
  margin-top: 10px;
}

/* One total, shown when the exchange is over — not a price tag on every line. */
.summary {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px 14px;
  font: 400 12px/1.4 var(--mono);
  color: var(--dim);
  margin-bottom: 16px;
}

.summary b {
  font-weight: 400;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
  font: 400 12px/1 var(--mono);
  color: var(--dim);
}

.summary .icon {
  color: var(--dim);
}

.composer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.attached {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.att {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-bright);
  padding: 6px 8px;
  font: 400 11px/1 var(--mono);
  color: var(--dim);
  max-width: 240px;
}

.att span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.att button {
  background: transparent;
  border: 0;
  color: var(--dim);
  padding: 0;
  cursor: pointer;
}

.att button:hover {
  color: var(--text);
  opacity: 1;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Length, size and shape pickers sit in a row above the prompt. */
.opt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}

.opt-row:empty {
  display: none;
}

.opt-row label {
  margin: 0;
}

.opt-row label > span {
  display: block;
  margin-bottom: 6px;
}

.opt-row select {
  min-width: 130px;
}

/* A take in progress: the same button stops it. */
button.hot {
  border-color: var(--bad);
  color: var(--bad);
}

.tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.progress {
  height: 2px;
  background: var(--line);
  overflow: hidden;
  margin-top: 10px;
}

.progress i {
  display: block;
  height: 100%;
  background: var(--text);
  width: 30%;
  animation: slide 1.4s linear infinite;
}

@keyframes slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(340%);
  }
}

/* ---------- directory ---------- */

.svc-group + .svc-group {
  margin-top: 40px;
}

.svc {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.svc-group .section-head i[data-icon] {
  color: var(--c-links);
}

.svc-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.svc-title strong {
  font: 500 15px/1.3 var(--sans);
}

.svc-title a {
  font: 400 12px/1 var(--mono);
  color: var(--dim);
  border-bottom-color: var(--line);
}

.svc-title a:hover {
  color: var(--text);
  border-color: var(--text);
}

.svc .note {
  margin-top: 4px;
}

/* ---------- empty and error states ---------- */

.empty {
  border: 1px dashed var(--line-bright);
  padding: 34px 24px;
  text-align: center;
  color: var(--dim);
  font-size: 13.5px;
}

.empty .icon {
  color: var(--line-bright);
  margin-bottom: 8px;
}

.oops {
  text-align: center;
  padding: 40px 0 20px;
}

.oops .code {
  font: 400 76px/1 var(--mono);
  letter-spacing: -0.03em;
  color: var(--line-bright);
  margin-bottom: 10px;
}

.oops h1 {
  margin-bottom: 10px;
}

.oops .actions {
  justify-content: center;
  margin-top: 26px;
}

.drop i[data-icon] {
  color: var(--line-bright);
  margin-bottom: 12px;
}

/* ---------- the AI section: exactly one screen ---------- */

/* This section is an application, not a document. The window never scrolls;
   only the transcript and the chat list do, so the model, the balance and the
   composer are all reachable without moving the page. Every rule for the chat
   layout lives in this one block — there used to be three, disagreeing. */
body.fixed {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.fixed .app-main {
  flex: 1;
  min-height: 0;
  padding: 0;
  display: flex;
  /* The narrow-screen chat drawer is positioned against this, so it starts
     exactly under the header. */
  position: relative;
}

body.fixed .app-main > .wrap {
  margin: auto;
  padding: 48px 24px;
}

.chat-shell {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  align-items: stretch;
}

/* ---------- the list of chats ---------- */

.chat-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 16px 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.chat-list .list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}

.chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-bright) transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 -6px;
  padding: 2px 6px;
}

.chat-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--dim);
  font: 400 13px/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 10px;
  cursor: pointer;
}

.chat-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item .icon {
  color: var(--dim);
}

.chat-item:hover {
  color: var(--text);
  background: var(--raise);
  opacity: 1;
}

.chat-item[aria-current="true"] {
  color: var(--text);
  background: var(--raise);
  border-color: var(--line-bright);
}

.chat-item[aria-current="true"] .icon {
  color: var(--accent);
}

.side-foot {
  border-top: 1px solid var(--line);
  padding: 14px 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.side-links {
  flex-basis: 100%;
  display: flex;
  gap: 14px;
  margin-top: 4px;
}

.side-links a {
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  border: 0;
}

.side-links a:hover {
  color: var(--text);
}

.icon-btn.wide {
  width: 100%;
  justify-content: center;
  margin: 0 0 12px;
}

.side-foot .icon-btn.wide {
  margin: 6px 0 0;
}

/* ---------- the conversation ---------- */

.room {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 24px;
}

.room > .msg {
  margin: 14px 0 0;
}

.room-in {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.room-in.hidden {
  display: none;
}

.room-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

/* The name the visitor gave this chat, so the header says which one is open. */
.room-title {
  font: 500 15px/1.3 var(--sans);
  color: var(--text);
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grow {
  flex: 1;
}

.pick-model {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--dim);
}

.pick-model {
  font: 400 12px/1 var(--mono);
  white-space: nowrap;
}

.turns {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-bright) transparent;
  padding: 18px 6px 18px 0;
}

.turns::-webkit-scrollbar,
.chat-scroll::-webkit-scrollbar,
.start::-webkit-scrollbar {
  width: 8px;
}

.turns::-webkit-scrollbar-thumb,
.chat-scroll::-webkit-scrollbar-thumb,
.start::-webkit-scrollbar-thumb {
  background: var(--line-bright);
}

.composer {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 14px 0 18px;
}

.composer textarea {
  min-height: 62px;
  margin-bottom: 10px;
}

.composer .actions {
  align-items: center;
}

.composer .actions small {
  text-align: right;
  max-width: 34ch;
}

/* ---------- naming a chat and choosing what answers ---------- */

/* Nothing is created until both steps are settled, which is why this is a form
   with a submit button rather than a grid of cards that each start a chat. */
.start {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-bright) transparent;
  padding: 34px 0 40px;
}

.start.hidden {
  display: none;
}

/* Only a phone needs a way to open the list from here; on a wide screen the
   list is already beside this form. */
.start-bar {
  display: none;
  margin-bottom: 18px;
}

.drawer-back {
  display: none;
}

.start-bar .count {
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0;
  color: var(--dim);
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  padding: 3px 7px;
  margin-left: 2px;
}

.start-card {
  max-width: 760px;
}

.start-card h1 {
  font-size: 24px;
  margin-bottom: 8px;
}

.start-card > .note {
  margin-bottom: 28px;
}

.step {
  margin-bottom: 26px;
}

.step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font: 500 13.5px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

/* A numbered step reads as an order to follow, not two equal options. */
.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  background: var(--panel);
  font: 400 11px/1 var(--mono);
  color: var(--accent);
}

.step input[type="text"] {
  max-width: 420px;
  margin: 0;
}

.picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
}

.pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  color: var(--text);
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  cursor: pointer;
  transition:
    border-color 0.14s,
    background 0.14s;
}

.pick:hover {
  border-color: var(--line-bright);
  background: var(--raise);
  opacity: 1;
}

/* The chosen one has to be obvious at a glance: it decides the whole chat. */
.pick[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--raise);
}

.pick[aria-pressed="true"] .pick-top strong::after {
  content: "✓";
  margin-left: 8px;
  color: var(--accent);
}

.pick-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pick-top strong {
  font: 500 15px/1.3 var(--sans);
}

.pick-top i[data-icon] {
  color: var(--accent);
}

.pick-kind {
  margin-left: auto;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.pick .note {
  max-width: none;
  margin: 0;
  font-size: 12.5px;
}

.pick-price {
  font: 400 12px/1.4 var(--mono);
  color: var(--dim);
}

.caps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cap {
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
}

#draw[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--text);
}

.room-head .rate {
  font: 400 11px/1 var(--mono);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .room-head .rate {
    display: none;
  }
}

/* One line per kind of work, with its price on the right. Nothing here is clickable. */
.prices {
  display: grid;
  gap: 8px;
  max-width: 640px;
}

.price-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.price-row .icon {
  grid-row: 1 / span 2;
  color: var(--accent);
}

.price-what {
  font: 500 14px/1.3 var(--sans);
  color: var(--text);
}

.price-detail {
  grid-column: 2;
  font: 400 12px/1.4 var(--mono);
  color: var(--dim);
}

.price-val {
  grid-column: 3;
  grid-row: 1 / span 2;
  font: 500 12.5px/1.4 var(--mono);
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .price-row {
    grid-template-columns: auto 1fr;
  }
  .price-val {
    grid-column: 2;
    grid-row: 3;
    text-align: left;
  }
}

/* The price list folds behind its heading once it has been seen. */
.prices-box summary {
  cursor: pointer;
  list-style: none;
}

.prices-box summary::-webkit-details-marker {
  display: none;
}

.prices-box summary .icon {
  margin-left: 6px;
  color: var(--dim);
  transition: transform 0.14s;
}

.prices-box[open] summary .icon {
  transform: rotate(180deg);
}

.prices-box:not([open]) summary {
  margin-bottom: 0;
}

.start-go {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.start-go .note {
  margin: 0;
  max-width: 44ch;
}

.only-narrow {
  display: none;
}

@media (max-width: 860px) {
  .chat-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The list slides over the conversation rather than pushing it off screen. */
  .chat-list {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 258px;
    background: var(--bg);
    z-index: 9;
    transform: translateX(-100%);
    transition: transform 0.16s;
  }
  .chat-list.open {
    transform: none;
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.45);
  }
  /* Everything beside the open drawer dims, and a tap on it closes the drawer. */
  .drawer-back {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 8;
    background: rgba(0, 0, 0, 0.4);
  }
  .only-narrow {
    display: inline-flex;
  }
  .start-bar {
    display: flex;
  }
  .room {
    padding: 0 16px;
  }
  .room-title {
    max-width: 14ch;
  }
  /* The header is one row: the message count goes, the model name is capped. */
  .room-head {
    gap: 10px;
  }
  .room-head #count {
    display: none;
  }
  .pick-model span {
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .start {
    padding: 24px 0 32px;
  }
  /* Below 16px, iOS Safari zooms the page into a focused field, which in a
     fixed-height layout leaves the composer half off screen. */
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  /* Icon only: the label is still read out from aria-label. */
  .room-head #del span {
    display: none;
  }
  /* A keyboard shortcut is no help on a touch screen. */
  .composer .actions small {
    display: none;
  }
}

/* ---------- the lit block on the front page ---------- */

/* The model section is the reason most people arrive, so it is brighter and
   bigger than everything around it: a tinted panel with the pitch on the left
   and the price and the models on the right. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 1fr);
  gap: 28px 40px;
  margin: 0 0 22px;
  padding: 34px 36px 32px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--raise)) 0%, var(--raise) 58%, var(--panel) 100%);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: 0.9;
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.hero h2 {
  margin: 0 0 14px;
  font: 500 27px/1.2 var(--sans);
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--text);
  max-width: 24ch;
}

.hero-main > p {
  font-size: 15.5px;
  color: color-mix(in srgb, var(--text) 82%, var(--dim));
  max-width: 58ch;
  margin-bottom: 20px;
}

.hero-acts {
  gap: 12px;
}

.hero-acts .btn {
  padding: 14px 22px;
}

.hero-acts .btn:not(.ghost) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  padding-left: 28px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
}

.hero-models-label {
  font: 400 10.5px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.hero-models {
  display: grid;
  gap: 10px;
}

/* Four lines on what the assistant does: an icon, a name, one sentence under it. */
.hero-can {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.hero-can li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  margin: 0;
}

.hero-can .icon {
  color: var(--accent);
  margin-top: 2px;
}

.hero-can li > span {
  display: grid;
  gap: 2px;
}

.hero-can strong {
  font: 500 14px/1.35 var(--sans);
  color: var(--text);
}

.hero-can strong + span {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--dim);
}

/* The price line under the pitch: quiet text, the numbers themselves in the page's ink. */
.hero-price {
  margin: -8px 0 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dim);
}
.hero-price b {
  color: var(--text);
  font-weight: 600;
}

.hero-models-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dim);
}

.chip.static {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line-bright));
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  cursor: default;
}

.chip.static .icon {
  color: var(--accent);
}

@media (max-width: 720px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 26px 22px 24px;
    gap: 22px;
  }
  .hero h2 {
    font-size: 23px;
  }
  .hero-side {
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  }
}

/* ---------- checkbox rows: long sentences, any width ---------- */

/* The row is a <label>, and the generic label rule sets small uppercase mono
   type; a sentence of consent must not inherit that. The text column always
   sits beside the box, never wraps under it, and the box stays clickable. */
.check {
  text-transform: none;
  letter-spacing: 0.01em;
  margin: 0;
  font: 400 14px/1.5 var(--sans);
  color: var(--text);
  align-items: start;
}

.check > span {
  min-width: 0;
}

.check .lbl,
.check .why {
  display: block;
  max-width: none;
  overflow-wrap: anywhere;
}

.check .why {
  margin-top: 4px;
}

/* A stray .why placed straight in the row lands in the text column, not under the box. */
.check > .why {
  grid-column: 2;
}

/* ---------- the one-time agreement ---------- */

.consent {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--raise)) 0%, var(--panel) 70%);
  padding: 28px 28px 26px;
  max-width: 640px;
  margin: 0 auto;
}

.consent-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.consent-head .icon {
  color: var(--accent);
  flex: none;
}

.consent-head h2 {
  margin: 0;
  font: 500 20px/1.25 var(--sans);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
}

.consent > .note {
  margin-bottom: 18px;
  max-width: none;
}

.consent-points {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  max-width: none;
  display: grid;
  gap: 10px;
}

.consent-points li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: start;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 88%, var(--dim));
}

.consent-points .icon {
  color: var(--accent);
  margin-top: 3px;
}

.consent-check {
  margin-bottom: 18px;
}

.consent-acts {
  justify-content: space-between;
  gap: 14px;
}

.consent-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.consent-links a {
  font: 400 11px/1.6 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 0;
}

.consent-links a:hover {
  color: var(--text);
}

/* In the fixed-height AI layout the card is centred like the sign-in gate. */
body.fixed .app-main > #consent {
  margin: auto;
  padding: 32px 16px;
  overflow: auto;
  max-height: 100%;
  width: 100%;
  max-width: 720px;
}

/* Prices shown to a visitor who has not signed in yet: the same cards, inert. */
.tiers.preview {
  margin-top: 26px;
}

/* The sign-in gate on the search page is a block in the flow, not a full screen. */
#gate .empty {
  margin-top: 8px;
}

@media (max-width: 600px) {
  .consent {
    padding: 20px 16px 18px;
  }
  .consent-head h2 {
    font-size: 18px;
  }
  .consent-acts {
    flex-direction: column;
    align-items: stretch;
  }
  .consent-acts button {
    width: 100%;
    justify-content: center;
  }
  .start-go button {
    width: 100%;
    justify-content: center;
  }
  .order-form textarea {
    font-size: 16px;
  }
}

/* ---------- account: help, locks, deletion ---------- */

.help-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.help-row .note {
  margin: 0;
  flex: 1 1 100%;
}

/* The address itself, in plain sight: a mail app is not something every device has. */
.mail-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.mail-line code {
  font: 500 14px/1.4 var(--mono);
  color: var(--text);
  word-break: break-all;
  user-select: all;
}

.msg.warn {
  border-color: var(--warn);
}

.btn.danger,
button.danger {
  background: transparent;
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 55%, var(--line-bright));
}

button.danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  opacity: 1;
}

.quiet-link {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom-color: var(--line);
}

.quiet-link:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* ---------- a calmer, everyday look ----------
   The palette stays dark; what changes is the voice. Labels, buttons and
   navigation move from the code face to the text face and drop the spaced
   capitals, corners soften, and the code face is kept for what really is a code
   or a number: the access code, addresses, values in tables. These rules come
   last on purpose so they win over the earlier ones of equal weight. */

:root {
  --radius: 12px;
  --radius-sm: 9px;
}

h1 {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.02em;
}

h2 {
  font: 600 19px/1.3 var(--sans);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  margin: 44px 0 14px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 15.5px/1 var(--sans);
  letter-spacing: -0.01em;
  text-transform: none;
}

/* The eye from the favicon, drawn inline so it costs no request. */
.mark::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #0a0c10 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2.3 15.8C6.5 9.2 11 5.9 16 5.9s9.5 3.3 13.7 9.9c-4.2 6.6-8.7 9.9-13.7 9.9S6.5 22.4 2.3 15.8Z' fill='none' stroke='%23e9af3f' stroke-width='2.5' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='15.8' r='4' fill='%23e9af3f'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.bar nav a {
  font: 500 13.5px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 900px) {
  .bar nav a {
    font-size: 15px;
  }
}

.lang button {
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.02em;
  border-radius: 6px;
}

footer a,
footer span {
  font: 400 12.5px/1.5 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

footer a.mono {
  font-family: var(--mono);
  font-size: 12px;
}

button,
.btn {
  font: 500 13.5px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
}

button.quiet {
  padding: 6px 2px;
  letter-spacing: 0;
}

.hero-acts .btn {
  padding: 13px 20px;
}

input,
textarea,
select {
  font: 400 15px/1.5 var(--sans);
  border-radius: var(--radius-sm);
}

/* The access code is a code, and reads best in the code face, spaced out. */
#code {
  font: 500 18px/1.4 var(--mono);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

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

label {
  font: 500 12.5px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

.section-head h2,
.section-head h3 {
  font: 600 14.5px/1.2 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

.section-head .aside {
  font: 400 12.5px/1 var(--sans);
  letter-spacing: 0;
}

.card .tag {
  font: 500 11.5px/1 var(--sans);
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: 999px;
  padding: 4px 9px;
}

.chip {
  font: 500 12.5px/1 var(--sans);
  letter-spacing: 0;
  border-radius: 999px;
  padding: 8px 13px;
}

.cap {
  font: 500 11.5px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  padding: 4px 9px;
}

.drop strong {
  font: 600 14.5px/1.4 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

.chat-list .list-head,
.composer-head,
.hero-models-label,
.pick-kind,
.turn .who,
.status,
.badge,
.kv td:first-child,
.att,
.summary,
.pager,
.svc-title a,
.side-links a,
.pick-model,
.start-bar .count,
.room-head .rate,
.consent-links a,
.quiet-link,
.pick-price {
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

.turn .who,
.chat-list .list-head,
.composer-head,
.hero-models-label,
.pick-kind,
.status,
.badge,
.start-bar .count,
.side-links a,
.quiet-link,
.consent-links a {
  font-size: 12.5px;
  font-weight: 500;
}

.kv td:first-child,
.att,
.summary,
.pager,
.svc-title a,
.pick-model,
.room-head .rate,
.pick-price {
  font-size: 13px;
}

/* Table values are values: they keep the code face and line up. */
.kv td:last-child,
.counter,
.mail-line code,
.bignum,
.oops .code {
  font-family: var(--mono);
}

.steps li::before {
  font: 600 12.5px/26px var(--sans);
  letter-spacing: 0;
}

.hero .eyebrow {
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Softer corners on every surface. */
.panel,
.card,
.empty,
.check,
.consent,
.start-card,
.msg,
.drop,
.summary,
.pick,
.svc,
.hero {
  border-radius: var(--radius);
}

.hero {
  border-radius: 16px;
}

.card {
  overflow: hidden;
}

.att,
.badge,
.status,
.chip.static {
  border-radius: 999px;
}

.turn .body img,
.turn .body video {
  border-radius: 10px;
}

/* ---------- saving a picture, clip or voice note ---------- */

.media-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  margin-top: 10px;
}

.media-box.audio {
  width: 100%;
}

.media-box img,
.media-box video,
.media-box audio {
  margin-top: 0;
}

.media-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12.5px/1 var(--sans);
  color: var(--dim);
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  padding: 7px 12px;
  text-decoration: none;
  background: var(--panel);
  transition: color 0.12s, border-color 0.12s;
}

.media-dl:hover {
  color: var(--text);
  border-color: var(--text);
}

/* While the file is being fetched for the share sheet or the downloads folder. */
.media-dl.busy {
  opacity: 0.6;
  pointer-events: none;
}

@media (max-width: 860px) {
  /* A thumb-sized target on a phone. */
  .media-dl {
    font-size: 13.5px;
    padding: 10px 16px;
  }
}

/* ---------- the stop before a code is minted ---------- */

.warn-panel {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 6%, var(--panel));
}

.warn-panel p {
  max-width: none;
}

.warn-panel .check {
  margin-top: 4px;
}

.plain-list {
  margin: 0 0 16px;
  padding-left: 20px;
  max-width: none;
}

.plain-list li {
  margin-bottom: 8px;
}

/* The front page's single card for the link list: full width, same look. */
.wide-card {
  margin-top: 26px;
}

/* ---------- promo codes and documents ---------- */

.promo-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.promo-form .field {
  margin: 0;
}

.promo-form .actions {
  margin: 0;
}

#promo {
  font: 500 16px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
}

.doc-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-chip .icon {
  color: var(--dim);
}

/* ---------- the conversation, second pass ----------
   The header keeps two facts — what answers and what the chat has cost — and
   the rest of the screen is the conversation. Answers sit on a tinted card so
   they read apart from the questions; the question just sent is pinned to the
   top of the view and the answer grows under it instead of dragging the page
   down. The composer is one field with its tools inside it. */

.room-head {
  gap: 10px;
  padding: 10px 0;
}

.room-model {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font: 500 14px/1 var(--sans);
  white-space: nowrap;
}

.room-model .icon {
  color: var(--accent);
}

.room-spent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  font: 400 13px/1 var(--sans);
  white-space: nowrap;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.room-spent b {
  font: 500 12.5px/1 var(--mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.room-head #del {
  padding: 7px;
  border-radius: 8px;
}

.room-head #del:hover:not(:disabled) {
  background: var(--raise);
  color: var(--bad);
}

.turns-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.turns {
  position: relative;
  flex: 1;
  padding: 20px 8px 8px 0;
}

.tail {
  flex: none;
  height: 0;
}

.turn {
  border-bottom: 0;
  padding: 0;
  margin: 0 0 18px;
}

.turn .who {
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--dim);
}

.turn .body {
  font-size: 15.5px;
  line-height: 1.7;
}

.turn.user {
  padding: 4px 18px 6px;
}

.turn.assistant {
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  border-radius: 14px;
  padding: 14px 18px 16px;
}

.turn.assistant .who {
  color: var(--accent);
}

.turn.assistant.blocked {
  background: color-mix(in srgb, var(--bad) 6%, var(--panel));
  border-color: color-mix(in srgb, var(--bad) 30%, var(--line));
}

.turn.assistant.blocked .who {
  color: var(--bad);
}

/* A line the interface writes into the chat instead of into the strip across
   the top of the page: a request that did not go through, a file that was not
   taken, a clip that came to nothing. No byline — it is not the assistant
   speaking — and quieter than an answer, tinted by what it says. */
.turn.notice {
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 15px;
  color: var(--dim);
}

.turn.notice .body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.turn.notice .icon {
  flex: none;
  margin-top: 2px;
}

.turn.notice.bad {
  background: color-mix(in srgb, var(--bad) 6%, var(--panel));
  border-color: color-mix(in srgb, var(--bad) 30%, var(--line));
  color: var(--bad);
}

.turn.notice.ok {
  background: color-mix(in srgb, var(--ok) 6%, var(--panel));
  border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
  color: var(--ok);
}

/* Back to the end of the chat, for a reader who scrolled up. */
.jump {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  background: var(--raise);
  color: var(--text);
  border: 1px solid var(--line-bright);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.jump:hover:not(:disabled) {
  opacity: 1;
  border-color: var(--text);
}

.composer {
  border-top: 0;
  padding: 8px 0 14px;
}

.composer .opt-row {
  margin-bottom: 10px;
  align-items: end;
}

.opt-price {
  align-self: center;
  margin-left: auto;
  font: 400 12.5px/1.4 var(--sans);
  color: var(--dim);
  white-space: nowrap;
}

.box {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--line-bright);
  border-radius: 24px;
  padding: 5px 5px 5px 6px;
  transition: border-color 0.12s;
}

.box:focus-within {
  border-color: var(--text);
}

.box textarea {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 40px;
  max-height: 34vh;
  margin: 0;
  padding: 9px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  resize: none;
  overflow-y: hidden;
  font-size: 15.5px;
  line-height: 1.45;
}

.box textarea:focus {
  outline: none;
  border: 0;
}

/* Only a picture-only field should ever leave the attach tool as the sole thing
   on the left; the padding keeps the field from touching the edge either way. */
.box > .tool:first-child,
.box > textarea:first-child {
  margin-left: 2px;
}

.tool,
.send {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tool .icon,
.send .icon,
.jump .icon {
  width: 20px;
  height: 20px;
}

.tool .icon svg,
.send .icon svg,
.jump .icon svg {
  width: 20px;
  height: 20px;
}

.tool {
  background: transparent;
  border-color: transparent;
  color: var(--dim);
}

.tool:hover:not(:disabled) {
  background: var(--raise);
  color: var(--text);
  opacity: 1;
}

.tool.hot {
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, transparent);
}

.tool.stop {
  background: var(--text);
  color: var(--bg);
}

.send {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.send:disabled {
  opacity: 0.35;
}

@media (max-width: 860px) {
  .room {
    padding: 0 12px;
  }
  .room-head {
    padding: 8px 0;
    gap: 8px;
  }
  .room-model {
    font-size: 15px;
  }
  /* The icon says what the number is; the word would only crowd the row. */
  .room-spent-label {
    display: none;
  }
  .room-spent {
    padding-left: 10px;
  }
  .turns {
    padding: 14px 0 6px;
  }
  /* Bigger type and more air: a phone screen is read at arm's length. */
  .turn {
    margin-bottom: 18px;
  }
  .turn .body {
    font-size: 16.5px;
    line-height: 1.7;
  }
  .turn .who {
    font-size: 12.5px;
    margin-bottom: 8px;
  }
  .turn.user {
    padding: 2px 8px 4px;
  }
  .turn.assistant {
    padding: 14px 16px 16px;
    border-radius: 16px;
  }
  .turn .body img,
  .turn .body video {
    max-height: 60vh;
  }
  /* The field is lifted off the bottom edge: a thumb finds it without reaching
     for the very edge of the glass, and on an iPhone it no longer sits flush
     against the browser's own toolbar. The safe-area inset is added on top for
     phones with a home indicator. */
  .composer {
    padding: 6px 0 calc(22px + env(safe-area-inset-bottom, 0px));
  }
  .box textarea {
    font-size: 16px;
  }
  .jump {
    bottom: 12px;
  }
}

/* ---------- home-screen offer and the status line ---------- */

.pwa-card .pwa-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 15px;
}

.pwa-card .pwa-head .icon {
  color: var(--accent);
}

.pwa-card .note {
  max-width: none;
  margin: 0 0 6px;
}

.pwa-card .actions {
  margin-top: 14px;
}

/* A result at the top of the page is scrolled to; this keeps it clear of the bar. */
.msg {
  scroll-margin-top: 96px;
}

.msg-link {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- the conversation, third pass: how an answer is drawn ----------
   Answers arrive as Markdown and are drawn as such; questions stay exactly as
   typed. The spacer that lifts a fresh question to the top folds away once the
   answer is complete, so the transcript never ends above a blank screen. */

/* A question keeps its line breaks; an answer's layout comes from its markup. */
.turn.user .body {
  white-space: pre-wrap;
}

.turn.assistant .body {
  white-space: normal;
  overflow-wrap: anywhere;
}

.turn .body > span {
  white-space: pre-wrap;
}

.tail.settle {
  transition: height 0.4s ease;
}

.md p,
.md ul,
.md ol,
.md blockquote,
.md .table-wrap,
.md .code,
.md hr,
.md .md-h {
  margin: 0 0 0.85em;
}

.md > :last-child,
.md .md-settled > :last-child,
.md .md-live > :last-child,
.md li > :last-child,
.md blockquote > :last-child {
  margin-bottom: 0;
}

.md .md-h {
  font: 600 1.05em/1.4 var(--sans);
  color: var(--text);
  letter-spacing: 0;
  margin-top: 1.1em;
}

.md .md-h1 {
  font-size: 1.2em;
}

.md .md-h2 {
  font-size: 1.12em;
}

.md .md-settled > .md-h:first-child,
.md .md-live > .md-h:first-child,
.md > .md-h:first-child {
  margin-top: 0;
}

.md ul,
.md ol {
  padding-left: 1.5em;
}

.md li {
  margin: 0.25em 0;
}

.md li > ul,
.md li > ol {
  margin: 0.25em 0 0;
}

.md li::marker {
  color: var(--dim);
}

.md strong {
  font-weight: 600;
  color: var(--text);
}

.md a {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.md a:hover {
  border-bottom-color: var(--accent);
}

.md code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 5px;
  padding: 0.08em 0.4em;
}

.md blockquote {
  padding: 0.1em 0 0.1em 14px;
  border-left: 3px solid var(--line-bright);
  color: var(--dim);
}

.md hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.2em 0;
}

.md .code {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
}

.md .code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--line);
  font: 400 11.5px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--dim);
}

.md .code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--dim);
  font: 400 12px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

.md .code-copy:hover:not(:disabled) {
  background: var(--raise);
  color: var(--text);
  opacity: 1;
}

.md .code-copy.done {
  color: var(--ok);
}

.md pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-bright) transparent;
  -webkit-overflow-scrolling: touch;
}

.md pre code {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre;
  tab-size: 2;
}

.md .table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  scrollbar-width: thin;
}

.md table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.94em;
}

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

.md th {
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  white-space: nowrap;
}

.md tbody tr:last-child td {
  border-bottom: 0;
}

/* The writing cursor sits at the end of the text, wherever that is. */
.md .cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--text);
  border-radius: 1px;
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 1.1s steps(2, start) infinite;
}

.md pre .cursor {
  height: 1.1em;
  vertical-align: bottom;
}

/* Before the first word arrives: a dot that breathes rather than a bar that waits. */
.body.thinking::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--text);
  animation: breathe 1.2s ease-in-out infinite;
  margin: 0.45em 0 0;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animated turns rise in only where the answer belongs; the transcript below
   reflows without any jump because the spacer absorbs the difference. */
.turn.reveal {
  animation: rise 0.3s ease both;
}

/* Long words and addresses in an answer wrap instead of forcing the card wider. */
.md p,
.md li,
.md td,
.md th {
  min-width: 0;
}

/* Nothing in an answer may widen the transcript: a long line of code scrolls
   inside its own block, and the transcript itself never scrolls sideways. */
.turns {
  overflow-x: hidden;
}

.turn,
.turn .body {
  min-width: 0;
  max-width: 100%;
}

.md .code,
.md .table-wrap {
  max-width: 100%;
}

/* The copy control on a code block is a small quiet label, whatever the page's
   buttons look like elsewhere: every property a button rule sets is set here. */
.md .code-copy,
.turn .body .code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--dim);
  font: 400 12px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}

.md .code-copy .icon {
  width: 14px;
  height: 14px;
}

/* Under an answer that ended short: the note and the one control that asks for the rest. */
.turn .note.cut {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 10px 0 0;
  max-width: none;
}

.turn .note.cut .continue {
  padding: 4px 0;
  font: 500 13px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  background: transparent;
  border: 0;
}

.turn .note.cut .continue:hover:not(:disabled) {
  opacity: 1;
  text-decoration: underline;
}

@media (max-width: 860px) {
  /* Closed, the drawer is out of the way in every sense: it cannot be seen,
     tapped or tabbed into, and nothing in it pokes out past the screen edge. */
  .chat-list {
    visibility: hidden;
    transition: transform 0.16s, visibility 0.16s;
  }
  .chat-list.open {
    visibility: visible;
  }
  .side-links {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .md pre code {
    font-size: 13px;
  }
  .md .code {
    border-radius: 10px;
  }
  .turn.assistant .body {
    font-size: 16px;
  }
}

/* The card shown while a picture, an edit or a clip is being made: what it is,
   where it stands, and a bar that moves. A failed one keeps its place and says why. */
.turn.job .job-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.turn.job .job-head .icon {
  color: var(--accent);
}
.turn.job .job-title {
  font-size: 14px;
}
.turn.job .job-detail {
  margin-top: 4px;
}
.turn.job.failed {
  border-color: color-mix(in srgb, var(--bad) 30%, var(--line));
}
.turn.job.failed .job-head .icon,
.turn.job.failed .job-title {
  color: var(--bad);
}

/* Maintenance notice: a strip above everything while the site is closed (see core.js). */
.maintenance {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: #0b0b0c;
  background: #e0b45c;
}

/* Footer: legal links and the two ways to reach us on one line, the notes below. */
footer .wrap {
  display: block;
}
footer .foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
}
footer .foot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
footer a.mono span {
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}
footer .foot-note,
footer .foot-partners,
footer .foot-partners span,
footer .foot-partners strong {
  font: 400 13px/1.55 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--dim);
}
footer .foot-note,
footer .foot-partners {
  margin: 14px 0 0;
  max-width: 68ch;
}
footer .foot-partners strong {
  font-weight: 600;
  color: var(--text);
}
footer .foot-partners a {
  white-space: nowrap;
}
.side-contacts {
  margin-top: 6px;
}
.side-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.svc-note {
  margin-top: 28px;
  max-width: 72ch;
}
#pay-range {
  display: block;
  margin-top: 4px;
}

/* ---------- the check before a crypto payment ----------
   Opened by the pay button, closed by its own buttons or by changing the
   amount; plain flow, no overlay, so it reads on a phone like the rest. */
.pay-confirm {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm, 9px);
  background: var(--raise);
}
.pay-confirm h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
}
.pay-confirm .pay-sum {
  margin: 0 0 10px;
  color: var(--dim);
}
.pay-confirm .pay-sum b {
  color: var(--text);
  font-family: var(--mono);
  font-size: 18px;
}
.pay-rules {
  margin: 0 0 14px;
  padding-left: 18px;
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.5;
}
.pay-rules li + li {
  margin-top: 6px;
}
.pay-confirm .actions {
  flex-wrap: wrap;
  gap: 10px;
}