/* What every public page shares: the tokens, the header with Wezel's knot and
   the pages, the footer, and the reading column of the guide, privacy, support
   and terms. Helvetica Bold for what is announced, the same family regular for
   what is read, and a monospace capital for the status row (the sign-in
   screen's title). Each page adds its own layout. ADR-0060, ADR-0061.

   One theme, by choice: Neon, the 90s night of the owner's picture, cyan from
   the left and magenta from the right (ADR-0060). */

:root {
  --paper: #05060a;
  --ink: #eef3ff;
  --muted: #8d97b0;
  --rule: #232a3d;
  --link: #5ff6ff;
  --logo: #effdff;
  --cyan: #19f3ff;
  --magenta: #ff2bd6;
  --display: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --caption: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* A row of pixels, two on and two off: the footer's rule and a section's. */
  --pixel-rule: linear-gradient(to right, rgba(25, 243, 255, .42) 2px, transparent 2px) 0 0 / 4px 2px repeat-x;
  color-scheme: dark;
}

html { -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--body); }
a { color: var(--link); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
h1 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; color: #fff;
     /* The colours split, as on a tube that is not quite converged. */
     text-shadow: -2px 0 rgba(25, 243, 255, .6), 2px 0 rgba(255, 43, 214, .6), 0 0 30px rgba(140, 90, 255, .35); }
p { margin: 0; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 20px; }

/* The header: the lockup, and the pages. */
.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; padding-block: 1.4rem; }
.logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.logo .knot { display: block; flex: none; width: 2.5rem; height: 2.5rem; color: var(--logo);
             filter: drop-shadow(-1px 0 0 var(--cyan)) drop-shadow(1px 0 0 var(--magenta)) drop-shadow(0 0 7px rgba(25, 243, 255, .55)); }
.logo .name { font: 400 1.25rem/1 var(--display); letter-spacing: -.012em; white-space: nowrap; }
.logo .name b { font-weight: 700; }
.top nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .95rem; }
.top nav a, footer .links a { color: var(--ink); text-decoration: none; text-underline-offset: .3em; }
.top nav a:hover, footer .links a:hover { text-decoration: underline; }
.top nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

/* The footer: a row of pixels over the pages and the small print. */
footer { padding: 2rem 0 3rem; color: var(--muted); font-size: .92rem; background: var(--pixel-rule); }
footer .links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-bottom: .9rem; }
footer p + p { margin-top: .5rem; }

/* The reading column: the guide, privacy, support and terms. */
.doc { padding-block: 1.5rem 4rem; }
.doc > * { max-width: 42rem; }
.doc h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em;
          text-shadow: -1.5px 0 rgba(25, 243, 255, .55), 1.5px 0 rgba(255, 43, 214, .55); }
.doc .updated { margin: 1rem 0 2rem; font: 600 .72rem/1.6 var(--caption); letter-spacing: .12em; text-transform: uppercase; color: #6fd9e6; }
.doc h2 { font-family: var(--display); font-size: 1.3rem; line-height: 1.25; letter-spacing: -.01em;
          margin: 2.6rem 0 .6rem; padding-top: 1.4rem; background: var(--pixel-rule); }
.doc h3 { font-size: 1.02rem; margin: 1.4rem 0 .3rem; }
.doc p, .doc li { margin: .55rem 0; }
.doc ul, .doc ol { padding-left: 1.3rem; }
.doc .contact { font-size: 1.15rem; margin: 1.25rem 0; }
.doc .key { border-left: 3px solid var(--cyan); padding: .1rem 0 .1rem 1rem; margin: 1.25rem 0; }
.doc .scroll { overflow-x: auto; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; margin: .75rem 0; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: .45rem .5rem .45rem 0; border-bottom: 1px solid var(--rule); }
.doc th { font-weight: 600; }