*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#1a1a2e;background:#f8f9fa}.container{max-width:800px;margin:0 auto;padding:0 1.5rem}.hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:3rem 0;text-align:center}.hero-top{display:flex;justify-content:center;align-items:center;gap:1rem}.hero h1{font-size:2rem;font-weight:700}.hero-subtitle{margin-top:.5rem;opacity:.9;font-size:1.1rem}.lang-toggle{display:flex;gap:2px;background:#fff3;border-radius:6px;padding:2px}.lang-btn{padding:.25rem .6rem;border:none;border-radius:4px;background:transparent;color:#ffffffb3;font-size:.75rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s}.lang-btn.active{background:#ffffff4d;color:#fff}.lang-btn:hover:not(.active){color:#fff}.nav{background:#fff;border-bottom:1px solid #e2e8f0;padding:.75rem 0;position:sticky;top:0;z-index:10}.nav .container{display:flex;gap:1.5rem;justify-content:center}.nav a{color:#667eea;text-decoration:none;font-weight:500;font-size:.9rem}.nav a:hover{text-decoration:underline}.section{padding:3rem 0}.section-alt{background:#f0f0f5}.section h2{font-size:1.5rem;margin-bottom:.5rem;color:#1a1a2e}.section-description{color:#555;margin-bottom:1.5rem}.demo-area{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000000f}.demo-input{margin-bottom:1rem}.demo-controls{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.btn-primary,.btn-secondary{padding:.5rem 1rem;border:none;border-radius:6px;font-size:.875rem;cursor:pointer;transition:opacity .15s}.btn-primary{background:#667eea;color:#fff}.btn-secondary{background:#e2e8f0;color:#4a5568}.btn-primary:hover,.btn-secondary:hover{opacity:.85}.value-display{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.value-display-label{background:#f7fafc;padding:.5rem .75rem;font-size:.8rem;font-weight:600;color:#718096;border-bottom:1px solid #e2e8f0}.value-display-content{padding:.75rem;font-size:.85rem;line-height:1.5;white-space:pre-wrap;word-break:break-all}.event-log{margin-top:1rem;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.event-log-label{background:#f7fafc;padding:.5rem .75rem;font-size:.8rem;font-weight:600;color:#718096;border-bottom:1px solid #e2e8f0}.event-log-entry{padding:.25rem .75rem;font-size:.8rem;font-family:monospace;color:#4a5568;border-bottom:1px solid #f0f0f5}.event-log-entry:last-child{border-bottom:none}form{display:flex;flex-direction:column;gap:1.25rem}.form-field{display:flex;flex-direction:column;gap:.4rem}.form-field label{font-weight:600;font-size:.9rem;color:#2d3748}.form-field input[type=text]{padding:.5rem .75rem;border:1px solid #cbd5e0;border-radius:6px;font-size:.9rem}.form-actions{display:flex;gap:.5rem;margin-top:.5rem}.form-result{margin-top:1.5rem;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.form-result-label{background:#f7fafc;padding:.5rem .75rem;font-size:.8rem;font-weight:600;color:#718096;border-bottom:1px solid #e2e8f0}.form-result-entries{padding:.75rem}.form-result-entry{margin-bottom:.75rem}.form-result-entry:last-child{margin-bottom:0}.form-result-key{display:inline-block;background:#edf2f7;padding:.15rem .5rem;border-radius:4px;font-size:.8rem;font-weight:600;color:#4a5568;margin-bottom:.25rem}.form-result-value{font-size:.85rem;line-height:1.4;white-space:pre-wrap;word-break:break-all;color:#2d3748}.gradient-comparison{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}.gradient-panel{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000000f}.gradient-panel h3{font-size:1rem;font-weight:600;margin-bottom:1rem;color:#4a5568}.intensity-control{display:flex;align-items:center;gap:1rem;padding:1rem;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000000f}.intensity-control label{font-size:.85rem;font-weight:500;color:#718096;white-space:nowrap}.intensity-control input[type=range]{flex:1;accent-color:#667eea}.intensity-value{font-family:monospace;font-size:.85rem;color:#667eea;font-weight:600;min-width:2.5em;text-align:right}.range-only-comparison{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.range-only-panel{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000000f}.range-only-panel h3{font-size:1rem;font-weight:600;margin-bottom:1rem;color:#4a5568}.use-case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.use-case-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000000f}.use-case-card h3{font-size:1rem;font-weight:600;margin-bottom:.25rem;color:#1a1a2e}.use-case-description{font-size:.85rem;color:#718096;margin-bottom:1rem}.use-case-result{margin-top:1rem;padding:1rem;background:#f7fafc;border-radius:8px;text-align:center}.use-case-label{font-size:.85rem;color:#718096;margin-right:.5rem}.use-case-formatted{font-size:1.1rem;font-weight:600;color:#667eea}.footer{text-align:center;padding:2rem 0;color:#a0aec0;font-size:.85rem}@media(max-width:640px){.hero h1{font-size:1.5rem}.container{padding:0 1rem}.demo-area{padding:1rem}.gradient-comparison,.range-only-comparison,.use-case-grid{grid-template-columns:1fr}}