:root{
  --ink:#0c1024; --ink2:#3b4068; --ink3:#7a80a4;
  --bg:#eef0f8;
  --primary:#1a3cff;
  --primary-deep:#0d28cc;
  --line:rgba(10,15,74,.08);
  --font:"SF Pro Display","SF Pro Text","PingFang SC","Helvetica Neue",-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.65}
a{color:var(--primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary-deep);text-decoration:underline}

/* Top nav */
.lg-nav{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:rgba(238,240,248,.85);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.lg-brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.lg-brand svg{width:28px;height:28px;display:block}
.lg-back{font-size:13.5px;color:var(--ink2);font-weight:500}
.lg-back:hover{color:var(--primary);text-decoration:none}

/* Main */
.lg-wrap{
  max-width:780px;margin:0 auto;
  padding:48px 28px 80px;
}
.lg-crumb{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--ink3);
  margin-bottom:18px;letter-spacing:.02em;
}
.lg-crumb a{color:var(--ink3)}
.lg-crumb a:hover{color:var(--primary);text-decoration:none}
.lg-crumb span:nth-child(odd){color:rgba(10,15,74,.25)}

h1{
  font-size:clamp(32px,4.4vw,44px);
  letter-spacing:-.02em;line-height:1.1;
  margin:0 0 6px;font-weight:800;
}
h1 small{
  display:block;margin-top:6px;
  font-size:14px;font-weight:500;
  color:var(--ink3);letter-spacing:.04em;
}
.lg-meta{
  font-size:12.5px;color:var(--ink3);
  margin:0 0 32px;
  font-family:"SF Mono",ui-monospace,Menlo,monospace;
}
.lg-lead{
  font-size:16px;line-height:1.75;color:var(--ink2);
  margin:0 0 28px;
}
.lg-lead strong{color:var(--ink);font-weight:600}

/* TL;DR box */
.lg-tldr{
  margin:28px 0 36px;
  padding:18px 22px;border-radius:14px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(125,146,255,.18) 0%, transparent 55%),
    linear-gradient(135deg, rgba(26,60,255,.05), rgba(125,146,255,.04));
  border:1px solid rgba(26,60,255,.12);
}
.lg-tldr h3{
  margin:0 0 6px;font-size:12px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);
}
.lg-tldr p{margin:0;font-size:14.5px;color:var(--ink2);line-height:1.65}
.lg-tldr p strong{color:var(--ink)}

/* Headings */
h2{
  font-size:22px;font-weight:700;letter-spacing:-.01em;
  margin:42px 0 14px;color:var(--ink);
  scroll-margin-top:80px;
}
h2::before{
  content:"";display:inline-block;
  width:4px;height:18px;border-radius:2px;
  background:linear-gradient(180deg,#1a3cff,#7d92ff);
  vertical-align:-3px;margin-right:10px;
}
h3{
  font-size:16px;font-weight:700;letter-spacing:-.005em;
  margin:24px 0 10px;color:var(--ink);
}

/* Body */
p,li{font-size:15px;color:var(--ink2);line-height:1.75}
ul,ol{padding-left:1.4em;margin:10px 0 16px}
li{margin-bottom:8px}
li strong{color:var(--ink);font-weight:600}
p strong{color:var(--ink);font-weight:600}

/* Tables */
table{
  width:100%;border-collapse:collapse;
  margin:14px 0 22px;font-size:14px;
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 6px 18px -10px rgba(10,15,74,.18);
}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{background:rgba(26,60,255,.04);font-weight:600;color:var(--ink);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
tr:last-child td{border-bottom:none}
td code{
  font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:12.5px;
  background:rgba(26,60,255,.06);color:var(--primary);
  padding:1px 6px;border-radius:4px;
}

/* Code block / inline */
code{
  font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:13px;
  background:rgba(26,60,255,.06);color:var(--primary);
  padding:1px 6px;border-radius:4px;
}

/* Footer */
.lg-foot{
  max-width:780px;margin:0 auto;
  padding:24px 28px 36px;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;
  border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink3);
}
.lg-foot a{color:var(--ink3)}
.lg-foot a:hover{color:var(--primary);text-decoration:none}

@media (max-width:560px){
  .lg-nav{padding:12px 18px}
  .lg-wrap{padding:32px 20px 60px}
  h1{font-size:30px}
  .lg-foot{padding:20px;flex-direction:column;align-items:flex-start}
}