/* Minimal, low-key styling; no external assets */
:root{
  --bg:#0b0d10; --fg:#e8eaf0; --muted:#a7adbb; --card:#141821; --border:rgba(255,255,255,.10);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --radius:16px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f7fb; --fg:#141821; --muted:#525a6a; --card:#fff; --border:rgba(0,0,0,.10); }
}
*{ box-sizing:border-box; }
body{
  margin:0; font-family:var(--sans); background:var(--bg); color:var(--fg);
  min-height:100vh;
}
a{ color: inherit; }
.wrap{ max-width:980px; margin:0 auto; padding:18px; }
.header{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.brand{ display:flex; gap:10px; align-items:center; text-decoration:none; color:inherit; }
.nav{ display:flex; gap:12px; }
.card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 16px 50px rgba(0,0,0,.28);
}
.title-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
h1{ margin:0; font-size:18px; font-weight:650; }
h2{ margin:18px 0 8px; font-size:15px; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
main.wrap{ padding-top: 6px; }
.keybox{
  margin-top:16px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
}
.key{
  font-family:var(--mono);
  font-size:20px;
  letter-spacing:.08em;
  word-break:break-all;
}
.copybtn{
  margin-top: 12px;
  appearance:none;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
}
.copybtn:hover{ background: rgba(255,255,255,.06); }
@media (prefers-color-scheme: light){
  .copybtn:hover{ background: rgba(0,0,0,.04); }
}
.footer{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }