*{box-sizing:border-box}html,body{overflow-x:hidden;max-width:100%}:root{--pui-primary-500: #673ab7;--pui-primary-600: #5e35b1;--pui-primary-700: #512da8;--pui-primary-contrast-500: #ffffff;--pui-accent-500: #ffc107;--pui-accent-600: #ffb300;--pui-accent-contrast-500: #000000;--pui-success-500: #4caf50;--pui-success-600: #43a047;--pui-success-contrast-500: #ffffff;--pui-warn-500: #f44336;--pui-warn-600: #e53935;--pui-warn-contrast-500: #ffffff;--pui-info-500: #2196f3;--pui-info-600: #1e88e5;--pui-info-contrast-500: #ffffff;--demo-bg-primary: linear-gradient(135deg, var(--pui-primary-500) 0%, var(--pui-primary-700) 50%, #1a0a30 100%);--demo-sidebar-bg: linear-gradient(180deg, var(--pui-primary-700) 0%, #1a0a30 100%);--demo-text-primary: rgba(255, 255, 255, .95);--demo-text-secondary: rgba(255, 255, 255, .75);--demo-border-color: rgba(255, 255, 255, .15);--demo-card-bg: rgba(255, 255, 255, .1)}html.pui-dark{--demo-bg-primary: linear-gradient( 135deg, var(--pui-primary-900, #1a1a2e) 0%, var(--pui-primary-800, #16213e) 55%, #0b0b14 100% );--demo-sidebar-bg: linear-gradient( 180deg, var(--pui-primary-900, #1a1a2e) 0%, #0b0b14 100% );--demo-card-bg: rgba(255, 255, 255, .06);--demo-border-color: rgba(255, 255, 255, .12)}body{margin:0;font-family:var(--pui-font-family, "Segoe UI", system-ui, -apple-system, sans-serif);background:var(--demo-bg-primary);min-height:100vh;color:var(--demo-text-primary);transition:background .3s ease}.demo-container{max-width:700px;margin:0 auto;padding:40px 20px;text-align:center;color:var(--demo-text-primary)}.demo-container h1{font-size:2.5rem;margin-bottom:8px;text-shadow:0 2px 10px rgba(0,0,0,.2)}.subtitle{font-size:1.1rem;opacity:.9;margin-bottom:40px}.button-group{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:20px}.btn{padding:14px 28px;border:none;border-radius:var(--pui-border-radius, 8px);font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #00000026}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0003}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,var(--pui-primary-500) 0%,var(--pui-primary-600) 100%);color:var(--pui-primary-contrast-500)}.btn-accent,.btn-secondary{background:linear-gradient(135deg,var(--pui-accent-500) 0%,var(--pui-accent-600) 100%);color:var(--pui-accent-contrast-500)}.btn-success{background:linear-gradient(135deg,var(--pui-success-500) 0%,var(--pui-success-600) 100%);color:var(--pui-success-contrast-500)}.btn-error{background:linear-gradient(135deg,var(--pui-warn-500) 0%,var(--pui-warn-600) 100%);color:var(--pui-warn-contrast-500)}.btn-warning{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.btn-info{background:linear-gradient(135deg,var(--pui-info-500) 0%,var(--pui-info-600) 100%);color:var(--pui-info-contrast-500)}.btn-custom{background:linear-gradient(135deg,var(--pui-primary-500) 0%,var(--pui-accent-500) 100%);color:var(--pui-primary-contrast-500)}.btn-clear{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.5)}.btn-clear:hover{background:#ffffff4d}.btn-theme{background:#ffffff26;color:#fff;border:2px solid rgba(255,255,255,.3);padding:10px 18px;font-size:14px}.btn-theme:hover{background:#ffffff40;border-color:#ffffff80}.btn-theme.active{background:var(--pui-primary-500);border-color:var(--pui-primary-500);box-shadow:0 0 0 2px #ffffff4d}.btn-all-themes{background:linear-gradient(135deg,var(--pui-accent-500) 0%,var(--pui-primary-500) 100%);color:#fff}.section{margin-bottom:30px}.section h2{font-size:1.2rem;margin-bottom:15px;opacity:.95}.theme-group{background:var(--demo-card-bg);padding:15px;border-radius:var(--pui-border-radius, 12px);border:1px solid var(--demo-border-color)}.theme-hint{margin-top:10px;font-size:.9rem;opacity:.8}.theme-hint strong{text-transform:capitalize}.info-box{display:flex;align-items:center;gap:12px;background:var(--demo-card-bg);border:1px solid var(--demo-border-color);border-radius:var(--pui-border-radius, 12px);padding:16px 20px;margin-bottom:30px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--demo-text-primary);font-size:.95rem}.info-icon{font-size:1.5rem;flex-shrink:0}.features{margin-top:50px;background:var(--demo-card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--pui-border-radius, 16px);padding:30px;text-align:left;border:1px solid var(--demo-border-color)}.features h2{margin-top:0;margin-bottom:20px;font-size:1.5rem}.features ul{list-style:none;padding:0;margin:0}.features li{padding:8px 0;font-size:1rem;opacity:.95}.result-box{background:var(--demo-card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--pui-border-radius, 12px);padding:20px;margin-top:30px;text-align:center;border:1px solid var(--demo-border-color)}.result-box h3{margin:0 0 10px;font-size:1rem;opacity:.8}.result-box p{margin:0;font-size:1.25rem;font-weight:600}@media(max-width:768px){.demo-container{padding:24px 16px}.demo-container h1{font-size:2rem}.features{margin-top:30px;padding:20px}.info-box{padding:14px 16px;font-size:.9rem}.btn{padding:12px 20px;font-size:15px}}@media(max-width:480px){.demo-container{padding:16px 12px}.demo-container h1{font-size:1.6rem}.subtitle{font-size:1rem;margin-bottom:24px}.button-group{gap:8px}.btn{flex:1 1 calc(50% - 8px);min-width:0;padding:11px 14px;font-size:14px}.features{padding:18px;border-radius:12px}.features h2{font-size:1.25rem}.features li{font-size:.9rem}}