#page-headless .hpwa-diagram-grid{display:grid;grid-template-columns:1fr;gap:var(--gap-loose);align-items:start}@media(min-width:768px){#page-headless .hpwa-diagram-grid{grid-template-columns:1fr 1fr}}#page-headless .hpwa-diagram{background:var(--surface-default);border:1px solid var(--surface-subtle);border-radius:var(--radius-lg);padding:var(--space-6)}#page-headless .hpwa-diagram h3{font-size:var(--text-h3);margin:0 0 var(--space-4);text-align:center}#page-headless .hpwa-diagram__box{border:2px dashed var(--surface-subtle);border-radius:var(--radius-md);padding:var(--space-4)}#page-headless .hpwa-diagram__component{background:var(--surface-subtle);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3);text-align:center;font-weight:500;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}#page-headless .hpwa-diagram__component:last-child{margin-bottom:0}#page-headless .hpwa-diagram__component:hover{background:var(--brand);color:var(--text-on-dark-strong);transform:scale(1.02)}#page-headless .hpwa-diagram--monolith .hpwa-diagram__component{background:var(--text-muted);color:var(--text-on-dark-strong)}#page-headless .hpwa-diagram--monolith .hpwa-diagram__component:hover{background:var(--text-default)}#page-headless .hpwa-explanation{margin-top:var(--space-8);padding:var(--space-6);background:var(--surface-strong);color:var(--text-on-dark-strong);border-radius:var(--radius-lg)}#page-headless .hpwa-explanation h4{font-size:var(--text-h4);color:var(--brand-text);margin:0 0 var(--space-2)}#page-headless .hpwa-explanation p{margin:0;color:var(--text-on-dark-muted);line-height:var(--leading-body)}