*{margin:0;padding:0;box-sizing:border-box}:root{--forest-green:#2d5016;--moss-green:#4a7c59;--sage-green:#87a96b;--leaf-green:#a7c957;--lime-green:#c9e265;--earth-brown:#6b4423;--bark-brown:#8b5a2b;--stone-gray:#7d8471;--sky-blue:#a8dadc;--sun-yellow:#f1c40f;--warm-orange:#e76f51;--clay-red:#d62828;--cream:#1e1e1e;--warm-white:#1a1a1a;--soft-gray:#2a2a2a;--charcoal:#e0e0e0;--deep-forest:#1a3a1f;--nature-gradient:linear-gradient(135deg,var(--leaf-green) 0%,var(--moss-green) 50%,var(--forest-green) 100%);--earth-gradient:linear-gradient(45deg,var(--earth-brown) 0%,var(--bark-brown) 50%,var(--stone-gray) 100%);--sky-gradient:linear-gradient(180deg,var(--sky-blue) 0%,var(--warm-white) 100%);--font-primary:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-display:"Crimson Text",Georgia,serif;--spacing-xs:0.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--spacing-2xl:4rem;--shadow-soft:0 2px 8px rgba(45,80,22,.1);--shadow-medium:0 4px 16px rgba(45,80,22,.15);--shadow-strong:0 8px 32px rgba(45,80,22,.2);--shadow-organic:0 4px 20px rgba(74,124,89,.3);--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-organic:32px 24px 40px 16px;--transition-fast:0.2s ease-out;--transition-medium:0.4s ease-out;--transition-slow:0.6s ease-out;--transition-organic:0.5s cubic-bezier(0.4,0,0.2,1)}html{scroll-behavior:smooth}body{font-family:var(--font-primary);background:var(--warm-white);color:var(--charcoal);line-height:1.6;overflow-x:hidden}.app-container{min-height:100vh;background:linear-gradient(180deg,#1a1a1a,#2a2a2a 50%,#1e1e1e);position:relative}.app-container:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(167,201,87,.1) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(168,218,220,.1) 0,transparent 50%);pointer-events:none;z-index:-1}.main-content{position:relative}.page-container{opacity:0;transform:translateY(20px);transition:all var(--transition-slow)}.page-container.loaded{opacity:1;transform:translateY(0)}.intro-section{padding:var(--spacing-2xl) var(--spacing-md);text-align:center;position:relative;overflow:hidden}.intro-content{max-width:800px;margin:0 auto;position:relative;z-index:2}.intro-title{font-family:var(--font-display);font-size:3rem;color:var(--forest-green);margin-bottom:var(--spacing-md);font-weight:600}.intro-text{font-size:1.2rem;color:var(--moss-green);line-height:1.7;max-width:600px;margin:0 auto}.decorative-elements{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:1}.globe-marker{display:flex;flex-direction:column;align-items:center;pointer-events:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pulse-dot{width:14px;height:14px;box-shadow:0 0 12px var(--dot-color,orange);position:relative}.pulse-dot,.pulse-dot:after{border-radius:50%;background:var(--dot-color,orange)}.pulse-dot:after{content:"";position:absolute;inset:0;opacity:.6;animation:pulse 2.4s infinite}.globe-marker .label{margin-top:6px;padding:4px 10px;border-radius:10px;background:hsla(0,0%,100%,.18);color:#e0f7ff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid hsla(0,0%,100%,.35);font-size:14px;font-weight:500;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.3)}.floating-leaf{position:absolute;font-size:2rem;opacity:.6;animation:float 6s ease-in-out infinite}.leaf-1{top:20%;left:10%;animation-delay:0s}.leaf-2{top:60%;right:15%;animation-delay:2s}.leaf-3{bottom:20%;left:20%;animation-delay:4s}.comparison-feed{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}.comparison-item{margin-bottom:var(--spacing-2xl);background:hsla(0,0%,100%,.7);border-radius:var(--radius-organic);padding:var(--spacing-xl);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(167,201,87,.2);position:relative;overflow:hidden;transition:all var(--transition-medium)}.comparison-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-strong)}.comparison-item:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(167,201,87,.05) 0,transparent 70%);opacity:0;transition:opacity var(--transition-medium);pointer-events:none}.comparison-item:hover:before{opacity:1}.comparison-header{margin-bottom:var(--spacing-lg);text-align:center}.comparison-title{font-family:var(--font-display);font-size:2rem;color:var(--forest-green);margin-bottom:var(--spacing-sm);font-weight:600}.comparison-description{font-size:1.1rem;color:var(--moss-green);line-height:1.6;max-width:600px;margin:0 auto}.image-comparison-container{position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden;cursor:col-resize;box-shadow:var(--shadow-organic);background:#102a43;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:height var(--transition-medium),box-shadow var(--transition-medium),transform var(--transition-medium);touch-action:none}.image-comparison-container:hover{box-shadow:var(--shadow-strong)}.image-comparison-container.dragging{cursor:-webkit-grabbing;cursor:grabbing}.image-wrapper{position:absolute;top:0;left:0;width:100%;height:100%}.image-wrapper img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.after-image{z-index:2}.before-image{z-index:1}.image-label{position:absolute;top:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-md);background:rgba(0,0,0,.7);color:#fff;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-fast)}.after-label,.before-label{right:var(--spacing-md)}.after-label{background:rgba(74,124,89,.9)}.slider-handle{position:absolute;top:0;bottom:0;width:4px;z-index:10;transform:translateX(-2px);pointer-events:none}.handle-line{width:100%;height:100%;background:hsla(0,0%,100%,.9);box-shadow:0 0 8px rgba(0,0,0,.3)}.handle-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:var(--leaf-green);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-medium);border:3px solid #fff;transition:all var(--transition-fast);animation:slider-pulse 4s ease-in-out infinite}.image-comparison-container:hover .handle-circle{transform:translate(-50%,-50%) scale(1.1);background:var(--moss-green);animation:none}.image-comparison-container.dragging .handle-circle{animation:none}.handle-icon{display:flex;align-items:center;color:#fff;font-size:1.2rem}.handle-icon svg{width:12px;height:12px}.handle-icon svg:first-child{margin-right:-4px}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--warm-white);display:flex;align-items:center;justify-content:center;z-index:20;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.loading-spinner{display:flex;gap:8px}.spinner-dot{width:12px;height:12px;border-radius:50%;background:var(--moss-green);animation:dot-pulse 1s ease-in-out infinite}.spinner-dot:nth-child(2){animation-delay:.2s}.spinner-dot:nth-child(3){animation-delay:.4s}.interaction-hint{position:absolute;bottom:var(--spacing-md);left:50%;transform:translateX(-50%);background:rgba(0,0,0,.7);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);font-size:.9rem;display:flex;align-items:center;gap:var(--spacing-xs);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:1;transition:opacity var(--transition-medium);z-index:5}.image-comparison-container:hover .interaction-hint{opacity:0}@keyframes dot-pulse{0%{opacity:.3;transform:scale(1)}to{opacity:1;transform:scale(1.4)}}.hint-arrow{font-size:1.2rem;animation:pulse 2s ease-in-out infinite}.footer-section{padding:var(--spacing-2xl) var(--spacing-md);text-align:center;background:var(--nature-gradient);color:#fff;margin-top:var(--spacing-2xl)}.footer-content{max-width:800px;margin:0 auto}.footer-text{font-size:1.2rem;font-weight:500;opacity:.9}@keyframes gentle-sway{0%,to{transform:rotate(0deg)}25%{transform:rotate(2deg)}75%{transform:rotate(-2deg)}}@keyframes float{0%,to{transform:translateY(0) rotate(0deg);opacity:.6}50%{transform:translateY(-20px) rotate(5deg);opacity:.8}}@keyframes spin-grow{0%,to{transform:scale(1) rotate(0deg)}50%{transform:scale(1.2) rotate(180deg)}}@keyframes slider-pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@media (max-width:768px){.site-title{font-size:2rem}.intro-title{font-size:2.2rem}.intro-text{font-size:1.1rem}.comparison-item{padding:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.comparison-title{font-size:1.6rem}.comparison-description{font-size:1rem}.handle-circle{width:40px;height:40px}.floating-leaf{font-size:1.5rem}}@media (max-width:480px){:root{--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:2.5rem}.intro-title,.site-title{font-size:1.8rem}.intro-text{font-size:1rem}.comparison-item{padding:var(--spacing-md);border-radius:var(--radius-md)}.comparison-title{font-size:1.4rem}.handle-circle{width:36px;height:36px}.image-label,.interaction-hint{font-size:.8rem;padding:4px 8px}}.title-card{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;opacity:0;transition:all var(--transition-slow);pointer-events:none}.title-card.visible{opacity:1;pointer-events:auto}.title-card-content{background:hsla(0,0%,100%,.08);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-lg);padding:var(--spacing-2xl) var(--spacing-xl);border:1px solid hsla(0,0%,100%,.18);box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.2),inset 0 -1px 0 hsla(0,0%,100%,.1);position:relative;text-align:center;min-width:400px;max-width:90vw}.title-card-content:before{top:0;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4) 20%,hsla(0,0%,100%,.6) 50%,hsla(0,0%,100%,.4) 80%,transparent)}.title-card-content:after,.title-card-content:before{content:"";position:absolute;left:0;right:0;height:1px}.title-card-content:after{bottom:0;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2) 20%,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,.2) 80%,transparent)}.main-title{font-family:var(--font-display);font-size:3.5rem;font-weight:600;color:#fff;margin:0 0 var(--spacing-sm) 0;text-shadow:0 2px 8px rgba(0,0,0,.3);letter-spacing:-.02em}.main-subtitle{font-family:var(--font-primary);font-size:1.2rem;color:hsla(0,0%,100%,.85);margin:0 0 var(--spacing-lg) 0;font-weight:400;letter-spacing:.02em}.title-decoration{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.decoration-line{height:1px;width:60px;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.5) 50%,transparent)}.decoration-dot{width:8px;height:8px;border-radius:50%;background:hsla(0,0%,100%,.7);box-shadow:0 0 8px hsla(0,0%,100%,.3);animation:gentle-glow 3s ease-in-out infinite}@keyframes gentle-glow{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}@media (max-width:768px){.title-card-content{min-width:320px;padding:var(--spacing-xl) var(--spacing-lg)}.main-title{font-size:2.8rem}.main-subtitle{font-size:1.1rem}}@media (max-width:480px){.title-card-content{min-width:280px;padding:var(--spacing-lg) var(--spacing-md)}.main-title{font-size:2.2rem}.main-subtitle{font-size:1rem}.decoration-line{width:40px}}@media (prefers-contrast:high){:root{--forest-green:#1a3a1f;--moss-green:#2d5016;--charcoal:#000}.comparison-item{border:2px solid var(--forest-green)}.handle-circle{border-width:4px}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.page-container{opacity:1;transform:none}}