:root{--theme-color-1: #F2E9CE;--theme-color-2: #F29E38;--theme-color-3: #D97B29;--theme-color-4: #A63A12;--theme-color-5: #1F0501;--bg-primary: #fafafa;--bg-secondary: #ffffff;--text-primary: var(--theme-color-5);--text-secondary: #666;--accent: var(--theme-color-2);--accent-hover: var(--theme-color-3);--border-light: rgba(242, 233, 206, .3);--shadow-soft: 0 8px 30px rgba(31, 5, 1, .08);--shadow-medium: 0 15px 40px rgba(31, 5, 1, .12)}.Theme-10-1-hex{color:#f2e9ce}.Theme-10-2-hex{color:#f29e38}.Theme-10-3-hex{color:#d97b29}.Theme-10-4-hex{color:#a63a12}.Theme-10-5-hex{color:#1f0501}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.7;margin:0;padding:0;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--theme-color-1) 100%);color:var(--text-primary);min-height:100vh}.container{width:100%;max-width:none;margin:0;padding:0;background:var(--bg-secondary);border-radius:0;box-shadow:none;min-height:100vh;display:flex;flex-direction:column}.hero-section{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4rem 2rem;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--theme-color-1) 100%);position:relative;overflow:hidden}.hero-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23F29E38" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');opacity:.3}h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;text-align:center;color:var(--text-primary);margin:0 0 3rem;background:linear-gradient(135deg,var(--theme-color-4),var(--theme-color-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}h1.logo{font-size:clamp(3rem,8vw,6rem);margin:0;position:relative;z-index:2;filter:drop-shadow(2px 4px 8px rgba(31,5,1,.15));background:linear-gradient(135deg,var(--theme-color-4) 0%,var(--theme-color-2) 25%,var(--theme-color-4) 50%,var(--theme-color-2) 75%,var(--theme-color-4) 100%);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:colorWave 8s ease-in-out infinite}h1.logo:before{content:"□";position:absolute;left:50%;top:-35px;transform:translate(-50%);font-size:2rem;color:var(--theme-color-2);animation:lightboxGlow 3s ease-in-out infinite;font-weight:300;line-height:1}h1.logo:hover{transform:translateY(-2px);transition:transform .3s cubic-bezier(.4,0,.2,1);animation-duration:3s}h1.logo:hover:before{animation-duration:.5s}.logo-image{display:flex;justify-content:center;margin-bottom:-20px;max-height:150px;max-width:125px;align-items:center}.logo-image svg{width:200px;height:200px;filter:drop-shadow(2px 4px 8px rgba(31,5,1,.15));transition:transform .3s ease}.logo-image svg:hover{transform:scale(1.05)}.description{font-size:15px;font-weight:400;color:#ffb152;text-align:center;margin-top:0;margin-bottom:1rem;opacity:.9;letter-spacing:.5px;position:relative;text-transform:uppercase;z-index:2}.hero-answer{font-size:1.05rem;line-height:1.65;color:var(--theme-color-4);text-align:center;max-width:42rem;margin:0 auto 1.5rem;padding:1rem 1.25rem;background:#f29e381f;border-radius:12px;border-left:4px solid var(--theme-color-2);position:relative;z-index:2;text-transform:none;letter-spacing:normal}.hero-answer code{font-family:JetBrains Mono,monospace;font-size:.9em;background:#fff9;padding:.15rem .4rem;border-radius:4px}.hero-answer a{color:var(--theme-color-3);font-weight:600;text-decoration:underline;text-underline-offset:2px}.hero-answer a:hover{color:var(--theme-color-4)}.github-button{display:inline-flex;align-items:center;gap:.75rem;background:#fff;color:var(--theme-color-5);text-decoration:none;padding:.75rem 1.75rem;border-radius:50px;font-weight:500;font-size:1rem;letter-spacing:.5px;box-shadow:0 8px 32px #f29e384d,0 4px 12px #1f050133;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;z-index:2;border:2px solid transparent;text-transform:uppercase}.github-button:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 -2px 8px #f29e384d,0 0 15px #f29e3866,0 8px 20px #1f05014d;animation:glowPulse 2s ease-in-out infinite}.github-button:active{transform:translateY(-1px) scale(1.02)}.github-button svg{transition:transform .3s ease}.github-button:hover svg{transform:scale(1.1)}.hero-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;position:relative;z-index:2}.github-button-secondary{background:#fff;color:var(--theme-color-5);border:2px solid var(--theme-color-2);box-shadow:0 6px 24px #f29e3838,0 4px 12px #1f050126}.npm-icon{flex-shrink:0}.gallery-section{padding:4rem 0 6rem;background:var(--bg-secondary)}.gallery-container{max-width:1400px;margin:0 auto;padding:0 2rem}.gallery-container h2{color:var(--theme-color-4);margin-top:0;margin-bottom:3rem;font-size:2.5rem;font-weight:700;position:relative;padding-bottom:1rem;text-align:center}.gallery-container h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100px;height:4px;background:linear-gradient(90deg,var(--theme-color-3),var(--theme-color-2));border-radius:2px}.gallery-container p.gallery-description{font-weight:300;margin-bottom:50px;text-align:center}.gallery{display:flex;flex-direction:column;gap:3rem}.gallery img{width:100%;height:350px;object-fit:cover;border-radius:20px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-soft);border:3px solid transparent;position:relative;overflow:hidden;animation:fadeInUp .6s ease-out}.gallery img:hover{transform:translateY(-12px) scale(1.02);box-shadow:var(--shadow-medium);border-color:var(--accent)}.gallery img:hover:after{opacity:.15}.gallery img:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 60%,var(--accent) 100%);opacity:0;transition:opacity .3s ease}.gallery img:focus{outline:3px solid var(--accent);outline-offset:4px}.gallery img:nth-child(1){animation-delay:.1s}.gallery img:nth-child(2){animation-delay:.2s}.gallery img:nth-child(3){animation-delay:.3s}.gallery img:nth-child(4){animation-delay:.4s}.gallery img:nth-child(5){animation-delay:.5s}.gallery img:nth-child(6){animation-delay:.6s}.gallery-row{display:flex;gap:2rem;align-items:stretch;animation:fadeInUp .8s ease-out}.gallery-row:nth-child(2n){flex-direction:row-reverse}.gallery-row:nth-child(1){animation-delay:.1s}.gallery-row:nth-child(2){animation-delay:.3s}.gallery-row:nth-child(3){animation-delay:.5s}.gallery-row .gallery-item{flex:1;display:flex}.gallery-row .gallery-item:first-child{flex:1.5}.gallery-row .gallery-item:last-child{flex:1}.usage-section{padding:6rem 0;background:linear-gradient(135deg,var(--theme-color-1),rgba(242,233,206,.4))}.usage-container{max-width:1200px;margin:0 auto;padding:0 2rem}.usage-container:focus{outline:none}.usage{background:var(--bg-secondary);padding:4rem;border-radius:30px;border:1px solid var(--border-light);position:relative;overflow:hidden;box-shadow:var(--shadow-medium);text-align:center}.usage:before{content:"";position:absolute;top:-50%;left:-50%;width:100%;height:100%;background:radial-gradient(circle,var(--theme-color-2) 0%,transparent 70%);opacity:.03;pointer-events:none}.usage h2{color:var(--theme-color-4);margin-bottom:3rem;font-size:2.5rem;font-weight:700;position:relative;padding-bottom:1rem}.usage h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100px;height:4px;background:linear-gradient(90deg,var(--theme-color-3),var(--theme-color-2));border-radius:2px}.usage ul{color:var(--text-secondary);padding-left:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}.usage li{background:linear-gradient(135deg,var(--theme-color-1),rgba(242,233,206,.3));padding:2rem;border-radius:20px;position:relative;font-weight:400;font-size:1.1rem;border:2px solid transparent;transition:all .3s ease}.usage li:hover{border-color:var(--theme-color-2);transform:translateY(-5px);box-shadow:var(--shadow-soft)}.usage li strong{color:var(--theme-color-4);font-weight:600;display:block;margin-bottom:.5rem}.implementation-section{padding:6rem 0;background:linear-gradient(135deg,var(--theme-color-5) 0%,#2d0a02 100%);color:var(--theme-color-1)}.implementation-container{max-width:1200px;margin:0 auto;padding:0 2rem}.implementation{background:var(--theme-color-1);padding:4rem;border-radius:30px;border:2px solid rgba(242,158,56,.4);position:relative;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 60px #1f050180}.implementation h3{color:var(--theme-color-4);margin:3rem 0 0}.implementation:before{content:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,var(--theme-color-2) 0%,transparent 70%);opacity:.08;pointer-events:none}.implementation h2{color:var(--theme-color-4);margin-bottom:2rem;font-size:2.5rem;font-weight:700;position:relative;padding-bottom:1rem;text-align:center}.implementation h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100px;height:4px;background:linear-gradient(90deg,var(--theme-color-3),var(--theme-color-2));border-radius:2px}.implementation p{color:var(--theme-color-5);font-size:1.2rem;margin:0rem 0 1rem;line-height:1.6;opacity:.95}.implementation code{background:linear-gradient(135deg,var(--theme-color-2),var(--theme-color-3));color:var(--theme-color-5);padding:.5rem 1rem;border-radius:8px;font-family:JetBrains Mono,Fira Code,monospace;font-size:.9rem;font-weight:600;letter-spacing:.5px;display:inline-block;box-shadow:0 4px 12px #f29e384d;border:1px solid rgba(166,58,18,.5)}.implementation pre{background:linear-gradient(135deg,var(--theme-color-5),#0f0201);padding:2rem;border-radius:16px;overflow-x:auto;margin:1.5rem 0;border:2px solid var(--theme-color-2);box-shadow:0 8px 32px #1f050199,inset 0 2px 8px #f29e381a}.implementation pre code{background:none;padding:0;box-shadow:none;border:none;display:block;color:var(--theme-color-1);font-weight:400}.traditional-implementation{margin-top:1.5rem;padding:1rem;background:#6464640d!important;border-radius:8px;border-left:3px solid #999}.traditional-implementation h4{margin:0 0 .75rem;color:var(--theme-color-5);font-size:1rem}.traditional-implementation p{margin:0 0 .5rem;font-size:.95rem;color:var(--theme-color-5)}.traditional-implementation p a{color:var(--theme-color-2)}.traditional-implementation p:last-child{margin:.5rem 0 0;font-size:.9rem;color:#666}.footer{border-top:1px solid rgba(242,158,56,.3);color:#f2e9cecc;margin-top:3rem;padding-top:2rem;text-align:center}.footer a{color:#ffb152}.footer p{color:#f2e9cecc;font-size:14px;line-height:2;margin:0}.footer-nav{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;margin-bottom:1.25rem}.footer-nav a{font-size:14px;text-decoration:none}.footer-nav a:hover{text-decoration:underline}.bmc-fab{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;align-items:center;gap:.5rem;padding:.65rem 1rem .65rem .75rem;background:#f89e2f;color:#1f0501;text-decoration:none;font-size:.875rem;font-weight:600;border-radius:999px;box-shadow:0 4px 16px #1f050133;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.bmc-fab:hover{background:var(--theme-color-3);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #1f050140}.bmc-fab:focus-visible{outline:2px solid var(--theme-color-4);outline-offset:3px}.bmc-fab-icon{flex-shrink:0}.bmc-fab-label{line-height:1}@media(max-width:480px){.bmc-fab{padding:.75rem;border-radius:50%}.bmc-fab-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}.container>.footer{background:linear-gradient(135deg,var(--theme-color-5) 0%,#2d0a02 100%);padding:2rem;margin-top:3rem}.instructions-section,.instructions-container,.instructions,.instructions-content,.instructions-usage,.instructions-implementation{display:none}@keyframes pulse{0%,to{transform:translate(-50%) scale(1);opacity:.7}50%{transform:translate(-50%) scale(1.1);opacity:1}}@keyframes lightboxGlow{0%,to{transform:translate(-50%) scale(1);opacity:.6;filter:drop-shadow(0 0 0 rgba(242,158,56,0))}25%{transform:translate(-50%) scale(1.05);opacity:.8;filter:drop-shadow(0 0 10px rgba(242,158,56,.3))}50%{transform:translate(-50%) scale(1.1);opacity:1;filter:drop-shadow(0 0 20px rgba(242,158,56,.5))}75%{transform:translate(-50%) scale(1.05);opacity:.8;filter:drop-shadow(0 0 10px rgba(242,158,56,.3))}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes colorWave{0%{background-position:0% 50%}25%{background-position:50% 50%}50%{background-position:100% 50%}75%{background-position:50% 50%}to{background-position:0% 50%}}@keyframes glowPulse{0%,to{box-shadow:0 5px 25px -3px #f29e3866,0 0 10px #f29e384d,0 8px 20px #1f05014d}50%{box-shadow:0 15px 34px -5px #f29e3899,0 0 15px #f29e3880,0 8px 20px #1f05014d}}@media(max-width:1024px){.instructions-content{flex-direction:column;gap:3rem}.gallery-row{flex-wrap:wrap;gap:1.5rem}.gallery-row .gallery-item{flex:0 0 calc(50% - .75rem);min-width:0}.gallery img{height:280px}.usage ul{grid-template-columns:1fr;gap:1.5rem}}@media(max-width:768px){.hero-section{padding:3rem 1rem}.gallery-section{padding:4rem 0}.gallery-container{padding:0 1rem}.gallery-container h2{font-size:2rem}.gallery{gap:2rem}.gallery img{height:220px;border-radius:16px}.gallery-row{flex-direction:column;gap:1.5rem;flex-wrap:nowrap}.gallery-row:nth-child(2n){display:none}.gallery-row .gallery-item{flex:1}.usage-section,.implementation-section{padding:4rem 0}.usage-container,.implementation-container{padding:0 1rem}.usage,.implementation{padding:2.5rem;border-radius:20px}.usage h2,.implementation h2{font-size:2rem}.usage li{padding:1.5rem}.instructions-section{padding:4rem 0}.instructions-container{padding:0 1rem}.instructions{padding:2.5rem;border-radius:20px}h1.logo{font-size:3rem}.description{font-size:12px;line-height:1.4;width:60%}}@media(max-width:480px){.hero-section{padding:2rem 1rem}.usage,.implementation{padding:2rem}.usage li{padding:1.5rem}.usage li strong{margin-left:1.5rem}.instructions{padding:2rem}.instructions li{padding-left:2rem}h1.logo:before{top:-25px;font-size:1.5rem}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.comparison-section{margin-top:3rem;padding:2.5rem;background:linear-gradient(135deg,var(--theme-color-1),rgba(242,233,206,.4));border-radius:20px;border:2px solid rgba(242,158,56,.3)}.comparison-section h2{color:var(--theme-color-4);font-size:1.8rem;font-weight:700;margin:0 0 .75rem;padding-bottom:1rem;position:relative;text-align:center}.comparison-section h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:80px;height:3px;background:linear-gradient(90deg,var(--theme-color-3),var(--theme-color-2));border-radius:2px}.comparison-section>p{text-align:center;color:var(--text-secondary);margin:.75rem 0 1.5rem;font-size:1rem}.comparison-section>p:last-child{margin-top:1.5rem;text-align:center;color:var(--text-secondary);font-size:.95rem}.comparison-table-wrapper{overflow-x:auto;border-radius:12px;box-shadow:var(--shadow-soft)}.comparison-table{width:100%;border-collapse:collapse;background:var(--bg-secondary);font-size:.95rem}.comparison-table caption{display:none}.comparison-table th{background:linear-gradient(135deg,var(--theme-color-5),#2d0a02);color:var(--theme-color-1);padding:1rem 1.25rem;text-align:left;font-weight:600;font-size:.9rem;letter-spacing:.3px;white-space:nowrap}.comparison-table th:first-child{border-radius:12px 0 0}.comparison-table th:last-child{border-radius:0 12px 0 0}.comparison-table td{padding:.85rem 1.25rem;border-bottom:1px solid rgba(242,233,206,.6);color:var(--text-secondary);vertical-align:middle}.comparison-table td.highlight{color:var(--theme-color-4);font-weight:600}.comparison-table td code{background:#f29e3826;color:var(--theme-color-4);padding:.2rem .5rem;border-radius:4px;font-family:JetBrains Mono,monospace;font-size:.8rem;white-space:nowrap}.comparison-table tr:last-child td{border-bottom:none}.comparison-table tr:hover td{background:#f2e9ce4d}.badge{display:inline-block;background:linear-gradient(135deg,var(--theme-color-3),var(--theme-color-2));color:#fff;font-size:.65rem;font-weight:700;padding:.15rem .5rem;border-radius:20px;letter-spacing:.5px;margin-left:.4rem;vertical-align:middle;text-transform:uppercase}@media(max-width:768px){.comparison-section{padding:1.5rem;border-radius:16px}.comparison-section h2{font-size:1.4rem}.comparison-table{font-size:.85rem}.comparison-table th,.comparison-table td{padding:.65rem .85rem}}.site-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-light)}.site-nav .site-nav-logo{font-size:1.25rem;font-weight:700;color:var(--theme-color-4);text-decoration:none}.site-nav .site-nav-logo:hover{color:var(--theme-color-3)}.site-nav nav{display:flex;gap:1.5rem}.site-nav nav a{color:var(--text-secondary);text-decoration:none;font-weight:500;font-size:.95rem}.site-nav nav a:hover,.site-nav nav a[aria-current=page]{color:var(--theme-color-3)}.site-nav nav a[aria-current=page]{font-weight:600}.faq-page{flex:1;max-width:52rem;margin:0 auto;padding:2rem 2rem 4rem;width:100%}.faq-hero{text-align:center;margin-bottom:2.5rem}.faq-hero h1{font-size:2.25rem;color:var(--theme-color-4);margin:0 0 1rem;line-height:1.2}.faq-intro{font-size:1.1rem;line-height:1.65;color:var(--theme-color-5);margin:0;padding:1.25rem;background:#f29e381a;border-radius:12px;border-left:4px solid var(--theme-color-2);text-align:left}.faq-intro code{font-family:JetBrains Mono,monospace;font-size:.9em;background:#ffffffb3;padding:.15rem .4rem;border-radius:4px}.faq-intro a{color:var(--theme-color-3);font-weight:600}.faq-list{display:flex;flex-direction:column;gap:.75rem}.faq-item{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:12px;padding:0 1.25rem;box-shadow:var(--shadow-soft)}.faq-item summary{cursor:pointer;list-style:none;padding:1.1rem 0}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary h2{display:inline;font-size:1.1rem;font-weight:600;color:var(--theme-color-4);margin:0;line-height:1.4}.faq-item summary:after{content:"+";float:right;font-size:1.25rem;font-weight:300;color:var(--theme-color-3);line-height:1.4}.faq-item[open] summary:after{content:"−"}.faq-item p{margin:0 0 1rem;color:var(--text-primary);line-height:1.65}.faq-item pre{margin:0 0 1rem;overflow-x:auto}.faq-item code{font-family:JetBrains Mono,monospace;font-size:.875rem}.faq-framework-section{margin-top:3rem;padding-top:2rem;border-top:2px solid var(--border-light)}.faq-framework-section h2{font-size:1.5rem;color:var(--theme-color-4);margin:0 0 1rem}.faq-framework-section h3{font-size:1.15rem;color:var(--theme-color-3);margin:2rem 0 .75rem}.faq-framework-section p{line-height:1.65;color:var(--text-primary)}.faq-framework-section pre{background:var(--theme-color-5);color:var(--theme-color-1);padding:1.25rem;border-radius:12px;overflow-x:auto;margin:0 0 1rem}.faq-framework-section code{font-family:JetBrains Mono,monospace;font-size:.85rem;line-height:1.6}@media(max-width:768px){.site-nav{flex-direction:column;gap:.75rem;padding:1rem}.site-nav nav{gap:1rem}.faq-page{padding:1.5rem 1rem 3rem}.faq-hero h1{font-size:1.75rem}.hero-answer{font-size:.95rem;padding:.85rem 1rem}}