:root{
  --brand:#0f766e;
  --brand-2:#134e4a;
  --bg:#f8fafc;
  --text:#0b1120;
  --muted:#475569;
  --card:#ffffff;
  --ring:#a7f3d0;
}
*{box-sizing:border-box}
html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif; line-height:1.6; color:var(--text); background:var(--bg)}
body{margin:0}
.container{max-width:1100px;margin:0 auto;padding:20px}
header{background:linear-gradient(180deg, #ecfeff, #fff); border-bottom:1px solid #e2e8f0}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.logo img{height:28px}
.logo span{font-weight:700; color:var(--brand-2)}
.nav a{margin:0 10px; color:var(--muted); text-decoration:none}
.nav a:hover{color:var(--brand)}
.banner{padding:6px 10px; background:#fff7ed; color:#7c2d12; border:1px solid #fed7aa; border-radius:12px; font-size:14px}
main{background:var(--card)}
.hero{padding:28px 0}
.hero h1{font-size:34px; margin:0 0 6px}
.hero p{color:var(--muted); margin:0}
.card{background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:18px; box-shadow:0 2px 14px rgba(2,6,23,.04); margin:14px 0}
.grid{display:grid; gap:14px}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.grid.cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}
@media (max-width:900px){ .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr } }
.badge{display:inline-block; background:#ecfeff; color:var(--brand-2); border:1px solid #a7f3d0; padding:3px 8px; border-radius:999px; font-size:12px; font-weight:600}
.btn{display:inline-block; padding:10px 14px; border-radius:12px; background:var(--brand); color:#fff; text-decoration:none; border:1px solid var(--brand-2)}
.btn.secondary{background:#fff; color:var(--brand-2); border-color:#94a3b8}
.btn.block{display:block; width:100%; text-align:center}
.btn:hover{filter:brightness(0.95)}
.sidebar{position:sticky; top:16px}
footer{border-top:1px solid #e2e8f0; background:#fff}
footer .cols{display:grid; grid-template-columns: 2fr 1fr 1fr; gap:16px}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--brand)}
.tldr{list-style: "✔  "; padding-left: 1ch}
small, .muted{color:var(--muted)}
hr{border:0; height:1px; background:#e2e8f0; margin:16px 0}
input, select, button{font:inherit}
.input{width:100%; padding:10px 12px; border:1px solid #cbd5e1; border-radius:12px; background:#fff}
.label{font-weight:600; margin-bottom:6px; display:block}
.widget{border:1px dashed #94a3b8; border-radius:14px; padding:12px; background:#f1f5f9}
.widget h3{margin-top:0}
.widget .row{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media (max-width:900px){ .widget .row{grid-template-columns:1fr} }
.result{padding:10px; border-radius:12px; background:#ecfeff; border:1px solid #a7f3d0}
kbd{background:#f1f5f9; border:1px solid #cbd5e1; border-radius:6px; padding:0 6px}
.breadcrumbs{font-size:14px; margin:4px 0 12px}
.breadcrumbs a{color:var(--muted); text-decoration:none}
.faq details{border:1px solid #e2e8f0; border-radius:12px; padding:10px; background:#fff}
.faq summary{cursor:pointer; font-weight:600}
.callout{padding:10px 12px; border-radius:12px; background:#ecfeff; border:1px solid #a7f3d0}
.warning{background:#fef2f2; border-color:#fecaca; color:#991b1b}
.table{width:100%; border-collapse:collapse}
.table th, .table td{border:1px solid #e2e8f0; padding:8px; text-align:left}
.kicker{font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#0369a1}
.badge-link{display:inline-flex; align-items:center; gap:6px}
.badge-link svg{height:14px}
.search{display:flex; gap:8px; margin-top:12px}
code.inline{background:#f1f5f9; border:1px solid #cbd5e1; border-radius:6px; padding:2px 6px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
.cookie-banner{position:fixed; inset:auto 0 0 0; background:#111827; color:#e5e7eb; padding:14px; display:flex; gap:10px; align-items:center; justify-content:center; z-index:100}
.cookie-banner button{background:#22c55e; color:#111827; border:none; padding:8px 12px; border-radius:10px; font-weight:700}
.hide{display:none}