@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin.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;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-mono-latin.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 {
  color-scheme: light dark;

  --sw-page: #faf9f6;
  --sw-paper: #fffefb;
  --sw-sunken: #f0eeea;
  --sw-sunken-2: #e8e7e2;
  --sw-ink: #55555f;
  --sw-strong: #111118;
  --sw-text: #212529;
  --sw-soft: #3f3f46;
  --sw-muted: #6f6d68;
  --sw-faint: #bab7b0;
  --sw-cast: rgba(60, 50, 40, 0.16);
  --sw-hatch: rgba(60, 50, 40, 0.07);
  --sw-accent: #5a5ad1;
  --sw-accent-deep: #3a3ab1;
  --sw-accent-soft: rgba(90, 90, 209, 0.1);
  /* The accent as a hard cast: the guide's voice is a violet shadow, never a bar. */
  --sw-accent-cast: rgba(90, 90, 209, 0.35);
  /* Legible on an accent fill: paper in light, ink in dark. */
  --sw-on-accent: #fffefb;

  /* The two functional hues. See the note at the top of this file. */
  --sw-danger: #a8322a;
  --sw-danger-soft: rgba(168, 50, 42, 0.09);
  --sw-danger-cast: rgba(168, 50, 42, 0.3);
  --sw-alert: #96600f;
  --sw-alert-soft: rgba(150, 96, 15, 0.1);

  --sw-mono: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;
  --sw-body: 'IBM Plex Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 5px;
  --gap: 1rem;
  /* Every control is at least this tall, because that is the size of a thumb. */
  --tap: 2.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* True black page, violet-ink — the app's dark values, unchanged. */
    --sw-page: #000000;
    --sw-paper: #15151e;
    --sw-sunken: #0e0e15;
    --sw-sunken-2: #07070c;
    --sw-ink: #a8a8b4;
    --sw-strong: #f1f1f5;
    --sw-text: #dcdce1;
    --sw-soft: #b3b3bc;
    --sw-muted: #8b8b92;
    --sw-faint: #4b4b5a;
    --sw-cast: rgba(226, 226, 255, 0.09);
    --sw-hatch: rgba(226, 226, 255, 0.05);
    --sw-accent: #8a8aff;
    --sw-accent-deep: #b3b3ff;
    --sw-accent-soft: rgba(138, 138, 255, 0.13);
    --sw-accent-cast: rgba(138, 138, 255, 0.4);
    --sw-on-accent: #15151e;

    /* Lifted for a black page, and desaturated so neither shouts. */
    --sw-danger: #f0938a;
    --sw-danger-soft: rgba(240, 147, 138, 0.12);
    --sw-danger-cast: rgba(240, 147, 138, 0.35);
    --sw-alert: #e8b25c;
    --sw-alert-soft: rgba(232, 178, 92, 0.13);
  }
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

html {
  background: var(--sw-page);
  font-size: clamp(1rem, 0.6875rem + 0.55vw, 1.2rem);
  -webkit-text-size-adjust: 100%;
}

body.page {
  margin: 0;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background-color: var(--sw-page);
  color: var(--sw-text);
  font-family: var(--sw-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.card {
  max-width: 44rem;
  width: 100%;
  margin: auto;
  padding: 1.5rem 1.6rem 1.4rem;
  background: var(--sw-paper);
  border: 1.5px solid var(--sw-ink);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--sw-cast);
}

h1 {
  margin: 0 0 0.75rem;
  font-family: var(--sw-mono);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--sw-strong);
  text-wrap: balance;
}

p {
  margin: 0 0 0.9rem;
}
.muted {
  color: var(--sw-muted);
}
.small {
  font-size: 0.88rem;
}
.eyebrow,
.label {
  margin: 0 0 0.5rem;
  font-family: var(--sw-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sw-muted);
}
ul.plain {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}
ul.plain li {
  margin-bottom: 0.4rem;
}

.context {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1rem 0.2rem;
  background: var(--sw-sunken);
  border: 1.5px dashed var(--sw-faint);
  border-radius: var(--radius);
}
.statement {
  font-weight: 600;
  color: var(--sw-strong);
}

.no-copy {
  -webkit-user-select: none;
  user-select: none;
}

fieldset.question {
  margin: 0 0 1.4rem;
  padding: 0;
  border: 0;
  min-width: 0;
}
fieldset.question legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-weight: 600;
  color: var(--sw-strong);
}
.qnum {
  font-family: var(--sw-mono);
  color: var(--sw-muted);
}

.option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: var(--tap);
  margin: 0 0 0.45rem;
  padding: 0.55rem 0.75rem;
  background: var(--sw-paper);
  border: 1.5px solid var(--sw-faint);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1.45;
}
.option input {
  margin: 0.25rem 0 0;
  flex: none;
  accent-color: var(--sw-accent);
  width: 1.05rem;
  height: 1.05rem;
}
.option:has(input:checked) {
  border-color: var(--sw-accent);
  background: var(--sw-accent-soft);
}
.option:has(input:focus-visible) {
  outline: 2px solid var(--sw-accent);
  outline-offset: 2px;
}

.field {
  display: block;
  margin: 0 0 0.4rem;
  font-weight: 600;
  color: var(--sw-strong);
}
textarea {
  display: block;
  width: 100%;
  margin: 0 0 1.4rem;
  padding: 0.6rem 0.7rem;
  background: var(--sw-paper);
  color: var(--sw-text);
  border: 1.5px solid var(--sw-ink);
  border-radius: var(--radius);
  font: inherit;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  width: 100%;
  padding: 0.55rem 1.05rem;
  background: var(--sw-accent);
  border: 1.5px solid var(--sw-accent-deep);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--sw-accent-cast);
  color: var(--sw-on-accent);
  font-family: var(--sw-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.button:disabled {
  background: var(--sw-sunken);
  border-color: var(--sw-faint);
  color: var(--sw-muted);
  box-shadow: none;
  cursor: not-allowed;
}
.button:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--sw-accent);
  outline-offset: 2px;
}

.error {
  margin: 0.8rem 0 0;
  padding: 0.5rem 0.7rem;
  border: 1.5px solid var(--sw-danger);
  background: var(--sw-danger-soft);
  color: var(--sw-danger);
  border-radius: var(--radius);
}
a {
  color: var(--sw-accent-deep);
}

/* Bot checks: present in the page, invisible to people and to screen readers. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}