* { box-sizing: border-box; }
body { margin: 0; background: #f5f6f3; color: #161914; font: 15px/1.5 system-ui, -apple-system, sans-serif; }
header { height: 64px; background: white; border-bottom: 1px solid #dde0da; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1050px) / 2)); }
header a { color: #596057; text-decoration: none; }
main { max-width: 1050px; margin: 50px auto; padding: 0 20px; }
.top, .panelhead { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.eyebrow { font: 600 11px ui-monospace, monospace; letter-spacing: .12em; color: #356447; }
h1 { font: 600 38px Georgia, serif; margin: 5px 0; }
h2 { margin: 0; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0; }
.cards article, .panel { background: white; border: 1px solid #dde0da; border-radius: 10px; padding: 22px; }
.cards span { display: block; color: #70766e; font-size: 13px; }
.cards strong { font: 600 28px Georgia, serif; }
.panel { margin: 14px 0; }
.panelhead p { margin: 4px 0; color: #70766e; }
button, select, input { font: inherit; border: 1px solid #cbd0c8; background: white; border-radius: 7px; padding: 9px 12px; }
button { cursor: pointer; }
button:hover { background: #f0f2ee; }
.key, .request { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding: 14px 0; border-top: 1px solid #eceee9; align-items: center; }
.key small, .request small { color: #777; }
.keyActions { display: flex; gap: 8px; }
.status { border-radius: 999px; padding: 4px 9px; font-size: 12px; }
.status.ok { color: #245c3b; background: #e4f2e9; }
.status.failed { color: #8a2f2f; background: #f8e7e7; }
.playground { display: grid; grid-template-columns: 2fr 90px 3fr; gap: 12px; margin: 18px 0; }
.playground label { color: #596057; font-size: 13px; }
.playground input { display: block; width: 100%; margin-top: 5px; color: #161914; }
pre { background: #151813; color: #eef2ec; padding: 18px; border-radius: 8px; overflow: auto; white-space: pre-wrap; }
.upgrade { display: flex; gap: 10px; flex-wrap: wrap; }
dialog { border: 0; border-radius: 12px; padding: 28px; box-shadow: 0 20px 80px #0003; max-width: 600px; }
dialog code { display: block; background: #eef1eb; padding: 14px; margin: 16px 0; word-break: break-all; }
@media (max-width: 700px) {
  .cards, .playground { grid-template-columns: 1fr; }
  .top { align-items: flex-start; flex-direction: column; }
  .key, .request { grid-template-columns: 1fr auto; }
  .keyActions { grid-column: 1 / -1; }
}