:root {
  --bg:#0d0711; --bg2:#160c1c; --fg:#f8eef3; --muted:#b7a6b9; --line:rgba(255,255,255,.1);
  --coral:#ff6a3d; --rose:#e0207a; --sun:#ffd84d; --violet:#7b5cff;
  --grad:linear-gradient(110deg,var(--coral),var(--rose) 55%,var(--violet));
  --ease:cubic-bezier(.2,.8,.2,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--fg); font:18px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing:antialiased;
  background:radial-gradient(900px 500px at 12% -5%, rgba(224,32,122,.28), transparent 60%), radial-gradient(800px 500px at 95% 8%, rgba(255,106,61,.2), transparent 60%), radial-gradient(900px 600px at 50% 110%, rgba(123,92,255,.2), transparent 60%), var(--bg); background-attachment:fixed; }
a { color:inherit; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
header { position:sticky; top:12px; z-index:20; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 12px 10px 16px; margin-top:12px; border:1px solid var(--line); border-radius:18px; background:rgba(20,10,26,.6); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:-.02em; text-decoration:none; }
.brand img { width:34px; height:34px; border-radius:9px; }
nav.links a { margin:0 12px; text-decoration:none; color:var(--muted); font-size:15px; }
nav.links a:hover { color:var(--fg); }
.pill-btn { display:inline-flex; padding:10px 16px; border-radius:12px; font-weight:700; font-size:15px; text-decoration:none; color:#fff; background:var(--grad); box-shadow:0 8px 30px -10px rgba(224,32,122,.7); }
.crumbs { font-size:14px; color:var(--muted); padding:34px 0 0; }
.crumbs a { color:var(--muted); text-decoration:none; } .crumbs a:hover { color:var(--fg); }
article { max-width:760px; margin:0 auto; padding:24px 0 40px; }
h1 { font-size:clamp(36px,6vw,62px); line-height:1.05; letter-spacing:-.04em; font-weight:830; margin:0 0 20px; }
h1 em { font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { font-size:clamp(19px,2.2vw,22px); color:var(--muted); margin:0 0 30px; }
.meta { font-size:14px; color:var(--muted); margin:0 0 34px; }
h2 { font-size:clamp(25px,3.4vw,34px); line-height:1.15; letter-spacing:-.03em; margin:46px 0 14px; font-weight:800; }
h3 { font-size:21px; margin:28px 0 8px; letter-spacing:-.02em; }
p { margin:0 0 18px; }
ul, ol { margin:0 0 22px; padding-left:22px; } li { margin-bottom:9px; }
ol { list-style:none; padding-left:0; counter-reset:s; }
ol li { counter-increment:s; position:relative; padding-left:52px; margin-bottom:16px; min-height:38px; }
ol li::before { content:counter(s); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:var(--grad); }
strong { color:#fff; }
.callout { margin:26px 0; padding:20px 22px; border-radius:18px; border:1px solid rgba(255,216,77,.3); background:rgba(255,216,77,.07); }
.callout p:last-child { margin:0; }
table { width:100%; border-collapse:collapse; margin:22px 0 28px; font-size:16px; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; }
.cta { margin:44px 0; padding:32px; border-radius:26px; border:1px solid var(--line); background:radial-gradient(120% 140% at 0% 0%,rgba(224,32,122,.2),transparent 55%), rgba(255,255,255,.03); }
.cta h2 { margin:0 0 8px; font-size:28px; }
.cta p { color:var(--muted); }
.btn { display:inline-flex; align-items:center; padding:15px 24px; border-radius:15px; font-weight:750; font-size:17px; text-decoration:none; color:#fff; background:var(--grad); box-shadow:0 18px 50px -18px rgba(224,32,122,.9); margin:4px 10px 4px 0; }
.btn.ghost { background:rgba(255,255,255,.06); border:1px solid var(--line); box-shadow:none; }
details { border-bottom:1px solid var(--line); padding:18px 2px; }
summary { cursor:pointer; font-weight:700; font-size:19px; list-style:none; display:flex; justify-content:space-between; gap:20px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; font-size:26px; font-weight:300; color:var(--coral); }
details[open] summary::after { content:"–"; }
details p { color:var(--muted); margin:12px 0 0; }
.related { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:18px 0 40px; }
.related a { display:block; padding:18px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.03); text-decoration:none; transition:border-color .2s, transform .2s var(--ease); }
.related a:hover { border-color:var(--rose); transform:translateY(-3px); }
.related b { display:block; margin-bottom:4px; } .related span { color:var(--muted); font-size:15px; line-height:1.4; display:block; }
footer { border-top:1px solid var(--line); margin-top:50px; padding:30px 0 50px; color:var(--muted); font-size:14px; }
footer .cols { display:grid; gap:24px; grid-template-columns:1.2fr 1fr; }
footer a { color:var(--muted); }
@media (max-width:820px) { nav.links { display:none; } footer .cols { grid-template-columns:1fr; } .cta { padding:24px 20px; } table { font-size:15px; } }