/* Deliberately plain. This page is read once, by someone who wants to get
   through it and start working — not a place for personality. */
:root {
  --ink: #1a1a1a; --dim: #666; --line: #e2e2e2;
  --bg: #fff; --panel: #f7f7f5; --accent: #1c4f8b;
  --warn-bg: #fff8e6; --warn-line: #e0b040; --ok: #1a7f37;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e8e8; --dim: #a0a0a0; --line: #333;
    --bg: #16181a; --panel: #1e2124; --accent: #6aa9e8;
    --warn-bg: #2a2416; --warn-line: #9a7420; --ok: #4ac26b;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 1.25rem 4rem;
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--bg);
}
header, main, footer { max-width: 46rem; margin: 0 auto; }
header { padding: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
h1 { margin: 0; font-size: 1.75rem; letter-spacing: -0.01em; }
.sub { margin: .35rem 0 0; color: var(--dim); }
h2 { font-size: 1.3rem; margin: 0 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
p { margin: 0 0 1rem; }
.hint { color: var(--dim); font-size: .9rem; }
.hidden { display: none; }

.callout {
  background: var(--panel); border-left: 3px solid var(--accent);
  padding: .9rem 1.1rem; margin: 1.25rem 0; border-radius: 0 4px 4px 0;
}
.callout.warn { background: var(--warn-bg); border-left-color: var(--warn-line); }

.field { display: block; margin: 1.5rem 0 .5rem; }
.field span { display: block; font-weight: 600; margin-bottom: .4rem; }
select, input[type="email"], input[type="text"] {
  font: inherit; padding: .55rem .7rem; width: 100%; max-width: 26rem;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); color: var(--ink);
}
/* The key is typed here, so it gets the same monospace treatment it is shown in. */
#rebindKey { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.cf-turnstile { margin: 1.25rem 0; }

button.primary {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--accent); color: #fff; border: 0;
  padding: .7rem 1.4rem; border-radius: 4px; margin-top: 1.5rem;
}
button.primary:disabled { opacity: .55; cursor: default; }

.module { border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: 1.4rem; }
.module ul { margin: .4rem 0 0; padding-left: 1.15rem; }
.module li { margin-bottom: .35rem; }
.num {
  display: inline-block; min-width: 1.55rem; height: 1.55rem; line-height: 1.55rem;
  text-align: center; background: var(--panel); border-radius: 50%;
  font-size: .8rem; color: var(--dim); margin-right: .5rem; font-weight: 600;
}

.q { border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.2rem; margin: 0 0 1.1rem; }
.q legend { font-weight: 600; padding: 0 .4rem; }
.opt { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem 0; cursor: pointer; }
.opt input { margin-top: .35rem; flex-shrink: 0; }

h2.ok { color: var(--ok); }
.key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem; letter-spacing: .06em; text-align: center;
  background: var(--panel); border: 2px dashed var(--accent);
  padding: 1.1rem; border-radius: 6px; margin: 1.25rem 0;
  user-select: all; word-break: break-all;
}
pre.cmd, code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
}
pre.cmd { padding: .8rem 1rem; overflow-x: auto; }
code { padding: .12rem .35rem; }
.review li { margin-bottom: .6rem; }
footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--dim); font-size: .9rem; }