#page-headless .hpwa-diagram-grid{gap:var(--gap-loose);grid-template-columns:1fr;align-items:start;display:grid}@media(min-width:48rem){#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;cursor:pointer;font-weight:500;transition:background .2s,color .2s,transform .2s}#page-headless .hpwa-diagram__component:last-child{margin-bottom:0}#page-headless .hpwa-diagram__component:hover{background:var(--action);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(--accent-on-dark);margin:0 0 var(--space-2)}#page-headless .hpwa-explanation p{color:var(--text-on-dark-muted);line-height:var(--leading-body);margin:0}