@font-face {
	font-family: 'BandeinsStrangeVariable';
	src: url('../fonts/BandeinsStrangeVariable.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* -------- Tokens (unchanged colors) -------- */
:root{
	--bg:#0d1117;
	--panel:#161b22;
	--panel-2:#0f1420;
	--text:#c9d1d9;
	--muted:#8b949e;
	--brand:#6ea8fe;
	--brand-2:#9b7bff;
	--success:#3fb950;
	--danger:#f85149;
	--warning:#d29922;
	--border:#30363d;
	--radius:10px; /* fix var name, not color */
	--radius-sm:8px;
	--radius-xs:6px;
	--shadow: 0 6px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.02) inset;
}

*{box-sizing:border-box}
html,body{min-height:100vh}
body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:'BandeinsStrangeVariable', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
	font-variation-settings:'wght' 430;
	line-height:1.55;
	letter-spacing:.2px;
	display:flex;
	flex-direction:column;
}

/* Footer sticks to bottom by filling remaining space */
main{flex:1}

/* -------- Layout -------- */
.container{width:min(1120px,92%);margin:0 auto}
.grid{display:grid;gap:20px}
.grid-home{
	grid-template-columns:1fr;
}
@media (min-width: 900px){
	.grid-home{grid-template-columns:2fr 1fr 1fr}
	.grid-home .hero{grid-column:1 / -1; display:grid; grid-template-columns: 2fr 1fr; gap:20px}
}

/* Make docs main a grid for consistent spacing */
main.container:not(.grid){display:grid; gap:20px}

/* -------- Header / Nav -------- */
.site-header{
	background:var(--panel);
	border-bottom:1px solid var(--border);
	position:sticky; top:0; z-index:20;
	backdrop-filter:saturate(140%) blur(10px);
	margin-bottom:16px;
}
.site-header .container{padding:16px 0}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.branding h1{margin:0 0 4px; font-weight:700; letter-spacing:.2px}
.branding p{margin:0; color:var(--muted); font-variation-settings:'wght' 380}

.nav{display:flex; gap:12px; flex-wrap:wrap}
.nav a{
	color:var(--text);
	text-decoration:none;
	padding:8px 12px;
	border:1px solid transparent;
	border-radius:var(--radius-xs);
	transition:transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.nav a:hover{background:var(--panel-2); border-color:var(--border); transform:translateY(-1px)}
.nav a[aria-current="page"]{border-color:var(--brand); box-shadow:0 0 0 1px rgba(110,168,254,.25) inset}

/* Mobile nav toggle (hidden on desktop) */
.nav-toggle{display:none; background:var(--panel-2); color:var(--text); border:1px solid var(--border); padding:8px 12px; cursor:pointer}
.nav-toggle:hover{background:var(--panel)}

/* -------- Footer -------- */
.site-footer{background:var(--panel); border-top:1px solid var(--border); margin-top:16px}
.site-footer .container{padding:16px 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.toplink{color:var(--muted); text-decoration:none}
.toplink:hover{color:var(--text)}

/* -------- Cards & Sections -------- */
.card{
	background:linear-gradient(180deg, var(--panel), rgba(22,27,34,.8));
	border:1px solid var(--border);
	border-radius:var(--radius);
	padding:22px;
	box-shadow:var(--shadow);
}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.hero{
	background:linear-gradient(180deg, var(--panel), var(--panel-2));
}
.hero .lead{color:var(--text); opacity:.95; max-width:60ch}
.highlights{list-style:none; margin:0; padding:0; display:grid; gap:10px; align-content:start}
.highlights li{display:flex; align-items:center; gap:10px; color:var(--muted)}
.dot{width:8px; height:8px; border-radius:50%;}
.dot.success{background:var(--success)}
.dot.brand{background:var(--brand)}
.dot.warn{background:var(--warning)}

/* -------- Type -------- */
h2,h3,h4{margin:0 0 12px; font-weight:650}
h2{font-size:clamp(22px, 2vw + 10px, 28px)}
h3{font-size:clamp(18px, 1.4vw + 8px, 22px)}
h4{font-size:16px; color:var(--muted); font-weight:620; margin-top:14px}
p{margin:.25rem 0 .75rem}
ul{margin:.25rem 0 0 1.25rem}
ul.tight{margin:0; padding-left:1rem}
code{color:#ffdda6}

/* -------- Buttons -------- */
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.btn{
	background:var(--brand);
	color:#001133;
	text-decoration:none;
	padding:10px 14px;
	border-radius:var(--radius-xs);
	border:1px solid var(--border);
	font-weight:700; line-height:1;
	transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px); filter:saturate(110%)}
.btn.secondary{background:transparent; color:var(--text)}
.btn.secondary:hover{background:var(--panel-2)}

/* -------- Code Blocks -------- */
.code, pre.code{
	background:#0b1020;
	border:1px solid var(--border);
	border-radius:var(--radius-xs);
	padding:12px;
	color:#e6edf3;
	overflow:auto;
	font-size:.95rem;
	max-width:100%;
}
.code-wrap{position:relative}
.copy{
	position:absolute; top:8px; right:8px;
	font:inherit;
	padding:6px 10px; border-radius:8px;
	border:1px solid var(--border);
	background:var(--panel);
	color:var(--text);
	cursor:pointer;
}
.copy:hover{background:var(--panel-2)}

/* -------- Endpoint Rows -------- */
.endpoint{
	border:1px solid var(--border);
	border-left:4px solid var(--brand);
	border-radius:var(--radius-sm);
	padding:12px 14px;
	background:#0f1524;
	display:flex; align-items:center; gap:10px;
	margin:10px 0;
}
.endpoint.row p{margin:0}
.endpoint.block{display:block}
.endpoint-top{display:flex; align-items:center; gap:10px; margin-bottom:8px}

.method{
	display:inline-block;
	padding:3px 10px;
	border-radius:999px;
	font-weight:800;
	font-size:12px;
	min-width:46px; text-align:center;
}
.method.get{background:var(--success); color:#021}
.method.post{background:var(--danger); color:#200}

.path{color:var(--brand-2); font-weight:650}

/* -------- Notices -------- */
.notice{
	background:#1a1f2b;
	border:1px dashed var(--border);
	padding:12px;
	border-radius:var(--radius-xs);
}

/* -------- Forms / Focus -------- */
a, button{outline:none}
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav a:focus-visible{
	outline:2px solid var(--brand);
	outline-offset:2px;
	border-radius:8px;
}

/* -------- Utilities -------- */
.hidden{display:none}

/* -------- Sharp corners + spacing overrides (no HTML changes) -------- */
.card,
.endpoint,
.btn,
.nav a,
.copy,
.notice,
.code,
pre.code,
.method { border-radius:0 }

/* Add consistent vertical padding for main content */
main.container{padding:16px 0}

/* Ensure focused elements don't get rounded corners */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav a:focus-visible{border-radius:0}

/* -------- Responsive (mobile) -------- */
@media (max-width: 600px){
	.container{width:94%}
	.grid{gap:12px}
	.card{padding:16px}
	.header-inner{flex-direction:column; align-items:flex-start; gap:10px}
	.site-header .container{padding:12px 0}
	/* nav toggle visible */
	.nav-toggle{display:block}
	/* hide nav until toggled */
	.nav{gap:8px; flex-direction:column; width:100%; display:none}
	.nav[data-open="true"]{display:flex}
	.nav a{width:100%; text-align:center; padding:10px 12px}
	.branding h1{font-size:20px}
	.actions{flex-direction:column}
	.actions .btn{width:100%; text-align:center}
	.code, pre.code{font-size:.85rem; white-space:pre-wrap; word-break:break-word}
	.footer-inner{flex-direction:column; align-items:flex-start; gap:8px}
	.endpoint{flex-direction:column; align-items:flex-start}
	.endpoint code{display:block; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; font-size:.85rem}
	.method{min-width:auto}
	.path{display:block}
	.card-head{flex-direction:column; align-items:flex-start; gap:6px}
}

/* Dashboard chart box */
.chart-box{width:100%; max-width:100%; height:clamp(200px, 40vh, 320px)}