*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;min-height:100%;background-color:#0a0a0a;color:#e5e5e5;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}html{scrollbar-gutter:stable}body{line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*:focus{outline:none}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #667eea;outline-offset:2px}.main-title{text-align:center;font-size:3rem;margin-top:2rem;margin-bottom:1rem;background:linear-gradient(90deg,#5227ff,#ff9ffc,#b19eef);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.footer{position:relative;width:90%;height:390px;display:flex;justify-content:center;align-items:center;overflow:hidden;background:#0009;border:1px solid rgba(255,255,255,.1);margin-right:auto;margin-left:auto;border-radius:4rem;margin-bottom:3rem}.footer h1{font-size:2.5rem;color:#fff;text-align:center;z-index:9999;user-select:none;margin-bottom:0;display:inline-block;pointer-events:none}@media (max-width: 768px){.footer h1{font-size:1.8rem}}.credits-bar{display:flex;gap:1rem;justify-content:space-between;align-items:center;padding:15px 30px;background:#111;border-top:1px solid #333;color:#888;font-size:14px;margin-top:20px}.credits-left{display:flex;align-items:center;flex-wrap:wrap;gap:5px}.credits-right{font-size:13px;opacity:.8}.credits-bar a{color:#fff;text-decoration:underline;transition:color .3s ease}.heart{width:16px;height:16px;fill:#e74c3c;animation:heartbeat 1.5s ease-in-out infinite;display:inline-block;vertical-align:middle}@keyframes heartbeat{0%{transform:scale(1)}14%{transform:scale(1.2)}28%{transform:scale(1)}42%{transform:scale(1.2)}70%{transform:scale(1)}}@media (max-width: 768px){.credits-bar{flex-direction:column;gap:1rem;text-align:center;padding:20px 15px}.credits-right{font-size:12px}}.algorithm-description{max-width:1200px;margin:25px auto;padding:40px;background:#1a1a1a;border:1px solid #333;border-radius:16px;box-shadow:0 4px 6px #0000004d}.algorithm-description h2{text-align:center;font-size:2.5rem;margin-bottom:40px;background:linear-gradient(135deg,#5227ff,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.description-section{margin-bottom:35px;padding-bottom:25px;border-bottom:1px solid #2a2a2a}.description-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.description-section h3{color:#fff;font-size:1.6rem;margin-bottom:15px;font-weight:600}.description-section p{color:#b3b3b3;line-height:1.8;margin-bottom:15px;font-size:1.05rem}.description-section ul{list-style:none;padding-left:0;margin:15px 0}.description-section ul li{color:#b3b3b3;padding:10px 0 10px 30px;position:relative;line-height:1.6;font-size:1.05rem}.description-section ul li:before{content:"→";position:absolute;left:0;color:#5227ff;font-weight:700;font-size:1.2rem}.description-section strong{color:#fff;font-weight:600}@media (max-width: 768px){.algorithm-description{margin:40px 20px;padding:25px 20px}.algorithm-description h2{font-size:2rem;margin-bottom:30px}.description-section h3{font-size:1.4rem}.description-section p,.description-section ul li{font-size:1rem}}.extendible-hash-container{background-color:#0a0a0a;color:#e5e5e5;padding:20px;padding-bottom:4rem;font-family:Inter,SF Pro Display,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6}.extendible-hash-container h1{text-align:center;color:#fff;margin-bottom:30px;font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#5227ff,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.config-panel{background:#1a1a1a;border:1px solid #333;border-radius:12px;padding:20px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 6px #0000004d}.config-group{display:flex;gap:20px;flex-wrap:wrap}.config-panel label{display:flex;flex-direction:column;gap:5px;font-weight:500;color:#b3b3b3}.config-panel input{background:#2a2a2a;border:1px solid #444;border-radius:6px;padding:8px 12px;color:#e5e5e5;font-size:14px;width:80px;transition:all .2s ease}.config-panel input:focus{outline:none;border-color:#5227ff;box-shadow:0 0 0 2px #667eea33}.insert-panel{background:#1a1a1a;border:1px solid #333;border-radius:12px;padding:20px;box-shadow:0 4px 6px #0000004d;display:flex;flex-direction:column;gap:15px}.insert-panel form{display:flex;gap:15px;align-items:flex-start;flex-wrap:wrap}.input-container{display:flex;flex-direction:column;gap:10px;flex:1;min-width:300px}.hash-preview{background:#2a2a2a;border:1px solid #444;border-radius:6px;padding:12px;font-family:Monaco,Menlo,monospace;font-size:13px;animation:fadeIn .3s ease-in-out}.hash-preview .hash-value{margin-bottom:8px}.hash-preview .binary-form{margin-bottom:0}.hash-preview .label{color:#888}.hash-preview .value{color:#4ade80;font-weight:600}.hash-preview .binary{color:#8b5cf6;font-weight:600;letter-spacing:1px}.collision-message{margin-top:10px;padding:8px 12px;background:#dc26261a;border:1px solid #dc2626;border-radius:4px}.collision-text{color:#fca5a5;font-size:12px;font-weight:500}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.reset-btn{background:#dc3545;color:#fff;border:none;border-radius:6px;padding:10px 20px;cursor:pointer;font-weight:500;transition:all .2s ease;align-self:flex-end}.reset-btn:hover{background:#c82333;transform:translateY(-1px)}.insert-panel input{background:#2a2a2a;border:1px solid #444;border-radius:6px;padding:10px 15px;color:#e5e5e5;font-size:14px;min-width:120px;transition:all .2s ease}.insert-panel input:focus{outline:none;border-color:#5227ff;box-shadow:0 0 0 2px #5227ff33}.insert-panel button{background:linear-gradient(135deg,#5227ff,#764ba2);color:#fff;border:none;border-radius:6px;padding:10px 20px;cursor:pointer;font-weight:500;transition:all .2s ease}.insert-panel button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.insert-panel button:disabled{background:#555;cursor:not-allowed;opacity:.6}.visualization-container{display:flex;gap:40px;margin-bottom:30px;position:relative;align-items:flex-start}.connection-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.directory-section{flex:0 0 320px}.directory-section h3{color:#fff;margin-bottom:15px;font-size:1.3rem;font-weight:600}.directory{background:#1a1a1a;border:1px solid #333;border-radius:12px;padding:20px;box-shadow:0 4px 6px #0000004d}.directory-entry{display:flex;align-items:center;gap:10px;padding:12px 10px;border-bottom:1px solid #333;font-family:Monaco,Menlo,monospace;position:relative;transition:all .2s ease}.directory-entry:hover{background:#222;border-radius:6px}.directory-entry:last-child{border-bottom:none}.binary-addr{font-weight:600;color:#4ade80;min-width:60px;font-size:14px}.arrow{color:#5227ff;font-size:16px}.bucket-ref{color:#f59e0b;font-weight:500}.buckets-section{flex:1;position:relative}.buckets-section h3{color:#fff;margin-bottom:15px;font-size:1.3rem;font-weight:600}.buckets-container{display:flex;flex-direction:column;gap:20px;position:relative}.bucket{background:#1a1a1a;border:2px solid #333;border-radius:12px;padding:15px 20px;width:100%;max-width:600px;transition:all .3s ease;position:relative;overflow:hidden}.bucket:hover{border-color:#5227ff;box-shadow:0 4px 12px #667eea33}.bucket.splitting{animation:splitAnimation 1s ease-in-out;border-color:#f59e0b;position:relative;z-index:10}.bucket.splitting:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#f59e0b,#fbbf24,#f59e0b);border-radius:14px;z-index:-1;animation:splitGlow 1s ease-in-out}.bucket.newly-created{animation:newBucketAnimation 1s ease-in-out;border-color:#4ade80;position:relative;z-index:10}.bucket.newly-created:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#4ade80,#22c55e,#4ade80);border-radius:14px;z-index:-1;animation:newBucketGlow 1s ease-in-out}@keyframes newBucketAnimation{0%{transform:scale(.8) translateY(-10px);opacity:0;background:#1a1a1a;box-shadow:0 4px 12px #4ade804d}15%{transform:scale(1.08) translateY(0);opacity:1;background:#0a2a1a;box-shadow:0 8px 24px #4ade8099}30%{transform:scale(1.12);background:#0a3a1a;box-shadow:0 12px 36px #4ade80cc}50%{transform:scale(1.06);background:#0a2a1a;box-shadow:0 10px 30px #4ade80b3}70%{transform:scale(1.03);background:#0a1a1a;box-shadow:0 6px 18px #4ade8080}to{transform:scale(1);background:#1a1a1a;box-shadow:0 4px 12px #4ade804d}}@keyframes newBucketGlow{0%{opacity:0}50%{opacity:1}to{opacity:0}}@keyframes splitAnimation{0%{transform:scale(1) rotate(0);background:#1a1a1a;box-shadow:0 4px 12px #f59e0b4d}15%{transform:scale(1.08) rotate(-1deg);background:#2a1f0a;box-shadow:0 8px 24px #f59e0b99}30%{transform:scale(1.12) rotate(1deg);background:#3a2a0a;box-shadow:0 12px 36px #f59e0bcc}50%{transform:scale(1.06) rotate(-.5deg);background:#2a1f0a;box-shadow:0 10px 30px #f59e0bb3}70%{transform:scale(1.03) rotate(.3deg);background:#1f1a0a;box-shadow:0 6px 18px #f59e0b80}85%{transform:scale(1.01) rotate(-.1deg);background:#1a1a1a;box-shadow:0 4px 12px #f59e0b4d}to{transform:scale(1) rotate(0);background:#1a1a1a;box-shadow:0 4px 6px #0000004d}}@keyframes splitGlow{0%{opacity:0;background-size:200% 200%;background-position:0% 0%}50%{opacity:1;background-size:200% 200%;background-position:100% 100%}to{opacity:0;background-size:200% 200%;background-position:0% 0%}}.bucket-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #444}.bucket-id{font-weight:600;color:#f59e0b;font-size:14px}.local-depth{font-size:12px;color:#8b5cf6;background:#2a1a4a;padding:2px 8px;border-radius:4px;cursor:help;position:relative;transition:all .2s ease}.local-depth:hover{background:#3a2a5a;color:#a78bfa}.bucket-entries{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap}.entry{display:flex;align-items:center;flex-direction:column;padding:10px 15px;background:#2a2a2a;border-radius:6px;border-bottom:3px solid #4ade80;transition:all .2s ease;min-width:80px;text-align:center}.entry:hover{background:#333;transform:translateY(-2px)}.entry.empty{border-bottom-color:#444;background:#1a1a1a;opacity:.5}.entry .key{font-weight:600;color:#4ade80;font-family:Monaco,Menlo,monospace;font-size:18px;margin-bottom:4px}.entry .hash-info{color:#8b5cf6;margin-left:0;font-family:Monaco,Menlo,monospace;font-size:11px;opacity:.8;white-space:nowrap}.info-panel{background:#1a1a1a;border:1px solid #333;border-radius:12px;padding:20px;box-shadow:0 4px 6px #0000004d}.info-panel h3{color:#fff;margin-bottom:15px;font-size:1.3rem;font-weight:600;margin-top:0}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.info-grid>div{background:#2a2a2a;padding:10px 15px;border-radius:6px;border-left:3px solid #5227FF;font-family:Monaco,Menlo,monospace;font-size:14px}@media (max-width: 1024px){.visualization-container{flex-direction:row;gap:20px}.directory-section{flex:0 0 200px}.buckets-section{flex:1}.bucket{max-width:100%}}@media (max-width: 768px){.extendible-hash-container h1{font-size:2rem}.config-group{flex-direction:column;gap:15px}.config-panel{flex-direction:column;gap:20px}.visualization-container{flex-direction:row;gap:15px}.directory-section{flex:0 0 150px}.directory-section h3,.buckets-section h3{font-size:1rem}.directory{padding:10px}.directory-entry{padding:8px 5px;font-size:12px}.binary-addr{font-size:12px;min-width:40px}.bucket-ref{font-size:11px}.arrow{font-size:12px}.bucket{padding:10px 12px}.bucket-header,.bucket-id{font-size:12px}.local-depth{font-size:10px;padding:2px 6px}.insert-panel form{flex-direction:column;align-items:stretch}.bucket-entries{flex-direction:column;gap:6px}.entry{flex-direction:row;border-bottom:none;border-left:3px solid #4ade80;min-width:auto;width:100%;padding:6px 10px}.entry.empty{border-left-color:#444}.entry .key{margin-bottom:0;margin-right:8px;font-size:14px}.entry .hash-info{font-size:10px}.info-grid{grid-template-columns:1fr}.info-panel{padding:15px}.info-panel h3{font-size:1.1rem}.info-grid>div{font-size:12px;padding:8px 12px}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#444;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}::selection{background:#667eea4d;color:#fff}.liquid-ether-container{position:relative;overflow:hidden;width:100%;height:100%;touch-action:none}