:root{
  --bg:#0b0f1a; --bg-2:#0e1526; --card:#121a2d; --ink:#e6edf7; --muted:#a7b4c8;
  --line:#24324a; --accent:#4da3ff; --accent-2:#9ed0ff; --ok:#1db954; --warn:#ffb020; --err:#ff5c5c;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.45}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.nav .brand{display:flex;gap:10px;align-items:center}
.nav img{height:28px;width:28px} .nav .links a{margin-left:14px}
.kicker{color:var(--muted);letter-spacing:.18em;text-transform:uppercase;font-size:12px}
.hero{padding:34px 0;display:grid;gap:14px}
.hero h1{font-size:42px;line-height:1.06;margin:0}
.hero p{color:var(--muted);max-width:760px}
.btn{display:inline-block;background:var(--accent);color:#0b0f1a;padding:10px 14px;border-radius:10px;font-weight:600}
.btn.secondary{background:transparent;border:1px solid var(--line);color:var(--ink)}
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
h2{margin-top:28px}
.footer{margin-top:36px;padding:18px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.table{width:100%;border-collapse:collapse} .table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.badge{padding:2px 8px;border:1px solid var(--line);border-radius:9999px;color:var(--muted);font-size:12px}
.callout{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:12px;padding:14px;margin:14px 0}
.input,select,textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:#0d1424;color:var(--ink)}
label{font-size:14px;color:var(--muted)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
pre{white-space:pre-wrap;background:#0d1424;border:1px solid var(--line);padding:12px;border-radius:10px;overflow:auto}
small{color:var(--muted)}
code{background:#0d1424;border:1px solid var(--line);padding:2px 6px;border-radius:6px}
hr{border:none;border-top:1px solid var(--line);margin:20px 0}
@media(max-width:720px){.form-row{grid-template-columns:1fr} .hero h1{font-size:34px}}

/* === Site-wide announcement banner (Aug 2025) === */
:root{
  --omla-banner-text: "Coming soon — this is a draft license. Anticipated live date: October 2025.";
  --omla-banner-bg: #111;
  --omla-banner-fg: #ffbf00;
  --omla-banner-h: 52px;       /* keep text to one line to match this height */
}

/* Reserve space so fixed header/nav won’t overlap */
body { margin-top: var(--omla-banner-h); }

/* Fixed banner injected before page content via CSS only */
body::before{
  content: var(--omla-banner-text);
  position: fixed; left: 0; right: 0; top: 0;
  z-index: 9999;
  display: block; height: var(--omla-banner-h);
  background: var(--omla-banner-bg); color: var(--omla-banner-fg);
  border-bottom: 1px solid #333;
  font: 600 14px/52px system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  text-align: center; letter-spacing: .2px;
  padding: 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}