.modal-demo-page{padding:var(--spacing-32,32px);max-width:1200px;margin:0 auto}.modal-demo-header{margin-bottom:var(--spacing-32,32px)}.modal-demo-header h1{font-family:Inter,sans-serif;font-size:var(--font-size-28,28px);font-weight:var(--font-weight-700,700);color:var(--neutral-800,#1F2937);margin:0 0 var(--spacing-8,8px) 0}.modal-demo-header p{font-family:Inter,sans-serif;font-size:var(--font-size-16,16px);color:var(--neutral-600,#4B5563);margin:0}.modal-demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-24,24px)}.modal-demo-card{background:var(--neutral-0,#FFFFFF);border:1px solid var(--neutral-200,#e5e7eb);border-radius:var(--radius-8,8px);padding:var(--spacing-24,24px);transition:box-shadow .2s ease}.modal-demo-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}.modal-demo-card h3{font-family:Inter,sans-serif;font-size:var(--font-size-18,18px);font-weight:var(--font-weight-600,600);color:var(--neutral-800,#1F2937);margin:0 0 var(--spacing-8,8px) 0}.modal-demo-card p{font-family:Inter,sans-serif;font-size:var(--font-size-14,14px);color:var(--neutral-600,#4B5563);margin:0 0 var(--spacing-16,16px) 0;line-height:1.6}.demo-link{color:var(--primary-500,#3B82F6);text-decoration:none;font-weight:var(--font-weight-500,500)}.demo-link:hover{text-decoration:underline}.demo-step-content{padding:var(--spacing-8,8px) 0}.demo-step-description{font-family:Inter,sans-serif;font-size:var(--font-size-14,14px);color:var(--neutral-600,#4B5563);line-height:1.6;margin-bottom:var(--spacing-20,20px)}.modal-demo-card-centered{display:flex;justify-content:center;align-items:center;min-height:200px}@media (max-width:768px){.modal-demo-page{padding:var(--spacing-16,16px)}.modal-demo-grid{grid-template-columns:1fr}}.toast-demo-page{padding:var(--spacing-32,32px);max-width:1200px;margin:0 auto}.toast-demo-header{margin-bottom:var(--spacing-32,32px)}.toast-demo-header h1{font-family:Inter,sans-serif;font-size:var(--font-size-28,28px);font-weight:var(--font-weight-700,700);color:var(--neutral-800,#1F2937);margin:0 0 var(--spacing-8,8px) 0}.toast-demo-header p{font-family:Inter,sans-serif;font-size:var(--font-size-16,16px);color:var(--neutral-600,#4B5563);margin:0;line-height:1.6}.toast-demo-header p code{background:var(--neutral-100,#F3F4F6);padding:2px 6px;border-radius:var(--radius-4,4px);font-size:var(--font-size-14,14px)}.toast-demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-24,24px)}.toast-demo-card{background:var(--neutral-0,#FFFFFF);border:1px solid var(--neutral-200,#e5e7eb);border-radius:var(--radius-8,8px);padding:var(--spacing-24,24px);transition:box-shadow .2s ease}.toast-demo-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}.toast-demo-card h3{font-family:Inter,sans-serif;font-size:var(--font-size-18,18px);font-weight:var(--font-weight-600,600);color:var(--neutral-800,#1F2937);margin:0 0 var(--spacing-8,8px) 0}.toast-demo-card p{font-family:Inter,sans-serif;font-size:var(--font-size-14,14px);color:var(--neutral-600,#4B5563);margin:0 0 var(--spacing-16,16px) 0;line-height:1.6}.toast-demo-card p code{background:var(--neutral-100,#F3F4F6);padding:2px 6px;border-radius:var(--radius-4,4px);font-size:var(--font-size-13,13px)}.toast-demo-card-wide{grid-column:1/-1}.toast-demo-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-10,10px) var(--spacing-20,20px);border-radius:var(--radius-6,6px);font-family:Inter,sans-serif;font-size:var(--font-size-14,14px);font-weight:var(--font-weight-500,500);cursor:pointer;border:1px solid transparent;transition:all .15s ease}.toast-demo-btn-success{background:#1A9E61;border-color:#1A9E61;color:var(--white,#ffffff)}.toast-demo-btn-success:hover{background:#158B55;border-color:#158B55}.toast-demo-btn-danger{background:#D05543;border-color:#D05543;color:var(--white,#ffffff)}.toast-demo-btn-danger:hover{background:#B84A3A;border-color:#B84A3A}.toast-demo-btn-warning{background:#D19810;border-color:#D19810;color:var(--white,#ffffff)}.toast-demo-btn-warning:hover{background:#B3840E;border-color:#B3840E}.toast-demo-btn-info{background:#D19810;border-color:#D19810;color:var(--white,#ffffff)}.toast-demo-btn-info:hover{background:#B3840E;border-color:#B3840E}.toast-demo-btn-group{display:flex;flex-wrap:wrap;gap:var(--spacing-12,12px)}@media (max-width:768px){.toast-demo-page{padding:var(--spacing-16,16px)}.toast-demo-grid{grid-template-columns:1fr}.toast-demo-btn-group{flex-direction:column}.toast-demo-btn-group .toast-demo-btn{width:100%}}.badge-demo-container,.badge-demo-container.container{font-family:var(--p-font-family-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);color:var(--text-primary,#1a1a1a)}.properties-section h2{font-size:var(--font-size-24);font-weight:var(--font-weight-600);color:var(--neutral-900);margin:0 0 var(--spacing-32) 0}.badge-description{font-size:var(--font-size-16);color:var(--text-secondary,#6b7280);margin:0 0 var(--spacing-24) 0;line-height:1.5;padding-top:var(--size-300);padding-bottom:var(--size-300);font-weight:var(--font-weight-500)}.stable-section{margin-bottom:var(--spacing-32)}.demo-card{background:var(--p-color-bg-surface-secondary,#fafafa);border-radius:var(--border-radius-radius-8);padding:var(--spacing-48) var(--spacing-48);margin:var(--spacing-32) 0;min-height:var(--spacing-120)}.demo-card>*{flex-shrink:0}.properties-section{margin-top:var(--spacing-40)}.badge-properties-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--p-color-border-secondary,#e5e7eb);border-radius:var(--border-radius-radius-8);overflow:hidden;background:var(--surface-primary,#ffffff)}.badge-property-group{padding:var(--spacing-32);background:var(--surface-primary,#ffffff);margin:var(--spacing-16);border:1px solid var(--neutral-50);border-radius:var(--spacing-12)}.badge-property-group:first-child,.badge-property-group:nth-child(2){border-bottom:1px solid var(--border-color,#e5e7eb)}.badge-property-group:first-child,.badge-property-group:nth-child(3){border-right:1px solid var(--border-color,#e5e7eb)}@media (max-width:768px){.badge-properties-grid{grid-template-columns:1fr}.badge-property-group:first-child,.badge-property-group:nth-child(3){border-right:none}.badge-property-group:not(:last-child){border-bottom:1px solid var(--border-color,#e5e7eb)}}.property-header h3{font-size:var(--font-size-16);font-weight:var(--font-weight-600);margin:0 0 var(--spacing-8) 0;color:var(--text-primary,#1a1a1a)}.property-header p{font-size:var(--font-size-14);color:var(--text-secondary,#6b7280);margin:0 0 var(--spacing-24) 0}.property-examples{gap:var(--spacing-12)}.all-examples-section{margin-top:var(--spacing-48)}.badge-table{border:1px solid var(--border-color,#e5e7eb);border-radius:var(--border-radius-radius-8);overflow:hidden;background:var(--surface-primary,#ffffff);display:block;unicode-bidi:isolate}.table-header{display:grid;grid-template-columns:100px 80px 80px auto auto auto;border-bottom:1px solid var(--p-color-border-secondary,#e5e7eb)}.header-cell{padding:var(--spacing-12) var(--spacing-16);font-size:var(--font-size-14);font-weight:var(--font-weight-600);color:var(--text-primary,#1a1a1a);border-right:1px solid var(--border-color,#e5e7eb)}.badge-table-row{display:grid;grid-template-columns:100px 80px 80px auto auto auto;border-bottom:1px solid var(--border-color,#e5e7eb)}.badge-table-row:last-child{border-bottom:none}.filled-cell,.size-cell,.tone-cell{padding:var(--spacing-12) var(--spacing-16);font-size:var(--font-size-14);color:var(--text-secondary,#6b7280);border-right:1px solid var(--border-color,#e5e7eb);display:flex;align-items:center}.badge-cell{border-right:1px solid var(--p-color-border-secondary,#e5e7eb);display:flex;align-items:center;justify-content:flex-start}.badge-cell:last-child{border-right:none}@media (max-width:768px){.badge-table-row,.table-header{grid-template-columns:1fr}.badge-cell,.filled-cell,.header-cell,.size-cell,.tone-cell{border-right:none;border-bottom:1px solid var(--border-color,#e5e7eb)}.badge-table-row:last-child .badge-cell:last-child{border-bottom:none}}.white-circle{background-color:var(--surface-primary,#ffffff)!important}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}@media (max-width:768px){.demo-card{padding:var(--spacing-24) var(--spacing-24);margin:var(--spacing-20) 0;min-height:var(--spacing-80)}.badge-property-group{padding:var(--spacing-20);margin:var(--spacing-12)}.property-header p{margin-bottom:var(--spacing-16)}.property-examples{gap:var(--spacing-8)}.all-examples-section{margin-top:var(--spacing-32)}.badge-table{overflow-x:auto;-webkit-overflow-scrolling:touch}.badge-table-row,.table-header{grid-template-columns:90px 70px 70px minmax(90px,1fr) minmax(90px,1fr) minmax(90px,1fr);min-width:-moz-min-content;min-width:min-content}.badge-cell,.filled-cell,.header-cell,.size-cell,.tone-cell{padding:var(--spacing-8) var(--spacing-12);font-size:var(--font-size-13)}}@media (max-width:576px){.badge-description{margin-bottom:var(--spacing-16);font-size:var(--font-size-15)}.demo-card{padding:var(--spacing-16) var(--spacing-16);margin:var(--spacing-16) 0;min-height:var(--spacing-64)}.properties-section{margin-top:var(--spacing-24)}.properties-section h2{margin-bottom:var(--spacing-20);font-size:var(--font-size-20)}.badge-property-group{padding:var(--spacing-16);margin:var(--spacing-8)}.property-header h3{font-size:var(--font-size-15)}.property-header p{font-size:var(--font-size-13);margin-bottom:var(--spacing-12)}.property-examples{flex-direction:column;align-items:flex-start;gap:var(--spacing-8)}.all-examples-section{margin-top:var(--spacing-24)}.badge-table-row,.table-header{grid-template-columns:70px 60px 60px minmax(80px,1fr) minmax(80px,1fr) minmax(80px,1fr)}.badge-cell,.filled-cell,.header-cell,.size-cell,.tone-cell{padding:var(--spacing-6) var(--spacing-8);font-size:var(--font-size-12)}}@media (max-width:400px){.demo-card{padding:var(--spacing-12) var(--spacing-12);min-height:var(--spacing-56)}.badge-table-row,.table-header{grid-template-columns:60px 50px 50px minmax(70px,1fr) minmax(70px,1fr) minmax(70px,1fr)}.badge-cell,.filled-cell,.header-cell,.size-cell,.tone-cell{padding:var(--spacing-4) var(--spacing-6);font-size:11px}}.chips-container{display:flex;flex-wrap:wrap;gap:var(--spacing-8);align-items:center;min-height:var(--spacing-40);padding:var(--spacing-4);border-radius:var(--radius-8);transition:all var(--transition-duration-200) ease}.chips-container.input-mode{border:1px solid var(--neutral-200);background:var(--surface-primary);padding:var(--spacing-8)}.chips-container.input-mode:focus-within{border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)}.chips-container.disabled{opacity:.6;pointer-events:none}.chip-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-6);padding:var(--spacing-6) var(--spacing-12);border-radius:var(--radius-full);font-size:var(--font-size-14);font-weight:var(--font-weight-500);line-height:var(--line-height-120);transition:all var(--transition-duration-200) ease;white-space:nowrap}.chip-wrapper.size-sm{padding:var(--spacing-4) var(--spacing-8);font-size:var(--font-size-12)}.chip-wrapper.size-md{padding:var(--spacing-6) var(--spacing-12);font-size:var(--font-size-14)}.chip-wrapper.color-default{background:var(--primary-500);color:var(--primary-0)!important}.chip-wrapper.color-primary{background:var(--primary-50);color:var(--primary-700)!important}.chip-wrapper.color-success{background:var(--success-50);color:var(--success-700)!important}.chip-wrapper.color-warning{background:var(--warning-50);color:var(--warning-700)!important}.chip-wrapper.color-danger{background:var(--error-50);color:var(--error-700)!important}.chip-wrapper.color-info{background:var(--info-50);color:var(--info-700)!important}.chip-label{flex:1}.chip-remove-btn{display:flex;align-items:center;justify-content:center;width:var(--spacing-16);height:var(--spacing-16);border:none;background:transparent;border-radius:var(--radius-full);cursor:pointer;color:currentColor;opacity:.7;transition:all var(--transition-duration-200) ease;padding:0}.chip-remove-btn:hover{opacity:1;background:var(--neutral-0);color:var(--neutral-1000)}.chip-remove-btn i{font-size:var(--font-size-12);line-height:unset}.chip-input-wrapper{flex:1;min-width:var(--spacing-120)}.chip-input{width:100%;border:none;outline:none;background:transparent;font-size:var(--font-size-14);color:var(--text-secondary);padding:var(--spacing-4) 0}.chip-input::-moz-placeholder{color:var(--text-disabled)}.chip-input::placeholder{color:var(--text-disabled)}.chip-wrapper:hover{transform:translateY(-1px);box-shadow:var(--elevation-2)}@media (max-width:768px){.chips-container{gap:var(--spacing-6)}.chip-wrapper{font-size:var(--font-size-13)}}.chips-demo-container{padding:0 var(--spacing-16) var(--spacing-24) var(--spacing-16);max-width:var(--max-width-6xl);margin:0 auto}.chips-demo-container .heading{font-size:var(--font-size-32);font-weight:var(--font-weight-700);color:var(--neutral-900)}.demo-section{margin-bottom:var(--spacing-48)}.description{padding-top:var(--size-300);padding-bottom:var(--size-300);font-size:var(--font-size-14);color:var(--neutral-500);font-family:Inter,sans-serif;font-weight:var(--font-weight-500);margin-bottom:var(--spacing-24)}.description,.subHeading{line-height:var(--line-height-140);word-wrap:break-word}.subHeading{color:var(--neutral-700);margin-bottom:0;font-weight:var(--font-weight-700);font-size:var(--font-size-24)!important}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-24);margin-bottom:var(--spacing-32)}.demo-item{padding:var(--spacing-20);border:1px solid var(--neutral-200);border-radius:var(--radius-12);background:var(--neutral-0);font-family:Inter,sans-serif}.demo-item h3{font-size:var(--font-size-16);font-weight:var(--font-weight-600);color:var(--neutral-700);margin-bottom:var(--spacing-12);text-transform:lowercase}.chips-row{display:flex;flex-wrap:wrap;gap:var(--spacing-8)}.hover-state{border-color:var(--neutral-300)!important}.focus-state{box-shadow:0 0 0 3px var(--primary-100)!important}.focus-state,.selected-state{border-color:var(--primary-500)!important}.selected-state{background:var(--primary-25)!important}.usage-example{padding:var(--spacing-24);border:1px solid var(--neutral-200);border-radius:var(--radius-12);background:var(--neutral-0)}.usage-example h3{font-size:var(--font-size-18);font-weight:var(--font-weight-600);color:var(--neutral-800);margin-bottom:var(--spacing-16)}.form-example{display:flex;flex-direction:column;gap:var(--spacing-8)}.form-example label{font-size:var(--font-size-14);font-weight:var(--font-weight-500);color:var(--neutral-700)}.form-example small{font-size:var(--font-size-12);color:var(--neutral-500)}@media (max-width:768px){.chips-demo-container{padding:var(--spacing-16)}.demo-grid{grid-template-columns:1fr;gap:var(--spacing-16)}.chips-demo-container .heading{font-size:var(--font-size-28)}}@media (min-width:1400px){.chips-demo-container{max-width:1320px}}.color-palette-demo{font-family:var(--font-family-base,"Inter",sans-serif);background:var(--surface-primary);color:var(--text-primary)}.dashed-divider{width:100%;height:1px;border-bottom:2px dashed var(--secondary-800);margin:var(--spacing-64) 0}.accent-color-grid,.gradient-color-grid,.neutral-color-grid,.primary-color-grid,.secondary-color-grid,.status-color-grid,.utility-color-grid{display:flex;flex-wrap:wrap}.colorSpace{gap:var(--spacing-32);margin-top:var(--space-600)}.gradient-color-grid{gap:var(--spacing-8);margin-bottom:var(--spacing-40)}.accents-color-scale{margin-bottom:0}.color-swatch{width:100px;height:100px;border-radius:var(--border-radius-radius-4);display:flex;flex-direction:column;justify-content:end;align-items:center;text-align:center;font-size:var(--font-size-12);font-weight:var(--font-weight-500);position:relative;transition:transform var(--transition-duration-200) ease;flex-shrink:0;padding:var(--spacing-8);border:1px solid var(--neutral-50)}.color-swatch:hover{transform:translateY(-2px);box-shadow:var(--elevation-2)}.color-swatch:before{content:attr(data-color);font-weight:var(--font-weight-600);font-family:var(--font-family-base,"Inter",sans-serif)}.color-swatch:after,.color-swatch:before{display:block;line-height:var(--line-height-140);font-size:var(--font-size-12)}.color-swatch:after{content:attr(data-hex);opacity:.8}.utility-swatch{width:100px;height:100px;background:var(--utility-bg-1);color:var(--neutral-900);border-radius:var(--border-radius-radius-4);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;font-size:var(--font-size-14);font-weight:var(--font-weight-500);flex-shrink:0;padding:var(--spacing-8);border:1px solid var(--neutral-50)}.utility-swatch:hover{transform:translateY(-2px);box-shadow:var(--elevation-2)}.utility-swatch.utility-bg-1{background:var(--utility-bg-1)}.utility-swatch.utility-stroke-1{background:var(--utility-stroke-1)}.utility-swatch.utility-bg-2{background:var(--utility-bg-2)}.utility-title{font-weight:var(--font-weight-600);font-size:var(--font-size-12)}.utility-color{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--font-size-12);opacity:.8}.gradient-swatch{width:100px;height:100px;background:var(--Gradients-1,linear-gradient(192deg,#223B76 8.87%,#3862C5 91.13%));color:#fff;border-radius:var(--border-radius-radius-4);display:flex;flex-direction:column;justify-content:end;align-items:center;text-align:center;flex-shrink:0;padding:var(--spacing-8)}.gradient-title{font-weight:var(--font-weight-600);margin-bottom:var(--spacing-4);font-size:var(--font-size-14)}.gradient-color{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:var(--font-size-12);opacity:.9}.color-usage p{font-size:var(--font-size-12);color:var(--neutral-500);line-height:var(--line-height-140);font-family:var(--font-family-base,"Inter",sans-serif);font-weight:var(--font-weight-500);word-wrap:break-word;margin-bottom:0}@media (max-width:768px){.neutral-color-grid,.primary-color-grid{justify-content:center}.color-swatch{width:80px;height:70px;font-size:var(--font-size-12)}}.bg-primary-900{background-color:var(--primary-900)}.bg-primary-800{background-color:var(--primary-800)}.bg-primary-700{background-color:var(--primary-700)}.bg-primary-600{background-color:var(--primary-600)}.bg-primary-500{background-color:var(--primary-500)}.bg-primary-400{background-color:var(--primary-400)}.bg-primary-300{background-color:var(--primary-300)}.bg-primary-200{background-color:var(--primary-200)}.bg-primary-100{background-color:var(--primary-100)}.bg-primary-50{background-color:var(--primary-50)}.bg-primary-0{background-color:var(--primary-0)}.bg-secondary-800{background-color:var(--secondary-800)}.bg-secondary-500{background-color:var(--secondary-500)}.bg-neutral-1000{background-color:var(--neutral-1000)}.bg-neutral-900{background-color:var(--neutral-900)}.bg-neutral-800{background-color:var(--neutral-800)}.bg-neutral-700{background-color:var(--neutral-700)}.bg-neutral-600{background-color:var(--neutral-600)}.bg-neutral-500{background-color:var(--neutral-500)}.bg-neutral-400{background-color:var(--neutral-400)}.bg-neutral-300{background-color:var(--neutral-300)}.bg-neutral-200{background-color:var(--neutral-200)}.bg-neutral-100{background-color:var(--neutral-100)}.bg-neutral-50{background-color:var(--neutral-50)}.bg-neutral-25{background-color:var(--neutral-25)}.bg-neutral-0{background-color:var(--neutral-0)}.bg-success-500{background-color:var(--success-500)}.bg-success-100{background-color:var(--success-100)}.bg-error-500{background-color:var(--error-500)}.bg-error-100{background-color:var(--error-100)}.bg-warning-500{background-color:var(--warning-500)}.bg-warning-100{background-color:var(--warning-100)}.bg-accent-magenta-500{background-color:var(--accent-magenta-500)}.bg-accent-magenta-100{background-color:var(--accent-magenta-100)}.bg-accent-green-500{background-color:var(--accent-green-500)}.bg-accent-green-100{background-color:var(--accent-green-100)}.bg-accent-cyan-500{background-color:var(--accent-cyan-500)}.bg-accent-cyan-100{background-color:var(--accent-cyan-100)}.bg-accent-azure-500{background-color:var(--accent-azure-500)}.bg-accent-azure-100{background-color:var(--accent-azure-100)}.bg-accent-rose-500{background-color:var(--accent-rose-500)}.bg-accent-rose-100{background-color:var(--accent-rose-100)}.text-primary-0{color:var(--primary-0)}.text-primary-900{color:var(--primary-900)}.text-black{color:var(--neutral-1000)}.text-white{color:var(--neutral-0)}.text-success-500{color:var(--success-500)}.text-error-500{color:var(--error-500)}.text-warning-500{color:var(--warning-500)}.text-accent-magenta-500{color:var(--accent-magenta-500)}.text-accent-green-500{color:var(--accent-green-500)}.text-accent-cyan-500{color:var(--accent-cyan-500)}.text-accent-azure-500{color:var(--accent-azure-500)}.text-accent-rose-500{color:var(--accent-rose-500)}.theme-toggle-section{margin-bottom:var(--spacing-40)}.theme-options{display:flex;gap:var(--spacing-16);flex-wrap:wrap;margin-top:var(--spacing-16)}.theme-option{display:flex;align-items:center;gap:var(--spacing-8);padding:var(--spacing-12) var(--spacing-16);border:2px solid var(--neutral-200);border-radius:var(--border-radius-radius-8);cursor:pointer;transition:all var(--transition-duration-200) ease;background:var(--neutral-0);min-width:120px}.theme-option:hover{border-color:var(--theme-primary-300);background:var(--theme-primary-50)}.theme-option.selected{border-color:var(--theme-primary-500);background:var(--theme-primary-50)}.theme-color{width:24px;height:24px;border-radius:50%;border:2px solid var(--neutral-0);box-shadow:0 2px 4px rgba(0,0,0,.1)}.theme-color.blue{background:linear-gradient(135deg,#3862C5,#223B76)}.theme-color.green{background:linear-gradient(135deg,#34a853,#164723)}.theme-color.purple{background:linear-gradient(135deg,#7f00ff,#35006b)}.theme-color.orange{background:linear-gradient(135deg,#ed8d02,#643b01)}.theme-label{font-size:var(--font-size-14);font-weight:var(--font-weight-500);color:var(--neutral-700)!important}.check-icon{font-size:var(--font-size-18);color:var(--theme-primary-500)}.theme-primary-900{background-color:var(--theme-primary-900)}.theme-primary-800{background-color:var(--theme-primary-800)}.theme-primary-700{background-color:var(--theme-primary-700)}.theme-primary-600{background-color:var(--theme-primary-600)}.theme-primary-500{background-color:var(--theme-primary-500)}.theme-primary-400{background-color:var(--theme-primary-400)}.theme-primary-300{background-color:var(--theme-primary-300)}.theme-primary-200{background-color:var(--theme-primary-200)}.theme-primary-100{background-color:var(--theme-primary-100)}.theme-primary-50{background-color:var(--theme-primary-50)}.theme-primary-0{background-color:var(--theme-primary-0)}.selected-value{padding:.75rem 1rem;background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:.375rem;font-size:.875rem;color:#495057}:root .demo-component :where(.custom-datepicker){width:100%}.value-display{padding:var(--spacing-8);background:var(--surface-tertiary);border-radius:var(--border-radius-radius-4);color:var(--text-secondary);font-family:monospace;word-break:break-all}.info-text,.value-display{font-size:var(--font-size-12)}.info-text{color:var(--text-tertiary);font-style:italic}.error-message{color:var(--error-500);font-size:var(--font-size-12);margin-top:var(--spacing-4)}.form-values{margin-top:var(--spacing-24);padding:var(--spacing-16);background:var(--surface-secondary);border-radius:var(--border-radius-radius-4);border:1px solid var(--border-color)}.form-values h3{color:var(--text-primary);margin-bottom:var(--spacing-12);font-size:var(--font-size-16)}.form-values pre{color:var(--text-secondary);font-size:var(--font-size-12);margin:0;white-space:pre-wrap;word-break:break-all}.demo-date .floating-label-group{margin-bottom:8px!important}.elevation-grid{display:flex;flex-wrap:wrap;gap:var(--spacing-80)}.elevation{width:300px;height:300px;display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--spacing-20);box-sizing:border-box;transition:box-shadow var(--transition-duration-200);background:var(--surface-primary);border-radius:var(--border-radius-radius-8)}.elevation,.elevation-label{font-size:var(--font-size-16);color:var(--neutral-800)}.elevation-label{font-weight:var(--font-weight-600);margin-bottom:var(--spacing-5);font-family:Inter,sans-serif}.elevation-components{font-size:var(--font-size-14)}.elevation-components span{font-weight:var(--font-weight-500);color:var(--neutral-400);margin-bottom:var(--spacing-5);font-size:var(--font-size-13);display:block;font-family:Inter,sans-serif}.elevation-components ul{margin:0;padding-left:var(--spacing-16);list-style-type:disc}.elevation-components li{font-size:var(--font-size-12);color:var(--neutral-500);line-height:var(--line-height-140);font-family:Inter,sans-serif;font-weight:var(--font-weight-500);word-wrap:break-word;margin-bottom:0}.elevation-0{border-radius:var(--border-radius-radius-8);border:1px solid #ced4da;box-shadow:0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(0,0,0,0)}.elevation-0,.elevation-1{background:var(--surface-primary)}.elevation-1{box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.elevation-1,.elevation-2{border-radius:var(--border-radius-radius-8)}.elevation-2{background:var(--surface-primary);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.elevation-3{box-shadow:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12)}.elevation-3,.elevation-4{border-radius:var(--border-radius-radius-8);background:var(--surface-primary,#FFF)}.elevation-4{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.elevation-5{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12)}.elevation-5,.elevation-6{border-radius:var(--border-radius-radius-8);background:var(--surface-primary,#FFF)}.elevation-6{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.elevation-7{box-shadow:0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12)}.elevation-7,.elevation-8{border-radius:var(--border-radius-radius-8);background:var(--surface-primary,#FFF)}.elevation-8{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.elevation-9{box-shadow:0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12)}.elevation-10,.elevation-9{border-radius:var(--border-radius-radius-8);background:var(--surface-primary,#FFF)}.elevation-10{box-shadow:0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12)}.elevation-11{box-shadow:0 6px 7px -4px rgba(0,0,0,.2),0 11px 15px 1px rgba(0,0,0,.14),0 4px 20px 3px rgba(0,0,0,.12)}.elevation-11,.elevation-12{border-radius:var(--border-radius-radius-8);background:var(--surface-primary,#FFF)}.elevation-12{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.elevation-13{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)}.elevation-13,.elevation-14{border-radius:var(--border-radius-radius-8);background:var(--surface-primary,#FFF)}.elevation-14{box-shadow:0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12)}.elevation-15{box-shadow:0 8px 9px -5px rgba(0,0,0,.2),0 15px 22px 2px rgba(0,0,0,.14),0 6px 28px 5px rgba(0,0,0,.12)}.elevation-15,.elevation-16{border-radius:var(--border-radius-radius-8);background:var(--surface-primary,#FFF)}.elevation-16{box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12)}.elevation-17{box-shadow:0 8px 11px -5px rgba(0,0,0,.2),0 17px 26px 2px rgba(0,0,0,.14),0 6px 32px 5px rgba(0,0,0,.12)}.elevation-17,.elevation-18{border-radius:var(--border-radius-radius-8);background:var(--surface-primary,#FFF)}.elevation-18{box-shadow:0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12)}.elevation-19{box-shadow:0 9px 12px -6px rgba(0,0,0,.2),0 19px 29px 2px rgba(0,0,0,.14),0 7px 36px 6px rgba(0,0,0,.12)}.elevation-19,.elevation-20{border-radius:var(--border-radius-radius-8);background:var(--surface-primary,#FFF)}.elevation-20{box-shadow:0 10px 13px -6px rgba(0,0,0,.2),0 20px 31px 3px rgba(0,0,0,.14),0 8px 38px 7px rgba(0,0,0,.12)}.elevation-21{box-shadow:0 10px 13px -6px rgba(0,0,0,.2),0 21px 33px 3px rgba(0,0,0,.14),0 8px 40px 7px rgba(0,0,0,.12)}.elevation-21,.elevation-22{border-radius:var(--border-radius-radius-8);background:var(--surface-primary,#FFF)}.elevation-22{box-shadow:0 10px 14px -6px rgba(0,0,0,.2),0 22px 35px 3px rgba(0,0,0,.14),0 8px 42px 7px rgba(0,0,0,.12)}.elevation-23{box-shadow:0 11px 14px -7px rgba(0,0,0,.2),0 23px 36px 3px rgba(0,0,0,.14),0 9px 44px 8px rgba(0,0,0,.12)}.elevation-23,.elevation-24{border-radius:var(--border-radius-radius-8);background:var(--surface-primary,#FFF)}.elevation-24{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 29px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}@media (max-width:1024px){.elevation-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-24)}.elevation{width:100%;min-width:280px}}@media (max-width:768px){.elevation-grid{grid-template-columns:1fr;gap:var(--spacing-20)}.elevation{width:100%;height:auto;min-height:200px;padding:var(--spacing-16)}.elevation-label{font-size:var(--font-size-15)}.elevation-components{font-size:var(--font-size-13)}}@media (max-width:480px){.elevation-grid{gap:var(--spacing-16)}.elevation{padding:var(--spacing-12);min-height:180px}.elevation-label{font-size:var(--font-size-14);margin-bottom:var(--spacing-8)}.elevation-components{font-size:var(--font-size-12)}.elevation-components ul{padding-left:var(--spacing-12)}}.material-icons-demo{margin:var(--spacing-32) auto;padding:var(--spacing-32);background:var(--surface-primary);border-radius:var(--border-radius-radius-12);box-shadow:var(--elevation-1)}.material-icons-demo .icon-search-input{width:100%;padding:var(--spacing-12) var(--spacing-16);font-size:var(--font-size-16);color:var(--text-primary);background:var(--surface-primary);border:1px solid var(--neutral-200);border-radius:var(--border-radius-radius-8);margin-bottom:var(--spacing-32);outline:none;transition:border-color var(--transition-duration-200);font-family:Inter,sans-serif}.material-icons-demo .icon-search-input::-moz-placeholder{color:var(--text-secondary)}.material-icons-demo .icon-search-input::placeholder{color:var(--text-secondary)}.material-icons-demo .icon-search-input:focus{border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(56,98,197,.1)}.material-icons-demo .icons-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--spacing-24)}@media (max-width:1200px){.material-icons-demo .icons-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:900px){.material-icons-demo .icons-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:600px){.material-icons-demo .icons-grid{grid-template-columns:repeat(2,1fr)}}.material-icons-demo .icon-item{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-16) var(--spacing-8);border-radius:var(--border-radius-radius-8);box-shadow:var(--elevation-1);transition:box-shadow var(--transition-duration-200)}.material-icons-demo .radius-shape{width:120px;height:120px;background:var(--primary-50);border:2px solid var(--primary-500);box-sizing:border-box;transition:border-radius .2s;position:unset;flex-shrink:0}.material-icons-demo .radius-8{border-radius:8px}.material-icons-demo .radius-shape:hover{box-shadow:var(--elevation-2)}.material-icons-demo .material-symbols-outlined{font-size:var(--font-size-40);color:var(--primary-500)!important;margin-bottom:var(--spacing-8);display:flex;align-items:center;justify-content:center}.material-icons-demo .icon-name{font-size:var(--font-size-14);color:var(--primary-600)!important;word-break:break-all;text-align:center;font-family:Mulish,sans-serif}.spacing-demo ul{margin-bottom:var(--spacing-16);padding-left:var(--spacing-24);line-height:var(--line-height-150);padding-bottom:var(--spacing-24);border-bottom:1px solid var(--neutral-50);list-style-type:disc}.spacing-demo ul,.spacing-demo ul li{font-family:Inter,sans-serif;color:var(--neutral-400)}.spacing-demo ul li{margin-bottom:var(--spacing-4)}.spacing-demo .spacing-table{width:100%;border-collapse:collapse;margin-bottom:var(--spacing-32);overflow:hidden;margin-top:var(--spacing-24)}.spacing-demo .spacing-table td,.spacing-demo .spacing-table th{padding:var(--spacing-12) var(--spacing-16);text-align:left;font-size:var(--font-size-14)}.spacing-demo .spacing-table th{background:var(--primary-50);font-weight:var(--font-weight-600);color:var(--neutral-900);font-size:var(--font-size-14)}.spacing-demo .spacing-table td{font-weight:var(--font-weight-500);color:var(--neutral-900);font-family:Inter,sans-serif;font-size:var(--font-size-14)}@media (max-width:768px){.spacing-demo{padding:var(--spacing-20);max-width:100%}.spacing-demo .spacing-table{font-size:var(--font-size-13)}.spacing-demo .spacing-table td,.spacing-demo .spacing-table th{padding:var(--spacing-10) var(--spacing-12);font-size:var(--font-size-13)}.spacing-demo ul{padding-left:var(--spacing-20)}}@media (max-width:480px){.spacing-demo{padding:var(--spacing-16)}.spacing-demo .spacing-table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}.spacing-demo .spacing-table td,.spacing-demo .spacing-table th{padding:var(--spacing-8) var(--spacing-10);font-size:var(--font-size-12);min-width:100px}.spacing-demo ul{padding-left:var(--spacing-16);font-size:var(--font-size-14)}.mb-4{margin-bottom:var(--spacing-12)}}.subDescription{font-family:Inter,sans-serif;color:var(--neutral-400);font-size:var(--font-size-16);font-weight:var(--font-weight-500);line-height:var(--line-height-140);margin-bottom:var(--spacing-16)}h2{margin-bottom:var(--spacing-24);font-size:var(--font-size-24)}.mb-4{margin-bottom:var(--spacing-16)}.radius-list{display:flex;flex-direction:column;gap:var(--spacing-40);margin-top:var(--spacing-16);align-items:flex-end}.radius-item{display:grid;gap:var(--spacing-40);width:100%;grid-template-columns:1fr 1fr}.radius-label{min-width:260px;text-align:left;flex:1}.radius-title{font-size:var(--font-size-24);font-family:Mulish,Inter,sans-serif!important;font-weight:var(--font-weight-700);margin-bottom:var(--spacing-8);line-height:var(--line-height-130);color:var(--neutral-1000)}.radius-desc{font-size:var(--font-size-14);color:var(--neutral-500);font-family:Inter,sans-serif;font-weight:var(--font-weight-500);line-height:var(--line-height-140)}.radius-shape{width:184px;height:184px;background:var(--primary-100);border:none;flex-shrink:0;position:relative}.border-radius-demo .radius-shape:before,.radius-shape:after{content:"";position:absolute;background:transparent}.border-radius-demo .radius-shape:before{top:0;left:0;width:50%;height:50%;border-top:3px solid var(--primary-500);border-left:3px solid var(--primary-500);border-right:none;border-bottom:none}.border-radius-demo .radius-shape:after{display:none}.radius-0:before{border-radius:0}.radius-2:before{border-top-left-radius:var(--border-radius-radius-2)}.radius-4:before{border-top-left-radius:var(--border-radius-radius-4)}.radius-8:before{border-top-left-radius:var(--border-radius-radius-8)}.radius-infinite:before{width:100%;height:100%;border-radius:50%;mask:radial-gradient(circle,transparent 56px,black 58px);-webkit-mask:radial-gradient(circle,transparent 56px,black 58px)}@media (max-width:768px){.border-radius-demo{padding:var(--spacing-20)}.radius-list{gap:var(--spacing-24)}.radius-item{flex-direction:column;gap:var(--spacing-16);align-items:center;text-align:center}.radius-label{min-width:auto;text-align:center}.radius-title{font-size:var(--font-size-18);font-family:Mulish,Inter,sans-serif!important}.radius-desc{font-size:var(--font-size-14)}.radius-shape{width:100px;height:100px}}@media (max-width:480px){.border-radius-demo{padding:var(--spacing-16)}.radius-list{gap:var(--spacing-20)}.radius-item{gap:var(--spacing-12)}.radius-title{font-size:var(--font-size-16);font-family:Mulish,Inter,sans-serif!important}.radius-desc{font-size:var(--font-size-13)}.radius-shape{width:80px;height:80px}.mb-4{margin-bottom:var(--spacing-12)}}.typography-section{display:flex;flex-direction:column}.typography-table{width:100%;border-collapse:collapse;overflow:hidden}.typography-label-title{display:flex;color:var(--neutral-15);font-size:var(--font-size-20);font-family:Inter,sans-serif;font-weight:var(--font-weight-500)}.typography-label-title span{padding:0 var(--spacing-4)}.lastText{color:var(--color-text-default,#172B4D)}.typography-row{border-bottom:1px solid var(--neutral-50);padding:var(--spacing-16);height:160px}.typography-row,.typography-row-heading{display:flex;font-size:var(--font-size-16);background:var(--surface-primary)}.typography-row-heading{align-items:center;padding:var(--spacing-10) var(--spacing-24);min-height:60px}.typography-row:last-child{border-bottom:none}.heading-row{background:var(--surface-secondary);font-size:var(--font-size-16);font-weight:var(--font-weight-600);color:var(--primary-700);padding:var(--spacing-40) var(--spacing-16) var(--spacing-16) var(--spacing-16)}.typography-label{flex-basis:30%;color:var(--color-text-default,#172b4d);font-size:var(--font-size-14);font-family:Inter,sans-serif;padding-right:var(--spacing-16);text-align:left}.typography-sample{font-family:Inter,sans-serif;flex-basis:60%}.code-label{background-color:var(--surface-secondary);padding:var(--spacing-4) var(--spacing-8);border-radius:var(--border-radius-radius-4);font-family:Inter,sans-serif;font-size:var(--font-size-14)}.typography-row h1,.typography-row h2,.typography-row h3,.typography-row h4,.typography-row h5{flex-basis:60%;text-align:left;margin:0;color:var(--text-primary);font-family:inherit}@media (max-width:1024px){.typography-demo{padding:var(--spacing-24)}.typography-section{gap:var(--spacing-24)}.typography-table{margin-bottom:var(--spacing-24)}.typography-row{padding:var(--spacing-16) var(--spacing-20);font-size:var(--font-size-15)}.typography-label{font-size:var(--font-size-13);flex-basis:35%}.typography-row h1,.typography-row h2,.typography-row h3,.typography-row h4,.typography-row h5{flex-basis:55%}}@media (max-width:768px){.typography-demo{padding:var(--spacing-20)}.typography-row{flex-direction:column;align-items:flex-start;padding:var(--spacing-16);min-height:auto}.typography-label{flex-basis:100%;margin-bottom:var(--spacing-8);font-weight:var(--font-weight-500);color:var(--text-secondary);padding-right:0}.typography-row h1,.typography-row h2,.typography-row h3,.typography-row h4,.typography-row h5{flex-basis:100%;width:100%}.heading-row{flex-direction:row;align-items:center}.heading-row .typography-label{margin-bottom:0}}@media (max-width:480px){.typography-demo{padding:var(--spacing-16)}.typography-section{gap:var(--spacing-20)}.typography-table{margin-bottom:var(--spacing-20);border-radius:var(--border-radius-radius-6)}.typography-row{padding:var(--spacing-12)}.typography-label{font-size:var(--font-size-12);margin-bottom:var(--spacing-6)}.heading-row{padding:var(--spacing-12);font-size:var(--font-size-15)}}h1{font-size:48px;line-height:1.429}h1,h2{font-family:Mulish,Inter,sans-serif;font-weight:600;color:var(--p-color-text-primary,#172b4d)}h2{font-size:40px;line-height:1.333}h3{font-size:32px;line-height:1.4}h3,h4{font-family:Mulish,Inter,sans-serif;font-weight:600;color:var(--p-color-text-primary,#172b4d)}h4{font-size:24px;line-height:1.333}h5{font-size:20px;line-height:1.4}h5,h6{font-family:Mulish,Inter,sans-serif;font-weight:600;color:var(--p-color-text-primary,#172b4d)}h6{font-size:16px;line-height:1.5}.avatar-demo{font-family:Inter,Arial,sans-serif}.header-block{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:2rem}.avtar-description{padding-top:var(--size-300);padding-bottom:var(--size-300);font-size:var(--font-size-14);color:var(--neutral-500);line-height:var(--line-height-140);font-family:Inter,sans-serif;font-weight:var(--font-weight-500);word-wrap:break-word;margin-bottom:var(--spacing-24)}.subtitle{font-size:1rem;line-height:1.5;color:var(--text-secondary);max-width:600px}.status-badge{background:var(--success-500);color:var(--neutral-0);font-size:.8rem;font-weight:600;border-radius:var(--border-radius-radius-4);padding:.25rem .5rem;display:inline-block}.avatar-preview{display:flex;align-items:center;justify-content:center;background:var(--utility-bg-1);border-radius:var(--border-radius-radius-8);min-height:180px;margin-bottom:2rem}.avatar-preview .avatar{margin:2rem 0;display:block}.properties-title{font-size:var(--font-size-20)!important;font-weight:var(--font-weight-600);margin:var(--space-600) 0;color:var(--neutral-650);font-family:Inter,sans-serif!important}.avatar-properties-grid{display:grid;grid-template-columns:1fr 2fr;gap:1.5rem;border-radius:var(--border-radius-radius-8)}.property{display:flex;flex-direction:column;justify-content:center}.property-label{font-weight:var(--font-weight-600);margin-bottom:var(--spacing-8);color:var(--neutral-650);font-size:var(--font-size-14);line-height:var(--line-height-150);font-family:Inter,sans-serif}.property-desc{color:var(--neutral-500);font-size:var(--font-size-13);line-height:1.5;font-family:Inter,sans-serif}.property-demo{gap:1rem;flex-wrap:wrap;background:var(--utility-bg-1);padding:1.5rem;border-radius:var(--border-radius-radius-8);min-height:120px}.property-demo,.size-item{display:flex;align-items:center;justify-content:center}.size-item{flex-direction:column;gap:.5rem;width:auto;text-align:center;margin-right:1rem}.size-label{color:var(--text-secondary,var(--neutral-700));font-size:var(--font-size-14);font-weight:var(--font-weight-600);padding-right:var(--spacing-8);text-align:right}.size-demo{display:flex;width:100%;gap:1rem}@media (max-width:900px){.avatar-demo{padding:1rem}.avatar-properties-grid{grid-template-columns:1fr}.property-demo{border-radius:0 0 var(--border-radius-radius-8) var(--border-radius-radius-8)}}.demo-card{background:var(--p-color-bg-surface-secondary,#F9FAFB);border-radius:var(--border-radius-radius-8,8px);padding:var(--spacing-48,48px);margin:var(--spacing-32,32px) 0;display:flex;justify-content:center;align-items:center;min-height:var(--spacing-120,120px);border:1px solid var(--p-color-border-secondary,#e5e7eb)}.properties-section{margin-top:var(--spacing-40,40px)}.properties-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--p-color-border-secondary,#e5e7eb);border-radius:var(--border-radius-radius-8,8px);overflow:hidden}.properties-grid,.property-group{background:var(--p-color-bg-surface-primary,#FFFFFF)}.property-group{padding:var(--spacing-32,32px)}.property-group:first-child,.property-group:nth-child(2){border-bottom:1px solid var(--p-color-border-secondary,#e5e7eb)}.property-group:first-child,.property-group:nth-child(3){border-right:1px solid var(--p-color-border-secondary,#e5e7eb)}@media (max-width:768px){.properties-grid{grid-template-columns:1fr}.property-group:first-child,.property-group:nth-child(3){border-right:none}.property-group:not(:last-child){border-bottom:1px solid var(--p-color-border-secondary,#e5e7eb)}}.property-header h3{font-size:var(--font-size-16,16px);font-weight:var(--font-weight-600,600);margin:0 0 var(--spacing-8,8px) 0;color:var(--p-color-text-primary,#1A1A1A)}.property-header p{font-size:var(--font-size-14,14px);color:var(--p-color-text-secondary,#6B7280);margin:0 0 var(--spacing-24,24px) 0;line-height:1.4}.property-examples{display:flex;flex-wrap:wrap;gap:var(--spacing-12,12px);align-items:center}.all-examples-section{margin-top:var(--spacing-48,48px)}.tooltip-table{border:1px solid var(--p-color-border-secondary,#e5e7eb);border-radius:var(--border-radius-radius-8,8px);overflow:hidden;background:var(--p-color-bg-surface-primary,#FFFFFF)}.header-cell{padding:var(--spacing-12,12px) var(--spacing-16,16px);font-size:var(--font-size-14,14px);font-weight:var(--font-weight-600,600);color:var(--p-color-text-primary,#1A1A1A);border-right:1px solid var(--p-color-border-secondary,#e5e7eb)}.header-cell:last-child{border-right:none}.table-row{display:grid;grid-template-columns:120px 100px 100px 1fr;border-bottom:1px solid var(--p-color-border-secondary,#e5e7eb)}.table-row:last-child{border-bottom:none}.element-cell,.position-cell,.trigger-cell{font-size:var(--font-size-14,14px);color:var(--p-color-text-secondary,#6B7280)}.element-cell,.example-cell,.position-cell,.trigger-cell{padding:var(--spacing-12,12px) var(--spacing-16,16px);border-right:1px solid var(--p-color-border-secondary,#e5e7eb);display:flex;align-items:center}.example-cell{justify-content:flex-start}.example-cell:last-child{border-right:none}.link{color:var(--primary-500,#3B82F6);text-decoration:none;font-weight:var(--font-weight-500,500)}.link:hover,.text-with-tooltip{text-decoration:underline}.text-with-tooltip{color:var(--primary-500,#3B82F6);cursor:pointer;text-decoration-style:dotted}@media (max-width:768px){.demo-card{padding:var(--spacing-24,24px);margin:var(--spacing-20,20px) 0;min-height:var(--spacing-80,80px)}.property-group{padding:var(--spacing-20,20px)}.property-header p{margin-bottom:var(--spacing-16,16px)}.property-examples{gap:var(--spacing-8,8px)}.property-examples .btn{min-width:0}.all-examples-section{margin-top:var(--spacing-32,32px)}.tooltip-table{overflow-x:auto;-webkit-overflow-scrolling:touch}.table-header{display:grid}.table-header,.table-row{grid-template-columns:100px 80px 80px minmax(140px,1fr);min-width:-moz-min-content;min-width:min-content}.element-cell,.example-cell,.header-cell,.position-cell,.trigger-cell{padding:var(--spacing-8,8px) var(--spacing-12,12px);font-size:var(--font-size-13,13px)}}@media (max-width:576px){.demo-card{padding:var(--spacing-16,16px);margin:var(--spacing-16,16px) 0;min-height:var(--spacing-64,64px)}.properties-section{margin-top:var(--spacing-24,24px)}.property-group{padding:var(--spacing-16,16px)}.property-header h3{font-size:var(--font-size-15,15px)}.property-header p{font-size:var(--font-size-13,13px);margin-bottom:var(--spacing-12,12px)}.property-examples{flex-direction:column;align-items:flex-start}.all-examples-section{margin-top:var(--spacing-24,24px)}.table-header,.table-row{grid-template-columns:70px 70px 70px minmax(120px,1fr)}.element-cell,.example-cell,.header-cell,.position-cell,.trigger-cell{padding:var(--spacing-6,6px) var(--spacing-8,8px);font-size:var(--font-size-12,12px)}.example-cell .btn{width:100%;max-width:100%;min-width:0}}@media (max-width:400px){.table-header,.table-row{grid-template-columns:60px 60px 60px minmax(100px,1fr)}}