* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Georgia', 'Times New Roman', serif;
  background: #f8f6f1;
  color: #3a3632;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
.page { max-width: 640px; margin: 0 auto; padding: 64px 24px 120px; }

.nav { font-family: -apple-system, system-ui, sans-serif; font-size: 0.85em; color: #a89a8a; margin-bottom: 40px; display: flex; gap: 18px; flex-wrap: wrap; }
.nav a { color: #8a8279; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav .here { color: #3a3632; }

h1 { font-size: 1.6em; font-weight: 400; letter-spacing: 0.08em; margin-bottom: 4px; color: #2a2623; }
.sub { font-size: 0.95em; color: #8a8279; margin-bottom: 40px; font-family: -apple-system, system-ui, sans-serif; }

p { margin-bottom: 20px; }
a { color: #6b5d4f; }
.muted { font-size: 0.88em; color: #8a8279; }

.demo { margin: 32px 0 40px; }
.demo-input { display: flex; gap: 8px; margin-bottom: 12px; }
.demo-input input {
  flex: 1; padding: 10px 14px; font-size: 1em;
  border: 1px solid #d5cfc6; border-radius: 4px;
  background: #fff; color: #3a3632;
  font-family: -apple-system, system-ui, sans-serif; outline: none;
}
.demo-input input:focus { border-color: #a89a8a; }
.demo-input input::placeholder { color: #b8b0a4; }
.demo-input button, .button {
  padding: 10px 20px; font-size: 0.9em;
  background: #3a3632; color: #f8f6f1; border: none;
  border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block;
  font-family: -apple-system, system-ui, sans-serif; white-space: nowrap;
}
.demo-input button:hover, .button:hover { background: #4a4640; }
.demo-input button:disabled { background: #c5bfb6; cursor: not-allowed; }

.results { border: 1px solid #e2ddd4; border-radius: 4px; background: #fff; display: none; }
.results.show { display: block; }
.result-row { padding: 12px 16px; border-bottom: 1px solid #f0ece5; font-family: -apple-system, system-ui, sans-serif; font-size: 0.9em; }
.result-row:last-child { border-bottom: none; }
.result-domain { font-weight: 600; color: #2a2623; }
.result-meta { color: #8a8279; font-size: 0.85em; margin-top: 2px; }
.result-summary { padding: 10px 16px; background: #f4f1ea; font-family: -apple-system, system-ui, sans-serif; font-size: 0.85em; color: #6b5d4f; border-bottom: 1px solid #e2ddd4; }
.result-upgrade { padding: 10px 16px; font-family: -apple-system, system-ui, sans-serif; font-size: 0.85em; color: #a89a8a; }
.demo-note { font-family: -apple-system, system-ui, sans-serif; font-size: 0.8em; color: #a89a8a; margin-top: 8px; }

hr { border: none; border-top: 1px solid #e2ddd4; margin: 48px 0; }

h2 { font-size: 1.1em; font-weight: 400; margin-bottom: 12px; color: #2a2623; }
h3 { font-size: 1em; font-weight: 400; margin: 24px 0 8px; color: #2a2623; }
.how { font-family: -apple-system, system-ui, sans-serif; font-size: 0.92em; }
.how li { margin-bottom: 6px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 8px 0 16px; }
.tile { background: #fff; border: 1px solid #e2ddd4; border-radius: 4px; padding: 16px; font-family: -apple-system, system-ui, sans-serif; }
.tile .v { font-size: 1.6em; color: #2a2623; line-height: 1.2; }
.tile .l { font-size: 0.82em; color: #8a8279; margin-top: 4px; }
.wide { overflow-x: auto; margin-bottom: 20px; }
.wide .tiers td:nth-child(2) { white-space: nowrap; }

.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 8px 0 8px; }
.door { background: #fff; border: 1px solid #e2ddd4; border-radius: 4px; padding: 20px; font-family: -apple-system, system-ui, sans-serif; font-size: 0.9em; }
.door h2 { font-family: 'Georgia', 'Times New Roman', serif; margin-bottom: 8px; }
.door p { margin-bottom: 12px; color: #6b5d4f; }
.door ul { list-style: none; }
.door li { margin-bottom: 6px; }

pre {
  background: #fff; border: 1px solid #e2ddd4; border-radius: 4px;
  padding: 14px 16px; overflow-x: auto;
  font-family: 'SF Mono', 'Menlo', monospace; font-size: 0.82em;
  color: #5a534a; line-height: 1.6;
}
code { font-family: 'SF Mono', 'Menlo', monospace; font-size: 0.9em; }

.tiers { font-family: -apple-system, system-ui, sans-serif; font-size: 0.9em; width: 100%; border-collapse: collapse; }
.tiers th, .tiers td { padding: 8px 16px 8px 0; text-align: left; vertical-align: top; }
.tiers th { color: #8a8279; font-weight: 400; font-size: 0.85em; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid #e2ddd4; }
.tiers td { border-bottom: 1px solid #f0ece5; }

.get-key { background: #fff; border: 1px solid #e2ddd4; border-radius: 4px; padding: 28px; margin: 32px 0; }
.get-key h2 { margin-bottom: 8px; }
.get-key p { font-family: -apple-system, system-ui, sans-serif; font-size: 0.9em; color: #8a8279; margin-bottom: 16px; }
#get-key-btn {
  background: #3a3632; color: #f8f6f1; border: none;
  padding: 10px 20px; font-size: 0.9em; border-radius: 4px;
  cursor: pointer; font-family: -apple-system, system-ui, sans-serif;
}
#get-key-btn:hover { background: #4a4640; }
#get-key-btn:disabled { background: #c5bfb6; cursor: not-allowed; }
#key-result { display: none; margin-top: 16px; }
#key-result.show { display: block; }
.key-display {
  font-family: 'SF Mono', monospace; font-size: 0.95em;
  background: #f4f1ea; padding: 12px 16px; border-radius: 4px;
  color: #3a3632; word-break: break-all; border: 1px solid #e2ddd4;
}
.key-warning { font-family: -apple-system, system-ui, sans-serif; font-size: 0.82em; color: #a89a8a; margin-top: 8px; }
.error { color: #c4725a; font-family: -apple-system, system-ui, sans-serif; font-size: 0.9em; }

footer { margin-top: 64px; font-family: -apple-system, system-ui, sans-serif; font-size: 0.82em; color: #b8b0a4; }
footer a { color: #8a8279; }