main { width: min(1040px, 86vw); margin: 0 auto; padding: 0 0 120px; }
.article-header { padding: clamp(112px, 16vh, 182px) 0 clamp(58px, 8vh, 88px); border-bottom: 1px solid var(--line); animation: article-arrive .9s .08s cubic-bezier(.16, 1, .3, 1) both; }
.meta { display: flex; gap: 10px; margin-bottom: 27px; color: rgba(218, 230, 250, .58); font: 10px/1 var(--mono); letter-spacing: .01em; text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.article-author { margin: 22px 0 0; font-size: 16px; color: rgba(229, 235, 250, .72); }
.article-author a { display: inline-block; padding-block: 12px; color: inherit; text-decoration-color: rgba(229, 235, 250, .3); text-underline-offset: 4px; }
.article-author a:hover { color: #fff; }
.article-author a:focus-visible { outline: 2px solid #c4dcff; outline-offset: 4px; }
.article-header h1 {
  max-width: 930px;
  margin: 0;
  color: #f8f9ff;
  font-size: clamp(50px, 7.2vw, 104px);
  font-weight: 400;
  letter-spacing: -.057em;
  line-height: .92;
  text-shadow: 0 0 38px rgba(113, 157, 255, .1);
}
.dek { max-width: 700px; margin: 34px 0 0; color: rgba(229, 235, 250, .78); font-size: clamp(20px, 2.2vw, 27px); line-height: 1.38; letter-spacing: -.018em; text-shadow: 0 2px 18px rgba(0, 0, 0, .76); }
.article-layout { position: relative; isolation: isolate; width: min(680px, 100%); margin: 0 auto; padding-top: 70px; animation: article-body-arrive .8s .24s cubic-bezier(.16, 1, .3, 1) both; }
.article-layout::before { content: ""; position: absolute; z-index: -1; inset: 18px -74px -48px; border-radius: 46%; background: radial-gradient(ellipse, rgba(1, 3, 10, .64), rgba(1, 3, 10, .26) 58%, transparent 80%); filter: blur(18px); pointer-events: none; }
.content { color: rgba(244, 246, 253, .92); font-size: clamp(19px, 1.75vw, 21px); line-height: 1.68; letter-spacing: -.006em; text-shadow: 0 2px 16px rgba(0, 0, 0, .68); }
.content p { margin: 0 0 1.48em; }
.content a { color: #f3f6ff; text-decoration-color: rgba(137, 177, 255, .82); text-decoration-thickness: 1px; text-underline-offset: .17em; }
.content a:hover,.content a:focus-visible { color: var(--accent-bright); text-decoration-color: var(--accent-bright); outline: none; }
.content strong { color: #fff; font-weight: 600; }
.content em { font-style: italic; }
.content code { padding: .08em .3em; border-radius: 3px; background: var(--accent-soft); color: var(--accent-bright); font: 85%/1.3 var(--mono); }
.tldr { margin: 0 0 50px; padding: 3px 0 3px 23px; border-left: 1px solid var(--accent); color: rgba(240, 243, 255, .9); font-size: 18px; line-height: 1.58; box-shadow: -10px 0 25px -17px rgba(120, 167, 255, .75); }
.tldr strong { display: block; margin-bottom: 9px; color: var(--accent); font: 9px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.loading { color: var(--muted); font: 10px/1 var(--mono); }

@keyframes article-arrive { from { opacity: 0; filter: blur(6px); transform: translateY(16px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes article-body-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  main { width: auto; padding: 28px 22px 76px; }
  .article-header { padding: 11vh 0 7vh; }
  .article-layout { padding-top: 46px; }
  .content { font-size: 19px; line-height: 1.64; }
  .tldr { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .article-header,
  .article-layout { animation: none; }
}