.article-page{min-height:100vh;background:var(--color-canvas)}.article-header{padding-block:clamp(var(--space-16),8vw,var(--space-24));display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gutter);border-bottom:1px solid var(--color-divider)}.article-back{grid-column:1 / span 2;width:fit-content;min-height:var(--size-touch);display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text-secondary);font-size:var(--type-label);text-underline-offset:5px}.article-header>div{grid-column:3 / span 8}.article-header h1{max-width:900px;margin:var(--space-6) 0;font:600 var(--type-display-m)/1 var(--font-display);letter-spacing:-.045em}.article-header>div>p{max-width:var(--width-reading);margin:0;color:var(--color-text-secondary);font-size:var(--type-body-l);line-height:1.65}.article-meta{margin-top:var(--space-8);padding-top:var(--space-5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);border-top:1px solid var(--color-divider);color:var(--color-text-muted);font:var(--type-caption) var(--font-technical)}.copy-link{min-height:var(--size-touch);margin-left:auto;padding-inline:var(--space-3);display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text-secondary);background:transparent;border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);cursor:pointer}.copy-link:hover{color:var(--color-text-primary);border-color:var(--color-border-hover)}.article-layout{position:relative;padding-block:var(--section-space);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gutter);align-items:start}.article-toc{grid-column:1 / span 2}.article-toc nav{position:sticky;top:104px}.article-toc nav>span{color:var(--color-text-muted);font:var(--type-overline) var(--font-technical);text-transform:uppercase;letter-spacing:.1em}.article-toc ol{margin:var(--space-5) 0 0;padding:0;list-style:none;border-left:1px solid var(--color-divider)}.article-toc a{min-height:var(--size-touch);padding:var(--space-2) var(--space-4);display:flex;align-items:center;color:var(--color-text-muted);font-size:var(--type-body-sm);line-height:1.4;text-decoration:none}.article-toc a:hover{color:var(--color-text-primary)}.article-mobile-toc{display:none}.article-body{grid-column:4 / span 7;min-width:0;max-width:var(--width-reading)}.article-body>section{scroll-margin-top:96px}.article-body>section+section{margin-top:var(--space-24);padding-top:var(--space-16);border-top:1px solid var(--color-divider)}.article-body h2{margin:0 0 var(--space-8);font:600 var(--type-heading-l)/1.15 var(--font-display);letter-spacing:-.03em}.article-body h3{font:600 var(--type-heading-m)/1.25 var(--font-display);letter-spacing:-.02em}.article-body h4{margin:0 0 var(--space-4);font:550 var(--type-title)/1.4 var(--font-display)}.article-body h5{margin:0;font:550 var(--type-body-l) var(--font-display)}.article-body>section>p,.article-body>section>ul,.article-body>section>ol{margin:0 0 var(--space-6);color:var(--color-text-secondary);font-size:var(--type-body-l);line-height:1.78;letter-spacing:-.008em}.article-body ul,.article-body ol{padding-left:var(--space-6)}.article-body li{margin-bottom:var(--space-2);padding-left:var(--space-2)}.article-body a{color:var(--color-text-primary);text-decoration-color:var(--color-accent-hover);text-decoration-thickness:1px;text-underline-offset:4px}.article-body :not(pre)>code{padding:2px 5px;border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);background:var(--color-surface);font:.9em var(--font-technical)}.article-quote{margin:var(--space-12) 0;padding:var(--space-3) 0 var(--space-3) var(--space-6);border-left:2px solid var(--color-accent)}.article-quote blockquote{margin:0;font:500 var(--type-heading-m)/1.45 var(--font-display);letter-spacing:-.02em}.article-quote figcaption{margin-top:var(--space-4);color:var(--color-text-muted);font-size:var(--type-body-sm)}.article-callout{margin:var(--space-10) 0;padding:var(--space-5);display:flex;align-items:flex-start;gap:var(--space-3);border-block:1px solid var(--color-border-info);color:var(--color-info);background:var(--color-info-soft)}.article-callout--warning{color:var(--color-warning);border-color:var(--color-border-warning);background:var(--color-warning-soft)}.article-callout strong{color:var(--color-text-primary)}.article-callout p{margin:var(--space-2) 0 0;color:var(--color-text-secondary);font-size:var(--type-body-sm);line-height:1.6}.article-code{margin:var(--space-10) 0;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);overflow:hidden}.article-code figcaption{min-height:44px;padding-inline:var(--space-4);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-divider);color:var(--color-text-secondary);font:var(--type-caption) var(--font-technical)}.article-code figcaption span{color:var(--color-text-muted)}.article-code pre{margin:0;padding:var(--space-5);overflow-x:auto;color:var(--color-text-secondary);font:var(--type-mono)/1.7 var(--font-technical);tab-size:2}.code-line{display:block;min-width:max-content}.token.keyword,.token.operator{color:var(--color-accent-hover)}.token.string,.token.attr-value{color:var(--color-success)}.token.function,.token.class-name{color:var(--color-info)}.token.number,.token.boolean{color:var(--color-warning)}.token.comment{color:var(--color-text-muted);font-style:italic}.article-table{width:min(1000px,calc(100vw - (var(--container-padding) * 2)));margin:var(--space-12) 50%;transform:translate(-50%)}.article-table figcaption{margin-bottom:var(--space-3);color:var(--color-text-muted);font:var(--type-caption) var(--font-technical)}.article-table>div{overflow-x:auto;border-block:1px solid var(--color-border-subtle)}.article-table table{width:100%;min-width:680px;border-collapse:collapse;text-align:left}.article-table th,.article-table td{padding:var(--space-4);border-bottom:1px solid var(--color-divider);vertical-align:top;font-size:var(--type-body-sm);line-height:1.55}.article-table thead th{color:var(--color-text-muted);font:var(--type-caption) var(--font-technical)}.article-table tbody th{color:var(--color-text-primary);font-weight:550}.article-table td{color:var(--color-text-secondary)}.article-image,.article-diagram{width:min(var(--width-breakout),calc(100vw - (var(--container-padding) * 2)));margin:var(--space-12) 50%;transform:translate(-50%)}.article-image img{display:block;width:100%;height:auto;border-radius:var(--radius-md)}.article-image figcaption,.article-diagram figcaption{margin-top:var(--space-4);color:var(--color-text-muted);font-size:var(--type-caption);line-height:1.55}.article-diagram>div{min-height:220px;padding:var(--space-8);display:grid;grid-template-columns:48px repeat(5,1fr);gap:var(--space-3);align-items:center;background:var(--color-surface);border-block:1px solid var(--color-border-subtle);background-image:radial-gradient(circle,var(--color-border-strong) 1px,transparent 1px);background-size:20px 20px}.article-diagram>div>svg{color:var(--color-accent-hover)}.article-diagram>div span{min-height:90px;padding:var(--space-3);display:flex;flex-direction:column;justify-content:space-between;background:var(--color-surface-elevated);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);font-size:var(--type-label)}.article-diagram>div small{color:var(--color-text-muted);font:var(--type-caption) var(--font-technical)}.article-diagram figcaption strong{display:block;color:var(--color-text-primary);font-size:var(--type-body-sm)}.article-diagram figcaption p{margin:var(--space-1) 0 0}.article-decision{width:min(var(--width-breakout),calc(100vw - (var(--container-padding) * 2)));margin:var(--space-12) 50%;transform:translate(-50%);border-block:1px solid var(--color-border-subtle)}.article-decision>header{padding:var(--space-8) var(--space-6)}.article-decision>header>span{color:var(--color-accent-hover);font:var(--type-overline) var(--font-technical);text-transform:uppercase;letter-spacing:.1em}.article-decision>header h3{max-width:900px;margin:var(--space-4) 0 0}.decision-context{margin:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--color-divider)}.decision-context>div{padding:var(--space-6);border-right:1px solid var(--color-divider)}.decision-context>div:last-child{border:0}.article-decision dt{margin-bottom:var(--space-3);color:var(--color-text-muted);font:var(--type-caption) var(--font-technical)}.article-decision dd{margin:0;color:var(--color-text-secondary);font-size:var(--type-body-sm);line-height:1.6}.article-decision ul{margin:0;padding-left:var(--space-5)}.decision-options{padding:var(--space-6);display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gutter);border-top:1px solid var(--color-divider)}.decision-options>h4{grid-column:1 / -1}.decision-options article{padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border-subtle)}.decision-options dl{margin:var(--space-6) 0 0;display:grid;gap:var(--space-4)}.decision-conclusion{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--color-divider)}.decision-conclusion>div{padding:var(--space-6);border-right:1px solid var(--color-divider)}.decision-conclusion>div:last-child{border:0}.decision-conclusion p,.decision-conclusion li{color:var(--color-text-secondary);font-size:var(--type-body-sm);line-height:1.6}.article-references ol{padding-left:var(--space-5)}.article-top-link{width:fit-content;min-height:var(--size-touch);margin-top:var(--space-16);display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text-secondary);font-size:var(--type-body-sm);text-underline-offset:5px}.article-top-link:hover{color:var(--color-text-primary)}.article-related{padding-block:var(--section-space);border-top:1px solid var(--color-divider)}.article-related>h2{max-width:760px;margin:var(--space-6) 0 var(--space-12);font:600 var(--type-heading-xl)/1.1 var(--font-display);letter-spacing:-.035em}.article-related>div{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gutter)}.article-related section{border-top:1px solid var(--color-border-subtle)}.article-related h3{margin:0;padding-block:var(--space-4);color:var(--color-text-muted);font:var(--type-caption) var(--font-technical)}.article-related a{min-height:88px;padding-block:var(--space-4);display:grid;grid-template-columns:1fr auto;gap:var(--space-2);align-items:center;border-top:1px solid var(--color-divider);color:var(--color-text-primary);text-decoration:none;font:550 var(--type-title) var(--font-display)}.article-related a span{grid-column:1;color:var(--color-text-muted);font:var(--type-caption) var(--font-technical)}.article-related a svg{grid-column:2;grid-row:1 / span 2}@media(max-width:900px){.article-header{grid-template-columns:repeat(6,1fr)}.article-back{grid-column:1 / -1}.article-header>div{grid-column:2 / -1}.article-toc{display:none}.article-mobile-toc{grid-column:2 / span 9;margin-bottom:var(--space-8);display:block;border-block:1px solid var(--color-divider)}.article-mobile-toc summary{min-height:var(--size-touch);display:flex;align-items:center;color:var(--color-text-secondary);font:var(--type-label) var(--font-technical);cursor:pointer}.article-mobile-toc nav{padding-bottom:var(--space-4)}.article-mobile-toc ol{margin:0;padding:0;list-style:none}.article-mobile-toc a{min-height:var(--size-touch);padding-block:var(--space-2);display:flex;align-items:center;color:var(--color-text-secondary);font-size:var(--type-body-sm);text-underline-offset:4px}.article-body{grid-column:2 / span 9}.article-diagram>div{grid-template-columns:repeat(5,1fr)}.article-diagram>div>svg{display:none}.decision-conclusion{grid-template-columns:1fr}.decision-conclusion>div{border-right:0;border-bottom:1px solid var(--color-divider)}}@media(max-width:600px){.article-header{padding-block:var(--space-12);display:block}.article-header>div{margin-top:var(--space-8)}.article-header h1{font-size:var(--type-heading-xl)}.article-header>div>p{font-size:var(--type-body)}.copy-link{width:100%;margin:var(--space-2) 0 0;justify-content:center}.article-layout{display:block;padding-block:var(--space-12)}.article-body>section+section{margin-top:var(--space-16);padding-top:var(--space-12)}.article-body h2{font-size:var(--type-heading-m)}.article-body>section>p,.article-body>section>ul,.article-body>section>ol{font-size:var(--type-body);line-height:1.72}.article-quote{margin-block:var(--space-8)}.article-quote blockquote{font-size:var(--type-title)}.article-table,.article-image,.article-diagram,.article-decision{width:calc(100vw - (var(--container-padding) * 2));margin-block:var(--space-10)}.article-diagram>div{padding:var(--space-4);display:grid;grid-template-columns:1fr}.article-diagram>div span{min-height:70px}.decision-context,.decision-options{grid-template-columns:1fr}.decision-context>div,.decision-options article{border-right:0;border-bottom:1px solid var(--color-divider)}.decision-options>h4{grid-column:auto}.article-related>div{grid-template-columns:1fr}}
