.click-away-listener-page{width:100%}.click-away-listener{width:100%;max-width:100%;margin:0 auto;padding:24px 40px}.click-away-listener-header{justify-content:space-between;align-items:flex-start;gap:32px;margin:24px 0;display:flex}.click-away-listener-header-content{flex:1;min-width:0}.click-away-listener-header-content p{margin-top:12px}.click-away-listener-section{margin-top:40px}.click-away-listener-preview{flex-direction:column;gap:24px;width:100%;display:flex}.click-away-listener-item{align-items:flex-start;gap:32px;width:100%;display:flex}.click-away-listener-label{flex-shrink:0;width:140px;padding-top:10px}.click-away-listener-example{flex:1;min-width:0}.click-away-demo{flex-direction:column;gap:16px;width:100%;display:flex}.click-away-box{border:2px dashed var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;width:100%;min-height:180px;padding:24px;transition:border-color .2s,background-color .2s;display:flex}.click-away-box:hover{border-color:var(--color-border-hover)}@media (max-width:768px){.click-away-listener{padding:24px}.click-away-listener-header{flex-direction:column;align-items:stretch;gap:24px}.click-away-listener-item{flex-direction:column;gap:12px}.click-away-listener-label{width:auto;padding-top:0}.click-away-listener-example{width:100%}}@media (max-width:520px){.click-away-listener{padding:20px}.click-away-listener-preview{gap:20px}.click-away-listener-section{margin-top:32px}.click-away-box{min-height:150px;padding:16px}}