/* LWN Pro — Knowledge Base article page (three-column: rail nav / content / on-page TOC) */

.ar { background: #FFFFFF; container-type: inline-size; font-family: Inter, system-ui, sans-serif; color: #17181A; }
.ar__crumbs { border-bottom: 1px solid #E4E6E8; }
.ar__crumbsin { max-width: 1240px; margin: 0 auto; padding: 16px 40px; font-size: 13px; color: #8E9196; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar__crumbsin a { color: #6E7176; }
.ar__crumbsin a:hover { color: #A62A6D; }

.ar__in { max-width: 1240px; margin: 0 auto; padding: 44px 40px 88px; display: grid; grid-template-columns: 232px minmax(0, 1fr) 208px; gap: 56px; align-items: start; }

/* left rail */
.ar__rail { position: sticky; top: 28px; }
.ar__railh { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #8E9196; margin: 0 0 6px; }
.ar__railt { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.3; letter-spacing: -0.014em; margin: 0 0 18px; }
.ar__nav { list-style: none; margin: 0; padding: 0; border-left: 1px solid #E4E6E8; }
.ar__navl { display: block; padding: 9px 0 9px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.4; color: #53565B; text-decoration: none; }
.ar__navl:hover { color: #A62A6D; border-left-color: #EED8E6; }
.ar__navl--on { color: #A62A6D; font-weight: 500; border-left-color: #E0529E; }

/* right toc */
.ar__toc { position: sticky; top: 28px; }
.ar__toch { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #8E9196; margin: 0 0 14px; }
.ar__tocl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ar__tocli { display: flex; gap: 10px; padding: 7px 0; font-size: 13.5px; line-height: 1.45; color: #53565B; text-decoration: none; }
.ar__tocli:hover { color: #A62A6D; }
.ar__tocn { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #C4C6CA; flex: none; padding-top: 1px; }
.ar__tocmob { display: none; }

/* article body */
.ar__h1 { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 42px; line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 16px; text-wrap: balance; }
.ar__meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #8E9196; margin: 0 0 36px; padding-bottom: 28px; border-bottom: 1px solid #E4E6E8; }
.ar__lead { font-size: 18px; line-height: 1.65; color: #3C3F43; margin: 0 0 44px; text-wrap: pretty; }
.ar__h2 { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 27px; line-height: 1.2; letter-spacing: -0.022em; margin: 52px 0 18px; scroll-margin-top: 24px; }
.ar__h2:first-of-type { margin-top: 0; }
.ar__h3 { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -0.014em; margin: 30px 0 10px; }
.ar__h3:first-of-type { margin-top: 0; }
.ar__p { font-size: 16px; line-height: 1.72; color: #3C3F43; margin: 0 0 18px; max-width: 68ch; text-wrap: pretty; }
.ar__p strong { font-weight: 600; color: #17181A; }
.ar__p em { color: #53565B; }
.ar__code { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; color: #A62A6D; background: #FDF2F8; border: 1px solid #F0DDE8; border-radius: 3px; padding: 2px 6px; }
.ar__pre { font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.6; color: #17181A; background: #FAFAFB; border: 1px solid #E4E6E8; border-left: 2px solid #E0529E; border-radius: 3px; padding: 16px 18px; margin: 0 0 22px; overflow-x: auto; }

.ar__ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ar__li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.68; color: #3C3F43; max-width: 66ch; }
.ar__li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: #E0529E; }
.ar__ul--sub { margin: 11px 0 0; gap: 9px; }
.ar__li--sub { font-size: 15.5px; color: #53565B; }
.ar__li--sub::before { background: transparent; border: 1.5px solid #E0A6C9; width: 5px; height: 5px; top: 9px; }

.ar__fig { margin: 0 0 24px; }
.ar__fig img { display: block; width: 100%; border: 1px solid #E4E6E8; border-radius: 4px; }
.ar__figcap { font-size: 13.5px; line-height: 1.5; color: #8E9196; margin: 10px 0 0; }

.ar__note { display: flex; gap: 14px; background: #FDF2F8; border: 1px solid #EED8E6; border-radius: 3px; padding: 18px 20px; margin: 0 0 24px; }
.ar__notei { flex: none; color: #A62A6D; margin-top: 1px; }
.ar__notep { font-size: 15px; line-height: 1.6; color: #53565B; margin: 0; }

.ar__todo { font-size: 15.5px; line-height: 1.6; color: #A9ACB1; font-style: italic; margin: 0; }

/* prev / next */
.ar__pn { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 64px; padding-top: 32px; border-top: 1px solid #E4E6E8; }
.ar__pnc { border: 1px solid #E4E6E8; border-radius: 4px; padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; text-decoration: none; }
.ar__pnc:hover { border-color: #E0529E; }
.ar__pnl { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #9A9DA2; }
.ar__pnt { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 15.5px; color: #17181A; }
.ar__pnc:hover .ar__pnt { color: #A62A6D; }
.ar__pnc--next { text-align: right; align-items: flex-end; grid-column: 2; }

@container (max-width: 1100px) {
  .ar__in { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
  .ar__toc { display: none; }
  .ar__tocmob { display: block; background: #FAFAFB; border: 1px solid #E4E6E8; border-radius: 4px; padding: 18px 20px; margin: 0 0 36px; }
}
@container (max-width: 820px) {
  .ar__in { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 32px 30px 72px; }
  .ar__rail { position: static; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #E4E6E8; }
  .ar__nav { display: flex; flex-wrap: wrap; gap: 4px 6px; border-left: 0; }
  .ar__navl { padding: 7px 12px; border: 1px solid #E4E6E8; border-radius: 100px; margin-left: 0; font-size: 13.5px; }
  .ar__navl:hover { border-color: #E0529E; }
  .ar__navl--on { border-color: #E0529E; background: #FDF2F8; }
  .ar__h1 { font-size: 32px; }
}
@container (max-width: 560px) {
  .ar__crumbsin { padding: 14px 20px; font-size: 12.5px; }
  .ar__in { padding: 26px 20px 56px; }
  .ar__h1 { font-size: 27px; }
  .ar__lead { font-size: 16.5px; }
  .ar__h2 { font-size: 22px; margin-top: 40px; }
  .ar__pn { grid-template-columns: 1fr; }
  .ar__pnc--next { grid-column: 1; text-align: left; align-items: flex-start; }
}