:root{
  --ink:#F2EEE3;--ink-dim:#B7B1A0;--bg:#15140F;--bg-raised:#1D1B14;--bg-panel:#201E16;
  --brass:#C8A24C;--brass-bright:#E4C06B;--teal:#3F9C93;--line:#33301F;--danger:#C25B4A;--radius:8px;
}
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
html{overflow-x:hidden;}
body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;line-height:1.5;max-width:100%;}
a{color:inherit;}
code{font-family:'IBM Plex Mono',monospace;background:var(--bg-raised);padding:1px 5px;border-radius:4px;font-size:0.92em;}
.mono{font-family:'IBM Plex Mono',monospace;}

.logo-mark{width:18px;height:18px;border-radius:50%;border:2px solid var(--brass);position:relative;display:inline-block;margin-right:6px;vertical-align:-3px;}
.logo-mark::after{content:"";position:absolute;top:1px;left:50%;width:2px;height:6px;background:var(--brass);transform:translateX(-50%);}

.topbar{
  display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(21,20,15,0.92);backdrop-filter:blur(8px);z-index:20;
}
.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;text-decoration:none;}
.topnav a{font-size:14px;color:var(--ink-dim);text-decoration:none;}
.topnav a:hover{color:var(--ink);}

.wrap{max-width:760px;margin:0 auto;padding:32px 20px 60px;}
.wrap[hidden]{display:none;}

.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--teal);margin-bottom:10px;}
.hero-block h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,5vw,36px);font-weight:700;}
.hero-block .lede{color:var(--ink-dim);margin-top:10px;font-size:15px;}

.panel{border:1px solid var(--line);border-radius:12px;background:var(--bg-panel);padding:22px;margin-top:24px;}
.panel h2{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;margin-bottom:14px;}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.panel-head h2{margin-bottom:0;}
.hint{font-size:13px;color:var(--ink-dim);line-height:1.55;}

.btn{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;padding:8px 16px;
  border-radius:6px;border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--brass);color:#15140F;}
.btn-primary:hover{background:var(--brass-bright);}
.btn-ghost{border-color:var(--line);color:var(--ink);background:none;}
.btn-ghost:hover{border-color:var(--brass);}

.key-list{display:flex;flex-direction:column;gap:10px;}
.key-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--line);border-radius:8px;flex-wrap:wrap;
}
.key-info .k-name{font-weight:600;font-size:14px;}
.key-info .k-meta{font-size:12px;color:var(--ink-dim);margin-top:2px;}
.key-info .k-meta.revoked{color:var(--danger);}
.key-actions button{font-size:12.5px;color:var(--ink-dim);text-decoration:underline;background:none;border:none;cursor:pointer;}
.key-actions button:hover{color:var(--danger);}
.key-actions button[data-act="delete"]{color:var(--danger);}
.key-actions button[data-act="delete"]:hover{color:#D97363;}

.key-reveal-overlay{
  position:fixed;inset:0;background:rgba(10,9,6,0.65);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;
}
.key-reveal-modal{
  background:var(--bg);border:1px solid var(--brass);border-radius:10px;
  width:100%;max-width:380px;padding:20px;
}
.key-reveal-modal .warn{font-size:12.5px;color:var(--brass-bright);margin-bottom:10px;}
.key-reveal-modal .key-value{
  display:flex;gap:8px;align-items:center;background:var(--bg-raised);border-radius:6px;padding:10px 12px;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;word-break:break-all;
}
.key-reveal-modal .key-value button{
  flex-shrink:0;background:var(--brass);color:#15140F;border:none;border-radius:5px;
  padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;
}

.model-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.model-card{border:1px solid var(--line);border-radius:8px;padding:12px;}
.model-card .m-key{font-family:'IBM Plex Mono',monospace;color:var(--brass-bright);font-size:13px;}
.model-card .m-label{font-size:12px;color:var(--ink);font-weight:600;margin-top:2px;}
.model-card .m-desc{font-size:12.5px;color:var(--ink-dim);margin-top:4px;}
@media (max-width:560px){.model-grid{grid-template-columns:1fr;}}

.tabs{display:flex;gap:6px;margin-bottom:12px;}
.lang-tab{padding:6px 14px;border-radius:6px;border:1px solid var(--line);color:var(--ink-dim);font-size:13px;background:none;cursor:pointer;}
.lang-tab.active{border-color:var(--brass);color:var(--brass-bright);}

.code-block-wrap{position:relative;}
.copy-code-btn{
  position:absolute;top:8px;right:8px;padding:4px 10px;border-radius:5px;
  background:var(--bg-raised);border:1px solid var(--line);color:var(--ink-dim);
  font-size:11px;font-weight:600;cursor:pointer;z-index:2;
}
.copy-code-btn:hover{border-color:var(--brass);color:var(--ink);}
.copy-code-btn.copied{color:var(--teal);border-color:var(--teal);}
.code-block{
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:16px;
  overflow-x:auto;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-dim);line-height:1.6;
}
.code-block[hidden]{display:none;}

.ref-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.ref-method{background:var(--teal);color:#0E1E1C;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;}
.ref-path{font-size:14px;}
.ref-row + .hint{margin-bottom:8px;}

.sandbox{display:flex;flex-direction:column;gap:10px;}
.sandbox-select,.sandbox-input{
  background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--ink);
  font-family:inherit;font-size:13.5px;padding:9px 11px;
}
.sandbox-select{width:fit-content;}
.sandbox-input{resize:vertical;}
.sandbox-input:focus,.sandbox-select:focus{outline:none;border-color:var(--brass);}
.sandbox-output{
  margin-top:14px;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:14px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;
}
.sandbox-output.error{border-color:var(--danger);color:#E39082;}
.sandbox-output[hidden]{display:none;}