:root{--md-primary:#7c4dff;--md-on-primary:#fff;--md-primary-container:#e8deff;--md-on-primary-container:#1e0063;--md-secondary:#625b71;--md-on-secondary:#fff;--md-surface:#fffbfe;--md-on-surface:#1c1b1f;--md-surface-variant:#e7e0ec;--md-on-surface-variant:#49454f;--md-outline:#79747e;--md-error:#b3261e;--md-on-error:#fff;--pixel-border:3px;--pixel-font:"Press Start 2P", monospace;--body-font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--mono-font:"JetBrains Mono", monospace;--bg-checker:repeating-conic-gradient(#7c4dff08 0% 25%, transparent 0% 50%) 0 0 / 20px 20px;--max-width:1000px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}[data-theme=dark]{--md-primary:#cfbcff;--md-on-primary:#381e72;--md-primary-container:#4f11b5;--md-on-primary-container:#e8deff;--md-secondary:#cbc2db;--md-on-secondary:#332d41;--md-surface:#1c1b1f;--md-on-surface:#e6e1e5;--md-surface-variant:#49454f;--md-on-surface-variant:#cac4d0;--md-outline:#938f99;--md-error:#f2b8b5;--md-on-error:#601410;--bg-checker:repeating-conic-gradient(#cfbcff0d 0% 25%, transparent 0% 50%) 0 0 / 20px 20px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}.pixel-art{image-rendering:pixelated;image-rendering:crisp-edges}body{font-family:var(--body-font);background:var(--md-surface);color:var(--md-on-surface);min-height:100vh;line-height:1.7;transition:background-color .3s,color .3s}body:before{content:"";background:var(--bg-checker);pointer-events:none;z-index:-1;position:fixed;inset:0}a{color:var(--md-primary);text-decoration:none}a:hover{text-decoration:underline}::selection{background:var(--md-primary);color:var(--md-on-primary)}:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}img{max-width:100%;height:auto}img[loading=lazy]{background:var(--md-surface-variant)}.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}.container-wide{max-width:1200px;margin:0 auto;padding:0 20px}.skip-link{background:var(--md-primary);color:var(--md-on-primary);z-index:1000;font-family:var(--pixel-font);padding:8px 16px;font-size:9px;position:absolute;top:-100%;left:8px}.skip-link:focus{top:8px}.pixel-border{border:var(--pixel-border) solid var(--md-outline)}.btn{font-family:var(--pixel-font);letter-spacing:.5px;border:var(--pixel-border) solid var(--md-primary);background:var(--md-primary);color:var(--md-on-primary);cursor:pointer;text-transform:uppercase;align-items:center;gap:8px;padding:12px 24px;font-size:10px;text-decoration:none;transition:background-color .3s,color .3s,box-shadow .2s,transform .15s;display:inline-flex;box-shadow:0 2px 8px #00000026}.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 16px #0003}.btn:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.btn:focus-visible{outline-offset:0px}.btn-outline{color:var(--md-primary);box-shadow:inset 0 0 0 2px var(--md-primary);background:0 0;transition:background-color .3s}.btn-outline:hover{background:var(--md-primary-container)}.btn-sm{padding:8px 16px;font-size:8px}.card{background:var(--md-surface);border:1px solid var(--md-outline);border-radius:8px;padding:24px;transition:all .2s;box-shadow:0 1px 3px #00000014}@media (hover:hover){.card:hover{transform:translateY(-2px);box-shadow:0 4px 20px #0000001f}}.tag{font-family:var(--pixel-font);letter-spacing:.5px;border:2px solid var(--md-primary);background:var(--md-primary-container);color:var(--md-on-primary-container);text-transform:uppercase;border-radius:4px;padding:4px 8px;font-size:8px;transition:background-color .3s,color .3s,border-color .3s;display:inline-block}nav,footer{transition:background-color .3s,border-color .3s}.section-title{font-family:var(--body-font);letter-spacing:-.3px;color:var(--md-primary);margin-bottom:24px;font-size:20px;font-weight:700;transition:color .3s;display:inline-block;position:relative}.section-title:after{content:"";background:var(--md-primary);border-radius:2px;width:100%;height:3px;position:absolute;bottom:-4px;left:0}.pixel-divider{background:repeating-linear-gradient(90deg, var(--md-primary) 0px, var(--md-primary) 8px, transparent 8px, transparent 16px);border-radius:2px;height:4px;margin:32px 0}.grid-2{grid-template-columns:1fr 1fr;gap:20px;display:grid}.grid-3{grid-template-columns:1fr 1fr 1fr;gap:20px;display:grid}.grid-4{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}.feature-icon{animation:3s ease-in-out infinite float;display:inline-block}.feature-icon:hover{animation:.3s pop}.demo-badge{font-family:var(--pixel-font);color:#fff;vertical-align:middle;background:#4caf50;border-radius:3px;margin-left:6px;padding:2px 6px;font-size:6px;animation:2s infinite pulse;display:inline-block}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;position:absolute;overflow:hidden}.skeleton{background:linear-gradient(90deg, var(--md-surface-variant) 25%, var(--md-outline) 50%, var(--md-surface-variant) 75%);background-size:200% 100%;border-radius:4px;animation:1.5s infinite shimmer}.fade-in{opacity:0;transition:opacity .6s,transform .6s;transform:translateY(20px)}.fade-in.visible{opacity:1;transform:translateY(0)}.page-transition{animation:.3s pageIn}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pageIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (width<=768px){.grid-2{grid-template-columns:1fr}.grid-3,.grid-4{grid-template-columns:1fr 1fr}.card{padding:16px}.section-title{font-size:13px}.btn{padding:10px 18px;font-size:9px}}@media (width<=480px){html{font-size:15px}.container{padding:0 12px}}@media print{nav,footer,.pixel-divider,.back-to-top,body:before{display:none}.card{box-shadow:none;break-inside:avoid;border:1px solid #ccc}}
