/* The API platform (/platform/): site.css's paper and ink laid out as a console. A bar across the top, the sections down
   the side (across the top on a narrow screen), and each section's panels. --chart is the bars' blue: the slate accent
   with more colour, so a bar doesn't read as grey (checked with the dataviz validator against both surfaces). */
:root { --chart:#1f6ea6; --on-warn:#fff; --shade:rgba(34, 29, 25, .1); }
@media (prefers-color-scheme: dark) {
  :root { --chart:#4d9bd6; --on-warn:#1a1310; --shade:rgba(0, 0, 0, .45); }
}

body.platform { font-size: 15px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.platform code { font: .92em var(--mono); color: var(--ink); background: var(--raise); padding: 1px 5px; border-radius: 4px; }
.mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--muted); }

/* ------------------------------------------------------------------ the bar and the sections */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}
.topbar .brand { font-family: var(--serif); font-size: 22px; color: var(--ink); text-decoration: none; }
.topbar .crumb { margin: 0; font: inherit; padding-left: 14px; border-left: 1px solid var(--line); color: var(--muted); }
.topbar .who { display: flex; align-items: center; gap: 16px; min-width: 0; margin-left: auto; font-size: 14px; color: var(--muted); }
.topbar .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-button {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--acc);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.link-button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.shell {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  max-width: 1320px;
  margin: 0 auto;
}
.sections {
  position: sticky;
  top: 60px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 28px 16px;
}
.sections a {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--body);
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.sections a:hover { background: var(--raise); opacity: 1; }
.sections a[aria-current="page"] { background: var(--acc-soft); color: var(--acc); font-weight: 500; }
.console { min-width: 0; padding: 34px 32px 96px; }
.view { max-width: 1000px; }
.view > h2 { margin: 0 0 24px; font-size: 34px; letter-spacing: -0.01em; }
.view > .head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 24px; }
.view > .head h2 { margin: 0; font-size: 34px; letter-spacing: -0.01em; }

/* ------------------------------------------------------------------ panels, figures and tables */
.panel {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }   /* a wide table or code line scrolls in its box */
.panel h2 { margin: 0 0 14px; font-size: 20px; }
.panel > .head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.panel > .head h2 { margin: 0; }
.panel > .head a, .panel > .head .link-button { font-size: 14px; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; }
.stat .label { margin: 0; color: var(--muted); font-size: 13px; }
.stat .value {
  margin: 8px 0 0;
  color: var(--ink);
  font: 400 30px/1.1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.stat .sub { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.stat.hero {
  grid-column: span 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  background: var(--raise);
}
.stat.hero .value { font-size: 46px; }
#bill-credit-box { grid-column: 1 / -1; }

.table-wrap { position: relative; margin: 0; }   /* holds .sr labels inside its scrolling box */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .end { text-align: right; }
.table .muted { color: var(--muted); }
.table tr.gone td { color: var(--muted); }
.pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--raise); color: var(--muted); font-size: 12px; }
.empty { margin: 0; padding: 6px 0; color: var(--muted); }

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: 14px;
}
.notice.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--paper)); }
.notice.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, var(--paper)); }
.notice p { margin: 0; }

/* ------------------------------------------------------------------ forms and buttons */
.field { display: grid; gap: 6px; }
.field > span { color: var(--muted); font-size: 13px; }
.input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: 15px var(--font);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--muted); opacity: .8; }
.input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.input.code { font: 22px/1 var(--mono); letter-spacing: .32em; text-align: center; }
.money { position: relative; }
.money::before { content: "$"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.money .input { padding-left: 28px; font-variant-numeric: tabular-nums; }
.row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.row .field { flex: 1 1 220px; }
.error { margin: 10px 0 0; color: var(--warn); font-size: 14px; }
.button.small { min-height: 34px; padding: 0 14px; border-radius: 8px; font-size: 14px; }
.button.danger { border-color: var(--warn); background: var(--warn); color: var(--on-warn); }
.button.danger.quiet { background: transparent; color: var(--warn); }
.button.danger.quiet:hover { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.button.busy { position: relative; opacity: 1; color: transparent !important; pointer-events: none; }
.button.busy::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--on-acc);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.button.quiet.busy::after { border-color: var(--acc); border-right-color: transparent; }

.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--raise); }
.seg button {
  appearance: none;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 500 14px var(--font);
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.seg button[aria-pressed="true"] { background: var(--knob); color: var(--ink); box-shadow: 0 1px 2px var(--shade), 0 0 0 1px var(--line); }
.seg button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ------------------------------------------------------------------ sign-in */
.signin { max-width: 400px; margin: 7vh auto 0; }
.signin h2 { margin: 0 0 24px; font-size: 34px; }
.signin form { display: grid; gap: 12px; }
.signin .button { width: 100%; }
.signin .again { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
/* signed out: what the API is beside the form; on a narrow screen the form comes second, before the example's length */
.welcome { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.welcome .about { min-width: 0; }
.welcome .about h2 { margin: 0 0 18px; font-size: 34px; letter-spacing: -0.01em; }
.welcome .about p { margin: 0 0 12px; max-width: 62ch; }
.welcome .about .code { margin: 20px 0 14px; }
/* "Teams using the API" (/trusted.js), under the docs link; and the badge in the docs */
.welcome .using { margin: 36px 0 12px; font-size: 14px; font-weight: 500; color: var(--muted); }
.welcome .using-row { contain: inline-size; }
.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.welcome .signin { width: 100%; max-width: 400px; margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.welcome .signin h2 { font-size: 24px; margin-bottom: 18px; }
.credit-note { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.or { display: flex; align-items: center; gap: 12px; margin: 6px 0; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ------------------------------------------------------------------ charts: one series each, bars by day */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chart { position: relative; }
.chart .label { margin: 0; color: var(--muted); font-size: 13px; }
.chart .total { margin: 4px 0 14px; color: var(--ink); font: 400 26px/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.chart svg { display: block; width: 100%; height: 150px; overflow: visible; touch-action: pan-y; }
.chart.small svg { height: 120px; }
.chart .bar { fill: var(--chart); transition: opacity .12s; }
.chart svg.hovering .bar { opacity: .35; }
.chart svg.hovering .day.on .bar { opacity: 1; }
.chart .grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.chart .axis { fill: var(--muted); font: 11px var(--font); font-variant-numeric: tabular-nums; }
.chart .hit { fill: transparent; cursor: default; }
.tip {
  position: absolute;
  z-index: 5;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 8px));
}
.tip strong { display: block; font-weight: 600; }
.by-day { margin-top: 14px; font-size: 14px; }
.by-day summary { color: var(--acc); cursor: pointer; }
.by-day .table-wrap { max-height: 360px; margin-top: 10px; overflow: auto; }

/* ------------------------------------------------------------------ code with tabs and Copy */
.code { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); }
.code .tabs { display: flex; align-items: center; gap: 2px; min-height: 42px; padding: 5px 6px 5px 8px; border-bottom: 1px solid var(--line); }
.code .tabs [role="tab"] {
  appearance: none;
  padding: 5px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font: 500 13px var(--font);
  cursor: pointer;
}
.code .tabs [role="tab"][aria-selected="true"] { background: var(--knob); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.code .tabs .title { padding: 0 6px; color: var(--muted); font-size: 13px; }
.code .copy { margin-left: auto; }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; color: var(--ink); font: 13px/1.65 var(--mono); tab-size: 2; }
.code pre code { padding: 0; background: none; font: inherit; }
.code .s { color: var(--acc); }
.code .c { color: var(--muted); }

/* ------------------------------------------------------------------ keys, credit and Checkout */
.reveal { margin: 16px 0 0; padding: 16px; border: 1px solid color-mix(in srgb, var(--acc) 40%, var(--line)); border-radius: 12px; background: var(--acc-soft); }
.reveal p { margin: 0 0 10px; color: var(--ink); font-size: 14px; }
.reveal .keyline { display: flex; align-items: center; gap: 10px; }
.reveal .notice { margin: 14px 0 0; background: var(--paper); }
.reveal .keyline ~ p { margin: 16px 0 8px; }
.reveal .keyline code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font: 13px var(--mono);
  white-space: nowrap;
}
.kinds-note { max-width: 70ch; margin: 14px 0 16px; color: var(--muted); font-size: 14px; }
/* what a new key draws on: credit or the account's plan. Hidden on Free, where there is no plan to draw on. */
.draws { margin: 14px 0 0; padding: 0; border: 0; }
.draws > legend { padding: 0; color: var(--muted); font-size: 13px; }
.draws .choice { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding: 8px 0; cursor: pointer; }
.draws .choice > span { color: var(--muted); font-size: 14px; }
.draws .choice b { display: block; color: var(--ink); font-weight: 500; }
.packs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.pack {
  appearance: none;
  min-height: 60px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: 400 24px/1 var(--serif);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.pack:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
.pack[aria-pressed="true"] { border-color: var(--acc); background: var(--acc-soft); box-shadow: inset 0 0 0 1px var(--acc); }
.pack:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.pack.other { font: 500 15px/1.2 var(--font); color: var(--body); }
.checkout { margin-top: 16px; }
.checkout .mount { min-height: 120px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.checkout .bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 14px; }
.added { margin: 0 0 16px; }
.added strong { font: 400 22px/1.2 var(--serif); color: var(--ink); }

/* ------------------------------------------------------------------ docs */
.docs { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 48px; max-width: 1080px; }
.docs article { min-width: 0; }
.docs article > h2.doc-title { margin: 0 0 8px; font-size: 34px; letter-spacing: -0.01em; }
.docs article h2 { margin: 52px 0 12px; font-size: 26px; scroll-margin-top: 84px; }
.docs article h3 { margin: 28px 0 8px; color: var(--ink); font: 600 16px/1.4 var(--font); scroll-margin-top: 84px; }
.docs article p, .docs article li { max-width: 70ch; }
.docs article p { margin: 0 0 14px; }
.docs article ul { margin: 0 0 14px; padding-left: 22px; }
.docs article li { margin: 0 0 6px; }
.docs .code { margin: 0 0 16px; }
.docs .table-wrap { margin: 0 0 16px; overflow-x: auto; }
.docs .table td { vertical-align: top; }
.docs .table td:first-child { white-space: nowrap; }
.toc { position: sticky; top: 94px; align-self: start; font-size: 14px; }
.toc p { margin: 0 0 8px; color: var(--ink); font-weight: 500; }
.toc a { display: block; padding: 4px 0 4px 12px; border-left: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--ink); opacity: 1; }
.toc a[aria-current="true"] { border-left-color: var(--acc); color: var(--acc); }

/* ------------------------------------------------------------------ the revoke dialog */
dialog.confirm {
  width: calc(100% - 32px);
  max-width: 420px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--body);
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .4);
}
dialog.confirm::backdrop { background: rgba(23, 21, 18, .38); }
dialog.confirm h2 { margin: 0 0 8px; font-size: 22px; }
dialog.confirm p { margin: 0; }
dialog .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ------------------------------------------------------------------ waiting, and motion */
.wait {
  display: inline-block;
  min-width: 4ch;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--raise), var(--line), var(--raise));
  background-size: 200% 100%;
  color: transparent !important;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
@keyframes glow { 0% { background-color: color-mix(in srgb, var(--ok) 18%, var(--raise)); } 100% { background-color: var(--raise); } }
@media (prefers-reduced-motion: no-preference) {
  .view:not([hidden]) { animation: enter .28s cubic-bezier(.2, .8, .2, 1); }
  .wait { animation: shimmer 1.4s linear infinite; }
  .stat.hero.glow { animation: glow 1.8s ease-out; }
  .added { animation: enter .35s cubic-bezier(.2, .8, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .button.busy::after { animation-duration: 2s; }
}

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1180px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sections {
    top: 60px;
    z-index: 20;
    flex-direction: row;
    gap: 4px;
    padding: 8px 12px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    scrollbar-width: none;
  }
  .sections::-webkit-scrollbar { display: none; }
  .sections a { white-space: nowrap; }
  .console { padding: 24px 16px 80px; }
  .topbar { padding: 0 16px; }
  .charts { grid-template-columns: minmax(0, 1fr); }
  /* one column: what it is, the form, then the example, so the form is not a screen below a block of code */
  .welcome { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .welcome .about { display: contents; }
  .welcome .signin { order: 1; margin: 12px 0 28px; max-width: none; }
  .welcome .about .code { order: 2; margin-top: 0; }
  .welcome .about .code + p { order: 3; }
  .docs article h2, .docs article h3 { scroll-margin-top: 130px; }
}
@media (max-width: 640px) {
  .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topbar .crumb { display: none; }
  .view > h2, .view > .head h2, .docs article > h2.doc-title, .welcome .about h2 { font-size: 30px; }
  .stat.hero .value { font-size: 40px; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat.hero { grid-column: auto; }
  .topbar .who span { display: none; }
}

/* every page of the console reaches both, since this is where credit is bought */
.legal { display: flex; justify-content: center; gap: 22px; padding: 0 24px 40px; font-size: 13px; }
.legal a { color: var(--muted); text-decoration: none; }
.legal a:hover { color: var(--ink); opacity: 1; }

/* In the site's look (15 October; the founder: the API's pages showed "an aesthetic jump" from the home page): the
   site's type, its ink buttons and selection, and the name in the site's serif at the same weight as every other bar.
   The page's CSP (vercel.json) allows only this site's stylesheets and fonts, so Geist shows here only once it is
   served from the site; until then the system's sans stands in. */
body.platform { --sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-family: var(--sans); }
.platform h1, .platform h2 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; }
.platform .chart .total, .platform .pack strong, .platform .added strong { font-family: var(--sans); font-weight: 500; }
.topbar .brand { font-weight: 600; font-size: 23px; letter-spacing: -0.01em; }
.platform .button:not(.danger) { background: var(--ink); border-color: var(--ink); color: var(--paper); font-family: var(--sans); }
.platform .button:not(.danger):hover { filter: none; opacity: .88; }
.platform .button.quiet:not(.danger) { background: transparent; border-color: color-mix(in srgb, var(--ink) 22%, transparent); color: var(--ink); }
.platform .button.quiet:not(.danger):hover { background: var(--raise); opacity: 1; }
.platform .button.busy:not(.quiet):not(.danger)::after { border-color: var(--paper); border-right-color: transparent; }
.platform .button.quiet.busy::after { border-color: var(--ink); border-right-color: transparent; }
.sections a[aria-current="page"] { background: var(--raise); color: var(--ink); }
.code .tabs button:not([aria-selected="true"]) { color: #685f57; }   /* 4.5:1 on the code's tint (axe) */
@media (prefers-color-scheme: dark) { .code .tabs button:not([aria-selected="true"]) { color: var(--muted); } }
/* the refresh (2026-10-16; the founder: "it also needs to be refreshed and brought in alignment"): the site's bar
   height, headings large and in the sans as the site's are, links in ink, softer cards with the site's shadow, the
   sign-in on a card like Contact's, figures in the sans. Only how things look; nothing here moves a control. */
.topbar { height: 64px; }
.topbar .crumb { font-family: var(--sans); font-size: 14.5px; font-weight: 500; }
.platform a:not(.button):not(.brand) { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.platform .link-button { color: var(--ink); }
.sections a { font-family: var(--sans); font-size: 14.5px; font-weight: 500; color: var(--muted); }
.sections a:hover { color: var(--ink); }
.console { padding-top: 44px; }
.welcome .about h2, .view > h2, .view > .head h2 { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -0.035em; }
.welcome .about h2 { margin-bottom: 22px; }
.welcome .about p { font-size: 16.5px; line-height: 1.6; }
.welcome .signin { padding: 28px; border: 0; border-radius: 22px; box-shadow: 0 1px 2px rgba(34, 29, 25, .05), 0 22px 44px -30px rgba(34, 29, 25, .4); }
.welcome .signin h2 { font-size: 26px; letter-spacing: -0.02em; }
.welcome .signin .button { min-height: 46px; border-radius: 12px; }
.panel, .stat { border-radius: 18px; }
.panel { box-shadow: 0 1px 2px rgba(34, 29, 25, .04); }
.platform .stat .value { font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; }
.platform .code { border-radius: 16px; }
@media (prefers-color-scheme: dark) { .welcome .signin { box-shadow: 0 0 0 1px var(--line); } }