/* site.css
 * Shared "site shell" styling for non-builder pages (docs/gallery/repo views).
 * Keeps things consistent across the project while still allowing page-specific CSS.
 */
:root{
  --siteBg: var(--bg,#020617);
  --siteText: var(--text,#e5e7eb);
  --sitePanelA: var(--panelA,#0b1220);
  --sitePanelB: var(--panelB,#0b1220);
  --siteBorder: rgba(148,163,184,.22);
}

body{
  color: var(--siteText);
  background:
    radial-gradient(1200px circle at 18% 8%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(900px circle at 82% 0%, rgba(34,197,94,.10), transparent 60%),
    radial-gradient(700px circle at 60% 90%, rgba(59,130,246,.08), transparent 55%),
    var(--siteBg);
}

a{color: var(--accent,#67e8f9);}
a:hover{text-decoration:underline;}

.page-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px 40px 16px;
}

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin: 6px 0 14px 0;
}

.page-head h1{
  margin:0;
  font-size: 18px;
  letter-spacing: .08em;
  font-weight: 900;
  color: #e5e7eb;
}

.page-head .sub{
  color: var(--muted,#94a3b8);
  font-size: 12px;
}

.panel-like{
  border: 1px solid var(--siteBorder);
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--sitePanelA) 92%, #000), color-mix(in srgb, var(--sitePanelB) 92%, #000));
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

@supports not (color-mix(in srgb, #000 50%, #fff)){
  .panel-like{
    background: linear-gradient(145deg, var(--sitePanelA), var(--sitePanelB));
  }
}

.panel-like.pad{padding:14px;}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--siteBorder);
  background: rgba(2,6,23,.55);
  color: var(--muted,#94a3b8);
  font-size: 12px;
}

.btn-lite{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(2,6,23,.65);
  color: var(--siteText);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
}
.btn-lite:hover{border-color: rgba(103,232,249,.55); text-decoration:none;}

@media (max-width: 700px){
  .page-shell{padding:14px 12px 34px 12px;}
}