:root { --ink: #12161c; --muted: #626d7a; --brand: #0077ff; --line: #e6eaef; }

* { box-sizing: border-box; }
body {
  margin: 0 auto; padding: 0 20px 64px; max-width: 720px;
  font: 17px/1.6 -apple-system, system-ui, "Segoe UI", sans-serif;
  color: var(--ink); background: #fff;
}
h1 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; }
h2 { font-size: 22px; margin: 40px 0 12px; }
h3 { font-size: 17px; margin: 24px 0 4px; }
p, li { margin: 8px 0; }

.hero { padding: 56px 0 8px; }
.lead { font-size: 19px; color: var(--muted); }

.bookmarklet {
  display: inline-block; margin: 24px 0 8px; padding: 14px 28px;
  background: var(--brand); color: #fff; border-radius: 10px;
  font-weight: 600; text-decoration: none; cursor: grab;
}
.hint { color: var(--muted); font-size: 15px; margin-top: 0; }

.notice {
  margin: 24px 0 0; padding: 14px 16px; border-radius: 10px;
  background: #f2f5f9; color: var(--muted); font-size: 15px;
}

.steps li { margin: 12px 0; }

.warning {
  border-left: 3px solid #e64646; padding: 2px 0 2px 16px; margin: 40px 0;
}
.warning h2 { margin-top: 0; color: #e64646; }

footer {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 15px;
}
.version { font-size: 14px; }

@media (prefers-color-scheme: dark) {
  :root { --ink: #e8ecf1; --muted: #9aa6b3; --line: #2a3038; }
  body { background: #12161c; }
  .notice { background: #1b212a; }
}