/* GENERATED by server-cf/scripts/build-site-assets.mjs. Do not edit.
   Sources: packages/ui/src/styles/{fonts,tokens}.generated.css and
   server-cf/src/site/assets/site.css. Font licence: ./ofl.a76abf002c.txt */

/* latin-ext */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./instrument-serif-400-latin-ext.a8c4bd7cd7.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./instrument-serif-400-latin.60c06664b5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("./instrument-sans-var-latin-ext.21fac8da55.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("./instrument-sans-var-latin.6219bc4bfd.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("./instrument-sans-var-latin-ext.21fac8da55.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("./instrument-sans-var-latin.6219bc4bfd.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./ibm-plex-mono-400-latin-ext.f1050dc531.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./ibm-plex-mono-400-latin.c36f509c0a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./ibm-plex-mono-500-latin-ext.77f03e26f9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./ibm-plex-mono-500-latin.a76f53ca66.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colour. Dark is the default: these are the values any
     surface gets before a theme is chosen. Other themes override the same
     custom properties below, which is why the utilities need no variants. */
  --color-ink-000: #0B0E11;
  --color-ink-050: #0E1216;  /* App ground. Every window's base layer. */
  --color-ink-100: #151A20;  /* Panels, sidebars, sheets and field interiors. */
  --color-ink-200: #1B2128;  /* Rows and cards at rest. */
  --color-ink-300: #232B33;  /* Row and control hover. */
  --color-ink-400: #2E3843;  /* Pressed state, and the unfilled track of the expiry ring. */
  --color-line-soft: #212932;  /* Dividers and the border of a resting row. */
  --color-line-hard: #333E49;  /* Secondary buttons, field borders, panel edges. */
  --color-line-brass: #3D3020;
  --color-fg-hi: #EDEFF2;  /* Primary text, codes and secret values. 15.8:1 on ink-050. */
  --color-fg-mid: #A6B0BB;  /* Body copy and supporting lines. 8.2:1 on ink-050. */
  --color-fg-lo: #7E8A96;
  --color-brass-300: #EFD39A;
  --color-brass-400: #DCA94A;
  --color-brass-500: #C8952F;
  --color-brass-600: #A87A22;  /* Pressed state of a brass fill. */
  --color-brass-tint: #2A2118;  /* Provider mark backgrounds, favourite-on chips, the 2FA badge. */
  --color-on-brass: #14171A;
  --color-sage: #5BA184;
  --color-copper: #D07C3A;
  --color-brick: #DB6252;  /* Breached, weak, refused, and destructive outlines. */
  --color-steel: #6E96C4;
  --color-sage-tint: #16221D;  /* Chip ground behind sage text. */
  --color-copper-tint: #241A12;  /* Chip ground behind copper text. */
  --color-brick-tint: #241618;
  --color-steel-tint: #17202B;  /* Chip ground behind steel text. */
  --color-scrim: rgba(6,8,11,0.74);  /* Behind a modal sheet or the mobile autofill sheet. */

  /* Families. */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display - set in --font-display. */
  --text-display: 56px;
  --text-display--line-height: 60px;
  --text-display--font-weight: 400;
  --text-display--letter-spacing: -0.015em;
  --text-title: 28px;
  --text-title--line-height: 34px;
  --text-title--font-weight: 400;

  /* Interface - set in --font-sans. */
  --text-heading: 20px;
  --text-heading--line-height: 26px;
  --text-heading--font-weight: 600;
  --text-subhead: 16px;
  --text-subhead--line-height: 22px;
  --text-subhead--font-weight: 600;
  --text-body: 14px;
  --text-body--line-height: 20px;
  --text-body--font-weight: 400;
  --text-body-strong: 14px;
  --text-body-strong--line-height: 20px;
  --text-body-strong--font-weight: 600;
  --text-caption: 12px;
  --text-caption--line-height: 17px;
  --text-caption--font-weight: 400;
  --text-label: 11px;
  --text-label--line-height: 14px;
  --text-label--font-weight: 600;
  --text-label--letter-spacing: 0.09em;
  /* --text-label is uppercase: pair it with `uppercase`. */

  /* Code - set in --font-mono. */
  --text-code-xl: 32px;
  --text-code-xl--line-height: 32px;
  --text-code-xl--font-weight: 500;
  --text-code-xl--letter-spacing: 0.1em;
  --text-code-lg: 20px;
  --text-code-lg--line-height: 24px;
  --text-code-lg--font-weight: 500;
  --text-code-lg--letter-spacing: 0.1em;
  --text-code: 13px;
  --text-code--line-height: 20px;
  --text-code--font-weight: 400;
  --text-code-masked: 13px;
  --text-code-masked--line-height: 20px;
  --text-code-masked--font-weight: 400;
  --text-code-masked--letter-spacing: 0.16em;

  /* Spacing. Reached as `p-(--space-7)`; see the note in the source. */
  --space-1: 4px;  /* Icon to its label. */
  --space-2: 8px;  /* Stacked meta lines; issuer to login. */
  --space-3: 12px;  /* Inside a chip or pill. */
  --space-4: 16px;  /* Row padding and card gutter. */
  --space-5: 20px;  /* Between cards. */
  --space-6: 24px;  /* Window edge on phone. */
  --space-7: 32px;  /* Window edge on desktop. */
  --space-8: 40px;  /* Between sections. */
  --space-9: 56px;  /* Empty-state breathing room. */
  --space-10: 72px;  /* Cover and hero margins. */

  /* Radii. These replace Tailwind's own xs..xl, which is the point. */
  --radius-xs: 6px;  /* Badges and status pips. */
  --radius-sm: 10px;  /* Buttons, fields, icon buttons, provider marks. */
  --radius-md: 14px;  /* Rows and cards. */
  --radius-lg: 20px;  /* Sheets and popovers. */
  --radius-xl: 22px;  /* The quick view panel where it meets the screen edge. */
  --radius-pill: 999px;  /* Segmented switch, tags, the round + button. */
  --radius-notch: 13px;

  /* Elevation. */
  --shadow-elev-1: 0 1px 2px rgba(0,0,0,0.45);  /* A resting row that needs separation from its ground. */
  --shadow-elev-2: 0 4px 12px rgba(0,0,0,0.5);  /* Menus and tooltips. */
  --shadow-elev-3: 0 12px 32px rgba(0,0,0,0.55);  /* Sheets and the extension popup. */
  --shadow-elev-4: 0 6px 18px rgba(0,0,0,0.44), 0 1px 3px rgba(0,0,0,0.3);

  /* Easings. `ease-out` deliberately replaces Tailwind's own, the
     same way the radii above do. */
  --ease-base: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.4,0,.2,1);
  --ease-liquid: cubic-bezier(.62,0,.32,1.03);

  /* Durations. Reached as `duration-(--duration-quick)`. */
  --duration-instant: 90ms;
  --duration-quick: 140ms;
  --duration-base: 220ms;
  --duration-calm: 320ms;
  --duration-draw-in: 280ms;
  --duration-let-go: 220ms;
  --duration-tick: 1000ms;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-ink-000: #FFFFFF;
    --color-ink-050: #F8F6F2;
    --color-ink-100: #FFFFFF;
    --color-ink-200: #F1EDE6;
    --color-ink-300: #E7E2D8;
    --color-ink-400: #D7D1C5;
    --color-line-soft: #E2DCD1;
    --color-line-hard: #CBC3B5;
    --color-line-brass: #E0CFA6;
    --color-fg-hi: #15181C;
    --color-fg-mid: #4E555D;
    --color-fg-lo: #5E666E;
    --color-brass-300: #78540F;
    --color-brass-400: #7D5810;
    --color-brass-500: #8A6314;
    --color-brass-600: #6E4E0F;
    --color-brass-tint: #F5ECD8;
    --color-on-brass: #FFFFFF;
    --color-sage: #2F7256;
    --color-copper: #9A5416;
    --color-brick: #A8362A;
    --color-steel: #3C6494;
    --color-sage-tint: #E4F0EA;
    --color-copper-tint: #F7E9DA;
    --color-brick-tint: #F8E3E0;
    --color-steel-tint: #E5EDF7;
    --color-scrim: rgba(21,24,28,0.42);
  }
}

/*
 * remempass.org. Source for public/assets/site.<hash>.css, which
 * scripts/build-site-assets.mjs writes with the token and font stylesheets
 * concatenated in front, so the page makes one stylesheet request.
 *
 * Every value is a token from design/tokens.json. The page follows the app's
 * rules (design/DESIGN.md) where they make sense for a document: one accent,
 * three resting surfaces, hairlines rather than boxes, the single card never
 * nested. Where it differs it is because this IS a web page: links to
 * elsewhere get the pointing hand, the body scrolls, and text is selectable.
 */

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

html {
  color-scheme: dark light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-ink-050);
  color: var(--color-fg-hi);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
}

a {
  color: inherit;
  text-decoration-color: var(--color-line-hard);
  text-underline-offset: 3px;
  transition: color var(--duration-quick) var(--ease-base),
    text-decoration-color var(--duration-quick) var(--ease-base);
}

a:hover {
  color: var(--color-brass-400);
  text-decoration-color: currentColor;
}

button {
  cursor: default;
  font: inherit;
}

*:focus-visible {
  outline: 2px solid var(--color-brass-400);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-10));
}

.skip:focus {
  top: var(--space-4);
}

/* Layout ----------------------------------------------------------------- */

.page {
  /* The app's --container-reading measure, restated: it is decided in
     packages/ui/src/styles/tokens.css rather than in the token JSON. */
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-9);
}

@media (min-width: 40rem) {
  .page {
    padding-inline: var(--space-7);
  }
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-line-soft);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  font-weight: var(--text-title--font-weight);
  text-decoration: none;
}

.wordmark img {
  width: var(--space-7);
  height: var(--space-7);
  border-radius: var(--radius-xs);
}

.masthead nav {
  display: flex;
  gap: var(--space-5);
  font-size: var(--text-body);
  color: var(--color-fg-mid);
}

.masthead nav a {
  text-decoration: none;
}

main {
  display: block;
}

/* Type ------------------------------------------------------------------- */

.hero {
  padding: var(--space-10) 0 var(--space-8);
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  font-weight: var(--text-display--font-weight);
  letter-spacing: var(--text-display--letter-spacing);
  margin-top: var(--space-4);
  text-wrap: balance;
}

@media (min-width: 40rem) {
  .display {
    font-size: var(--text-display);
    line-height: var(--text-display--line-height);
  }
}

.title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  font-weight: var(--text-title--font-weight);
  margin-top: var(--space-4);
}

.lede {
  margin-top: var(--space-4);
  max-width: 36rem;
  color: var(--color-fg-mid);
  font-size: var(--text-subhead);
  line-height: var(--text-subhead--line-height);
  text-wrap: pretty;
}

.label {
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  font-weight: var(--text-label--font-weight);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
  color: var(--color-fg-lo);
}

.caption {
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  color: var(--color-fg-mid);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: var(--text-code--line-height);
}

code {
  font-family: var(--font-mono);
  font-size: var(--text-code);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-brass-tint);
  color: var(--color-brass-400);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  font-weight: var(--text-label--font-weight);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
}

/* Actions ---------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line-hard);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-fg-hi);
  font-size: var(--text-caption);
  line-height: var(--text-body--line-height);
  font-weight: var(--text-body-strong--font-weight);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-quick) var(--ease-base),
    border-color var(--duration-quick) var(--ease-base);
}

.button:hover {
  background: var(--color-ink-300);
  color: var(--color-fg-hi);
}

.button:active {
  background: var(--color-ink-400);
}

.button.primary {
  border-color: var(--color-brass-400);
  background: var(--color-brass-400);
  color: var(--color-on-brass);
}

.button.primary:hover {
  border-color: var(--color-brass-500);
  background: var(--color-brass-500);
}

.button.primary:active {
  border-color: var(--color-brass-600);
  background: var(--color-brass-600);
}

.button svg {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
}

/* Sections and rows ------------------------------------------------------ */

.section {
  margin-top: var(--space-8);
}

.section > .label {
  padding-bottom: var(--space-3);
}

.section > .published {
  margin-top: calc(-1 * var(--space-2));
  padding-bottom: var(--space-3);
}

.rows {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--color-line-soft);
}

.rows > li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line-soft);
}

.row-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.row-title {
  font-size: var(--text-body-strong);
  line-height: var(--text-body-strong--line-height);
  font-weight: var(--text-body-strong--font-weight);
}

.row-meta {
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  color: var(--color-fg-mid);
  text-wrap: pretty;
}

.digest {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  color: var(--color-fg-lo);
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  .rows.downloads > li {
    flex-direction: column;
  }
}

/* The numbered steps: the number is the only brass on the line, so the eye
   can find step 4 without reading steps 1 to 3. */
.steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
  border-top: 1px solid var(--color-line-soft);
}

.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: var(--space-7) 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line-soft);
}

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: var(--text-body-strong--line-height);
  color: var(--color-brass-400);
}

.steps .row-meta + .row-meta {
  margin-top: var(--space-2);
}

/* The one card on the page. Nothing goes inside it that has a box of its own. */
.card {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-md);
  background: var(--color-ink-100);
}

.endpoint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.endpoint .mono {
  overflow-wrap: anywhere;
}

.card .caption {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line-soft);
}

.note {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-steel-tint);
  color: var(--color-fg-hi);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

.note strong {
  color: var(--color-steel);
}

.empty {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line-soft);
  color: var(--color-fg-mid);
  text-align: center;
}

.colophon {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  color: var(--color-fg-lo);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}