.portal-page{width:100%}.portal{width:100%;max-width:100%;margin:0 auto;padding:24px 40px}.portal-header{justify-content:space-between;align-items:flex-start;gap:32px;margin:24px 0;display:flex}.portal-header-content{flex:1;min-width:0}.portal-header-content p{margin-top:12px}.portal-section{margin-top:40px}.portal-preview{flex-direction:column;gap:24px;width:100%;display:flex}.portal-item{align-items:flex-start;gap:32px;width:100%;display:flex}.portal-label{flex-shrink:0;width:140px;padding-top:10px}.portal-example{flex:1;min-width:0}.portal-container-wrapper{width:100%;position:relative}.portal-container{border:2px dashed var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);width:100%;max-width:500px;min-height:180px;padding:24px;position:relative;overflow:hidden}.portal-demo-box{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);min-width:220px;min-height:80px;box-shadow:var(--shadow-md);justify-content:center;align-items:center;padding:20px 24px;display:inline-flex}.portal-toggle{flex-direction:column;gap:20px;display:flex}.portal-button{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);width:fit-content;color:var(--color-text-primary);cursor:pointer;padding:10px 18px;transition:background-color .2s,border-color .2s}.portal-button:hover{background:var(--color-surface-secondary)}@media (max-width:768px){.portal{padding:24px}.portal-header{flex-direction:column;align-items:stretch;gap:24px}.portal-item{flex-direction:column;gap:12px}.portal-label{width:auto;padding-top:0}.portal-example{width:100%}.portal-container{max-width:100%}.portal-demo-box{width:100%}}@media (max-width:520px){.portal{padding:20px}.portal-preview{gap:20px}.portal-section{margin-top:32px}.portal-container{min-height:150px;padding:16px}.portal-demo-box{text-align:center;min-width:100%;padding:16px}.portal-button{width:100%}}