/* Data Visuals — Markdown Theme (CSS-only)
   Minimal, documentation-like styling for a single-page brand site.
*/

:root{
  --bg:#ffffff;
  --fg:#111827;
  --muted:#6b7280;
  --link:#2563eb;
  --border:#e5e7eb;
  --codebg:#f6f8fa;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --radius:16px;
  --maxw: 860px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --fg:#e5e7eb;
    --muted:#9ca3af;
    --link:#60a5fa;
    --border:#243044;
    --codebg:#0f172a;
    --shadow:none;
  }
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Frame */
.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 20px 64px;
}
.card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}

/* Top bar */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.brand b{
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.brand span{
  color:var(--muted);
  font-size:13px;
}
nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-size:14px;
}
nav a{
  color:var(--muted);
  text-decoration:none;
}
nav a:hover{
  color:var(--fg);
  text-decoration:underline;
}

/* Markdown-like typography */
h1,h2,h3{
  line-height:1.25;
  margin: 0 0 10px;
}
h1{font-size:34px; letter-spacing:-.02em}
h2{font-size:20px; margin-top:28px}
h3{font-size:16px; margin-top:18px}
p{margin: 10px 0}
a{color:var(--link)}
hr{border:none; border-top:1px solid var(--border); margin:22px 0}
ul{margin: 8px 0 8px 22px}
li{margin: 4px 0}

/* Markdown elements */
blockquote{
  margin: 14px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--border);
  color: var(--muted);
  background: color-mix(in srgb, var(--codebg) 70%, transparent);
  border-radius: 10px;
}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
  background: var(--codebg);
  padding: .15em .35em;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

pre{
  background: var(--codebg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  overflow:auto;
  margin: 12px 0;
}
pre code{
  background:transparent;
  border:none;
  padding:0;
}

/* Pills */
.pillrow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 12px 0 6px;
}
.pill{
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  font-size:13px;
  color:var(--muted);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
}

/* CTAs */
.cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  align-items:center;
}
.btn{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  color:var(--fg);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.btn:hover{transform: translateY(-1px)}
.btn.primary{
  border-color: color-mix(in srgb, var(--link) 55%, var(--border));
  background: color-mix(in srgb, var(--link) 12%, var(--bg));
}

/* Footer */
footer{
  margin-top:18px;
  color:var(--muted);
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}