:root{--c-brand:#6d28d9;--c-brand-light:#8b5cf6;--c-brand-dark:#4c1d95;--c-brand-glow:rgba(139,92,246,.22);--c-accent:#0ea5e9;--c-accent-light:#38bdf8;--c-accent-glow:rgba(14,165,233,.18);--c-success:#10b981;--c-danger:#ef4444;--c-warning:#f59e0b;--c-surface:#ffffff;--c-surface-2:#faf8ff;--c-surface-glass:rgba(255,255,255,.68);--c-bg:#f3f0fa;--c-bg-pattern:#ede9f7;--c-dark:#0c0a12;--c-text:#1a1028;--c-text-2:#5c5370;--c-text-3:#958da4;--c-border:#e4ddf0;--c-border-2:#eeebf5;--c-code-bg:#1a1b2e;--c-code-surface:#141522;--c-code-text:#c9d1e8;--c-code-gutter:#4a4e6a;--c-code-line:#2a2c42;--c-code-keyword:#c792ea;--c-code-string:#c3e88d;--c-code-comment:#546e7a;--c-code-tag:#82aaff;--c-code-attr:#ffcb6b;--c-code-value:#f78c6c;--c-code-func:#82aaff;--c-code-selector:#c792ea;--c-code-property:#82aaff;--c-code-punct:#89ddff;--r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--s-sm:0 2px 8px rgba(108,40,217,.05);--s-md:0 8px 30px rgba(108,40,217,.08);--s-lg:0 20px 60px rgba(108,40,217,.12);--s-glow:0 0 50px rgba(139,92,246,.15);--s-card:0 4px 20px rgba(108,40,217,.06);--ease:cubic-bezier(.4,0,.2,1);--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--mono:'JetBrains Mono','Fira Code',Consolas,Monaco,monospace;--header-h:66px}.mwpg-demo-body{margin:0!important;padding:0!important;background:var(--c-bg);color:var(--c-text);font-family:var(--font)!important;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}.mwpg-demo-body,.mwpg-demo-body h1,.mwpg-demo-body h2,.mwpg-demo-body h3,.mwpg-demo-body h4,.mwpg-demo-body h5,.mwpg-demo-body h6,.mwpg-demo-body p,.mwpg-demo-body a,.mwpg-demo-body button,.mwpg-demo-body input,.mwpg-demo-body label,.mwpg-demo-body div:not([class*="fa"]),.mwpg-demo-body span:not([class*="fa"]){font-family:var(--font)!important}.mwpg-demo-body *{box-sizing:border-box}.mwpg-demo-body i.fa-solid,.mwpg-demo-body .fa-solid,.mwpg-demo-body [class*="fa-solid"]{font-family:"Font Awesome 6 Free"!important;font-weight:900!important;font-style:normal!important;display:inline-block!important;line-height:1!important}.mwpg-demo-body i.fa-regular,.mwpg-demo-body .fa-regular,.mwpg-demo-body [class*="fa-regular"]{font-family:"Font Awesome 6 Free"!important;font-weight:400!important;font-style:normal!important;display:inline-block!important;line-height:1!important}.mwpg-demo-body i.fa-brands,.mwpg-demo-body .fa-brands,.mwpg-demo-body [class*="fa-brands"]{font-family:"Font Awesome 6 Brands"!important;font-weight:400!important;font-style:normal!important;display:inline-block!important;line-height:1!important}.mwpg-demo-body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 800px 600px at 15% 40%,rgb(139 92 246 / .07) 0%,transparent 70%),radial-gradient(ellipse 600px 500px at 85% 25%,rgb(14 165 233 / .05) 0%,transparent 70%),radial-gradient(ellipse 700px 500px at 50% 85%,rgb(236 72 153 / .04) 0%,transparent 70%);pointer-events:none;z-index:0}.mwpg-header{position:sticky;top:0;z-index:1000;height:var(--header-h);background:var(--c-surface-glass);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid rgb(228 221 240 / .5);transition:box-shadow .3s var(--ease)}.mwpg-header.scrolled{box-shadow:0 4px 30px rgb(108 40 217 / .1)}.mwpg-header-inner{max-width:1400px;margin:0 auto;padding:0 28px;height:100%;display:flex;align-items:center;justify-content:space-between}.mwpg-logo{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:800;font-size:15px;letter-spacing:.03em;color:var(--c-brand-dark);flex-shrink:0}.mwpg-logo-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--c-brand),var(--c-accent));border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;box-shadow:0 4px 18px var(--c-brand-glow);transition:transform .3s var(--ease)}.mwpg-logo:hover .mwpg-logo-icon{transform:rotate(-8deg) scale(1.08)}.mwpg-logo-badge{display:inline-flex;background:linear-gradient(135deg,var(--c-brand),var(--c-brand-light));color:#fff;font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.1em;text-transform:uppercase}.mwpg-nav{display:flex;align-items:center;gap:2px}.mwpg-nav a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;color:var(--c-text-2);text-decoration:none;font-size:13.5px;font-weight:500;border-radius:var(--r-sm);transition:all .25s var(--ease);white-space:nowrap;position:relative}.mwpg-nav a i{font-size:14px;opacity:.7;transition:opacity .25s}.mwpg-nav a:hover i{opacity:1}.mwpg-nav a:hover,.mwpg-nav a.active{color:var(--c-brand);background:rgb(139 92 246 / .07)}.mwpg-nav a.active::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:18px;height:2px;background:var(--c-brand);border-radius:2px}.mwpg-nav a.mwpg-nav-cta{background:linear-gradient(135deg,var(--c-brand),var(--c-brand-light));color:#fff;font-weight:600;padding:9px 22px;border-radius:var(--r-sm);box-shadow:0 4px 16px var(--c-brand-glow);margin-left:6px}.mwpg-nav a.mwpg-nav-cta i{opacity:1}.mwpg-nav a.mwpg-nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px var(--c-brand-glow);background:linear-gradient(135deg,var(--c-brand-light),var(--c-brand))}.mwpg-menu-toggle{display:none;background:none;border:none;width:42px;height:42px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px;border-radius:var(--r-sm);transition:background .25s}.mwpg-menu-toggle:hover{background:rgb(139 92 246 / .07)}.mwpg-menu-toggle span{display:block;width:20px;height:2px;background:var(--c-text);border-radius:2px;transition:all .3s var(--ease);transform-origin:center}.mwpg-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.mwpg-menu-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0)}.mwpg-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.mwpg-breadcrumb{max-width:1400px;margin:0 auto;padding:18px 28px 0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--c-text-3);position:relative;z-index:1}.mwpg-breadcrumb a{color:var(--c-text-2);text-decoration:none;transition:color .25s}.mwpg-breadcrumb a:hover{color:var(--c-brand)}.mwpg-breadcrumb i{font-size:10px;color:var(--c-border)}.mwpg-breadcrumb-current{color:var(--c-brand);font-weight:600;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mwpg-demo-shell{position:relative;z-index:1}.mwpg-demo-hero{max-width:1400px;margin:0 auto;padding:36px 28px 22px;text-align:center}.mwpg-demo-hero h1{font-size:clamp(26px,4.2vw,46px);font-weight:800;line-height:1.12;margin:0 0 14px;color:#ffffff!important;letter-spacing:-.02em}.mwpg-demo-hero p{max-width:680px;margin:0 auto 22px;color:#94a3b8!important;font-size:15.5px;line-height:1.7}.mwpg-demo-meta{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--c-text-3)}.mwpg-demo-meta-item{display:inline-flex;align-items:center;gap:6px}.mwpg-demo-meta-item i{font-size:13px;color:var(--c-text-3)}.mwpg-demo-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;background:rgb(139 92 246 / .07);color:var(--c-brand);border-radius:20px;font-size:12px;font-weight:600;text-decoration:none;transition:all .25s var(--ease);border:1px solid rgb(139 92 246 / .12)}.mwpg-demo-tag i{font-size:11px}.mwpg-demo-tag:hover{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}.mwpg-playground{max-width:1400px;margin:0 auto 44px;padding:0 28px}.mwpg-playground-container{background:var(--c-code-bg);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--s-lg),var(--s-glow);border:1px solid rgb(139 92 246 / .1)}.mwpg-code-toolbar{display:flex;align-items:center;background:var(--c-code-surface);border-bottom:1px solid var(--c-code-line);min-height:46px}.mwpg-code-tabs{display:flex;align-items:stretch;flex:1;min-width:0}.mwpg-code-tab{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;background:#fff0;border:none;color:var(--c-code-gutter);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;transition:all .25s var(--ease);border-bottom:2px solid #fff0;position:relative}.mwpg-code-tab:hover{color:var(--c-code-text);background:rgb(255 255 255 / .02)}.mwpg-code-tab.active{color:#fff;border-bottom-color:var(--c-brand-light);background:rgb(139 92 246 / .08)}.mwpg-code-tab .tab-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.mwpg-code-tab[data-tab="html"] .tab-dot{background:#ef4444;box-shadow:0 0 6px rgb(239 68 68 / .4)}.mwpg-code-tab[data-tab="css"] .tab-dot{background:#3b82f6;box-shadow:0 0 6px rgb(59 130 246 / .4)}.mwpg-code-tab[data-tab="js"] .tab-dot{background:#eab308;box-shadow:0 0 6px rgb(234 179 8 / .4)}.mwpg-code-tab .tab-lines{font-size:11px;opacity:.45;margin-left:2px;font-weight:400}.mwpg-code-actions{display:flex;align-items:center;gap:5px;padding:0 14px;flex-shrink:0}.mwpg-code-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .14);border-radius:var(--r-sm);color:#e2e8f0;font-family:var(--font)!important;font-size:12px;font-weight:600;cursor:pointer;transition:all .25s var(--ease);white-space:nowrap}.mwpg-code-btn i{font-size:13px}.mwpg-code-btn:hover{color:#fff;background:rgb(255 255 255 / .16);border-color:rgb(255 255 255 / .24)}.mwpg-code-btn.copied{color:var(--c-code-string);border-color:rgb(195 232 141 / .35);background:rgb(195 232 141 / .1)}.mwpg-code-panels{position:relative}.mwpg-code-panel{display:none}.mwpg-code-panel.active{display:block}.mwpg-code-viewer{display:flex!important;min-height:260px!important;max-height:480px!important;overflow:auto!important;background:var(--c-code-bg)!important;background-color:#1a1b2e!important;scrollbar-width:thin;scrollbar-color:var(--c-code-line) #fff0}.mwpg-code-viewer::-webkit-scrollbar{width:7px;height:7px}.mwpg-code-viewer::-webkit-scrollbar-track{background:#fff0}.mwpg-code-viewer::-webkit-scrollbar-thumb{background:var(--c-code-line);border-radius:4px}.mwpg-code-viewer::-webkit-scrollbar-thumb:hover{background:var(--c-code-gutter)}.mwpg-line-numbers{flex-shrink:0!important;padding:18px 0!important;background:var(--c-code-surface)!important;background-color:#141522!important;border-right:1px solid var(--c-code-line)!important;user-select:none!important;-webkit-user-select:none!important;text-align:right!important;min-width:58px!important;position:sticky!important;left:0!important;z-index:2!important}.mwpg-line-numbers span{display:block!important;padding:0 14px 0 10px!important;font-family:var(--mono)!important;font-size:12px!important;line-height:22px!important;height:22px!important;color:#64748b!important}.mwpg-code-content{flex:1;min-width:0}.mwpg-demo-body .mwpg-code-content pre,.mwpg-demo-body .mwpg-code-viewer pre,.mwpg-demo-body pre{background:var(--c-code-bg)!important;background-color:#1a1b2e!important;border:none!important;border-radius:0!important;box-shadow:none!important;outline:none!important;margin:0!important;padding:18px 22px!important;font-family:var(--mono)!important;font-size:13px!important;line-height:22px!important;color:var(--c-code-text)!important;white-space:pre!important;tab-size:2!important;word-break:normal!important;overflow:visible!important;width:100%!important;max-width:none!important}.mwpg-demo-body .mwpg-code-content code,.mwpg-demo-body .mwpg-code-viewer code,.mwpg-demo-body code{background:transparent!important;background-color:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;outline:none!important;margin:0!important;padding:0!important;display:inline!important;font-family:var(--mono)!important;font-size:inherit!important;line-height:inherit!important;color:inherit!important;word-break:normal!important;white-space:pre!important;max-width:none!important;transition:none!important}.mwpg-code-content .hl-tag{color:var(--c-code-tag)}.mwpg-code-content .hl-attr{color:var(--c-code-attr)}.mwpg-code-content .hl-value{color:var(--c-code-value)}.mwpg-code-content .hl-string{color:var(--c-code-string)}.mwpg-code-content .hl-keyword{color:var(--c-code-keyword)}.mwpg-code-content .hl-comment{color:var(--c-code-comment);font-style:italic}.mwpg-code-content .hl-number{color:var(--c-code-value)}.mwpg-code-content .hl-property{color:var(--c-code-property)}.mwpg-code-content .hl-selector{color:var(--c-code-selector)}.mwpg-code-content .hl-punctuation{color:var(--c-code-punct)}.mwpg-code-content .hl-function{color:var(--c-code-func)}.mwpg-code-empty{display:flex;align-items:center;justify-content:center;gap:10px;min-height:180px;color:var(--c-code-gutter);font-size:14px}.mwpg-code-empty i{font-size:20px;opacity:.5}.mwpg-resize-handle{height:10px;background:var(--c-code-surface);cursor:row-resize;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--c-code-line);border-bottom:1px solid var(--c-code-line);transition:background .25s}.mwpg-resize-handle:hover,.mwpg-resize-handle.dragging{background:rgb(139 92 246 / .15)}.mwpg-resize-handle::after{content:'';width:36px;height:3px;background:var(--c-code-gutter);border-radius:3px;opacity:.5}.mwpg-preview-toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--c-code-surface);border-bottom:1px solid var(--c-code-line)}.mwpg-preview-title{font-size:13px;font-weight:600;color:var(--c-code-text);margin-right:auto;display:flex;align-items:center;gap:9px}.mwpg-preview-dot{width:8px;height:8px;background:var(--c-success);border-radius:50%;box-shadow:0 0 8px rgb(16 185 129 / .5);animation:mwpg-pulse 2s ease-in-out infinite}@keyframes mwpg-pulse{0%,100%{opacity:1}50%{opacity:.4}}.mwpg-device-buttons{display:flex;align-items:center;gap:2px;background:rgb(255 255 255 / .04);border-radius:var(--r-sm);padding:3px}.mwpg-device-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;background:#fff0;border:none;color:var(--c-code-gutter);cursor:pointer;border-radius:6px;transition:all .25s var(--ease);font-size:14px}.mwpg-device-btn:hover{color:var(--c-code-text)}.mwpg-device-btn.active{background:var(--c-brand);color:#fff;box-shadow:0 2px 10px var(--c-brand-glow)}.mwpg-preview-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .07);border-radius:var(--r-sm);color:var(--c-code-gutter);font-family:var(--font);font-size:12px;font-weight:500;cursor:pointer;transition:all .25s var(--ease);white-space:nowrap}.mwpg-preview-btn i{font-size:12px}.mwpg-preview-btn:hover{color:#fff;background:rgb(255 255 255 / .1);border-color:rgb(255 255 255 / .14)}.mwpg-preview-btn.mwpg-run-btn{background:linear-gradient(135deg,var(--c-success),#059669);color:#fff;border-color:#fff0;font-weight:600}.mwpg-preview-btn.mwpg-run-btn:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgb(16 185 129 / .3)}.mwpg-preview-frame-wrapper{background:#fff;display:flex;justify-content:center;min-height:420px;transition:all .4s var(--ease)}.mwpg-preview-frame-wrapper.device-tablet,.mwpg-preview-frame-wrapper.device-mobile{padding:24px;background:var(--c-code-bg)}.mwpg-preview-frame-wrapper.device-tablet iframe,.mwpg-preview-frame-wrapper.device-mobile iframe{border-radius:var(--r-md);box-shadow:0 12px 48px rgb(0 0 0 / .3)}#mwpg-demo-frame{display:block;width:100%;min-height:420px;border:0;background:#fff;transition:width .4s var(--ease),max-width .4s var(--ease)}.device-tablet #mwpg-demo-frame{width:768px;max-width:100%}.device-mobile #mwpg-demo-frame{width:375px;max-width:100%}.mwpg-shortcuts{max-width:1400px;margin:0 auto 22px;padding:0 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--c-text-3)}.mwpg-shortcut-item{display:inline-flex;align-items:center;gap:5px}.mwpg-kbd{display:inline-flex;align-items:center;padding:2px 8px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:5px;font-family:var(--mono);font-size:11px;font-weight:500;box-shadow:0 1px 3px rgb(0 0 0 / .06);color:var(--c-text-2)}.mwpg-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--c-dark);color:#fff;padding:13px 26px;border-radius:var(--r-md);font-size:14px;font-weight:500;box-shadow:var(--s-lg);border:1px solid rgb(255 255 255 / .08);z-index:10000;opacity:0;transition:all .4s var(--ease);pointer-events:none;display:flex;align-items:center;gap:10px}.mwpg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.mwpg-share-section{max-width:1400px;margin:0 auto 44px;padding:0 28px}.mwpg-share-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:28px 34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:var(--s-sm)}.mwpg-share-text{font-size:15px;font-weight:600;color:var(--c-text)}.mwpg-share-text span{color:var(--c-text-2);font-weight:400}.mwpg-share-buttons{display:flex;gap:8px;flex-wrap:wrap}.mwpg-share-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r-sm);color:var(--c-text-2);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;transition:all .25s var(--ease);text-decoration:none}.mwpg-share-btn i{font-size:15px}.mwpg-share-btn:hover{color:var(--c-brand);border-color:var(--c-brand);background:rgb(139 92 246 / .04);transform:translateY(-2px);box-shadow:var(--s-sm)}.mwpg-footer{background:#06070c;border-top:1px solid rgb(255 255 255 / .08);margin-top:80px;position:relative;z-index:1}.mwpg-footer-inner{max-width:1400px;margin:0 auto;padding:60px 28px 30px}.mwpg-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}.mwpg-footer-brand p{color:#94a3b8;font-size:14px;line-height:1.7;margin:16px 0 20px;max-width:380px}.mwpg-footer-social{display:flex;align-items:center;gap:10px}.mwpg-footer-social a{width:38px;height:38px;border-radius:50%;background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .08);display:flex;align-items:center;justify-content:center;color:#94a3b8;text-decoration:none;transition:all 0.25s ease}.mwpg-footer-social a:hover{background:#8b5cf6;color:#fff;border-color:#8b5cf6;transform:translateY(-2px)}.mwpg-footer-col h4{color:#fff;font-size:15px;font-weight:700;margin:0 0 18px;letter-spacing:-.01em}.mwpg-footer-col a{display:flex;align-items:center;gap:8px;color:#94a3b8;text-decoration:none;font-size:13.5px;margin-bottom:12px;transition:all 0.2s ease}.mwpg-footer-col a i{font-size:10px;color:#475569}.mwpg-footer-col a:hover{color:#fff;transform:translateX(3px)}.mwpg-footer-col a:hover i{color:#8b5cf6}.mwpg-footer-bottom{padding-top:24px;border-top:1px solid rgb(255 255 255 / .06);display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#64748b;flex-wrap:wrap;gap:14px}.mwpg-footer-tech{display:flex;align-items:center;gap:8px}.mwpg-footer-tech span{padding:3px 8px;background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .08);border-radius:6px;font-size:11px;color:#94a3b8;display:inline-flex;align-items:center;gap:5px}.mwpg-archive-hero{max-width:900px;margin:0 auto;padding:56px 24px 34px;text-align:center;position:relative;z-index:1}.mwpg-hero-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 18px;background:rgb(139 92 246 / .12);border:1px solid rgb(139 92 246 / .3);border-radius:30px;font-size:13px;font-weight:600;color:#c4b5fd;margin-bottom:22px;box-shadow:0 0 30px rgb(139 92 246 / .18)}.mwpg-badge-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 10px #10b981;animation:mwpg-pulse 2s infinite}@keyframes mwpg-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}.mwpg-hero-title{font-size:clamp(32px, 5.5vw, 56px);font-weight:900;line-height:1.12;letter-spacing:-.03em;color:#fff;margin:0 0 18px}.mwpg-gradient-text{background:linear-gradient(135deg,#ffffff 10%,#a78bfa 55%,#38bdf8 100%);-webkit-background-clip:text;-webkit-text-fill-color:#fff0}.mwpg-hero-desc{font-size:clamp(15px, 2vw, 17px);color:#94a3b8;line-height:1.7;max-width:680px;margin:0 auto 28px}.mwpg-hero-features{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.mwpg-feature-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;background:rgb(255 255 255 / .04);border:1px solid rgb(255 255 255 / .08);border-radius:20px;font-size:13px;color:#cbd5e1;font-weight:500;backdrop-filter:blur(10px)}.mwpg-feature-pill i{color:#818cf8}.mwpg-feature-pill.highlight{background:rgb(99 102 241 / .12);border-color:rgb(99 102 241 / .3);color:#e0e7ff}.mwpg-feature-pill.highlight i{color:#a5b4fc}.mwpg-command-bar{max-width:1400px;margin:0 auto 36px;padding:0 28px;position:relative;z-index:1}.mwpg-command-inner{background:rgb(18 20 32 / .75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgb(255 255 255 / .1);border-radius:20px;padding:16px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:0 16px 40px -10px rgb(0 0 0 / .5)}.mwpg-search-box{flex:1;min-width:280px;position:relative;display:flex;align-items:center}.mwpg-search-icon{position:absolute;left:18px;color:#818cf8;font-size:16px;pointer-events:none}.mwpg-search-box input{width:100%;padding:14px 96px 14px 48px;background:rgb(10 11 20 / .8);border:1px solid rgb(255 255 255 / .1);border-radius:14px;color:#fff;font-size:14px;outline:none;transition:all 0.25s ease}.mwpg-search-box input::placeholder{color:#64748b}.mwpg-search-box input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgb(139 92 246 / .25),0 0 20px rgb(139 92 246 / .15);background:rgb(10 11 20 / .95)}.mwpg-search-clear{position:absolute;right:86px;background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .12);color:#94a3b8;cursor:pointer;font-size:12px;width:24px;height:24px;border-radius:50%;display:none;align-items:center;justify-content:center;transition:all 0.2s ease;z-index:2;padding:0}.mwpg-search-clear:hover{color:#fff;background:rgb(239 68 68 / .35);border-color:rgb(239 68 68 / .5)}.mwpg-search-kbd{position:absolute;right:14px;display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#64748b;pointer-events:none}.mwpg-search-kbd kbd{background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .14);border-radius:4px;padding:2px 5px;font-family:inherit;font-size:10px;color:#94a3b8}.mwpg-filter-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mwpg-filter-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .08);border-radius:30px;font-size:13px;font-weight:500;color:#cbd5e1;text-decoration:none;transition:all 0.25s ease}.mwpg-filter-chip i{font-size:12px;color:#94a3b8}.mwpg-filter-chip:hover{background:rgb(255 255 255 / .1);color:#fff;border-color:rgb(255 255 255 / .2);transform:translateY(-1px)}.mwpg-filter-chip.active{background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:#8b5cf6;color:#fff;box-shadow:0 4px 20px rgb(139 92 246 / .35)}.mwpg-filter-chip.active i{color:#fff}.chip-count{display:inline-flex;align-items:center;justify-content:center;padding:1px 7px;background:rgb(0 0 0 / .35);border-radius:12px;font-size:11px;font-weight:600}.mwpg-demo-grid{max-width:1400px;margin:0 auto 60px;padding:0 28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:30px;position:relative;z-index:1}.mwpg-demo-card{background:#111322;border:1px solid rgb(255 255 255 / .08);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 30px -10px rgb(0 0 0 / .5);transition:all 0.4s cubic-bezier(.16,1,.3,1);position:relative}.mwpg-demo-card.mwpg-hidden,.mwpg-demo-card[style*="display: none"],.mwpg-demo-card[style*="display:none"]{display:none!important}.mwpg-demo-card:hover{transform:translateY(-8px) scale(1.01);border-color:rgb(139 92 246 / .45);box-shadow:0 24px 50px -12px rgb(0 0 0 / .8),0 0 35px -5px rgb(124 58 237 / .28)}.mwpg-card-window-bar{height:38px;background:#0d0f1a;border-bottom:1px solid rgb(255 255 255 / .06);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.mwpg-window-dots{display:flex;align-items:center;gap:6px}.mwpg-window-dots .dot{width:10px;height:10px;border-radius:50%;display:block}.dot-red{background:#ff5f56}.dot-yellow{background:#ffbd2e}.dot-green{background:#27c93f}.mwpg-window-title{font-size:11px;color:#64748b;font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.mwpg-window-tags{display:flex;align-items:center;gap:4px}.mwpg-minitag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace;line-height:1}.mwpg-minitag.html{background:rgb(239 68 68 / .15);color:#f87171}.mwpg-minitag.css{background:rgb(59 130 246 / .15);color:#60a5fa}.mwpg-minitag.js{background:rgb(245 158 11 / .15);color:#fbbf24}.mwpg-demo-card-thumb{position:relative;overflow:hidden;aspect-ratio:16/10;background:#0d0f1a}.mwpg-thumb-link{display:block;width:100%;height:100%}.mwpg-demo-card-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(.16,1,.3,1)}.mwpg-demo-card:hover .mwpg-demo-card-thumb img{transform:scale(1.08)}.mwpg-canvas-preview{width:100%;height:100%;position:relative;background:radial-gradient(circle at 50% 50%,#1e1b4b 0%,#0d0f1a 100%);overflow:hidden;display:flex;align-items:center;justify-content:center}.mwpg-code-watermark{position:absolute;top:14px;left:16px;font-family:'JetBrains Mono',monospace;font-size:11px;color:rgb(255 255 255 / .2);line-height:1.7;pointer-events:none;user-select:none;text-align:left;display:flex;flex-direction:column}.mwpg-orb-visualizer{position:relative;width:80px;height:80px;display:flex;align-items:center;justify-content:center}.mwpg-orb-ring{position:absolute;inset:0;border-radius:50%;border:2px dashed rgb(139 92 246 / .45);animation:mwpg-spin 12s linear infinite}.mwpg-orb-ring.ring-2{inset:10px;border:1px solid rgb(14 165 233 / .5);animation:mwpg-spin-rev 8s linear infinite}.mwpg-orb-center{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;box-shadow:0 0 25px rgb(139 92 246 / .6);transition:transform 0.4s ease}.mwpg-demo-card:hover .mwpg-orb-center{transform:scale(1.15)}@keyframes mwpg-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes mwpg-spin-rev{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}.mwpg-demo-card-overlay{position:absolute;inset:0;background:rgb(10 11 20 / .75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity 0.3s ease;display:flex;align-items:center;justify-content:center;z-index:2}.mwpg-demo-card:hover .mwpg-demo-card-overlay{opacity:1}.mwpg-overlay-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-radius:30px;font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 8px 24px rgb(99 102 241 / .5);transform:translateY(10px);transition:all 0.3s cubic-bezier(.16,1,.3,1)}.mwpg-demo-card:hover .mwpg-overlay-btn{transform:translateY(0)}.mwpg-overlay-btn:hover{transform:scale(1.05);box-shadow:0 10px 30px rgb(99 102 241 / .7)}.mwpg-demo-card-body{padding:22px 24px;flex:1;display:flex;flex-direction:column;background:#111322}.mwpg-demo-card-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.mwpg-demo-card-cat{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;background:rgb(139 92 246 / .12);border:1px solid rgb(139 92 246 / .22);color:#c4b5fd;border-radius:20px;font-size:11px;font-weight:600;text-decoration:none;transition:all 0.2s ease}.mwpg-demo-card-cat i{font-size:10px;color:#a78bfa}.mwpg-demo-card-cat:hover{background:rgb(139 92 246 / .25);color:#fff}.mwpg-demo-card h2{margin:0 0 10px;font-size:18px;font-weight:700;line-height:1.4}.mwpg-demo-card h2 a{color:#f8fafc;text-decoration:none;transition:color 0.25s ease}.mwpg-demo-card:hover h2 a{color:#a78bfa}.mwpg-demo-card p{color:#94a3b8;font-size:13.5px;line-height:1.65;margin:0 0 18px;flex:1}.mwpg-demo-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid rgb(255 255 255 / .06);margin-top:auto}.mwpg-demo-card-stats{display:flex;align-items:center;gap:14px;font-size:12px;color:#64748b}.mwpg-demo-card-stats span{display:inline-flex;align-items:center;gap:5px}.mwpg-demo-card-stats i{font-size:12px;color:#818cf8}.mwpg-demo-button{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#ffffff!important;text-decoration:none;border-radius:10px;font-size:13px;font-weight:600;transition:all 0.25s ease;box-shadow:0 4px 14px rgb(99 102 241 / .3)}.mwpg-demo-button i{font-size:11px;transition:transform 0.2s ease}.mwpg-demo-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgb(99 102 241 / .5)}.mwpg-demo-button:hover i{transform:translateX(3px)}.mwpg-no-results{grid-column:1 / -1;text-align:center;padding:70px 20px;background:rgb(18 20 32 / .5);border:1px dashed rgb(255 255 255 / .12);border-radius:20px}.mwpg-no-results i{font-size:48px;color:#818cf8;margin-bottom:16px;display:inline-block}.mwpg-no-results h3{color:#fff;font-size:20px;margin:0 0 8px}.mwpg-no-results p{color:#94a3b8;max-width:440px;margin:0 auto 20px}.mwpg-pagination{max-width:1400px;margin:40px auto 0;padding:0 28px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;z-index:1}.mwpg-pagination a,.mwpg-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 16px;border-radius:12px;font-size:14px;font-weight:600;text-decoration:none;transition:all 0.25s ease}.mwpg-pagination a{background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .1);color:#cbd5e1}.mwpg-pagination a:hover{border-color:#8b5cf6;color:#fff;background:rgb(139 92 246 / .15);box-shadow:0 4px 16px rgb(139 92 246 / .25)}.mwpg-pagination span.current{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:1px solid #8b5cf6;box-shadow:0 4px 20px rgb(139 92 246 / .4)}.mwpg-back-top{position:fixed;bottom:32px;right:32px;width:48px;height:48px;background:linear-gradient(135deg,var(--c-brand),var(--c-brand-light));color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:var(--s-md);opacity:0;visibility:hidden;transform:translateY(20px);transition:all .3s var(--ease);z-index:900}.mwpg-back-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.mwpg-back-top:hover{transform:translateY(-4px);box-shadow:0 10px 30px var(--c-brand-glow)}.mwpg-code-mobile-actions{display:none;padding:8px 12px;background:var(--c-code-surface);border-top:1px solid var(--c-code-line);gap:6px}@media (max-width:1024px){.mwpg-footer-grid{grid-template-columns:1fr 1fr;gap:32px}}@media (max-width:768px){.mwpg-nav{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:var(--c-surface);flex-direction:column;padding:24px;gap:4px;transform:translateX(100%);transition:transform .35s var(--ease);z-index:999;overflow-y:auto}.mwpg-nav.open{transform:translateX(0)}.mwpg-nav a{width:100%;padding:15px 20px;font-size:15px;border-radius:var(--r-md)}.mwpg-menu-toggle{display:flex}.mwpg-footer-grid{grid-template-columns:1fr;gap:30px}.mwpg-demo-grid{grid-template-columns:1fr}.mwpg-code-actions{display:none}.mwpg-code-mobile-actions{display:flex}.mwpg-code-tab{padding:11px 15px;font-size:12px}.mwpg-code-tab .tab-lines{display:none}.mwpg-device-buttons{display:none}.mwpg-shortcuts{display:none}.mwpg-search-kbd{display:none!important}.mwpg-search-clear{right:14px!important}.mwpg-share-card{flex-direction:column;text-align:center}#mwpg-demo-frame{min-height:340px}.mwpg-demo-hero h1{font-size:26px}.mwpg-back-top{bottom:18px;right:18px;width:44px;height:44px;font-size:16px}}@media (max-width:480px){.mwpg-header-inner{padding:0 16px}.mwpg-playground{padding:0 12px}.mwpg-demo-hero{padding:22px 16px 16px}.mwpg-breadcrumb{padding:14px 16px 0}.mwpg-demo-grid{padding:0 12px;gap:16px}.mwpg-footer-inner{padding:44px 16px 22px}.mwpg-preview-toolbar{flex-wrap:wrap}.mwpg-preview-title{width:100%;margin-bottom:6px}.mwpg-share-section{padding:0 12px}.mwpg-filter-bar{padding:0 12px}}@media print{.mwpg-header,.mwpg-footer,.mwpg-back-top,.mwpg-toast,.mwpg-code-actions,.mwpg-code-mobile-actions,.mwpg-preview-toolbar,.mwpg-shortcuts,.mwpg-share-section,.mwpg-menu-toggle,.mwpg-resize-handle{display:none!important}.mwpg-demo-body{background:#fff!important}.mwpg-demo-body::before{display:none}.mwpg-playground-container{box-shadow:none!important;border:1px solid #ccc!important}.mwpg-code-content pre{color:#333!important}}@keyframes mwpg-fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}.mwpg-demo-hero{animation:mwpg-fadeUp .55s var(--ease) both}.mwpg-playground{animation:mwpg-fadeUp .6s var(--ease) .08s both}.mwpg-share-section{animation:mwpg-fadeUp .6s var(--ease) .16s both}.mwpg-archive-hero{animation:mwpg-fadeUp .55s var(--ease) both}.mwpg-filter-bar{animation:mwpg-fadeUp .55s var(--ease) .08s both}.mwpg-demo-card{animation:mwpg-fadeUp .5s var(--ease) both}.mwpg-demo-card:nth-child(1){animation-delay:.04s}.mwpg-demo-card:nth-child(2){animation-delay:.08s}.mwpg-demo-card:nth-child(3){animation-delay:.12s}.mwpg-demo-card:nth-child(4){animation-delay:.16s}.mwpg-demo-card:nth-child(5){animation-delay:.2s}.mwpg-demo-card:nth-child(6){animation-delay:.24s}.mwpg-demo-card:nth-child(7){animation-delay:.28s}.mwpg-demo-card:nth-child(8){animation-delay:.32s}.mwpg-demo-card:nth-child(9){animation-delay:.36s}