/* The documentation's stylesheet, taken from the marketing site so the two
   look like one company.
 *
 * Until 2026-09-17 there were two designs. The cookbook was built by
 * docs/cookbook/render.py with its own palette -- Geist on white with a purple
 * accent -- and the overview, the reference and the terms went through the
 * sign-up form's plain shell: browser defaults, 640px wide, no header, no
 * navigation, blue underlined links. Neither resembled nums.world.
 *
 * The header here used to say the tokens below were copied from that site's
 * globals.css. They were not. nums-ai.github.io has no :root block at all --
 * its tokens live on a .site class -- and not one of the values matched:
 * the ground was #f5f7fa against the site's #ffffff, the ink #12151c against
 * #171717, the hairline rgba(18,21,28,.10) against #e4e4e4, and the sans
 * stack carried no Korean face, so every Korean heading fell back to whatever
 * the browser chose. They were plausible values with a citation attached,
 * which is the failure this project keeps making in code and made here in
 * CSS. Re-read from the source on 2026-09-18 and copied exactly.
 *
 * What is absent is still the important thing: there is no accent colour on
 * that site, anywhere. Emphasis is weight, a rule, an inversion, or the
 * selection wash, never a second hue. A purple link in this palette reads as
 * a mistake.
 *
 * Served from /docs/assets/docs.css. The four static cookbook pages and the
 * pages the service renders link this same file, so a change lands on all of
 * them at once and they cannot drift apart again. */

:root {
  /* nums-ai.github.io, homepage.module.css .site */
  --bg: #ffffff;
  --bg2: #f7f7f7;          /* the site's --surface: footer, separated header */
  --ink: #171717;          /* the site's --text */
  --muted: #666666;        /* the site's --secondary */
  --faint: #737373;        /* the site's smallest labels, e.g. .copyright */
  --line: #e4e4e4;         /* the site's --border */
  --line2: #ededed;        /* its softer divider, e.g. .tableFooter */
  --hairline: #1717170c;   /* what the site puts under its sticky header */
  --sel: #e4e4e4;          /* the site's ::selection background */
  /* Verbatim from the site, Korean faces included. Dropping those was why a
     Korean heading here and the same heading there were set in different
     typefaces. */
  --sans: "Helvetica Neue", Helvetica, Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* The site's two radii. It has exactly two and uses them everywhere; this
     file had four -- 12px cards, a 100px pill, 2px form controls, 4px inline
     code -- which is four decisions where the site made one. */
  --panel-radius: 16px;
  --control-radius: 8px;
  /* Referenced in three places and defined in none until 2026-09-18, so the
     fallbacks #dde1e8 and #c9ced8 were the real values and both sat outside
     the token set. */
  --rule: var(--line);
  /* Measured, not guessed. The bar is 78px tall at reading width; it was
     declared 61px and the sidebar's first row sat behind it at phone width,
     where the wrapped bar reaches 125px. */
  /* The site's own wrap and gutter, measured off nums.world rather than
     guessed: --page-width 1200px and --gutter clamp(24px, 5vw, 72px). This
     file had 1180px and clamp(20px, 5vw, 56px), so at a wide window the
     documentation sat 16px narrower with 16px less air down each side. Small
     numbers, but they are the ones that decide whether two pages look like
     one company at a glance. */
  --page-width: 1200px;
  --gutter: clamp(24px, 5vw, 72px);
  /* Measured, not guessed. It was declared 61px once and the sidebar's first
     row sat behind it at phone width. 78px held until the bar took the site's
     own 88px min-height on 2026-09-18; re-measured at 390, 640, 850, 1280 and
     2545px, where it is 88px at every one because the links drop before the
     bar has to wrap. */
  --nav-h: 88px;
  --nav-h-narrow: 88px;
  --side-w: 232px;
}

/* The site drops both radii one step on a phone. */
@media (max-width: 640px) {
  :root { --panel-radius: 12px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  /* 17px / 1.8 / -.01em is what nums.world sets for long-form text -- its
     blog article body and the careers prose both. This was 15.5px / 1.62,
     which is a different reading rhythm on the same brand. Found on
     2026-09-18 by reading blog.module.css and careers.module.css, the two
     files on that site closest to what this one does; the earlier pass had
     only looked at the homepage, which has no long-form text on it. */
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
::selection { background: var(--sel); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* --- Top bar -------------------------------------------------------------
   The marketing site's nav, to the pixel: fixed, translucent, blurred, one
   hairline underneath. Same brand images, same 18px padding, same 14.5px
   muted links that darken on hover. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  /* The bar is full width for the background and the hairline; its contents
     are not. .nav-inner carries the page column. */
  background: #ffffffed;
  /* The site's header, to its own values: #ffffffed over an 18px blur with a
     hairline that is almost not there. Ours was a blue-grey wash at .72 with
     a 14px blur, which read as a different chrome on a different product. */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hairline);
}
/* The bar's inner row is the page column, centred, 88px tall, with the links
 * 56px after the wordmark -- nums.world's own spacing.
 *
 * It was briefly a two-column grid matching .frame, so the links sat on the
 * article's left edge rather than beside the logo. That does make one fewer
 * vertical line down the page, and it looks wrong: at a wide window it puts
 * a 280px hole between the wordmark and the first link, and the links read
 * as floating in the middle of the screen rather than belonging to the brand
 * beside them. The marketing site's bar has no sidebar to align to and keeps
 * them adjacent; a documentation bar that does otherwise stops looking like
 * the same company's, which is the whole point of this file. */
.nav-inner {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--page-width);
  margin-inline: auto;
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 56px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; }
/* The wordmark on its own, at the site's own width. nums.world's header has
   no orbit mark in it; this bar had one, so the two opened with different
   logos. The .brand-mark rule is gone with it -- logo-mark.png stays in
   /docs/assets because the favicon set is built from it. */
.brand-word {
  display: block; width: 96px; height: 17px;
  background: url("logo-word.png") left center/contain no-repeat;
}
/* The links sit beside the brand; only the button is pushed to the right,
   which is the one element nums.world's own bar does not have. */
.nav-links { display: flex; align-items: center; gap: 30px; min-width: 0; }
.nav-links a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.nav-links a:hover { color: var(--ink); }
/* The site marks the current page with an underline rather than a colour
   change, set well below the baseline and in a grey light enough to read as
   a mark rather than as a link. */
.nav-links a[aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #aaa;
  text-underline-offset: 7px;
}
/* The site's button. It has one shape -- an 8px rectangle, 52px tall, label
   and arrow pushed apart -- and no pill anywhere. This was a 100px pill,
   which is the one control on either site that had a shape of its own. The
   fill is inverted because this bar sits on white and the site's sits on its
   dark hero. */
.nav-cta {
  display: inline-flex; align-items: center;
  min-height: 40px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: var(--ink);
  color: var(--bg) !important;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .18s, border-color .18s;
}
.nav-cta:hover { background: #303030; }

/* --- Frame ---------------------------------------------------------------
   A sidebar and one reading column, inside the site's 1180px wrap. The
   reading column is capped at 730px: documentation is read, and a line of
   prose stops being readable somewhere past ninety characters. */
.frame {
  /* The gutter takes width away from the column; it is not padding inside
     it. nums.world writes `width: calc(100% - 2 * gutter); max-width: 1200px`
     and this had `max-width: 1200px; padding-inline: gutter`, which is the
     same on a narrow screen and 72px different on a wide one: the bar's
     wordmark landed at 673px and the sidebar beside it at 745px. */
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--page-width);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) 0 96px;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.side {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  font-size: 14px;
}
.side-group + .side-group { margin-top: 26px; }
.side-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
  margin-bottom: 10px;
}
/* The site's own sidebar is the careers outline: a hairline down the left in
   --border, 14px muted links, and the current one marked by thickening that
   line to 2px in the ink rather than by bolding the text. This used --line2
   for the rail and added weight 600, so the same component read heavier. */
.side a {
  display: block;
  padding: 5px 0 5px 13px;
  margin-left: -1px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  transition: color .18s, border-color .18s;
}
.side a:hover { color: var(--ink); }
.side a[aria-current] {
  color: var(--ink);
  border-left: 2px solid var(--ink);
  padding-left: 12px;
}
.doc { max-width: 730px; min-width: 0; }

/* Every problem document's `type` is /docs/reference#<code>, so following one
   must put the row in view rather than behind the fixed bar. The highlight
   is what tells a reader which of seventeen near-identical rows they came
   for. */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* The row you were sent to, marked for as long as it takes to see it.
 *
 * A plain `tr:target { background }` was tried first and was worse than
 * nothing: :target holds for as long as the fragment is in the URL, so a
 * reader who followed one error link and then scrolled away was left with one
 * row of seventeen tinted for the rest of the visit, with nothing on the page
 * explaining why. It read as a rendering fault, which is exactly what it was
 * reported as.
 *
 * Two seconds, then gone. The animation runs once per navigation because
 * :target starts matching at that moment; re-following the same link replays
 * it. prefers-reduced-motion keeps the mark and drops the fade rather than
 * leaving the reader with no cue at all. */
@keyframes landed {
  from { background: var(--sel); }
  to   { background: transparent; }
}
tr:target td { animation: landed 2s ease-out 1 both; }
tr:target td:first-child {
  animation: landed 2s ease-out 1 both, landed-rule 2s ease-out 1 both;
}
@keyframes landed-rule {
  from { box-shadow: inset 3px 0 0 var(--ink); }
  to   { box-shadow: inset 3px 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  tr:target td { animation: none; background: var(--sel); }
  tr:target td:first-child { animation: none; box-shadow: inset 3px 0 0 var(--ink); }
}

/* --- Type ----------------------------------------------------------------
   The site's scale, one step down: a documentation h1 sits above a paragraph,
   not above a viewport. Tight tracking and 1.06 leading are what make it read
   as the same hand. */
/* Weight 400, not 700.
 *
 * The site sets every heading at 400 and separates it from body text with
 * size and tracking alone -- .heroTitle, .pageTitle, .sectionTitle are all
 * 400, and the only 600 on the whole page is a syntax keyword. Setting these
 * at 700 is the single loudest way the two sites did not match: side by side,
 * ours read as a manual and theirs as a product page.
 *
 * Tracking follows from that. A heading at 400 needs the site's -0.045em to
 * hold together; at 700 it did not, which is why this file had -0.028em. */
h1 {
  font-weight: 400;
  /* Floor of 34px, the site's own for a page title at phone width. 30px left
     it two pixels from h2. */
  font-size: clamp(34px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.045em;
}
h2 {
  font-weight: 400;
  /* Flat 28px, dropping to 26px on a phone: blog.module.css .articleBody h2.
     A clamp that only reached 28px at the widest window meant the same
     heading was a different size on the two sites at every other width. */
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.035em;
  margin: 52px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
/* 500, the weight the site gives its card headings -- the one step it uses
   between body and heading. */
h3 {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.025em;
  margin: 32px 0 10px;
}
/* Korean sets looser and cannot take the same negative tracking; the site
   carries a [lang=ko] branch for exactly this. */
h1:lang(ko), h2:lang(ko), h3:lang(ko) { line-height: 1.28; letter-spacing: -0.03em; }
p { margin: 0 0 15px; }
h1 + p, h1 + .banner, h1 + .tw, h1 + div { margin-top: 18px; }
.lead > p:last-child { margin-bottom: 0; }
.lead {
  margin: 18px 0 30px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--muted);
}
/* A link in running text has to look like one. The site has almost no body
   links, so there is no precedent to copy; a hairline at --line was tried
   first and was invisible at reading size. This is the site's ink with a
   half-strength underline, which reads as a link without introducing a
   second hue into a palette that deliberately has one colour. */
/* :not(.oauth-button) because the sign-up button is an anchor inside a
   paragraph, so `.doc p a` outranked `.oauth-button` and underlined the label
   inside the button. It was wrong before this file gave the button a real
   shape too; it was just less visible on a 2px rectangle. */
.doc p a:not(.oauth-button), .doc li a, .doc td a, .lead a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--faint);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .2s;
}
.doc p a:not(.oauth-button):hover, .doc li a:hover, .doc td a:hover, .lead a:hover {
  text-decoration-color: var(--ink);
}
strong { font-weight: 600; }
small { color: var(--muted); font-size: 13px; }
hr { border: 0; border-top: 1px solid var(--line2); margin: 34px 0; }
ul, ol { margin: 0 0 15px; padding-left: 20px; }
li { margin-bottom: 6px; }

/* An eyebrow, for the one place a label is worth more than a heading. */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--muted); opacity: .7; }

/* --- Code ----------------------------------------------------------------
   A card on the page's ground, the same 16px-family radius as the site's
   panels. Long lines scroll inside the card rather than widening the page. */
code, pre, kbd { font-family: var(--mono); }
p code, li code, td code, th code {
  background: var(--sel);
  padding: 1.5px 5px;
  border-radius: 4px;
  font-size: 0.875em;
  white-space: nowrap;
}
/* Dark, because the site's code panel is dark.
 *
 * nums-ai.github.io has exactly one code block on it -- the Python quick
 * start -- and it is #1b1b1b inside a #353535 hairline at the panel radius,
 * with a soft drop shadow and #c7c7c7 text. It is the most recognisable thing
 * on that page after the hero. These were white cards on a white ground,
 * which is a different product's documentation.
 *
 * Long lines scroll inside the panel rather than widening the page. */
pre, .hl {
  margin: 0 0 20px;
  padding: 18px 20px;
  background: #1b1b1b;
  border: 1px solid #353535;
  border-radius: var(--panel-radius);
  box-shadow: 0 18px 48px #00000012;
  overflow-x: auto;
  color: #c7c7c7;
  font-size: 13px;
  line-height: 1.7;
}
pre code, .hl pre { background: none; padding: 0; border: 0; font-size: inherit; }
/* pygments.css sets .hl{background:#f0f0f0} and loads after this file. Without
   these, a highlighted block and a bare <pre> forty pixels apart were #f0f0f0
   and #ffffff. */
.hl { background: #1b1b1b !important; }
/* Recorded output, a step lighter than the code that produced it. */
.hl.out { background: #212121 !important; }

/* Highlighting in a palette that has no accent colour.
 *
 * Pygments' "friendly" style paints six hues -- green keywords, blue strings,
 * teal builtins -- and this file's own header says the point of the token set
 * is that there is no second hue. Six of them, in the first thing a reader
 * sees on /docs, is that mistake at scale.
 *
 * So the code is set in ink at three strengths and one italic, which is all
 * the differentiation reading code actually needs: what is a comment, what is
 * a keyword, what is a literal. Loaded after pygments.css, so these win.
 */
.hl .c, .hl .c1, .hl .cm, .hl .ch, .hl .cs, .hl .cp, .hl .cpf {
  /* #858585, not the #7b7b7b that matched the panel better: on #1b1b1b that
     was 4.07:1 and comments are set at 13px, which is not large text. This is
     4.74:1. The site has no comments in its one code block, so there was no
     value to copy and contrast decided it. */
  color: #858585 !important; font-style: italic;
}
.hl .k, .hl .kc, .hl .kd, .hl .kn, .hl .kp, .hl .kr, .hl .kt, .hl .ow, .hl .nt {
  color: #ffffff !important; font-weight: 600;
}
.hl .s, .hl .s1, .hl .s2, .hl .sa, .hl .sb, .hl .sc, .hl .sd, .hl .se,
.hl .sh, .hl .si, .hl .sx, .hl .sr, .hl .ss, .hl .dl,
.hl .m, .hl .mb, .hl .mf, .hl .mh, .hl .mi, .hl .mo, .hl .il {
  color: #a8a8a8 !important; font-weight: 400;
}
.hl .nb, .hl .bp, .hl .nc, .hl .nn, .hl .nf, .hl .fm, .hl .nd, .hl .na,
.hl .no, .hl .nv, .hl .vc, .hl .vg, .hl .vi, .hl .ne, .hl .nl, .hl .py,
.hl .o, .hl .p, .hl .n, .hl .err {
  color: #eeeeee !important; font-weight: 400; background: none !important;
}
.hl pre { margin: 0; overflow: visible; }
/* Recorded output. The rule on the left is the only thing that separates it
   from the code that produced it, which is the distinction worth drawing. */
.hl.out {
  border-left: 2px solid #5f5f5f;
  border-radius: var(--panel-radius);
}
/* Output is printed, not written, so it keeps one voice throughout rather
   than borrowing the code panel's three. */
.hl.out .c, .hl.out .k, .hl.out .s, .hl.out .m, .hl.out .n,
.hl.out .o, .hl.out .p, .hl.out .nb, .hl.out .err {
  color: #c7c7c7 !important; font-weight: 400; font-style: normal;
}
.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 8px;
}

/* --- Tables --------------------------------------------------------------
   The site's table: hairlines, no vertical rules, a mono head. Wrapped in a
   scroller by the renderer so a wide one never widens the page. */
.tw { overflow-x: auto; margin: 0 0 22px; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th, td {
  text-align: left;
  padding: 9px 16px 9px 0;
  border-bottom: 1px solid var(--line2);
  vertical-align: top;
}
thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td:last-child, th:last-child { padding-right: 0; }
/* Two-column tables are figures, not data: number on the right, no head. */
.facts td:last-child { text-align: right; font-family: var(--mono); font-size: 13px; }

/* --- Page furniture ------------------------------------------------------ */
.nearby {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line2);
  font-size: 14.5px;
}
.nearby a { color: var(--ink); text-decoration: none; font-weight: 600; }
.nearby a:hover { color: var(--muted); }
.foot {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.banner {
  padding: 18px 20px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  margin: 0 0 26px;
}
.banner p:last-child { margin-bottom: 0; }

@media (max-width: 850px) { body { font-size: 16px; } }
@media (max-width: 640px) {
  body { font-size: 15px; }
  /* 26px, which blog.module.css also does at this width. Without it h2 stayed
     at 28 while h1 fell to 30, and a two-pixel step between a page title and
     a section heading is not a step. */
  h2 { font-size: 26px; }
}

/* --- Narrow --------------------------------------------------------------
   The sidebar becomes a row of links above the article rather than
   disappearing: on a phone it is the only way to the other pages. */
@media (max-width: 850px) {
  .frame { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: calc(var(--nav-h-narrow) + 20px); }
  .nav-inner { gap: 30px; }
  .side {
    position: static;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line2);
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;
  }
  .side-group + .side-group { margin-top: 0; }
  .side-label { display: none; }
  .side a { border-left: 0; padding: 4px 0; margin: 0; }
  .side a[aria-current] { border-left: 0; }
  .nav-links { gap: 22px; }
  .nav-links .hide-narrow { display: none; }
  .nearby { flex-direction: column; gap: 10px; }
}

/* Below this the bar cannot hold the brand, four links and a button. Measured
   at 385px: the row wanted 491px, so "Get a key" -- the one thing on the page
   a visitor might click -- sat entirely outside a fixed element that cannot
   scroll. The links are in the sidebar directly below, which at this width is
   a row across the top of the article, so dropping them from the bar loses
   nothing; the button stays, because the sidebar has no equivalent. */
@media (max-width: 640px) {
  .nav-inner { display: flex; flex-wrap: wrap; gap: 10px 14px; min-height: 64px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-cta { min-height: 36px; padding: 8px 16px; }
  .brand-word { width: 88px; }
}

/* Sign in with Google. One button, the same ink as everything else: a
   branded blue block here would be the only saturated colour on the site. */
.oauth { margin: 22px 0 10px; }
/* The site's button proportions: 52px tall, 8px radius, weight 500. This was
   a 2px rectangle, a radius that appears nowhere on nums.world. */
.oauth-button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: var(--control-radius);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .18s, color .18s;
}
.oauth-button:hover { background: var(--ink); color: var(--bg); }
.oauth-note { color: var(--muted); font-size: 0.92rem; margin: 0 0 22px; }
.oauth-or {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* The sign-up form and the page a key appears on. They share this stylesheet
   with the documentation since 2026-09-17; before that they had a shell of
   their own and were the only two screens that did not look like the site. */
form#signup p { margin: 0 0 16px; }
form#signup label { font-weight: 500; }
form#signup small { color: var(--muted); font-weight: 400; }
input[type=text], input[type=email] {
  width: 100%;
  max-width: 420px;
  padding: 7px 9px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--control-radius);
}
input[type=text]:focus, input[type=email]:focus {
  outline: none;
  border-color: var(--ink);
}
button {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  min-height: 52px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: var(--control-radius);
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  transition: background-color .18s;
}
button:hover:not([disabled]) { background: #303030; }
button[disabled] { opacity: .55; cursor: default; }
/* Off-screen rather than hidden: it is the field only a robot fills in, and
   display:none is the first thing a robot learns to skip. */
.field-note { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#notice {
  border: 1px solid var(--rule);
  border-radius: var(--panel-radius);
  padding: 14px 16px;
}
/* The key itself. Shown once, so it has to be selectable and unwrapped. */
pre.key { font-size: 1rem; word-break: break-all; white-space: pre-wrap; }