/* brainie.work — style base extracted from the "Brainie Adoption" artifact.
   Fonts (put in <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
   Theme: follows prefers-color-scheme; <html data-theme="light|dark"> forces one. */

:root{
  --background:hsl(0 0% 100%);
  --foreground:hsl(240 30% 12%);
  --card:hsl(0 0% 100%);
  --surface:hsl(250 40% 99%);
  --primary:hsl(257 89% 61%);
  --primary-hover:hsl(258 78% 53%);
  --primary-foreground:hsl(0 0% 100%);
  --secondary:hsl(256 60% 97%);
  --secondary-foreground:hsl(257 60% 30%);
  --muted:hsl(240 16% 96%);
  --muted-foreground:hsl(240 8% 46%);
  --accent:hsl(256 100% 96%);
  --accent-foreground:hsl(257 70% 40%);
  --border:hsl(240 20% 91%);
  --border-strong:hsl(240 16% 82%);
  --ring:hsl(257 89% 61%);
  --success-soft:hsl(142 60% 94%);
  --success-fg:hsl(142 72% 26%);
  --warning-soft:hsl(40 95% 93%);
  --warning-fg:hsl(30 85% 30%);
  --violet-400:#9470ff;
  --violet-500:#7544f5;
  --violet-600:#6429e6;
  --banner-bg:hsl(257 60% 22%);
  --banner-fg:hsl(256 100% 94%);
  --shadow-1:0 0 10px rgba(38,38,38,.06);
  --shadow-2:0 8px 30px rgba(80,40,200,.10);
  --radius:.75rem;
  --font:"Mulish",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --background:hsl(252 32% 7%);
    --foreground:hsl(250 30% 94%);
    --card:hsl(252 28% 10%);
    --surface:hsl(252 30% 8.5%);
    --primary:hsl(257 92% 74%);
    --primary-hover:hsl(257 95% 80%);
    --primary-foreground:hsl(254 60% 10%);
    --secondary:hsl(254 30% 14%);
    --secondary-foreground:hsl(257 85% 86%);
    --muted:hsl(252 22% 14%);
    --muted-foreground:hsl(250 14% 68%);
    --accent:hsl(257 42% 20%);
    --accent-foreground:hsl(257 100% 86%);
    --border:hsl(252 20% 19%);
    --border-strong:hsl(252 18% 28%);
    --ring:hsl(257 92% 74%);
    --success-soft:hsl(145 40% 14%);
    --success-fg:hsl(142 65% 70%);
    --warning-soft:hsl(35 50% 14%);
    --warning-fg:hsl(40 95% 72%);
    --violet-400:#a98bff;
    --violet-500:#9470ff;
    --violet-600:#7f57fa;
    --banner-bg:hsl(257 50% 16%);
    --banner-fg:hsl(256 100% 90%);
    --shadow-1:0 0 0 1px rgba(0,0,0,.2);
    --shadow-2:0 10px 34px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --background:hsl(252 32% 7%);
  --foreground:hsl(250 30% 94%);
  --card:hsl(252 28% 10%);
  --surface:hsl(252 30% 8.5%);
  --primary:hsl(257 92% 74%);
  --primary-hover:hsl(257 95% 80%);
  --primary-foreground:hsl(254 60% 10%);
  --secondary:hsl(254 30% 14%);
  --secondary-foreground:hsl(257 85% 86%);
  --muted:hsl(252 22% 14%);
  --muted-foreground:hsl(250 14% 68%);
  --accent:hsl(257 42% 20%);
  --accent-foreground:hsl(257 100% 86%);
  --border:hsl(252 20% 19%);
  --border-strong:hsl(252 18% 28%);
  --ring:hsl(257 92% 74%);
  --success-soft:hsl(145 40% 14%);
  --success-fg:hsl(142 65% 70%);
  --warning-soft:hsl(35 50% 14%);
  --warning-fg:hsl(40 95% 72%);
  --violet-400:#a98bff;
  --violet-500:#9470ff;
  --violet-600:#7f57fa;
  --banner-bg:hsl(257 50% 16%);
  --banner-fg:hsl(256 100% 90%);
  --shadow-1:0 0 0 1px rgba(0,0,0,.2);
  --shadow-2:0 10px 34px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font);font-size:15px;line-height:1.5;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
h1,h2,h3,h4{font-weight:800;letter-spacing:-0.03em;margin:0;line-height:1.2;text-wrap:balance}
h1{font-size:1.75rem}
h2{font-size:1.15rem}
h3{font-size:1rem}
p{margin:0}
a{color:var(--accent-foreground)}
a:hover{color:var(--primary)}
ul,ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
li{padding-left:4px}
strong,b{font-weight:800}
code,kbd,.mono{font-family:var(--mono);letter-spacing:0}
code{font-size:.9em;background:var(--muted);border:1px solid var(--border);border-radius:6px;padding:1px 6px}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--card);padding:8px 12px;z-index:50}
.muted{color:var(--muted-foreground)}
.small{font-size:13px}
.num{font-variant-numeric:tabular-nums}

/* text helpers */
.eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-foreground);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.lede{color:var(--muted-foreground);margin-top:6px;max-width:62ch}
.prose{max-width:72ch;display:flex;flex-direction:column;gap:14px}
.prose h2{margin-top:18px}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--secondary);color:var(--secondary-foreground);border-radius:10px;padding:12px 14px;font-size:13.5px}
.note.warn{background:var(--warning-soft);color:var(--warning-fg)}

/* layout */
.content{padding:28px;max-width:1180px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{flex:1}
.divider{height:1px;background:var(--border);margin:14px 0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gauto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* banner + header */
.banner{background:var(--banner-bg);color:var(--banner-fg);font-size:12px;font-weight:700;text-align:center;padding:4px 16px;letter-spacing:.02em}
.topbar{display:flex;align-items:center;gap:16px;padding:12px 28px;border-bottom:1px solid var(--border);background:var(--card);position:sticky;top:0;z-index:30;flex-wrap:wrap}
.topbar nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.topbar nav a{padding:8px 12px;border-radius:999px;font-weight:700;font-size:14px;color:var(--muted-foreground);text-decoration:none}
.topbar nav a:hover{background:var(--muted);color:var(--foreground)}
.topbar nav a[aria-current="page"]{background:var(--accent);color:var(--accent-foreground)}
.logo{display:flex;align-items:center;gap:10px;padding:2px 0;font-weight:900;font-size:17px;letter-spacing:-0.03em;color:var(--foreground);text-decoration:none}
.logo:hover{color:var(--foreground)}
.logo-mark{width:30px;height:30px;display:grid;place-items:center;color:var(--primary)}
.logo-mark svg{width:30px;height:28px}
.logo small{font-weight:700;color:var(--muted-foreground)}

/* hero + cards */
.hero{background:linear-gradient(135deg,var(--secondary),var(--card));border:1px solid var(--border);border-radius:var(--radius);padding:22px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow-2)}
.hero h2{font-size:1.35rem}
.hero p{color:var(--muted-foreground);margin-top:6px}
.hero .grow{flex:1;min-width:220px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:20px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-head p{color:var(--muted-foreground);font-size:13px}
.card.is-featured{border-color:var(--primary);box-shadow:var(--shadow-2)}
.icon-tile{width:44px;height:44px;border-radius:12px;background:var(--accent);color:var(--accent-foreground);display:grid;place-items:center;flex:none}
.icon-tile svg{width:22px;height:22px}
svg.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dashed{border:1.5px dashed var(--border-strong);border-radius:var(--radius);padding:16px;background:var(--surface)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap;line-height:1.5;background:var(--accent);color:var(--accent-foreground)}
.chip-ok{background:var(--success-soft);color:var(--success-fg)}
.chip-warn{background:var(--warning-soft);color:var(--warning-fg)}
.chip-idle{background:var(--muted);color:var(--muted-foreground)}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--foreground);font-weight:800;font-size:14px;padding:9px 16px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--muted);color:var(--foreground)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--primary-foreground)}
.btn-soft{background:var(--accent);border-color:transparent;color:var(--accent-foreground)}
.btn-soft:hover{background:var(--secondary)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--accent-foreground)}
.btn-ghost:hover{background:var(--accent)}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-lg{padding:13px 22px;font-size:16px}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-1)}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground);padding:11px 14px;border-bottom:1px solid var(--border);background:var(--surface)}
td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:top}
tr:last-child td{border-bottom:0}

/* footer */
.site-footer{border-top:1px solid var(--border);background:var(--card);color:var(--muted-foreground);font-size:13px;margin-top:40px}
.site-footer .inner{max-width:1180px;margin:0 auto;padding:24px 28px 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.site-footer a{color:var(--muted-foreground)}
.site-footer a:hover{color:var(--accent-foreground)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
@media (max-width:900px){
  .topbar{padding:10px 16px;gap:10px}
  .content{padding:20px 16px 56px}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .site-footer .inner{padding:20px 16px 32px}
}
@media (max-width:560px){
  h1{font-size:1.45rem}
  .hero{padding:18px}
}