/* The relay's pages (CORD-67). Tokens copied verbatim from docs/design/prototype.html, as cloud-mock.html does. The only stylesheet here. */
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
:root {
  --frame: #FEF8EC;
  --sheet: #FFFDF8;
  --line: #E7DED1;
  --ink: #241C17;
  --ink-2: #6C6158;
  --ink-3: #9A8E83;
  --accent: #241C17;
  --accent-ink: #FFFDF8;
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-sentence: 500 20px/1.3 var(--font);
  --t-title: 600 15px/1.4 var(--font);
  --t-small: 400 12px/1.45 var(--font);
  --r-ctl: 6px;
  --r-mark: 8px;
  --fast: 120ms cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --frame: #21201C; --sheet: #292825; --line: #46433E;
    --ink: #F7F2E7; --ink-2: #B5B0A7; --ink-3: #8A857C;
    --accent: #F7F2E7; --accent-ink: #21201C;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--frame); color: var(--ink); font: 13px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ink-3); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-ctl); }
form { margin: 0; display: contents; }
.webpage { min-height: 100svh; display: grid; place-items: center; padding: 48px 16px; }
.col { width: 100%; max-width: 400px; display: grid; gap: 16px; text-align: center; justify-items: center; }
.mark { width: 32px; height: 32px; display: block; border-radius: var(--r-mark); }
.sentence { font: var(--t-sentence); margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.note { font: var(--t-small); color: var(--ink-3); margin: 0; }
.stack { width: 100%; display: grid; gap: 8px; }
.btn { height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--sheet); color: var(--ink); font: 500 13px/1 var(--font); text-decoration: none; cursor: pointer; transition: border-color var(--fast), filter var(--fast); }
.stack .btn { height: auto; min-height: 32px; padding: 8px 12px; line-height: 1.3; }
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.prose { max-width: 600px; margin: 0 auto; padding: 48px 16px; display: grid; gap: 16px; }
.prose h1 { font: var(--t-sentence); margin: 0; }
.prose h2 { font: 500 13px/1.5 var(--font); margin: 8px 0 -8px; }
.prose p, .prose ul { margin: 0; color: var(--ink-2); }
.prose ul { padding-left: 16px; display: grid; gap: 4px; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose .note { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }