.article-wrap{max-width:900px;margin:0 auto;padding:1rem 1.5rem 3.5rem;position:relative;z-index:1}
.content{max-width:100%;font-size:15px;line-height:1.7}

/* ─── headings ─────────────────────────────────────────────── */
.content h1{
  font-size:2rem;font-weight:800;line-height:1.2;
  color:var(--soc-ink);letter-spacing:-.02em;
  margin:.75rem 0 .85rem;padding:0 0 .9rem;
  border-bottom:1px solid var(--soc-line);
  position:relative;text-wrap:balance
}
.content h1::before{
  content:var(--kicker-text);display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;font-weight:700;letter-spacing:.18em;
  color:var(--kicker-color);text-transform:uppercase;margin-bottom:.55rem
}
.content h1 a{color:inherit;border-bottom:none}
.content h1 a:hover{color:var(--soc-cy);text-decoration:none}
.content h1 a::after{
  content:"↗";display:inline-flex;align-items:center;justify-content:center;
  width:1.45em;height:1.45em;margin-left:.5em;
  border:1px solid rgba(34,225,255,.3);background:rgba(34,225,255,.06);
  border-radius:4px;color:var(--soc-cy);
  font-size:.55em;font-weight:700;vertical-align:.32em;
  font-family:'JetBrains Mono',monospace;transition:.15s
}
.content h1 a:hover::after{background:rgba(34,225,255,.15);border-color:var(--soc-cy);transform:translate(2px,-2px)}

.content h2{
  font-size:1.35rem;font-weight:700;color:var(--soc-ink);
  margin:2.4rem 0 .85rem;padding:0 0 .4rem;
  border-bottom:1px solid var(--soc-line);letter-spacing:-.01em
}
.content h2::before{
  content:"§ ";font-family:'JetBrains Mono',monospace;
  color:var(--kicker-color);font-weight:700;font-size:.95rem;opacity:.85
}
.content h3{
  font-size:1.05rem;font-weight:600;color:var(--soc-cy);
  margin:1.8rem 0 .55rem;font-family:'JetBrains Mono',monospace;letter-spacing:.02em
}
.content h3::before{content:"› ";color:var(--soc-ink4);font-weight:400}
.content h4,.content h5,.content h6{
  font-size:.9rem;font-weight:600;color:var(--soc-ink2);
  margin:1.3rem 0 .45rem;font-family:'JetBrains Mono',monospace;
  text-transform:uppercase;letter-spacing:.08em
}
.content h2[id]::after,.content h3[id]::after{
  content:" #";font-family:'JetBrains Mono',monospace;
  color:var(--soc-ink4);font-weight:400;opacity:0;margin-left:.4rem;
  font-size:.85em;transition:opacity .15s
}
.content h2:hover[id]::after,.content h3:hover[id]::after{opacity:.5}

/* ─── text & lists ─────────────────────────────────────────── */
.content p{margin:.85rem 0;color:var(--soc-ink2);text-wrap:pretty}
.content strong{color:var(--soc-ink);font-weight:600}
.content em{color:#dbe2f5}
.content del{color:var(--soc-ink4);text-decoration-color:var(--soc-ink4)}
.content ul,.content ol{margin:.9rem 0 1.1rem;padding-left:1.4rem;color:var(--soc-ink2)}
.content li{margin:.35rem 0;padding-left:.25rem}
.content ul li::marker{color:var(--soc-cy);font-size:.85em}
.content ol li::marker{color:var(--soc-cy);font-weight:700;font-family:'JetBrains Mono',monospace}

/* ─── links ────────────────────────────────────────────────── */
.content a{
  color:var(--soc-cy);
  border-bottom:1px dashed rgba(34,225,255,.35);transition:.15s
}
.content a:hover{color:#7df2ff;border-bottom-color:var(--soc-cy);text-decoration:none}

/* ─── blockquote (Q1) ...) ─────────────────────────────────── */
.content blockquote{
  margin:1.4rem 0 .9rem;padding:.85rem 1rem .85rem 1.1rem;
  background:linear-gradient(90deg,rgba(34,225,255,.06),rgba(34,225,255,.012) 70%,transparent);
  border:1px solid var(--soc-line);
  border-left:3px solid var(--soc-cy);border-radius:0 4px 4px 0
}
.content blockquote p{margin:0;color:var(--soc-ink);font-weight:500;font-size:.96rem;line-height:1.55}
.content blockquote p+p{margin-top:.45rem}
.content blockquote strong{color:#fff}
.content blockquote+blockquote{margin-top:.4rem}

/* ─── inline + block code ──────────────────────────────────── */
.content code{
  font-family:'JetBrains Mono',monospace;font-size:.85em;
  background:rgba(34,225,255,.06);
  border:1px solid rgba(34,225,255,.18);color:#a5f3fc;
  padding:.1em .42em;border-radius:3px
}
.content pre{
  background:#070b14;border:1px solid var(--soc-line);
  border-radius:5px;padding:1rem 1.15rem;margin:1.1rem 0;
  overflow-x:auto;position:relative
}
.content pre::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,225,255,.25),transparent)
}
.content pre code{background:none;border:none;padding:0;color:#e2e8f0;font-size:.86rem;line-height:1.65;display:block}
.content pre code[class]:not([class=""])::before{
  content:attr(class);display:block;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--soc-ink4);margin-bottom:.65rem;padding-bottom:.55rem;
  border-bottom:1px dashed var(--soc-line)
}

/* ─── <details> answer reveal ──────────────────────────────── */
.content details{
  margin:.9rem 0 1.4rem;border:1px solid rgba(61,220,132,.3);
  border-radius:5px;overflow:hidden;
  background:linear-gradient(180deg,rgba(61,220,132,.05),rgba(61,220,132,.015));
  transition:border-color .15s
}
.content details[open]{border-color:rgba(61,220,132,.55)}
.content details summary{
  list-style:none;cursor:pointer;padding:.55rem .9rem;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--soc-gn);display:flex;align-items:center;gap:.55rem;
  user-select:none;transition:background .12s
}
.content details summary::-webkit-details-marker{display:none}
.content details summary::before{
  content:"▸";color:var(--soc-gn);font-size:.9rem;
  transition:transform .2s;display:inline-block
}
.content details[open] summary::before{transform:rotate(90deg)}
.content details summary:hover{background:rgba(61,220,132,.06)}
.content details summary::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(61,220,132,.3),transparent)
}
.content details pre{
  margin:0;border:none;border-top:1px solid rgba(61,220,132,.2);
  border-radius:0;background:#070b14
}
.content details pre::before{background:linear-gradient(90deg,transparent,rgba(61,220,132,.35),transparent)}
.content details pre code{color:#d3f5e0}

/* ─── images ───────────────────────────────────────────────── */
.content img{
  display:block;max-width:100%;height:auto;margin:1.4rem auto;
  border:1px solid var(--soc-line);border-radius:5px;
  background:
    repeating-linear-gradient(-45deg,rgba(34,225,255,.04) 0 1px,transparent 1px 14px),
    linear-gradient(180deg,#101723,#0a0f18);
  min-height:140px;color:var(--soc-ink4);
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
  text-align:center;font-style:italic;
  box-shadow:0 1px 0 rgba(255,255,255,.02),0 8px 24px rgba(0,0,0,.22)
}
.content img:hover{border-color:var(--soc-line2)}

/* ─── hr ───────────────────────────────────────────────────── */
.content hr{
  border:none;height:1px;margin:2.2rem 0;
  background:linear-gradient(90deg,transparent,var(--soc-line2),transparent);
  position:relative
}
.content hr::before{
  content:"⌖";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);background:var(--soc-bg);
  padding:0 .55rem;color:var(--soc-ink4);font-size:.7rem
}

/* ─── tables ───────────────────────────────────────────────── */
.content table{
  width:100%;border-collapse:collapse;margin:1.2rem 0;
  font-size:.86rem;display:block;overflow-x:auto;
  border:1px solid var(--soc-line);border-radius:5px
}
.content thead{background:var(--soc-bg-2)}
.content th{
  color:var(--soc-cy);text-align:left;padding:.6rem .85rem;
  border-bottom:1px solid var(--soc-line);
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;white-space:nowrap
}
.content td{padding:.5rem .85rem;border-bottom:1px solid var(--soc-line);color:var(--soc-ink2);vertical-align:top}
.content tr:last-child td{border-bottom:none}
.content tr:nth-child(even) td{background:rgba(255,255,255,.015)}

/* ─── footer ───────────────────────────────────────────────── */
footer.foot{
  border-top:1px solid var(--soc-line);
  padding:1.5rem;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--soc-ink4);
  margin-top:1.5rem;letter-spacing:.06em;position:relative;z-index:1
}
footer.foot a{color:var(--soc-ink3);text-decoration:none}
footer.foot a:hover{color:var(--soc-cy)}
footer.foot .sep{color:var(--soc-ink4);opacity:.5;margin:0 .55rem}

@media(max-width:640px){
  .content h1{font-size:1.55rem}
  .content h2{font-size:1.15rem}
  .article-wrap{padding:.5rem 1rem 2.5rem}
  .soc-tb-row{padding:8px 12px;gap:8px}
}