@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";.lite-light{align-items:center;background:#000c;display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.lite-light.lite-light-active{display:flex}.lite-light .lite-light-prev{left:10px;position:absolute}.lite-light .lite-light-next{position:absolute;right:10px}.lite-light img{background-color:#fff;padding:7px}.lite-light-arrow{border:solid #fff;border-width:0 1px 1px 0;display:inline-block;padding:10px;transform:scale(1);transition:all .3s ease}.lite-light-arrow:hover{cursor:pointer;transform:scale(1.1)}.lite-light-arrow.lite-light-right{-webkit-transform:rotate(-45deg);margin-right:10px;transform:scale(1) rotate(-45deg)}.lite-light-arrow.lite-light-right:hover{transform:scale(1.05) rotate(-45deg)}.lite-light-arrow.lite-light-left{-webkit-transform:rotate(135deg);margin-left:10px;transform:scale(1) rotate(135deg)}.lite-light-arrow.lite-light-left:hover{transform:scale(1.05) rotate(135deg)}.lite-light-close.lite-light-button{background:none;border:none;color:#fff;cursor:pointer;display:flex;flex-direction:column;height:21.5px;justify-content:space-between;position:absolute;right:15px;top:15px;transform:scale(1);transition:all .3s ease;width:22px}.lite-light-close.lite-light-button:hover{transform:scale(1.1)}.lite-light-close .lite-light-bar{background-color:#fff;display:block;height:1px;transition:all .1s ease-in-out;width:100%}.lite-light-close .lite-light-bar:nth-of-type(1){transform:rotate(45deg);transform-origin:top left;transition:all .1s ease-in-out;width:30px}.lite-light-close .lite-light-bar:nth-of-type(2){transform:rotate(-45deg);transform-origin:bottom left;transition:all .1s ease-in-out;width:30px}@keyframes lite-light-fade-in{0%{opacity:0}to{opacity:1}}@keyframes lite-light-fade-out{0%{opacity:1}to{opacity:0}}.lite-light-fade-in{animation:lite-light-fade-in .15s ease-in-out forwards}.lite-light-fade-out{animation:lite-light-fade-out .15s ease-in-out forwards}@media (max-width:768px){.lite-light .lite-light-prev,.lite-light .lite-light-next{display:none}.lite-light img{max-height:80vh;max-width:90%;padding:5px}.lite-light .lite-light-close{font-size:2rem;right:25px;top:25px}.lite-light-close.lite-light-button{height:21.5px}}@supports (-webkit-touch-callout:none){.lite-light img{-webkit-transform:translateZ(0);backface-visibility:hidden;transform:translateZ(0)}}: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:2rem;opacity:.9;letter-spacing:.5px;position:relative;text-transform:uppercase;z-index:2}.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)}.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{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{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: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:2rem 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}.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}.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}}
