/* SplatDev — article reading theme
   Premium dark editorial styling for the standalone use-case articles.
   Targets the plain semantic HTML (article/h1.../p/table/blockquote) so the
   articles need only link this file + a small brand bar — no markup churn. */

:root{
  --bg:#0F101A;
  --surface:#1A1A2E;
  --surface-2:#22223C;
  --border:#2E2E48;
  --border-soft:color-mix(in srgb, #2E2E48 60%, transparent);
  --text:#F4F2FA;
  --text-soft:#D6D2E6;
  --muted:#B197E0;
  --muted-2:#8A8AA8;
  --primary:#8056D1;
  --primary-bright:#9B6CFF;
  --accent:#22D3EE;
  --good:#34D399;
  --font:'Zalando Sans','Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --measure:68ch;
  color-scheme:dark;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:
    radial-gradient(circle at 12% -4%,rgba(128,86,209,.20),transparent 42%),
    radial-gradient(circle at 92% 6%,rgba(34,211,238,.08),transparent 46%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text-soft);
  font-family:var(--font);
  font-size:clamp(16px,1rem + .25vw,18px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}

/* Brand bar (injected into each article just after <body>) */
.site-bar{
  max-width:var(--measure);
  margin:0 auto;
  padding:26px 24px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.site-bar__logo img{height:34px;width:auto}
.site-bar__back{
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
  border:1px solid var(--border);
  background:var(--surface);
  padding:7px 13px;
  border-radius:999px;
  white-space:nowrap;
  transition:border-color .18s,color .18s,transform .18s;
}
.site-bar__back:hover{color:var(--text);border-color:var(--primary);transform:translateX(-2px)}
.site-bar__back:focus-visible{outline:2px solid var(--primary-bright);outline-offset:2px}

/* Article column */
article{
  max-width:var(--measure);
  margin:0 auto;
  padding:14px 24px 96px;
}

article > header{
  margin:18px 0 40px;
  padding-bottom:28px;
  border-bottom:1px solid var(--border-soft);
}

h1{
  font-size:clamp(30px,4.4vw,46px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.022em;
  color:var(--text);
  text-wrap:balance;
  margin:0 0 16px;
}

article > header p em{
  font-style:normal;
  display:inline-block;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.01em;
  color:var(--muted-2);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 13px;
}

h2{
  font-size:clamp(22px,2.6vw,28px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--text);
  text-wrap:balance;
  margin:52px 0 14px;
  padding-top:6px;
}
h2::before{
  content:"";
  display:block;
  width:42px;
  height:3px;
  margin-bottom:18px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--primary-bright),var(--accent));
}

h3{
  font-size:clamp(17px,1.8vw,20px);
  font-weight:600;
  color:var(--text);
  letter-spacing:-.01em;
  margin:30px 0 8px;
}

p{margin:0 0 18px;max-width:var(--measure)}

strong{color:var(--text);font-weight:600}
em{color:var(--muted)}

a{color:var(--primary-bright);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--primary-bright) 40%,transparent);transition:color .15s,border-color .15s}
a:hover{color:#C9A9FF;border-bottom-color:currentColor}
a:focus-visible{outline:2px solid var(--primary-bright);outline-offset:2px;border-radius:2px}

ul,ol{margin:0 0 20px;padding-left:0;list-style:none}
ul li,ol li{position:relative;padding-left:30px;margin-bottom:11px}
ul li::before{
  content:"";
  position:absolute;left:6px;top:.72em;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);
}
ol{counter-reset:li}
ol li{counter-increment:li}
ol li::before{
  content:counter(li);
  position:absolute;left:0;top:.05em;
  width:22px;height:22px;border-radius:7px;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--primary-bright);
  background:var(--surface);border:1px solid var(--border);
}
li strong{color:var(--text)}

/* Tables */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:8px 0 28px;
  font-size:.95em;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.02),0 18px 40px -24px rgba(0,0,0,.7);
}
thead th{
  text-align:left;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--surface-2);
  padding:13px 18px;
  border-bottom:1px solid var(--border);
}
tbody td{padding:13px 18px;border-bottom:1px solid var(--border-soft);color:var(--text-soft)}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
tbody td:first-child{color:var(--text);font-weight:500}
tbody tr:last-child td{background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--text);font-weight:600}

/* Blockquote — pull quote */
blockquote{
  margin:30px 0;
  padding:22px 26px;
  background:linear-gradient(100deg,color-mix(in srgb,var(--primary) 14%,transparent),color-mix(in srgb,var(--accent) 7%,transparent));
  border:1px solid var(--border);
  border-left:3px solid var(--primary-bright);
  border-radius:0 14px 14px 0;
}
blockquote p{font-size:1.12em;line-height:1.55;color:var(--text);font-weight:500;margin:0 0 10px}
blockquote footer{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:0}

code{
  font-family:var(--mono);
  font-size:.86em;
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:6px;
  padding:.12em .42em;
  color:#E6DBFF;
}

/* CTA button (the inline-styled anchor) — normalize to brand */
article a[style]{
  background:linear-gradient(100deg,var(--primary),var(--primary-bright)) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:11px !important;
  padding:13px 24px !important;
  font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 14px 30px -12px rgba(128,86,209,.6);
  transition:transform .18s,box-shadow .18s;
}
article a[style]:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 20px 40px -14px rgba(128,86,209,.7)}

/* Footer */
article > footer{
  margin-top:56px;
  padding-top:26px;
  border-top:1px solid var(--border-soft);
  color:var(--muted-2);
  font-size:.92em;
}
article > footer em{color:var(--muted-2);font-style:italic;display:block;margin-bottom:12px}

::selection{background:color-mix(in srgb,var(--primary) 55%,transparent);color:#fff}

@media (max-width:560px){
  article{padding:8px 18px 72px}
  .site-bar{padding:20px 18px 0}
  h2{margin-top:40px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
  .site-bar__back:hover,article a[style]:hover{transform:none}
}