:root { font-family: Inter, system-ui, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background:#0f172a; color:#e2e8f0; }
.wrap { max-width: 760px; margin: 40px auto; padding: 0 16px; }
.card { background:#111827; border:1px solid #1f2937; border-radius:16px; padding:24px; box-shadow:0 10px 24px rgba(0,0,0,.35); }
h1 { margin:0 0 12px; font-size:28px; }
p.lead { margin:0 0 20px; color:#94a3b8 }
form { display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
input[type="number"]{ flex:1; min-width:220px; padding:12px 14px; border-radius:12px; border:1px solid #334155; background:#0b1220; color:#e2e8f0; }
button { padding:12px 16px; border:0; border-radius:12px; background:#22c55e; color:#06210f; font-weight:600; cursor:pointer; }
button:disabled { opacity:.6; cursor:not-allowed; }
.error { background:#7f1d1d; border:1px solid #ef4444; color:#fee2e2; padding:12px; border-radius:12px; margin:10px 0; }
table { width:100%; border-collapse: collapse; margin-top:10px; }
th, td { padding:10px 12px; border-bottom:1px solid #1f2937; text-align:left; }
th { color:#a5b4fc; }
.row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
footer { margin-top: 18px; font-size:12px; color:#94a3b8 }
pre {
  background:#0b1220;
  border:1px solid #1f2937;
  border-radius:12px;
  padding:12px;
  overflow:auto;
  line-height:1.35;
  margin:8px 0 14px;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
h2 { font-size:18px; margin-top:14px; }
h3 { font-size:15px; margin:8px 0; color:#a5b4fc; }
ul { margin:6px 0 14px 18px; }
a { color:#60a5fa; }