/* Minimal local styles to avoid any CDN */
:root{
  --bg:#0b0b0e; --surface:#141418; --border:#2a2a33; --text:#e4e4e7; --muted:#a1a1aa; --white:#ffffff; --black:#000000; --accent:#00d0b6;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; background:var(--bg); color:var(--text)}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
code,pre{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}

/* Layout */
.container{max-width:72rem; margin:0 auto; padding:1.25rem}
.header{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem 0; flex-wrap:wrap}
.brand{font-weight:600; color:var(--white); letter-spacing:.01em}
.brand .muted{color:var(--muted); font-weight:400; margin-left:.5rem}
.nav{display:flex; gap:.75rem; font-size:.875rem}
.footer{text-align:center; color:#71717a; padding:1.25rem 0; font-size:.875rem}

/* Cards, tables, utilities */
.grid{display:grid; gap:1rem}
@media(min-width:640px){.container{padding-left:1.5rem; padding-right:1.5rem} .grid.sm-gap{gap:1.5rem}}
/* Ensure grid columns can shrink even with long content (e.g., <pre>) */
@media(min-width:1024px){.grid.cols-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* Allow grid items/cards to shrink below their min-content width */
.grid > *{min-width:0}
.card{background-color:rgba(20,20,24,.8); border:1px solid var(--border); border-radius:.75rem; padding:1.25rem}
.card h2{color:var(--accent); font-size:1.25rem; font-weight:600; margin:0 0 .75rem}
.table{width:100%; border-collapse:collapse; table-layout:fixed}
.th{width:12rem; background:#0b0b0e; color:#fff; padding:.75rem; text-align:left}
.td{padding:.75rem; word-break:break-word}
.tr{border-bottom:1px solid var(--border)}
.pre{background-color:rgba(0,0,0,.6); border:1px solid var(--border); border-radius:.5rem; padding:1rem; overflow:auto; max-height:22rem}
/* Ensure long lines don't expand layout; allow scrolling */
.pre code{display:block; white-space:pre}
.small{font-size:.875rem}
.center{text-align:center}
.mt{margin-top:1rem}
.mt-lg{margin-top:1.5rem}