:root{--primary:#2d1b4e;--primary-light:#4a3469;--primary-dark:#1a0f2e;--bg-main:#f0f2f5;--bg-secondary:#e8eaed;--tile-bg:#fff;--text-primary:#2d1b4e;--text-secondary:#555;--text-muted:#7f8c8d;--border-color:#e0e0e0;--success:#2ecc71;--error:#e74c3c;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text-primary);background-color:var(--bg-main);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:clamp(14px,1.5vw,16px);font-weight:400;line-height:1.5}body{min-width:320px;min-height:100vh;margin:0}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{color:var(--text-primary)}a{color:var(--primary);font-weight:500;text-decoration:none}a:hover{color:var(--primary-light)}button,input,select,textarea{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}::-webkit-scrollbar-thumb{background:#9b8bb3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary-light)}.sequence-input-container{background:var(--tile-bg);border:1px solid #2d1b4e0d;border-radius:clamp(12px,3vw,20px);margin-bottom:clamp(16px,4vw,28px);padding:clamp(16px,4vw,32px);box-shadow:0 8px 32px #2d1b4e1a}.sequence-input-container h2{color:var(--text-primary);margin-top:0;margin-bottom:clamp(16px,3vw,24px);font-size:clamp(1.2rem,3vw,1.6rem);font-weight:700}.sequence-input-container h3{color:var(--text-primary);border-bottom:2px solid var(--bg-secondary);margin-top:0;margin-bottom:18px;padding-bottom:10px;font-size:1.15rem;font-weight:600}.sequence-type-selector{align-items:center;gap:16px;margin-bottom:16px;display:flex}.sequence-type-selector label{color:#555;font-weight:500}.radio-group{gap:20px;display:flex}.radio-group label{cursor:pointer;align-items:center;gap:6px;display:flex}.sequence-inputs{flex-direction:column;gap:16px;display:flex}.input-group label{color:#555;font-weight:500}.input-group input{border:2px solid var(--border-color);letter-spacing:2px;background:var(--bg-secondary);border-radius:12px;padding:14px 18px;font-family:Courier New,monospace;font-size:16px;transition:all .3s cubic-bezier(.4,0,.2,1)}.input-group input:focus{border-color:var(--primary);background:var(--tile-bg);outline:none;box-shadow:0 0 0 4px #2d1b4e26}.input-group input.error{border-color:var(--error);box-shadow:0 0 0 4px #e74c3c1a}.error-message{color:#e74c3c;margin-top:4px;font-size:12px}.example-btn{border:2px solid var(--primary);cursor:pointer;color:var(--primary);background:0 0;border-radius:6px;margin-top:12px;padding:8px 16px;font-size:14px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}.example-btn:hover{background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #2d1b4e33}.algorithm-section{margin-bottom:24px}.algorithm-selector{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:clamp(12px,2vw,16px);display:grid}.algorithm-option{border:2px solid var(--border-color);cursor:pointer;background:var(--bg-secondary);border-radius:clamp(10px,2vw,16px);align-items:flex-start;gap:clamp(10px,2vw,14px);padding:clamp(12px,3vw,20px);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.algorithm-option:hover{border-color:var(--primary-light);background:var(--tile-bg);transform:translateY(-2px);box-shadow:0 6px 20px #2d1b4e1a}.algorithm-option.selected{border-color:var(--primary);background:var(--tile-bg);box-shadow:0 6px 24px #2d1b4e26}.algorithm-option input{accent-color:var(--primary);margin-top:4px}.algorithm-info{flex:1}.algorithm-info strong{color:var(--text-primary);margin-bottom:4px;display:block}.algorithm-info span{color:var(--text-muted);margin-bottom:8px;font-size:12px;display:block}.algorithm-info p{color:#666;margin:0;font-size:13px}.scoring-section{margin-bottom:24px}.scoring-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;display:grid}.score-input{flex-direction:column;gap:6px;display:flex}.score-input label{color:#555;font-size:14px;font-weight:500}.score-input input{border:2px solid var(--border-color);text-align:center;border-radius:6px;padding:10px 12px;font-size:16px;transition:border-color .2s}.score-input input:focus{border-color:var(--primary);outline:none}.align-btn{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:1px;border:none;border-radius:14px;width:100%;padding:16px 28px;font-size:17px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.align-btn:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.align-btn:hover{transform:translateY(-3px);box-shadow:0 8px 24px #2d1b4e59}.align-btn:hover:before{left:100%}.align-btn:active{transform:translateY(-1px)}.matrix-container{background:var(--tile-bg);border:1px solid #2d1b4e0d;border-radius:clamp(12px,3vw,20px);padding:clamp(16px,3vw,28px);overflow:hidden;box-shadow:0 8px 32px #2d1b4e1a}.matrix-wrapper{margin-bottom:20px;overflow-x:auto}.alignment-matrix{border-collapse:collapse;table-layout:fixed;margin:0 auto;font-family:Courier New,monospace;display:table}.alignment-matrix thead{display:table-header-group}.alignment-matrix tbody{display:table-row-group}.alignment-matrix tr{display:table-row}.alignment-matrix th,.alignment-matrix td{text-align:center;vertical-align:middle;border:1px solid #ddd;width:clamp(40px,8vw,60px);min-width:clamp(40px,8vw,60px);height:clamp(40px,8vw,60px);display:table-cell}.corner-cell{background:var(--bg-secondary)}.header-cell,.row-header{color:var(--text-primary);background:#2d1b4e1a;font-weight:600}.seq-char{color:var(--primary);font-size:clamp(14px,2.5vw,18px)}.matrix-cell{background:var(--tile-bg);transition:all .3s;position:relative}.matrix-cell:hover{z-index:1;background:#2d1b4e0d;transform:scale(1.05);box-shadow:0 2px 8px #2d1b4e26}.matrix-cell.on-path{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff}.matrix-cell.on-path .cell-score{color:#fff;font-weight:700}.matrix-cell.on-path .cell-arrow{color:#ffffffe6}.matrix-cell.outside-band{color:#ccc;background:#f5f5f5}.matrix-cell.outside-band .cell-score{color:#ccc}.matrix-cell.filled{animation:.3s ease-out fillCell}.matrix-cell.current-step{animation:.5s ease-in-out pulseCell;background:#fff3cd!important;border:2px solid #ffc107!important}.matrix-cell.unfilled{background:#f8f9fa}.matrix-cell.unfilled .cell-empty{color:#ccc;font-style:italic}@keyframes pulseCell{0%{transform:scale(1);box-shadow:0 0 #ffc107b3}50%{transform:scale(1.05);box-shadow:0 0 0 6px #ffc10700}to{transform:scale(1);box-shadow:0 0 #ffc10700}}@keyframes fillCell{0%{background:#fff9c4;transform:scale(1.1)}to{background:#fff;transform:scale(1)}}.cell-content{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.cell-score{color:var(--text-primary);font-size:clamp(12px,2vw,16px);font-weight:600}.cell-arrow{color:var(--text-muted);margin-top:2px;font-size:14px}.matrix-legend{border-top:1px solid #eee;flex-wrap:wrap;justify-content:center;gap:20px;padding-top:16px;display:flex}.legend-color{border:1px solid #ddd;border-radius:4px;width:24px;height:24px}.legend-color.on-path{background:linear-gradient(135deg,var(--primary),var(--primary-light))}.legend-color.current-step{background:#fff3cd;border:2px solid #ffc107}.legend-color.outside-band{background:var(--bg-secondary)}.arrow-legend{color:#666;font-size:13px}.result-container{background:var(--tile-bg);border:1px solid #2d1b4e0d;border-radius:clamp(12px,3vw,20px);padding:clamp(16px,3vw,28px);box-shadow:0 8px 32px #2d1b4e1a}.result-container h2{color:var(--text-primary);margin-top:0;margin-bottom:clamp(16px,3vw,24px);font-size:clamp(1.1rem,3vw,1.5rem);font-weight:700}.result-header{border-bottom:2px solid var(--bg-secondary);justify-content:space-between;align-items:center;margin-bottom:28px;padding-bottom:20px;display:flex}.algorithm-badge{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-radius:50px;padding:10px 20px;font-size:14px;font-weight:600;box-shadow:0 4px 12px #2d1b4e33}.score-display{align-items:center;gap:10px;display:flex}.score-label{color:var(--text-muted);font-size:14px;font-weight:500}.score-value{color:var(--success);text-shadow:0 2px 8px #2ecc7133;font-size:clamp(1.5rem,4vw,2rem);font-weight:800}.alignment-display{background:linear-gradient(135deg,var(--bg-secondary),#2d1b4e08);border:1px solid #2d1b4e0d;border-radius:clamp(10px,2vw,16px);margin-bottom:clamp(16px,4vw,28px);padding:clamp(12px,3vw,24px);overflow-x:auto}.sequence-row,.match-row{align-items:center;margin-bottom:4px;display:flex}.sequence-label{color:#555;flex-shrink:0;width:60px;font-size:14px;font-weight:600}.sequence-chars{font-family:Courier New,monospace;font-size:18px;display:flex}.seq-char{border-radius:4px;justify-content:center;align-items:center;width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);margin:1px;font-size:clamp(12px,2vw,16px);font-weight:600;transition:transform .2s;display:flex}.seq-char:hover{z-index:1;transform:scale(1.2)}.seq-char.match{color:#155724;background:#d4edda}.seq-char.mismatch{color:#721c24;background:#f8d7da}.seq-char.gap{color:#383d41;background:#e2e3e5}.match-char{color:#2ecc71;justify-content:center;align-items:center;width:28px;height:16px;margin:1px;font-weight:700;display:flex}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(min(100px,100%),1fr));gap:clamp(8px,2vw,16px);margin-bottom:clamp(12px,3vw,20px);display:grid}@media (max-width:768px){.stats-grid{grid-template-columns:repeat(3,1fr)}}.stat-item{text-align:center;background:linear-gradient(135deg,var(--bg-secondary),#2d1b4e05);border:1px solid #2d1b4e0d;border-radius:14px;padding:20px 16px;transition:all .3s cubic-bezier(.4,0,.2,1)}.stat-item:hover{transform:translateY(-3px);box-shadow:0 6px 20px #2d1b4e1a}.stat-value{margin-bottom:clamp(4px,1vw,6px);font-size:clamp(1.25rem,4vw,1.75rem);font-weight:800;display:block}.stat-value.matches{color:var(--success)}.stat-value.mismatches{color:var(--error)}.stat-value.gaps{color:var(--text-muted)}.stat-value.identity{color:var(--primary)}.stat-value.coverage{color:var(--primary-light)}.stat-label{color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px;font-size:12px}.legend{border-top:1px solid #eee;justify-content:center;gap:24px;padding-top:16px;display:flex}.legend-color{border-radius:4px;width:20px;height:20px}.legend-color.match{background:#d4edda}.legend-color.mismatch{background:#f8d7da}.legend-color.gap{background:#e2e3e5}.step-visualizer{background:var(--tile-bg);border:1px solid #2d1b4e0d;border-radius:clamp(12px,3vw,20px);padding:clamp(16px,3vw,28px);box-shadow:0 8px 32px #2d1b4e1a}.step-visualizer h3{color:var(--text-primary);margin-top:0;margin-bottom:clamp(16px,3vw,24px);font-size:clamp(1rem,2.5vw,1.25rem);font-weight:700}.controls{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;display:flex}.control-btn{border:2px solid var(--border-color);background:var(--tile-bg);cursor:pointer;color:var(--text-secondary);border-radius:clamp(8px,2vw,12px);padding:clamp(8px,2vw,12px) clamp(12px,2.5vw,18px);font-size:clamp(12px,2vw,14px);font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}.control-btn:hover:not(:disabled){background:var(--bg-secondary);border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #2d1b4e1a}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn.play-btn{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-color:#0000;min-width:110px;box-shadow:0 4px 16px #2d1b4e33}.control-btn.play-btn:hover{background:linear-gradient(135deg,var(--primary-light),var(--primary));color:#fff;border-color:#0000;box-shadow:0 6px 20px #2d1b4e4d}.progress-section{margin-bottom:16px}.progress-slider{appearance:none;background:var(--border-color);cursor:pointer;border-radius:4px;outline:none;width:100%;height:8px}.progress-slider::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;border-radius:50%;width:20px;height:20px;transition:transform .2s}.progress-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.progress-slider::-moz-range-thumb{background:var(--primary);cursor:pointer;border:none;border-radius:50%;width:20px;height:20px}.progress-info{text-align:center;color:#7f8c8d;margin-top:8px;font-size:14px}.speed-control{justify-content:center;align-items:center;gap:12px;margin-bottom:20px;display:flex}.speed-control label{color:#555;font-weight:500}.speed-control select{cursor:pointer;border:2px solid #e0e0e0;border-radius:6px;padding:8px 12px;font-size:14px}.step-details{background:linear-gradient(135deg,var(--bg-secondary),#2d1b4e08);border:1px solid #2d1b4e0d;border-radius:clamp(10px,2vw,14px);margin-top:clamp(12px,3vw,20px);padding:clamp(16px,3vw,24px)}.step-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:14px;display:flex}.step-position{color:var(--text-primary);font-size:17px;font-weight:700}.step-score{background:var(--primary);color:#fff;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:700;box-shadow:0 2px 8px #2d1b4e33}.step-explanation{color:#555;margin-bottom:16px;font-size:15px}.cells-considered{margin-bottom:16px}.cells-considered h4{color:var(--text-primary);margin:0 0 12px;font-size:14px}.cell-option{background:var(--tile-bg);border:2px solid var(--border-color);border-radius:6px;align-items:center;gap:12px;margin-bottom:8px;padding:10px 14px;font-family:Courier New,monospace;font-size:13px;display:flex}.cell-option.selected{border-color:var(--primary);background:#2d1b4e1a}.option-source{color:var(--text-secondary);min-width:80px;font-weight:600}.option-operation{color:#777;flex:1}.option-value{color:var(--text-primary);font-weight:600}.chosen-direction{color:var(--primary);text-transform:capitalize;background:#2d1b4e1a;border-radius:6px;padding:12px}*{box-sizing:border-box;margin:0;padding:0}.homepage{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.navbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#1a1f3af2;padding:clamp(.75rem,2vw,1rem) clamp(1rem,3vw,2rem);position:fixed;top:0;left:0;right:0;box-shadow:0 2px 10px #0000001a}.nav-container{justify-content:space-between;align-items:center;max-width:min(1200px,95vw);margin:0 auto;display:flex}.nav-logo{color:#fff;font-size:clamp(1.1rem,3vw,1.5rem);font-weight:700}.nav-links{align-items:center;gap:clamp(1rem,3vw,2rem);display:flex}.nav-link{color:#ffffffe6;font-weight:500;text-decoration:none;transition:color .3s}.nav-link:hover{color:#fff}.nav-menu-button{color:#fff;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:.5rem;transition:opacity .3s;display:flex}.nav-menu-button:hover{opacity:.8}.hero-section{background:linear-gradient(135deg,#1a1f3a 0%,#2d1b4e 50%,#1a2b4a 100%);justify-content:center;align-items:center;min-height:100vh;padding:80px 2rem 2rem;display:flex;position:relative;overflow:hidden}.hero-section:before{content:"";opacity:.4;pointer-events:none;background:url("data:image/svg+xml,<svg width=\"800\" height=\"800\" viewBox=\"0 0 800 800\" xmlns=\"http://www.w3.org/2000/svg\"><defs><linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" style=\"stop-color:rgb(64,224,208);stop-opacity:0.3\" /><stop offset=\"100%\" style=\"stop-color:rgb(138,43,226);stop-opacity:0.2\" /></linearGradient></defs><path d=\"M 400 100 Q 500 200 400 300 T 400 500 T 400 700\" stroke=\"url(%23grad1)\" stroke-width=\"40\" fill=\"none\" opacity=\"0.6\"/><ellipse cx=\"400\" cy=\"200\" rx=\"150\" ry=\"80\" fill=\"url(%23grad1)\" opacity=\"0.3\"/><ellipse cx=\"400\" cy=\"400\" rx=\"150\" ry=\"80\" fill=\"url(%23grad1)\" opacity=\"0.3\"/><ellipse cx=\"400\" cy=\"600\" rx=\"150\" ry=\"80\" fill=\"url(%23grad1)\" opacity=\"0.3\"/></svg>") 50%/contain no-repeat;width:800px;height:800px;position:absolute;top:-50%;right:-10%;transform:rotate(-20deg)}.hero-section:after{content:"";opacity:.3;pointer-events:none;background:url("data:image/svg+xml,<svg width=\"600\" height=\"600\" viewBox=\"0 0 600 600\" xmlns=\"http://www.w3.org/2000/svg\"><defs><linearGradient id=\"grad2\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" style=\"stop-color:rgb(64,224,208);stop-opacity:0.25\" /><stop offset=\"100%\" style=\"stop-color:rgb(138,43,226);stop-opacity:0.15\" /></linearGradient></defs><path d=\"M 300 50 Q 400 150 300 250 T 300 450 T 300 650\" stroke=\"url(%23grad2)\" stroke-width=\"35\" fill=\"none\" opacity=\"0.5\"/><ellipse cx=\"300\" cy=\"150\" rx=\"120\" ry=\"60\" fill=\"url(%23grad2)\" opacity=\"0.25\"/><ellipse cx=\"300\" cy=\"350\" rx=\"120\" ry=\"60\" fill=\"url(%23grad2)\" opacity=\"0.25\"/><ellipse cx=\"300\" cy=\"550\" rx=\"120\" ry=\"60\" fill=\"url(%23grad2)\" opacity=\"0.25\"/></svg>") 50%/contain no-repeat;width:600px;height:600px;position:absolute;bottom:-30%;left:-5%;transform:rotate(15deg)}.hero-content{z-index:1;text-align:center;max-width:min(900px,90vw);position:relative}.hero-title{color:#fff;text-shadow:0 2px 20px #0000004d;margin-bottom:1rem;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;line-height:1.2}.hero-subtitle{color:#ffffffd9;margin-bottom:3rem;font-size:clamp(1rem,2vw,1.5rem);font-weight:300}.concepts-section{background:linear-gradient(#f0f2f5,#e8eaed);align-items:center;min-height:100vh;padding:clamp(3rem,8vw,6rem) clamp(1rem,3vw,2rem);display:flex}.concepts-container{width:100%;max-width:min(1200px,95vw);margin:0 auto}.concepts-title{color:#1a1f3a;text-align:center;margin-bottom:1rem;font-size:clamp(2rem,4vw,3rem);font-weight:700}.concepts-subtitle{color:#666;text-align:center;margin-bottom:4rem;font-size:clamp(1rem,2vw,1.3rem);font-weight:400}.concepts-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(1rem,3vw,2rem);margin-top:clamp(1.5rem,4vw,3rem);display:grid}.concept-card{text-align:center;background:#fff;border-radius:clamp(12px,3vw,20px);flex-direction:column;align-items:center;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2rem);transition:all .3s;display:flex;box-shadow:0 4px 20px #00000014}.concept-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px #00000026}.concept-icon{justify-content:center;align-items:center;height:clamp(60px,15vw,100px);margin-bottom:clamp(1rem,2vw,1.5rem);font-size:clamp(2.5rem,6vw,4rem);display:flex}.concept-title{color:#1a1f3a;margin-bottom:clamp(.5rem,2vw,1rem);font-size:clamp(1.1rem,3vw,1.5rem);font-weight:600}.concept-description{color:#666;flex-grow:1;margin-bottom:2rem;font-size:1rem;line-height:1.6}.learn-more-button{color:#4a5fd9;cursor:pointer;background:0 0;border:2px solid #4a5fd9;border-radius:50px;padding:clamp(.625rem,2vw,.875rem) clamp(1.5rem,4vw,2.5rem);font-size:clamp(.85rem,2vw,1rem);font-weight:500;transition:all .3s}.learn-more-button:hover{color:#fff;background:#4a5fd9;transform:scale(1.05)}.learn-more-button:active{transform:scale(.98)}@media (max-width:768px){.nav-link{font-size:.9rem}.hero-section{min-height:80vh;padding-top:70px}.concepts-section{padding:4rem 1rem}.concept-description{margin-bottom:1.5rem;font-size:.95rem}}@media (max-width:600px){.nav-links{gap:.75rem}.nav-link{font-size:.8rem}.hero-section:before,.hero-section:after{display:none}.hero-subtitle,.concepts-subtitle{margin-bottom:2rem}}@media (max-width:480px){.navbar{padding:.5rem .75rem}.nav-links{display:none}.hero-section{padding:60px 1rem 1rem}.concept-card{padding:1.25rem 1rem}.concepts-section{padding:2rem .75rem}}.hero-section .sparkle{opacity:.6;width:60px;height:60px;position:absolute;bottom:5%;right:5%}.about-section{text-align:center;background:linear-gradient(135deg,#1a1f3a 0%,#2d3561 100%);padding:clamp(3rem,8vw,5rem) clamp(1rem,4vw,2rem)}.about-container{max-width:min(800px,90vw);margin:0 auto}.about-title{color:#fff;margin-bottom:clamp(1rem,3vw,1.5rem);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700}.about-description{color:#ffffffd9;margin-bottom:clamp(1rem,2vw,1.5rem);font-size:clamp(.9rem,2vw,1.1rem);line-height:1.8}.about-credits{color:#8ab4f8e6;margin-top:clamp(1rem,2vw,1.5rem);margin-bottom:clamp(1.5rem,3vw,2rem);font-size:clamp(.85rem,1.8vw,1rem);font-style:italic}.contributors-grid{flex-wrap:wrap;justify-content:center;gap:clamp(1rem,3vw,1.5rem);max-width:500px;margin:0 auto;display:flex}.contributor-card{background:#ffffff14;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;align-items:center;gap:.5rem;width:clamp(140px,40%,180px);padding:clamp(.75rem,2vw,1rem);text-decoration:none;transition:all .3s;display:flex}.contributor-card:hover{background:#ffffff26;border-color:#8ab4f866;transform:translateY(-4px);box-shadow:0 8px 24px #0000004d}.contributor-avatar{color:#fff;text-transform:uppercase;background:linear-gradient(135deg,#4a90d9,#8ab4f8);border-radius:50%;justify-content:center;align-items:center;width:clamp(48px,10vw,60px);height:clamp(48px,10vw,60px);font-size:clamp(1rem,2.5vw,1.25rem);font-weight:700;display:flex}.contributor-name{color:#ffffffe6;text-align:center;font-size:clamp(.8rem,1.8vw,.95rem);font-weight:500}.footer{text-align:center;background:#0d1025;border-top:1px solid #ffffff1a;padding:clamp(1rem,3vw,1.5rem) clamp(1rem,4vw,2rem)}.footer-container{max-width:min(1200px,95vw);margin:0 auto}.copyright{color:#fff9;font-size:clamp(.75rem,1.5vw,.9rem)}@media (max-width:480px){.about-section{padding:2rem 1rem}.contributors-grid{gap:.75rem}.contributor-card{width:calc(50% - .5rem);min-width:120px}.footer{padding:.75rem 1rem}}.scoring-matrix-page{background:linear-gradient(135deg,#f8f9fc 0%,#e8eaed 100%);flex-direction:column;min-height:100vh;display:flex}.page-header{color:#fff;text-align:center;background:linear-gradient(135deg,#1a1f3a 0%,#2d1b4e 50%,#1a2b4a 100%);padding:clamp(24px,5vw,48px) clamp(16px,4vw,24px);position:relative;overflow:hidden}.page-header:before{content:"";pointer-events:none;background:radial-gradient(circle at 20%,#ffffff1a 0%,#0000 50%),radial-gradient(circle at 80%,#ffffff14 0%,#0000 50%);position:absolute;inset:0}.page-header .header-content{z-index:1;position:relative}.page-header h1{color:#fff;text-shadow:0 2px 10px #0003;margin:0 0 12px;font-size:clamp(1.5rem,5vw,2.5rem);font-weight:800}.page-header .subtitle{color:#ffffffe6;margin:0 0 20px;font-size:1.15rem;font-weight:400}.page-main{flex:1;width:100%;max-width:min(1200px,95vw);margin:0 auto;padding:clamp(16px,4vw,32px) clamp(12px,3vw,24px)}.tab-navigation{justify-content:center;gap:16px;margin-bottom:32px;display:flex}.tab-button{color:#2d1b4e;cursor:pointer;background:#fff;border:2px solid #2d1b4e;border-radius:50px;align-items:center;gap:10px;padding:clamp(12px,2vw,16px) clamp(20px,4vw,32px);font-size:clamp(.85rem,2vw,1rem);font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 2px 8px #2d1b4e1a}.tab-button:hover{background:#2d1b4e14;transform:translateY(-2px);box-shadow:0 4px 12px #2d1b4e26}.tab-button.active{color:#fff;background:linear-gradient(135deg,#2d1b4e,#4a2d6e);box-shadow:0 4px 16px #2d1b4e4d}.tab-icon{font-size:1.25rem}.matrix-section{background:#fff;border-radius:clamp(12px,3vw,20px);margin-bottom:clamp(16px,4vw,32px);padding:clamp(20px,4vw,40px);box-shadow:0 4px 20px #00000014}.section-intro{text-align:center;margin-bottom:clamp(24px,5vw,40px)}.section-intro h2{color:#1a1f3a;margin-bottom:clamp(10px,2vw,16px);font-size:clamp(1.25rem,4vw,2rem)}.section-intro p{color:#555;max-width:min(800px,95%);margin:0 auto;font-size:clamp(.9rem,2vw,1.1rem);line-height:1.7}.scoring-matrix-page .step-content{background:linear-gradient(135deg,#f8f9fc 0%,#f0f2f5 100%);border-radius:clamp(12px,2vw,16px);align-items:stretch;margin-bottom:clamp(16px,3vw,24px);padding:clamp(16px,3vw,32px);flex-direction:column!important;display:flex!important}.scoring-matrix-page .step-content>*{flex-shrink:0}.scoring-matrix-page .step-title-row{width:100%;margin-bottom:16px;display:block}.scoring-matrix-page .step-title-row h3{color:#1a1f3a;margin:0;font-size:clamp(1.1rem,3vw,1.5rem);font-weight:700}.scoring-matrix-page .step-description{background:#fff;border-left:4px solid #2d1b4e;border-radius:10px;width:100%;margin-bottom:24px;padding:clamp(12px,2vw,20px);display:block;box-shadow:0 2px 12px #0000000f}.scoring-matrix-page .step-description p{color:#444;margin:0;font-size:clamp(.95rem,2vw,1.05rem);line-height:1.7}.scoring-matrix-page .step-visual{width:100%;margin-top:8px;display:block}.step-header{text-align:center;margin-bottom:32px}.step-header h3{color:#1a1f3a;margin-bottom:12px;font-size:1.5rem}.step-header p{color:#555;max-width:700px;margin:0 auto;font-size:1rem;line-height:1.6}.visual-container{background:#fff;border-radius:clamp(8px,2vw,12px);flex-direction:column;padding:clamp(16px,3vw,28px);display:flex;box-shadow:0 2px 12px #0000000f}.visual-container h4{color:#1a1f3a;text-align:center;margin-bottom:clamp(10px,2vw,16px);font-size:clamp(1rem,2.5vw,1.25rem)}.visual-subtitle{text-align:center;color:#666;margin-bottom:24px;font-size:.95rem}.example-sequences{margin:24px 0}.seq-alignment-box{background:#1a1f3a;border-radius:clamp(8px,2vw,12px);padding:clamp(12px,3vw,24px);font-family:Monaco,Menlo,Consolas,monospace;overflow-x:auto}.position-header{gap:0;margin-bottom:12px;padding-left:80px;display:flex}.pos-num{text-align:center;color:#888;width:32px;font-size:.85rem}.seq-row{align-items:center;margin-bottom:8px;display:flex}.seq-name{color:#888;width:clamp(50px,12vw,80px);font-size:clamp(.75rem,2vw,.9rem)}.aa{color:#e0e0e0;background:#2d3a5a;border-radius:4px;justify-content:center;align-items:center;width:clamp(24px,5vw,32px);height:clamp(24px,5vw,32px);margin-right:2px;font-size:clamp(.75rem,2vw,1rem);font-weight:600;display:flex}.aa.mutation{color:#fff;background:#ff4757}.mutation-inline{color:#fff;background:#ff4757;border-radius:4px;padding:2px 6px;font-weight:600}.insight-box{background:linear-gradient(135deg,#e8f4f8 0%,#f0f7fa 100%);border-left:4px solid #2196f3;border-radius:8px;margin-top:clamp(16px,3vw,24px);padding:clamp(12px,3vw,20px)}.insight-box.warning{background:linear-gradient(135deg,#fff3e0 0%,#ffe0b2 100%);border-left-color:#ff9800}.insight-box h5{color:#1a1f3a;margin-bottom:12px;font-size:1rem}.insight-box ul{margin:0;padding-left:20px}.insight-box li{color:#333;margin-bottom:8px;line-height:1.5}.insight-box p{color:#333;margin:8px 0;line-height:1.5}.counting-example{flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(16px,4vw,32px);margin:clamp(16px,3vw,24px) 0;display:flex}.column-analysis h5,.count-matrix-example h5{color:#1a1f3a;margin-bottom:12px;font-size:1rem}.column-data{align-items:flex-start;gap:24px;display:flex}.col-visual{flex-direction:column;gap:4px;display:flex}.col-aa{color:#fff;background:#2d3a5a;border-radius:6px;justify-content:center;align-items:center;width:clamp(28px,6vw,36px);height:clamp(28px,6vw,36px);font-family:monospace;font-size:clamp(.8rem,2vw,1rem);font-weight:600;display:flex}.col-aa.highlight{background:#ff4757}.pairs-from-column h6{color:#666;margin-bottom:8px;font-size:.85rem}.pair-calc{flex-direction:column;gap:4px;font-family:monospace;font-size:.9rem;display:flex}.calc-note{color:#888;margin-top:8px;font-size:.8rem}.arrow-right{color:#2d1b4e;font-size:2rem}.arrow-down{color:#2d1b4e;text-align:center;margin:16px 0;font-size:2rem}.mini-matrix-table{border-collapse:collapse;font-family:monospace}.mini-matrix-table th,.mini-matrix-table td{text-align:center;border:1px solid #e0e0e0;padding:8px 12px}.mini-matrix-table th{color:#fff;background:#2d1b4e}.mini-matrix-table td.high{color:#2e7d32;background:#e8f5e9;font-weight:600}.formula-highlight{text-align:center;color:#333;background:#f8f9fc;border-radius:8px;margin-top:20px;padding:12px 16px}.probability-calc{margin:24px 0}.formula-box{text-align:center;background:#1a1f3a;border-radius:clamp(8px,2vw,12px);margin-bottom:clamp(16px,3vw,24px);padding:clamp(12px,2vw,16px) clamp(16px,3vw,24px);overflow-x:auto}.formula-box code{color:#64ffda;font-family:Monaco,Menlo,Consolas,monospace;font-size:clamp(.9rem,2vw,1.1rem)}.formula-box.large code{font-size:clamp(1rem,2.5vw,1.3rem)}.calc-example{margin:24px 0}.calc-example h5{color:#1a1f3a;margin-bottom:16px;font-size:1rem}.calc-steps{flex-direction:column;gap:8px;display:flex}.calc-row{background:#f8f9fc;border-radius:8px;align-items:center;gap:16px;padding:8px 16px;display:flex}.calc-label{color:#2d1b4e;width:100px;font-weight:600}.calc-formula{color:#333;font-family:monospace}.pam1-matrix-display{margin-top:24px}.pam1-matrix-display h5{color:#1a1f3a;text-align:center;margin-bottom:16px;font-size:1rem}.score-matrix{border-collapse:collapse;max-width:100%;margin:0 auto;font-family:Monaco,Menlo,Consolas,monospace;font-size:clamp(.75rem,2vw,.9rem);display:block;overflow-x:auto}.score-matrix th{color:#fff;background:#2d1b4e;min-width:clamp(40px,8vw,50px);padding:clamp(8px,2vw,12px) clamp(10px,2vw,16px);font-weight:600}.score-matrix td{text-align:center;border:1px solid #e0e0e0;padding:clamp(8px,2vw,12px) clamp(10px,2vw,16px);transition:all .2s}.score-matrix td.high-prob,.score-matrix td.positive{color:#2e7d32;background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 100%);font-weight:700}.score-matrix td.negative{color:#c62828;background:linear-gradient(135deg,#ffebee 0%,#ffcdd2 100%);font-weight:700}.score-matrix td.zero{color:#666;background:#f8f9fc}.matrix-note{text-align:center;color:#666;margin-top:12px;font-size:.85rem}.matrix-power-visual{margin:32px 0}.power-equation{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-bottom:24px;display:flex}.matrix-symbol{color:#fff;background:linear-gradient(135deg,#2d1b4e,#4a2d6e);border-radius:8px;padding:clamp(10px,2vw,16px) clamp(14px,3vw,24px);font-family:monospace;font-size:clamp(.9rem,2vw,1.1rem);font-weight:600}.matrix-symbol.result{background:linear-gradient(135deg,#4caf50,#66bb6a)}.power-op{color:#2d1b4e;font-size:1.5rem;font-weight:700}.equals{color:#2d1b4e;font-size:2rem}.pam-scale{margin:32px 0}.pam-scale h5{text-align:center;color:#1a1f3a;margin-bottom:24px}.scale-bar{background:linear-gradient(90deg,#e8f5e9,#fff3e0,#ffebee);border-radius:8px;height:clamp(100px,15vw,120px);margin:0 clamp(20px,5vw,40px);position:relative}.scale-point{position:absolute;transform:translate(-50%)}.scale-marker{background:#2d1b4e;border-radius:50%;width:16px;height:16px;margin:0 auto 8px}.scale-point.highlight .scale-marker{background:#ff4757;width:20px;height:20px}.scale-label{text-align:center;white-space:nowrap}.scale-label strong{color:#1a1f3a;font-size:.95rem;display:block}.scale-label span{color:#666;margin-top:2px;font-size:.8rem;display:block}.scale-label .use{color:#888;font-style:italic}.log-odds-calc{margin:24px 0}.formula-explanation{flex-wrap:wrap;justify-content:center;gap:32px;margin:16px 0;display:flex}.formula-part{background:#f8f9fc;border-radius:8px;padding:8px 16px;font-size:.9rem}.log-odds-interpretation{margin:24px 0}.log-odds-interpretation h5{text-align:center;color:#1a1f3a;margin-bottom:16px}.interpretation-grid{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.interp-item{text-align:center;border-radius:12px;flex:1;min-width:min(180px,100%);max-width:280px;padding:clamp(12px,3vw,20px)}.interp-item.positive{background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 100%)}.interp-item.zero{background:#f8f9fc}.interp-item.negative{background:linear-gradient(135deg,#ffebee 0%,#ffcdd2 100%)}.score-ex{margin-bottom:8px;font-family:monospace;font-size:clamp(1.5rem,4vw,2rem);font-weight:700;display:block}.interp-item.positive .score-ex{color:#2e7d32}.interp-item.zero .score-ex{color:#666}.interp-item.negative .score-ex{color:#c62828}.interp-item .meaning{color:#666;margin-bottom:8px;font-size:.85rem;display:block}.interp-item .desc{color:#333;font-size:.9rem;font-weight:500;display:block}.detailed-calc-section{background:#f8f9fc;border-radius:12px;margin:24px 0;padding:20px}.detailed-calc-section h5{color:#1a1f3a;margin-bottom:16px}.final-matrix-example{margin-top:24px}.final-matrix-example h5{text-align:center;color:#1a1f3a;margin-bottom:16px}.blocks-example{margin:24px 0}.block-visual{background:#f8f9fc;border-radius:12px;max-width:400px;margin:0 auto;padding:24px}.block-visual h5{color:#1a1f3a;text-align:center;margin-bottom:16px}.block-sequences{font-family:monospace}.block-row{align-items:center;margin-bottom:8px;display:flex}.block-name{color:#666;width:80px;font-size:.85rem}.block-seq{letter-spacing:8px;color:#1a1f3a;font-weight:600}.block-note{text-align:center;color:#888;margin-top:16px;font-size:.85rem}.clustering-example{margin:24px 0}.before-clustering,.after-clustering{margin-bottom:16px}.before-clustering h5,.after-clustering h5{color:#1a1f3a;margin-bottom:12px;font-size:1rem}.sequence-list{flex-direction:column;gap:8px;display:flex}.seq-item{border-radius:8px;justify-content:space-between;padding:10px 16px;font-family:monospace;display:flex}.seq-item.group-a{background:#e3f2fd;border-left:4px solid #2196f3}.seq-item.group-b{background:#f3e5f5;border-left:4px solid #9c27b0}.identity{color:#666;font-size:.85rem}.cluster-boxes{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}.cluster-box{text-align:center;background:#fff;border:2px solid #2d1b4e;border-radius:12px;min-width:min(150px,100%);padding:clamp(12px,3vw,20px)}.cluster-header{color:#2d1b4e;margin-bottom:8px;font-weight:700}.cluster-members{color:#666;margin-bottom:8px;font-size:.85rem}.cluster-weight{color:#4caf50;font-weight:600}.blosum-scale{margin:32px 0}.blosum-scale h5{text-align:center;color:#1a1f3a;margin-bottom:16px}.scale-items{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.scale-item{text-align:center;background:#f8f9fc;border:2px solid #e0e0e0;border-radius:12px;min-width:140px;padding:16px 24px}.scale-item.highlight{background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 100%);border-color:#4caf50}.scale-item strong{color:#2d1b4e;margin-bottom:4px;font-size:1rem;display:block}.scale-item span{color:#666;font-size:.85rem;display:block}.scale-item .use{color:#888;margin-top:4px;font-style:italic}.pair-counting-detailed{margin:24px 0}.column-example-detailed h5,.pair-calculation h5{color:#1a1f3a;margin-bottom:12px}.column-visual-large{justify-content:center;gap:8px;margin-bottom:24px;display:flex}.col-aa-large{color:#fff;background:#2d3a5a;border-radius:8px;justify-content:center;align-items:center;width:clamp(36px,8vw,48px);height:clamp(36px,8vw,48px);font-family:monospace;font-size:clamp(.9rem,2.5vw,1.2rem);font-weight:600;display:flex}.col-aa-large.highlight{background:#ff4757}.pair-calculation{background:#f8f9fc;border-radius:12px;margin-top:20px;padding:20px}.pairs-table{flex-direction:column;gap:8px;display:flex}.pair-row{background:#fff;border-radius:6px;align-items:center;gap:16px;padding:8px 12px;display:flex}.pair-row.total{background:#e8f5e9;font-weight:600}.pair-type{width:100px;font-weight:500}.pair-count{text-align:center;color:#2d1b4e;width:40px;font-family:monospace;font-weight:600}.pair-calc{color:#666;font-size:.85rem}.frequency-calc{margin-top:24px}.frequency-calc h5{color:#1a1f3a;margin-bottom:12px}.freq-items{flex-wrap:wrap;gap:24px;display:flex}.freq-item{background:#f8f9fc;border-radius:8px;padding:12px 20px}.freq-label{margin-right:8px;font-weight:500}.freq-value{color:#2d1b4e;font-family:monospace;font-weight:600}.obs-vs-exp{margin:24px 0}.frequency-section{text-align:center;margin-bottom:24px}.frequency-section h5{color:#1a1f3a;margin-bottom:12px}.aa-freqs{justify-content:center;gap:32px;font-family:monospace;display:flex}.comparison-calc{flex-wrap:wrap;justify-content:center;align-items:stretch;gap:24px;display:flex}.calc-column{border-radius:12px;flex:1;min-width:min(180px,100%);max-width:300px;padding:clamp(12px,3vw,20px)}.calc-column.observed{background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%)}.calc-column.expected{background:linear-gradient(135deg,#fce4ec 0%,#f8bbd9 100%)}.calc-column h5{text-align:center;color:#1a1f3a;margin-bottom:8px}.calc-desc{text-align:center;color:#666;margin-bottom:16px;font-size:.85rem}.calc-values{flex-direction:column;gap:8px;display:flex}.calc-item{background:#fff9;border-radius:6px;padding:8px 12px;font-family:monospace}.vs-divider{color:#2d1b4e;align-items:center;font-size:1.5rem;font-weight:700;display:flex}.ratio-analysis{margin-top:24px}.ratio-analysis h5{color:#1a1f3a;margin-bottom:12px}.ratio-items{flex-direction:column;gap:8px;display:flex}.ratio-item{background:#f8f9fc;border-radius:8px;align-items:center;gap:16px;padding:12px 16px;display:flex}.ratio-pair{width:50px;font-weight:600}.ratio-value{flex:1;font-family:monospace}.ratio-meaning{border-radius:4px;padding:4px 12px;font-size:.85rem;font-weight:500}.ratio-meaning.positive{color:#2e7d32;background:#e8f5e9}.ratio-meaning.negative{color:#c62828;background:#ffebee}.blosum-formula,.score-calculation{margin:24px 0}.score-calculation h5{color:#1a1f3a;margin-bottom:16px}.calc-examples{flex-direction:column;gap:12px;display:flex}.calc-ex{background:#f8f9fc;border-radius:8px;flex-wrap:wrap;align-items:center;gap:16px;padding:12px 16px;display:flex}.calc-pair{min-width:120px;font-weight:600}.calc-work{flex:1;font-family:monospace}.calc-work strong{color:#2d1b4e}.calc-note{color:#888;font-size:.85rem;font-style:italic}.final-blosum-matrix{margin-top:24px}.final-blosum-matrix h5{text-align:center;color:#1a1f3a;margin-bottom:16px}.blosum-insights{background:linear-gradient(135deg,#e8f4f8 0%,#f0f7fa 100%);border-radius:12px;margin-top:24px;padding:20px}.blosum-insights h5{color:#1a1f3a;margin-bottom:12px}.blosum-insights ul{margin:0;padding-left:20px}.blosum-insights li{color:#333;margin-bottom:8px}.step-navigation{justify-content:center;align-items:center;gap:24px;margin-bottom:32px;display:flex}.nav-button{color:#2d1b4e;cursor:pointer;background:#fff;border:2px solid #2d1b4e;border-radius:8px;padding:12px 24px;font-weight:600;transition:all .3s}.step-indicator{color:#666;text-align:center;min-width:60px;font-weight:600}.comparison-section{background:#fff;border-radius:20px;margin-bottom:32px;padding:40px;box-shadow:0 4px 20px #00000014}.comparison-section h2{text-align:center;color:#1a1f3a;margin-bottom:32px;font-size:1.75rem}.common-formula-box{text-align:center;background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 100%);border:2px solid #4caf50;border-radius:16px;margin-bottom:32px;padding:28px}.common-formula-box h3{color:#2e7d32;margin-bottom:16px;font-size:1.25rem}.common-formula-box>p{color:#333;margin:16px 0;font-size:1.05rem}.formula-comparison{flex-wrap:wrap;justify-content:center;gap:24px;margin-top:20px;display:flex}.formula-side{text-align:left;border-radius:12px;flex:1;min-width:280px;max-width:400px;padding:20px}.formula-side.pam-side{background:#e3f2fd;border:2px solid #1976d2}.formula-side.blosum-side{background:#f3e5f5;border:2px solid #7b1fa2}.formula-side h4{text-align:center;margin-bottom:12px;font-size:1.1rem}.formula-side.pam-side h4{color:#1565c0}.formula-side.blosum-side h4{color:#7b1fa2}.formula-side p{color:#333;margin:8px 0;font-size:.95rem}.comparison-table{margin-bottom:32px;overflow-x:auto}.comparison-table table{border-collapse:collapse;width:100%}.comparison-table th{color:#fff;text-align:left;background:linear-gradient(135deg,#2d1b4e,#4a2d6e);padding:16px;font-weight:600}.comparison-table th:first-child{text-align:center;border-top-left-radius:8px;width:50px}.comparison-table th:last-child{border-top-right-radius:8px}.comparison-table td{color:#333;border-bottom:1px solid #e0e0e0;padding:16px}.comparison-table td:first-child{text-align:center;color:#2d1b4e;font-weight:600}.comparison-table tr:hover td{background:#f8f9fc}.comparison-table tr:last-child td:first-child{border-bottom-left-radius:8px}.comparison-table tr:last-child td:last-child{border-bottom-right-radius:8px}.highlight-text{background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-radius:4px;padding:2px 8px;font-weight:600}.highlight-text.warning{color:#c62828;background:linear-gradient(135deg,#ffebee,#ffcdd2)}.quick-reference{margin-top:32px}.quick-reference h3{text-align:center;color:#1a1f3a;margin-bottom:24px}.reference-cards{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}.ref-card{text-align:center;background:#f8f9fc;border:2px solid #e0e0e0;border-radius:12px;min-width:200px;padding:24px}.ref-card.highlight{background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 100%);border-color:#4caf50}.ref-card h4{color:#1a1f3a;margin-bottom:16px;font-size:1rem}.ref-values{flex-direction:column;gap:8px;display:flex}.pam-value{color:#1565c0;background:#e3f2fd;border-radius:6px;padding:8px 12px;font-family:monospace;font-weight:600}.blosum-value{color:#7b1fa2;background:#f3e5f5;border-radius:6px;padding:8px 12px;font-family:monospace;font-weight:600}.page-footer{color:#ffffffb3;text-align:center;background:#1a1f3a;margin-top:auto;padding:clamp(16px,3vw,24px)}@media (max-width:768px){.page-header h1{font-size:1.75rem}.tab-navigation{flex-direction:column;align-items:center}.tab-button{width:100%;max-width:300px}.matrix-section{padding:24px}.step-progress{gap:8px}.step-number{width:40px;height:40px;font-size:1rem}.scoring-matrix-page .step-content{padding:20px}.counting-example{flex-direction:column}.arrow-right{transform:rotate(90deg)}.comparison-calc{flex-direction:column}.vs-divider{justify-content:center;padding:8px 0}.interpretation-grid{flex-direction:column;align-items:center}.interp-item{max-width:100%}.reference-cards{flex-direction:column;align-items:center}.ref-card{width:100%;max-width:300px}}.suffix-tree-page{background:linear-gradient(135deg,#f8f9fc 0%,#e8eaed 100%);flex-direction:column;min-height:100vh;display:flex}.suffix-tree-page .page-header{color:#fff;text-align:center;background:linear-gradient(135deg,#1a1f3a 0%,#2d1b4e 50%,#1a2b4a 100%);padding:clamp(24px,5vw,48px) clamp(16px,4vw,24px);position:relative;overflow:hidden}.suffix-tree-page .page-header:before{content:"";pointer-events:none;background:radial-gradient(circle at 20%,#ffffff1a 0%,#0000 50%),radial-gradient(circle at 80%,#ffffff14 0%,#0000 50%);position:absolute;inset:0}.suffix-tree-page .page-header .header-content{z-index:1;position:relative}.suffix-tree-page .page-header h1{color:#fff;text-shadow:0 2px 10px #0003;margin:0 0 12px;font-size:clamp(1.5rem,5vw,2.5rem);font-weight:800}.suffix-tree-page .page-header .subtitle{color:#ffffffe6;margin:0 0 20px;font-size:1.15rem;font-weight:400}.suffix-tree-page .back-button{color:#fff;cursor:pointer;background:#fff3;border:1px solid #ffffff80;border-radius:8px;padding:.5rem 1.5rem;font-size:.9rem;font-weight:500;transition:all .3s}.suffix-tree-page .back-button:hover{background:#ffffff4d;transform:translateY(-2px)}.suffix-tree-page .page-main{flex:1;width:100%;max-width:min(1200px,95vw);margin:0 auto;padding:clamp(16px,4vw,32px) clamp(12px,3vw,24px)}.suffix-tree-page section{background:#fff;border-radius:clamp(12px,3vw,20px);margin-bottom:clamp(16px,4vw,32px);padding:clamp(20px,4vw,40px);box-shadow:0 4px 20px #00000014}.mode-selection-section{text-align:center}.mode-selection-section h2{color:#1a1f3a;margin-bottom:24px;font-size:1.5rem}.mode-selector{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}.mode-option{cursor:pointer;background:#f8f9fc;border:2px solid #e5e7eb;border-radius:12px;align-items:center;padding:16px 32px;transition:all .3s;display:flex}.mode-option:hover{background:#2d1b4e0d;border-color:#2d1b4e}.mode-option.active{background:linear-gradient(135deg,#2d1b4e,#4a2d6e);border-color:#2d1b4e}.mode-option input[type=radio]{display:none}.mode-label{align-items:center;gap:12px;display:flex}.mode-icon{font-size:1.5rem}.mode-name{color:#1a1f3a;font-size:1.1rem;font-weight:600;transition:color .3s}.mode-option.active .mode-name{color:#fff}.intro-section h2{color:#1a1f3a;text-align:center;margin-bottom:16px;font-size:2rem}.intro-content p{color:#555;text-align:center;max-width:900px;margin:0 auto 24px;font-size:1.1rem;line-height:1.7}.intro-content p strong{color:#2d1b4e}.key-properties{background:linear-gradient(135deg,#f8f9fc 0%,#f0f2f5 100%);border-radius:12px;margin-top:24px;padding:24px 32px}.key-properties h3{color:#1a1f3a;margin-bottom:16px;font-size:1.25rem}.key-properties ul{margin:0;padding:0;list-style:none}.key-properties li{color:#444;margin-bottom:8px;padding-left:28px;font-size:1rem;line-height:1.8;position:relative}.key-properties li:before{content:"→";color:#2d1b4e;font-weight:700;position:absolute;left:0}.example-section h2{color:#1a1f3a;text-align:center;margin-bottom:24px;font-size:1.75rem}.sequence-display h3{color:#555;margin-bottom:16px;font-size:1.1rem}.sequence-box{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:16px;display:flex}.sequence-char{flex-direction:column;align-items:center;gap:4px;display:flex}.sequence-char .char{color:#fff;background:#1a1f3a;border-radius:8px;justify-content:center;align-items:center;width:44px;height:44px;font-family:Monaco,Menlo,Consolas,monospace;font-size:1.25rem;font-weight:700;display:flex}.sequence-char.terminator .char{background:linear-gradient(135deg,#dc2626,#ef4444)}.sequence-char .index{color:#888;font-size:.8rem}.sequence-note{color:#666;text-align:center;margin-bottom:32px;font-size:.95rem;font-style:italic}.suffixes-list h3{color:#555;margin-bottom:16px;font-size:1.1rem}.suffixes-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;display:grid}.suffix-item{background:linear-gradient(135deg,#f8f9fc 0%,#f0f2f5 100%);border:2px solid #0000;border-radius:10px;align-items:center;gap:12px;padding:12px 16px;transition:all .3s;display:flex}.suffix-item.current{background:linear-gradient(135deg,#ede9fe 0%,#ddd6fe 100%);border-color:#2d1b4e}.suffix-item.completed{background:linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%);border-color:#4caf50}.suffix-index-label{color:#888;min-width:75px;font-size:.85rem}.suffix-text{color:#1a1f3a;font-family:Monaco,Menlo,Consolas,monospace;font-size:1rem;font-weight:600}.view-toggle-section{box-shadow:none!important;background:0 0!important;margin-bottom:24px!important;padding:0!important}.toggle-buttons{justify-content:center;gap:16px;display:flex}.toggle-btn{color:#2d1b4e;cursor:pointer;background:#fff;border:2px solid #2d1b4e;border-radius:50px;align-items:center;gap:10px;padding:16px 32px;font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 2px 8px #2d1b4e1a}.toggle-btn:hover{background:#2d1b4e14;transform:translateY(-2px);box-shadow:0 4px 12px #2d1b4e26}.toggle-btn.active{color:#fff;background:linear-gradient(135deg,#2d1b4e,#4a2d6e);box-shadow:0 4px 16px #2d1b4e4d}.final-tree-section h2{color:#1a1f3a;text-align:center;margin-bottom:clamp(16px,3vw,24px);font-size:clamp(1.25rem,4vw,1.75rem)}.final-tree-section .tree-visualization{background:#1a1f3a;border-radius:clamp(12px,2vw,16px);min-height:clamp(200px,40vh,400px);max-height:70vh;margin-bottom:clamp(16px,3vw,24px);padding:clamp(16px,3vw,32px);overflow:auto;box-shadow:0 4px 20px #00000026}.tree-visualization{background:#1a1f3a;border-radius:clamp(12px,2vw,16px);margin-bottom:clamp(16px,3vw,24px);padding:clamp(16px,3vw,32px);overflow-x:auto}.tree-container{flex-direction:column;align-items:center;min-width:fit-content;display:flex}.tree-root{margin-bottom:20px}.root-label{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:25px;padding:12px 24px;font-size:1rem;font-weight:700;display:inline-block;box-shadow:0 4px 16px #6366f166}.tree-children{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.tree-branch,.tree-node{flex-direction:column;align-items:center;display:flex}.node-content{background:#ffffff1a;border:1px solid #fff3;border-radius:10px;flex-direction:column;align-items:center;gap:6px;margin-bottom:12px;padding:12px 16px;display:flex}.leaf-node .node-content{background:linear-gradient(135deg,#22c55e,#16a34a);border:none}.edge-label{color:#a5b4fc;letter-spacing:1px;font-family:Monaco,Menlo,Consolas,monospace;font-size:.95rem;font-weight:600}.leaf-node .edge-label{color:#fff}.suffix-index{color:#fffc;background:#0003;border-radius:4px;padding:2px 8px;font-size:.8rem}.internal-node .tree-children{border-top:2px dashed #fff3;margin-top:4px;padding-top:8px}.tree-legend{background:linear-gradient(135deg,#f8f9fc 0%,#f0f2f5 100%);border-radius:12px;margin-bottom:24px;padding:24px}.tree-legend h4{color:#1a1f3a;margin-bottom:12px;font-size:1.1rem}.tree-legend ul{margin:0;padding:0;list-style:none}.tree-legend li{color:#555;padding-left:20px;font-size:.95rem;line-height:1.8;position:relative}.tree-legend li:before{content:"•";color:#2d1b4e;font-weight:700;position:absolute;left:0}.tree-legend li strong{color:#2d1b4e}.search-example{background:linear-gradient(135deg,#f8f9fc 0%,#f0f2f5 100%);border-radius:12px;padding:24px}.search-example h3{color:#1a1f3a;margin-bottom:16px;font-size:1.1rem}.search-steps{flex-direction:column;gap:12px;display:flex}.search-step{background:#fff;border-radius:8px;align-items:center;gap:16px;padding:12px 16px;display:flex;box-shadow:0 2px 8px #0000000d}.search-step .step-num{color:#fff;background:linear-gradient(135deg,#2d1b4e,#4a2d6e);border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.9rem;font-weight:700;display:flex}.search-step .step-text{color:#444;font-size:.95rem}.step-section h2{color:#1a1f3a;text-align:center;margin-bottom:24px;font-size:1.75rem}.step-progress{flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:32px;display:flex}.progress-step{cursor:pointer;transition:all .3s}.step-number{color:#666;background:#e0e0e0;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.1rem;font-weight:700;transition:all .3s;display:flex}.progress-step:hover .step-number{background:silver}.progress-step.active .step-number{color:#fff;background:linear-gradient(135deg,#2d1b4e,#4a2d6e);transform:scale(1.15);box-shadow:0 4px 16px #2d1b4e66}.progress-step.completed .step-number{color:#fff;background:#4caf50}.step-content-wrapper{grid-template-columns:1fr minmax(280px,400px);align-items:start;gap:clamp(16px,3vw,24px);display:grid}.tree-panel{overflow:hidden}.tree-panel .tree-visualization{background:#1a1f3a;border-radius:clamp(12px,2vw,16px);min-height:clamp(250px,40vh,400px);max-height:70vh;padding:clamp(16px,3vw,24px);overflow-y:auto;box-shadow:0 4px 20px #00000026}.info-panel{flex-direction:column;gap:clamp(12px,2vw,16px);display:flex;position:sticky;top:clamp(16px,3vw,24px)}.info-panel .step-navigation{margin-top:0}.step-content{background:linear-gradient(135deg,#f8f9fc 0%,#f0f2f5 100%);border-radius:16px;margin-bottom:0;padding:clamp(16px,3vw,32px);display:block}.info-panel .step-content{background:#fff;border-radius:clamp(8px,1.5vw,12px);padding:clamp(12px,3vw,24px);box-shadow:0 2px 8px #0000000d;display:block!important}.info-panel .step-title-row{width:100%;margin-bottom:clamp(8px,2vw,12px);display:block}.info-panel .step-title-row h3{color:#1a1f3a;margin:0;font-size:clamp(1.1rem,2.5vw,1.3rem);font-weight:700}.info-panel .step-description{background:0 0;border-left:none;border-radius:0;width:100%;margin-bottom:0;padding:0;display:block}.info-panel .step-description p{color:#444;margin:0 0 clamp(8px,2vw,12px);font-size:clamp(.9rem,2vw,1rem);line-height:1.6}.info-panel .step-description p:last-child{margin-bottom:0}.info-panel .step-description strong{color:#2d1b4e}.info-panel .suffix-position{color:#888;margin-top:4px;margin-left:0;font-size:.85rem;display:block}.info-panel .step-explanation{border-top:1px solid #e5e7eb;margin-top:clamp(8px,2vw,12px);padding-top:clamp(8px,2vw,12px);font-size:clamp(.85rem,1.8vw,.95rem);font-style:italic;color:#555!important}.step-title-row h3{color:#1a1f3a;margin:0 0 clamp(12px,2vw,16px);font-size:clamp(1.1rem,3vw,1.5rem);font-weight:700}.step-description{background:#fff;border-left:4px solid #2d1b4e;border-radius:clamp(8px,1.5vw,10px);margin-bottom:clamp(16px,3vw,24px);padding:clamp(12px,2vw,16px) clamp(14px,2.5vw,20px)}.step-description p{color:#444;margin:0 0 clamp(6px,1vw,8px);font-size:clamp(.9rem,2vw,1.05rem);line-height:1.7}.step-description p:last-child{margin-bottom:0}.step-description strong{color:#2d1b4e}.suffix-position{color:#888;margin-left:8px;font-size:.9rem}.step-explanation{font-style:italic;color:#666!important}.info-panel .step-navigation{background:#fff;border-radius:12px;gap:16px;margin-top:0;padding:16px;box-shadow:0 2px 8px #0000000d}.nav-button{color:#2d1b4e;cursor:pointer;background:#fff;border:2px solid #2d1b4e;border-radius:8px;padding:12px 24px;font-size:.95rem;font-weight:600;transition:all .3s}.nav-button:hover:not(:disabled){color:#fff;background:#2d1b4e}.step-indicator{color:#666;font-size:1rem;font-weight:600}.applications-section h2{color:#1a1f3a;text-align:center;margin-bottom:24px;font-size:1.75rem}.applications-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;display:grid}.application-card{background:linear-gradient(135deg,#f8f9fc 0%,#f0f2f5 100%);border-radius:12px;padding:24px;transition:all .3s}.application-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}.application-card h3{color:#2d1b4e;margin-bottom:12px;font-size:1.1rem}.application-card p{color:#555;margin:0;font-size:.95rem;line-height:1.6}.complexity-section h2{color:#1a1f3a;text-align:center;margin-bottom:24px;font-size:1.75rem}.complexity-table{overflow-x:auto}.complexity-table table{border-collapse:collapse;background:#fff;border-radius:12px;width:100%;overflow:hidden}.complexity-table th,.complexity-table td{text-align:left;border-bottom:1px solid #eee;padding:16px 24px}.complexity-table th{color:#fff;background:linear-gradient(135deg,#1a1f3a 0%,#2d1b4e 100%);font-size:.95rem;font-weight:600}.complexity-table td{color:#444;font-size:.95rem}.complexity-table tbody tr:last-child td{border-bottom:none}.complexity-table tbody tr:hover{background:#f8f9fc}.page-footer{color:#ffffffb3;text-align:center;background:#1a1f3a;padding:24px;font-size:.9rem}.input-section h2{color:#1a1f3a;text-align:center;margin-bottom:24px;font-size:1.75rem}.input-container{max-width:600px;margin:0 auto}.input-wrapper{gap:12px;margin-bottom:12px;display:flex}.sequence-input{text-transform:uppercase;border:2px solid #e0e0e0;border-radius:10px;outline:none;flex:1;padding:14px 20px;font-family:Monaco,Menlo,Consolas,monospace;font-size:1.1rem;transition:all .3s}.sequence-input:focus{border-color:#2d1b4e;box-shadow:0 0 0 3px #2d1b4e1a}.sequence-input.error{background:#fef2f2;border-color:#dc2626}.sequence-input::placeholder{color:#999;text-transform:none}.apply-btn{color:#fff;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#2d1b4e,#4a2d6e);border:none;border-radius:10px;padding:14px 28px;font-size:1rem;font-weight:600;transition:all .3s}.apply-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 16px #2d1b4e4d}.apply-btn:disabled{opacity:.5;cursor:not-allowed}.input-error{color:#dc2626;background:#fef2f2;border-left:3px solid #dc2626;border-radius:6px;margin:0 0 8px;padding:8px 12px;font-size:.9rem}.input-hint{color:#666;text-align:center;margin:0;font-size:.85rem}.tree-text-container{font-family:Monaco,Menlo,Consolas,monospace;font-size:1rem;line-height:1.8}.tree-line{white-space:pre;align-items:center;display:flex}.tree-line.root-line{margin-bottom:8px}.tree-node-box{border-radius:20px;padding:8px 20px;font-weight:700;display:inline-block}.tree-node-box.root-box{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 4px 12px #6366f166}.tree-prefix{color:#64748b;-webkit-user-select:none;user-select:none}.tree-edge-label{color:#a5b4fc;background:#6366f133;border-radius:6px;margin-right:8px;padding:4px 12px;font-weight:600}.tree-edge-label.leaf-label{color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a)}.tree-suffix-idx{color:#fbbf24;background:#fbbf2433;border-radius:4px;padding:2px 8px;font-size:.9rem;font-weight:600}@media (max-width:900px){.step-content-wrapper{grid-template-columns:1fr}.info-panel{position:static}.tree-panel .tree-visualization{max-height:50vh}}@media (max-width:768px){.suffix-tree-page .page-header h1{font-size:1.75rem}.suffix-tree-page section{padding:24px}.toggle-buttons{flex-direction:column;align-items:center}.toggle-btn{justify-content:center;width:100%;max-width:300px}.step-progress{gap:8px}.step-number{width:40px;height:40px;font-size:1rem}.tree-visualization{padding:16px}.step-navigation{flex-direction:column;gap:12px}.input-wrapper{flex-direction:column}.apply-btn{width:100%}.tree-text-container{font-size:.85rem}}.current-index-indicator{background:#fff;border-radius:12px;margin-bottom:20px;padding:20px;box-shadow:0 2px 8px #0000000d}.current-index-indicator h4{color:#1a1f3a;margin:0 0 16px;font-size:1rem;font-weight:600}.sequence-with-indicator{flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:16px;display:flex}.indicator-char{flex-direction:column;align-items:center;gap:4px;transition:all .3s;display:flex}.indicator-char .char-value{border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;font-family:Monaco,Menlo,Consolas,monospace;font-size:1.1rem;font-weight:700;transition:all .3s;display:flex}.indicator-char .char-index{color:#888;font-size:.75rem}.indicator-char.dimmed .char-value{color:#9ca3af;background:#e5e7eb}.indicator-char.highlighted .char-value{color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 2px 8px #22c55e4d}.indicator-char.start-position .char-value{color:#fff;background:linear-gradient(135deg,#2d1b4e,#4a2d6e);border:3px solid #fbbf24;transform:scale(1.1);box-shadow:0 4px 12px #2d1b4e66}.indicator-char.terminator .char-value{color:#fff!important;background:linear-gradient(135deg,#dc2626,#ef4444)!important}.indicator-char.terminator.dimmed .char-value{color:#991b1b!important;background:#fca5a5!important}.indicator-legend{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}.legend-item{color:#555;align-items:center;gap:8px;font-size:.85rem;display:flex}.legend-box{border-radius:4px;width:20px;height:20px}.legend-box.highlighted{background:linear-gradient(135deg,#22c55e,#16a34a)}.legend-box.dimmed{background:#e5e7eb}.legend-box.start-position{background:linear-gradient(135deg,#2d1b4e,#4a2d6e);border:2px solid #fbbf24}.suffix-array-result{flex-direction:column;gap:32px;display:flex}.array-visualization{background:linear-gradient(135deg,#f8f9fc,#f1f3f5);border:1px solid #e5e7eb;border-radius:12px;padding:24px}.array-visualization h4{color:#1a1f3a;margin:0 0 16px;font-size:1.1rem}.array-container{flex-direction:column;gap:8px;display:flex;overflow-x:auto}.array-row{align-items:center;gap:4px;display:flex}.array-label{color:#555;min-width:80px;font-size:.9rem;font-weight:600}.array-cell{border-radius:6px;justify-content:center;align-items:center;min-width:40px;height:40px;font-family:Fira Code,monospace;font-size:.95rem;display:flex}.array-cell.header{color:#666;background:#e5e7eb;font-weight:500}.array-cell.value{color:#fff;background:linear-gradient(135deg,#2d1b4e,#4a2d6e);font-weight:700;box-shadow:0 2px 6px #2d1b4e4d}.sorted-suffixes-table{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:24px}.sorted-suffixes-table h4{color:#1a1f3a;margin:0 0 16px;font-size:1.1rem}.suffix-table{border-collapse:collapse;width:100%}.suffix-table th,.suffix-table td{text-align:left;border-bottom:1px solid #e5e7eb;padding:12px 16px}.suffix-table th{color:#1a1f3a;background:linear-gradient(135deg,#f8f9fc,#f1f3f5);font-size:.95rem;font-weight:600}.suffix-table tr:hover{background:#2d1b4e0a}.suffix-text-cell{color:#2d1b4e;font-family:Fira Code,monospace;font-weight:600}.suffix-array-step-content{margin-top:20px}.unsorted-suffixes h4,.sorting-progress h4{color:#1a1f3a;margin-bottom:16px;font-size:1rem}.suffixes-step-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.suffix-step-item{background:#f8f9fc;border:1px solid #e5e7eb;border-radius:8px;align-items:center;gap:12px;padding:12px 16px;display:flex}.suffix-position-label{color:#666;min-width:50px;font-size:.85rem;font-weight:600}.suffix-text-value{color:#2d1b4e;font-family:Fira Code,monospace;font-weight:600}.sorting-visualization{flex-direction:column;gap:8px;display:flex}.sorted-suffix-item{background:#f8f9fc;border:1px solid #e5e7eb;border-radius:8px;align-items:center;gap:16px;padding:12px 16px;transition:all .3s;display:flex}.sorted-suffix-item.just-sorted{background:linear-gradient(135deg,#22c55e26,#16a34a1a);border-color:#22c55e;transform:scale(1.02);box-shadow:0 4px 12px #22c55e33}.sorted-suffix-item.already-sorted{background:#2d1b4e0d;border-color:#2d1b4e33}.sort-rank{color:#fff;background:linear-gradient(135deg,#2d1b4e,#4a2d6e);border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.9rem;font-weight:700;display:flex}.sorting-note{color:#1d4ed8;background:#3b82f61a;border:1px solid #3b82f64d;border-radius:8px;margin-top:16px;padding:12px 16px;font-size:.95rem}.sorting-complete{color:#15803d;background:#22c55e1a;border:1px solid #22c55e4d;border-radius:8px;margin-top:16px;padding:12px 16px;font-size:.95rem;font-weight:600}.phylogeny-container{background:var(--bg-main);min-height:100vh}.phylogeny-header{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;text-align:center;padding:clamp(24px,5vw,48px) clamp(16px,4vw,24px);position:relative;overflow:hidden}.phylogeny-header:before{content:"";pointer-events:none;background:radial-gradient(circle at 20%,#ffffff1a 0%,#0000 50%),radial-gradient(circle at 80%,#ffffff14 0%,#0000 50%);position:absolute;inset:0}.phylogeny-header .header-content{z-index:1;position:relative}.phylogeny-header h1{text-shadow:0 2px 10px #0003;margin:0 0 16px;font-size:clamp(1.5rem,5vw,2.5rem);font-weight:800}.phylogeny-main{max-width:min(1400px,95vw);margin:0 auto;padding:clamp(16px,4vw,32px) clamp(12px,3vw,24px)}.definition-visual{flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.tree-icon-large{font-size:clamp(50px,10vw,80px);animation:3s ease-in-out infinite sway}@keyframes sway{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.branch-lines{pointer-events:none;width:100%;height:100%;position:absolute}.branch{background:linear-gradient(to bottom,var(--primary),transparent);border-radius:2px;width:3px;height:40px;position:absolute}.branch-1{bottom:10px;left:30%;transform:rotate(-30deg)}.branch-2{bottom:5px;left:50%}.branch-3{bottom:10px;right:30%;transform:rotate(30deg)}.concept-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:24px;display:flex}.concept-leaf{background:#4caf50}.concept-leaf:after{content:"";background:#fff;border-radius:50% 0 50% 50%;width:12px;height:12px}.concept-internal{background:#2d1b4e}.concept-internal:after{content:"";background:#fff;border-radius:50%;width:8px;height:8px}.concept-branch{background:#795548}.concept-branch:after{content:"";background:#fff;width:14px;height:3px}.concept-root{background:#1a0f2e}.concept-root:after{content:"";clip-path:polygon(50% 0%,100% 100%,0% 100%);background:#fff;width:10px;height:10px}.tree-icon-svg{justify-content:center;align-items:center;display:flex}.mode-section{text-align:center;margin-bottom:32px}.mode-section h2{color:var(--text-primary);margin:0 0 8px;font-size:1.6rem}.mode-subtitle{color:var(--text-secondary);margin-bottom:24px}.mode-selector{justify-content:center;gap:20px;display:flex}.mode-button{background:var(--tile-bg);border:2px solid var(--border-color);cursor:pointer;border-radius:16px;flex-direction:column;flex:1;align-items:center;min-width:min(220px,45vw);max-width:280px;padding:clamp(16px,3vw,24px) clamp(24px,4vw,40px);transition:all .3s;display:flex}.mode-button:hover{border-color:var(--primary-light);transform:translateY(-3px);box-shadow:0 8px 24px #2d1b4e1f}.mode-button.active{border-color:var(--primary);background:linear-gradient(135deg,#2d1b4e0d,#2d1b4e1a);box-shadow:0 8px 24px #2d1b4e26}.mode-icon{border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;margin-bottom:8px;font-size:32px;display:flex}.mode-icon-newick{background:#2d1b4e}.mode-icon-newick:after{content:"( )";color:#fff;font-family:monospace;font-size:16px;font-weight:700}.mode-icon-canonical{background:#4caf50}.mode-icon-canonical:after{content:"A-Z";color:#fff;font-family:monospace;font-size:12px;font-weight:700}.mode-name{color:var(--text-primary);margin-bottom:4px;font-size:1.1rem;font-weight:600}.mode-desc{color:var(--text-secondary);font-size:.85rem}.format-section{background:var(--tile-bg);border-radius:20px;margin-bottom:32px;padding:32px;box-shadow:0 8px 32px #2d1b4e1a}.format-header{text-align:center;margin-bottom:24px}.format-header h2{color:var(--text-primary);margin:0 0 8px}.format-header p{color:var(--text-secondary);margin:0}.example-box{background:var(--bg-secondary);border-radius:12px;margin-bottom:24px;padding:20px}.example-box h3{color:var(--text-primary);margin:0 0 12px;font-size:1rem}.newick-display{background:#1e1e1e;border-radius:8px;padding:16px;font-family:Fira Code,SF Mono,monospace;font-size:1.1rem;overflow-x:auto}.newick-string{color:#d4d4d4}.newick-complete{color:#4caf50}.highlight-leaf{color:#4caf50;background:#4caf5033;border-radius:4px;padding:2px 4px;font-weight:600}.highlight-clade{color:#2196f3;background:#2196f333;border-radius:4px;padding:2px 4px}.highlight-root{color:#ff9800;background:#ff980033;border-radius:4px;padding:2px 4px;font-weight:700}.step-content{gap:clamp(16px,3vw,32px);margin-bottom:clamp(16px,3vw,24px);grid-template-columns:1fr 1fr!important;display:grid!important}.step-content>.step-info,.step-content>.tree-visualization{width:100%;min-width:0}.canonical-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.step-info{background:var(--bg-secondary);border-radius:12px;min-width:0;min-height:clamp(350px,50vh,500px);max-height:clamp(400px,60vh,540px);padding:clamp(16px,3vw,24px);overflow:hidden auto}.step-explanation{border-left:4px solid var(--primary);background:linear-gradient(135deg,#2d1b4e0d,#2d1b4e1a);border-radius:10px;gap:12px;padding:16px;display:flex}.distance-matrix{border-collapse:collapse;width:100%;font-size:.9rem}.distance-matrix th,.distance-matrix td{text-align:center;border:1px solid var(--border-color);padding:10px 12px}.distance-matrix th{background:var(--primary);color:#fff;font-size:.85rem;font-weight:600}.distance-matrix td{background:var(--tile-bg)}.distance-matrix td.highlight-min{color:#e65100;background:#fff3e0;font-weight:700;animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.tree-visualization{background:var(--bg-secondary);border-radius:12px;flex-direction:column;min-width:0;max-width:100%;height:clamp(400px,60vh,540px);min-height:clamp(350px,50vh,540px);padding:clamp(16px,3vw,24px);display:flex;overflow:hidden}.tree-container{background:#fff;border-radius:8px;flex:1;overflow:hidden}.tree-container-large{min-height:clamp(300px,45vh,450px)}.tree-placeholder{min-height:clamp(200px,35vh,300px);color:var(--text-secondary);flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.tree-placeholder .placeholder-icon{opacity:.5;background:#ccc;border-radius:50%;width:48px;height:48px;margin-bottom:12px}.tree-placeholder p{margin:0;font-style:italic}.step-navigation{border-top:1px solid var(--border-color);justify-content:center;align-items:center;gap:24px;padding-top:16px;display:flex}.nav-button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:12px 24px;font-weight:600;transition:all .3s}.nav-button:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px)}.step-dot.active{background:var(--primary);transform:scale(1.2)}.legend-section{background:var(--tile-bg);border-radius:16px;padding:24px;box-shadow:0 4px 16px #2d1b4e14}.legend-section h3{color:var(--text-primary);text-align:center;margin:0 0 16px}.legend-items{flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,40px);display:flex}.legend-item{align-items:center;gap:12px;display:flex}.legend-node{border-radius:50%;width:24px;height:24px}.legend-node.leaf-node{background:#4caf50;border:2px solid #388e3c}.legend-node.internal-node{background:#2d1b4e;border:2px solid #1a0f2e}.legend-line{background:#999;border-radius:2px;width:40px;height:3px}.legend-item span{color:var(--text-secondary);font-size:.9rem}@media (max-width:1200px){.definition-card{grid-template-columns:140px 1fr;gap:32px}.key-concepts{gap:12px}}@media (max-width:900px){.definition-card{text-align:center;grid-template-columns:1fr}.key-concepts,.canonical-content{grid-template-columns:1fr}.mode-selector{flex-direction:column;align-items:center}.mode-button{width:100%;max-width:320px}.legend-items{flex-direction:column;align-items:center;gap:16px}.format-section{padding:24px 16px}.newick-display{padding:12px;font-size:.95rem}.distance-matrix th,.distance-matrix td{padding:8px 10px;font-size:.85rem}}@media (max-width:600px){.phylogeny-header h1{font-size:1.4rem}.back-button{padding:8px 16px;font-size:.85rem}.definition-section{margin-bottom:32px}.mode-section h2{font-size:1.3rem}.mode-selector{gap:12px}.step-header h3{font-size:1rem}.step-badge{padding:4px 10px;font-size:.75rem}.step-navigation{flex-wrap:wrap;gap:16px}.nav-button{padding:10px 18px;font-size:.9rem}.legend-section{padding:16px}.legend-node{width:20px;height:20px}.legend-line{width:30px}.concept-item{gap:10px;padding:12px}.sorting-table th,.sorting-table td{padding:6px 8px;font-size:.8rem}}@media (max-width:480px){.phylogeny-main{padding:12px 8px}.definition-card{border-radius:12px;padding:16px}.format-section{border-radius:12px;padding:16px 12px}.example-box{padding:12px}.newick-display{padding:10px;font-size:.8rem}.step-info,.tree-visualization{border-radius:8px;padding:12px}.step-explanation{gap:8px;padding:12px}.explanation-icon{width:20px;height:20px;font-size:12px}.mode-button{padding:12px 16px}.mode-icon{width:32px;height:32px}.mode-name{font-size:1rem}.mode-desc{font-size:.8rem}.step-dot{width:10px;height:10px}.matrix-display{margin:12px 0;overflow-x:auto}.distance-matrix{min-width:280px;font-size:.75rem}.distance-matrix th,.distance-matrix td{padding:6px 8px}.comparison-item code{padding:8px;font-size:.75rem}}.newick-progress{margin-bottom:16px}.newick-progress h4{color:var(--text-primary);margin:0 0 8px;font-size:.95rem}.sorting-info{margin-bottom:16px}.sorting-rules{background:#2d1b4e0d;border-radius:10px;padding:16px}.sorting-rules h4{color:var(--primary);margin:0 0 12px;font-size:1rem}.sorting-rules ol{margin:0;padding-left:20px}.sorting-rules li{color:var(--text-secondary);margin-bottom:8px;line-height:1.5}.sorting-table{background:#2d1b4e0d;border-radius:10px;padding:16px}.sorting-table h4{color:var(--primary);margin:0 0 12px;font-size:1rem}.sorting-table table{border-collapse:collapse;width:100%;font-size:.9rem}.sorting-table th,.sorting-table td{text-align:left;border:1px solid var(--border-color);padding:8px 12px}.sorting-table th{background:var(--primary);color:#fff;font-size:.85rem;font-weight:600}.sorting-table td{background:var(--tile-bg);color:var(--text-secondary)}.sort-result{color:#2e7d32;background:#4caf501a;border-radius:6px;margin:12px 0 0;padding:8px 12px;font-weight:500}.building-steps{background:#2d1b4e0d;border-radius:10px;padding:16px}.building-steps h4{color:var(--primary);margin:0 0 12px;font-size:1rem}.build-step{color:var(--text-secondary);align-items:center;gap:10px;padding:8px 0;display:flex}.build-step .step-num{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.8rem;font-weight:600;display:inline-flex}.final-comparison{background:#2d1b4e0d;border-radius:10px;padding:16px}.final-comparison h4{color:var(--primary);margin:0 0 12px;font-size:1rem}.comparison-item{margin-bottom:12px}.comparison-item strong{color:var(--text-primary);margin-bottom:4px;display:block}.comparison-item code{color:#d4d4d4;background:#1e1e1e;border-radius:6px;padding:10px 12px;font-family:Fira Code,SF Mono,monospace;font-size:.85rem;display:block;overflow-x:auto}.comparison-item.canonical code{background:linear-gradient(135deg,#1a3a1a,#1e1e1e);border:1px solid #4caf50}.diff-note{color:#e65100;background:#ff98001a;border-radius:6px;margin:12px 0 0;padding:8px 12px;font-size:.9rem}.highlight-sorted,.highlight-diff{color:#4caf50;background:#4caf5033;border-radius:4px;padding:2px 6px;font-weight:700}.distance-matrix-container{background:var(--bg-main);min-height:100vh}.dm-header{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;text-align:center;padding:clamp(24px,5vw,48px) clamp(16px,4vw,24px);position:relative;overflow:hidden}.dm-header:before{content:"";pointer-events:none;background:radial-gradient(circle at 20%,#ffffff1a 0%,#0000 50%),radial-gradient(circle at 80%,#ffffff14 0%,#0000 50%);position:absolute;inset:0}.dm-header .header-content{z-index:1;position:relative}.dm-header h1{text-shadow:0 2px 10px #0003;margin:0 0 16px;font-size:clamp(1.5rem,5vw,2.5rem);font-weight:800}.dm-main{max-width:min(1200px,95vw);margin:0 auto;padding:clamp(16px,4vw,32px) clamp(12px,3vw,24px)}.definition-section{margin-bottom:48px}.definition-card{background:var(--tile-bg);border-radius:clamp(12px,3vw,20px);grid-template-columns:minmax(120px,200px) 1fr;align-items:center;gap:clamp(20px,4vw,40px);padding:clamp(20px,4vw,40px);display:grid;box-shadow:0 8px 32px #2d1b4e1a}.definition-visual{flex-direction:column;justify-content:center;align-items:center;display:flex}.matrix-icon{animation:2s ease-in-out infinite pulse}.definition-content h2{color:var(--text-primary);margin:0 0 16px;font-size:clamp(1.3rem,4vw,1.8rem)}.definition-main{color:var(--text-secondary);margin-bottom:clamp(16px,3vw,24px);font-size:clamp(.95rem,2vw,1.15rem);line-height:1.8}.highlight-term{color:var(--primary);font-weight:600}.key-concepts{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.concept-item{background:var(--bg-secondary);border-radius:12px;gap:12px;padding:16px;transition:transform .2s,box-shadow .2s;display:flex}.concept-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2d1b4e1a}.concept-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.concept-distance{background:#2d1b4e}.concept-distance:after{content:"";background:#fff;width:16px;height:3px}.concept-merge{background:#4caf50}.concept-merge:after{content:"+";color:#fff;font-size:16px;font-weight:700}.concept-average{background:#ff9800}.concept-average:after{content:"x̄";color:#fff;font-size:14px;font-weight:700}.concept-tree{background:#795548}.concept-tree:after{content:"";border-bottom:12px solid #fff;border-left:8px solid #0000;border-right:8px solid #0000;width:0;height:0}.concept-item strong{color:var(--text-primary);margin-bottom:4px;display:block}.concept-item p{color:var(--text-secondary);margin:0;font-size:.9rem}.input-section{margin-bottom:32px}.input-card{background:var(--tile-bg);border-radius:clamp(12px,2vw,16px);padding:clamp(16px,4vw,32px);box-shadow:0 4px 20px #2d1b4e14}.input-card h2{color:var(--text-primary);margin:0 0 20px;font-size:1.4rem}.input-mode-selector{gap:12px;margin-bottom:24px;display:flex}.mode-btn{border:2px solid var(--border-color);background:var(--tile-bg);color:var(--text-secondary);cursor:pointer;border-radius:8px;padding:10px 24px;font-size:.95rem;font-weight:500;transition:all .2s}.mode-btn:hover{border-color:var(--primary);color:var(--primary)}.mode-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.custom-input-form{flex-direction:column;gap:16px;display:flex}.input-group{flex-direction:column;gap:8px;display:flex}.input-group label{color:var(--text-primary);font-size:.95rem;font-weight:500}.input-group input,.input-group textarea{border:2px solid var(--border-color);border-radius:8px;padding:12px 16px;font-family:Fira Code,SF Mono,monospace;font-size:.95rem;transition:border-color .2s}.input-group input:focus,.input-group textarea:focus{border-color:var(--primary);outline:none}.input-group textarea{resize:vertical;min-height:120px}.input-error{color:#d32f2f;background:#f443361a;border:1px solid #f443364d;border-radius:8px;padding:12px 16px;font-size:.9rem}.parse-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;align-self:flex-start;padding:12px 32px;font-size:1rem;font-weight:600;transition:all .2s}.parse-btn:hover{background:var(--primary-light);transform:translateY(-2px)}.upgma-section{background:var(--tile-bg);border-radius:clamp(12px,3vw,20px);margin-bottom:clamp(16px,4vw,32px);padding:clamp(16px,4vw,32px);box-shadow:0 8px 32px #2d1b4e1a}.upgma-header{text-align:center;margin-bottom:24px}.upgma-header h2{color:var(--text-primary);margin:0 0 8px;font-size:1.6rem}.upgma-header p{color:var(--text-secondary);margin:0}.step-content{grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));gap:clamp(16px,3vw,24px);margin-bottom:clamp(16px,3vw,24px);display:grid}.step-info{background:var(--bg-secondary);border-radius:12px;min-height:clamp(300px,45vh,400px);padding:clamp(16px,3vw,24px)}.step-header{align-items:center;gap:12px;margin-bottom:16px;display:flex}.step-badge{background:var(--primary);color:#fff;border-radius:20px;padding:6px 14px;font-size:.85rem;font-weight:600}.step-header h3{color:var(--text-primary);margin:0;font-size:1.2rem}.step-description{color:var(--text-secondary);margin-bottom:16px;line-height:1.6}.matrix-display{margin:20px 0}.matrix-display h4{color:var(--text-primary);margin:0 0 12px;font-size:1rem}.matrix-table-wrapper{overflow-x:auto}.matrix-table{border-collapse:collapse;font-family:Fira Code,SF Mono,monospace;font-size:.9rem}.matrix-table th,.matrix-table td{text-align:center;border:1px solid var(--border-color);padding:10px 14px}.matrix-table .matrix-header{background:var(--primary);color:#fff;min-width:60px;font-size:.85rem;font-weight:600}.matrix-table .matrix-cell{background:var(--tile-bg)}.matrix-table .matrix-cell.diagonal{color:#999;background:#f5f5f5}.matrix-table .matrix-cell.minimum{color:#2e7d32;background:#4caf5033;font-weight:700}.merge-info{background:#4caf501a;border-left:4px solid #4caf50;border-radius:10px;margin:20px 0;padding:16px}.merge-info h4{color:var(--text-primary);margin:0 0 12px}.merge-details{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.merge-item{background:var(--primary);color:#fff;border-radius:6px;padding:6px 12px;font-family:Fira Code,monospace;font-size:.9rem}.merge-arrow{color:var(--text-secondary);font-size:1.2rem;font-weight:700}.merge-result{color:#fff;background:#4caf50;border-radius:6px;padding:6px 12px;font-family:Fira Code,monospace;font-size:.9rem}.merge-height{color:var(--text-secondary);margin:12px 0 0;font-size:.9rem}.step-explanation{border-left:4px solid var(--primary);background:linear-gradient(135deg,#2d1b4e0d,#2d1b4e1a);border-radius:10px;gap:12px;margin-top:16px;padding:16px;display:flex}.explanation-icon{background:var(--primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;font-weight:700;display:flex}.step-explanation p{color:var(--text-secondary);margin:0;font-size:.95rem;line-height:1.6}.tree-visualization{background:var(--bg-secondary);border-radius:12px;min-height:clamp(300px,45vh,400px);padding:clamp(12px,2vw,20px)}.tree-visualization h4{color:var(--text-primary);text-align:center;margin:0 0 16px}.tree-display{background:#fff;border-radius:8px;min-height:clamp(200px,35vh,300px);padding:clamp(12px,2vw,20px)}.tree-initial{text-align:center}.tree-initial p{color:var(--text-secondary);margin-bottom:16px}.taxa-list{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.taxon-badge{background:var(--primary);color:#fff;border-radius:20px;padding:8px 16px;font-weight:500}.tree-steps{flex-direction:column;gap:12px;display:flex}.tree-node-row{background:var(--bg-secondary);border-radius:8px;align-items:center;gap:12px;padding:10px 16px;display:flex}.tree-step-num{color:var(--text-secondary);min-width:24px;font-weight:600}.tree-cluster{color:var(--text-primary);flex:1;font-family:Fira Code,monospace}.tree-height{color:#4caf50;font-size:.85rem;font-weight:500}.tree-hint{color:var(--text-secondary);text-align:center;margin:20px 0;font-style:italic}.final-tree{background:#2d1b4e0d;border-radius:8px;margin-top:20px;padding:16px}.final-tree h4{text-align:left;margin:0 0 12px}.newick-output{color:#d4d4d4;word-break:break-all;background:#1e1e1e;border-radius:6px;padding:12px 16px;font-family:Fira Code,monospace;font-size:.85rem;display:block;overflow-x:auto}.step-navigation{justify-content:center;align-items:center;gap:20px;margin-top:24px;display:flex}.nav-button{border:2px solid var(--primary);background:var(--tile-bg);color:var(--primary);cursor:pointer;border-radius:8px;padding:10px 24px;font-size:.95rem;font-weight:500;transition:all .2s}.nav-button:hover:not(:disabled){background:var(--primary);color:#fff}.nav-button:disabled{opacity:.5;cursor:not-allowed}.step-indicators{gap:8px;display:flex}.step-dot{border:2px solid var(--primary);cursor:pointer;background:0 0;border-radius:50%;width:12px;height:12px;padding:0;transition:all .2s}.step-dot:hover{background:#2d1b4e33}.step-dot.active{background:var(--primary)}.algorithm-section{background:var(--tile-bg);border-radius:clamp(12px,3vw,20px);padding:clamp(16px,4vw,32px);box-shadow:0 8px 32px #2d1b4e1a}.algorithm-section h2{color:var(--text-primary);text-align:center;margin:0 0 24px;font-size:1.6rem}.algorithm-steps{flex-direction:column;gap:16px;display:flex}.algo-step{background:var(--bg-secondary);border-radius:12px;gap:16px;padding:20px;transition:transform .2s;display:flex}.algo-step:hover{transform:translate(8px)}.algo-step-num{background:var(--primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.1rem;font-weight:700;display:flex}.algo-step-content h4{color:var(--text-primary);margin:0 0 8px}.algo-step-content p{color:var(--text-secondary);margin:0;line-height:1.5}@media (max-width:900px){.definition-card{text-align:center;grid-template-columns:1fr}.key-concepts{grid-template-columns:1fr}.input-mode-selector{flex-direction:column}.algo-step{padding:16px}.algo-step-num{width:36px;height:36px;font-size:1rem}}@media (max-width:600px){.dm-header h1{font-size:1.4rem}.back-button{padding:8px 16px;font-size:.85rem}.definition-section{margin-bottom:24px}.input-card h2{font-size:1.2rem}.mode-btn{padding:8px 16px;font-size:.85rem}.parse-btn{padding:10px 24px;font-size:.9rem}.step-header h3{font-size:1rem}.step-badge{padding:4px 10px;font-size:.75rem}.matrix-table th,.matrix-table td{padding:6px 8px;font-size:.75rem}.matrix-table .matrix-header{min-width:45px;font-size:.75rem}.merge-details{flex-direction:column;align-items:flex-start}.merge-arrow{transform:rotate(90deg)}.step-navigation{flex-wrap:wrap;gap:12px}.nav-button{padding:8px 16px;font-size:.85rem}.step-dot{width:10px;height:10px}.algo-step{text-align:center;flex-direction:column}.algo-step-num{margin:0 auto}}@media (max-width:480px){.dm-main{padding:12px 8px}.definition-card{border-radius:12px;padding:16px}.input-card{padding:12px}.input-group input,.input-group textarea{padding:10px 12px;font-size:.85rem}.input-group textarea{min-height:100px}.upgma-section,.step-info,.tree-visualization,.tree-display{padding:12px}.taxon-badge{padding:6px 12px;font-size:.85rem}.newick-output{padding:10px 12px;font-size:.75rem}.algorithm-section{padding:16px 12px}.upgma-header h2,.algorithm-section h2{font-size:1.3rem}}.protein-structure-container{background:var(--bg-main);min-height:100vh}.ps-header{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;text-align:center;padding:48px 24px;position:relative;overflow:hidden}.ps-header:before{content:"";pointer-events:none;background:radial-gradient(circle at 20%,#ffffff1a 0%,#0000 50%),radial-gradient(circle at 80%,#ffffff14 0%,#0000 50%);position:absolute;inset:0}.ps-header .header-content{z-index:1;position:relative}.ps-header h1{text-shadow:0 2px 10px #0003;margin:0 0 12px;font-size:2.7rem;font-weight:800}.ps-header .subtitle{opacity:.95;color:#ffffffe6;margin:0;font-size:1.1rem}.header-actions{justify-content:center;align-items:center;gap:12px;margin-top:16px;display:flex}.back-button{color:#fff;cursor:pointer;background:#fff3;border:1px solid #ffffff80;border-radius:8px;padding:10px 24px;font-size:.95rem;font-weight:500;transition:all .3s}.back-button:hover{background:#ffffff4d;transform:translateY(-2px)}.pill{color:#fff;background:#ffffff24;border:1px solid #ffffff38;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:600;display:inline-flex}.pill.neutral{color:var(--text-primary);background:#2d1b4e14;border:1px solid #2d1b4e1f}.ps-main{flex-direction:column;gap:28px;max-width:1200px;margin:0 auto;padding:32px 24px 48px;display:flex}.intro-card{background:var(--tile-bg);border:1px solid #2d1b4e0f;border-radius:20px;grid-template-columns:1.2fr 1fr;gap:24px;padding:32px;display:grid;box-shadow:0 8px 32px #2d1b4e1a}.eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 6px;font-size:.78rem;font-weight:700}.intro-card h2{margin:6px 0 12px;font-size:1.9rem}.lead{color:var(--text-secondary);margin:0 0 14px;font-size:1.05rem;line-height:1.7}.pill-row{flex-wrap:wrap;gap:10px;display:flex}.fact-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;display:grid}.fact-tile{background:linear-gradient(135deg,#f9f5ff,#eef1ff);border:1px solid #2d1b4e14;border-radius:14px;padding:16px}.fact-tile h4{margin:0 0 8px;font-size:1rem}.fact-tile p{color:var(--text-secondary);margin:0;line-height:1.6}.algorithm-section{background:var(--tile-bg);border:1px solid #2d1b4e0d;border-radius:20px;padding:28px;box-shadow:0 8px 32px #2d1b4e14}.section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.section-header h2{margin:4px 0 6px}.section-subtitle{color:var(--text-secondary);max-width:720px;margin:0}.algorithm-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;display:grid}.algorithm-card{background:#faf9ff;border:1px solid #2d1b4e1a;border-radius:16px;flex-direction:column;gap:12px;padding:18px;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 6px 20px #2d1b4e14}.algorithm-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px #2d1b4e1f}.card-top h3{margin:8px 0 6px}.card-description{color:var(--text-secondary);margin:0;line-height:1.6}.pill.soft{color:var(--text-primary);background:#2d1b4e14;border:1px solid #2d1b4e1a}.bullet-list{color:var(--text-secondary);margin:0;padding-left:18px;line-height:1.6}.bullet-list li{margin-bottom:6px}.card-footer{color:var(--text-primary);background:#2d1b4e0f;border:1px dashed #2d1b4e26;border-radius:10px;align-items:center;gap:8px;padding:10px 12px;font-size:.95rem;display:flex}.coming-note{font-weight:600}.next-steps{grid-template-columns:1fr;display:grid}.next-card{background:var(--tile-bg);border:1px solid #2d1b4e0f;border-radius:18px;padding:24px;box-shadow:0 8px 24px #2d1b4e14}.next-card h3{margin:0 0 8px}.next-card p{color:var(--text-secondary);margin:0 0 12px;line-height:1.65}.step-chips{flex-wrap:wrap;gap:10px;display:flex}.chip{color:var(--text-primary);background:#2d1b4e14;border:1px solid #2d1b4e1f;border-radius:999px;padding:8px 12px;font-size:.9rem;font-weight:600}.view-toggle{gap:8px;margin:12px 0;display:inline-flex}.view-pill{color:var(--text-primary);cursor:pointer;background:#fff;border:1px solid #2d1b4e26;border-radius:999px;padding:10px 14px;font-weight:700;transition:all .2s}.view-pill.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 8px 18px #2d1b4e2e}.ga-section{background:var(--tile-bg);border:1px solid #2d1b4e0d;border-radius:20px;padding:24px;box-shadow:0 8px 32px #2d1b4e14}.dual-pane{grid-template-columns:minmax(320px,360px) 1fr;gap:18px;display:grid}.ga-controls{background:#f7f5ff;border:1px solid #2d1b4e14;border-radius:14px;flex-direction:column;gap:14px;padding:18px;display:flex}.ga-controls.sticky{align-self:start;position:sticky;top:16px}.control-row{flex-direction:column;gap:6px;display:flex}.control-row.two-col{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.control-row label{color:var(--text-primary);font-weight:700}.control-row input,.control-row select{border:1px solid var(--border-color);background:#fff;border-radius:10px;padding:10px 12px;font-size:.95rem}.control-row input[type=range]{padding:0}.slider-value{color:var(--text-primary);margin-top:4px;font-weight:600}.help-text{color:var(--text-muted);margin:0;font-size:.9rem}.action-row{flex-wrap:wrap;gap:10px;display:flex}.primary-btn,.secondary-btn{cursor:pointer;border:none;border-radius:10px;padding:10px 14px;font-weight:700;transition:transform .2s,box-shadow .2s}.primary-btn{background:var(--primary);color:#fff;box-shadow:0 6px 16px #2d1b4e40}.primary-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px #2d1b4e4d}.secondary-btn{color:var(--text-primary);background:#fff;border:1px solid #2d1b4e1a}.secondary-btn:disabled{opacity:.6;cursor:not-allowed}.ga-visuals{flex-direction:column;gap:18px;display:flex}.ga-visuals.scrollable{max-height:none}.top-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.sa-header-pill{justify-content:flex-end}.generation-pill{color:var(--text-primary);background:#e9e3ff;border:1px solid #2d1b4e26}.progress-tracker{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.progress-step{color:var(--text-primary);text-align:center;background:#f1efff;border:1px dashed #2d1b4e33;border-radius:12px;padding:10px 8px;font-weight:700}.progress-step.active{background:var(--primary);color:#fff;border-color:#fff6}.stage-buttons{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:4px;display:grid}.stage-buttons.vertical{grid-template-columns:1fr}.stage-btn{color:var(--text-primary);cursor:pointer;background:#fff;border:1px solid #2d1b4e1f;border-radius:10px;padding:10px 12px;font-weight:700;transition:all .2s}.stage-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 18px #2d1b4e1f}.stage-btn:disabled{opacity:.55;cursor:not-allowed}.stage-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 8px 18px #2d1b4e2e}.panel{background:#fff;border:1px solid #2d1b4e14;border-radius:14px;margin-top:6px;padding:16px;box-shadow:0 6px 18px #2d1b4e14}.panel.active-panel{border-color:var(--primary);box-shadow:0 8px 22px #2d1b4e1f}.panel h4{margin:0 0 10px;font-size:1.05rem;font-weight:700}.chromosome-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;display:grid}.chromosome-card{background:#faf9ff;border:1px solid #2d1b4e14;border-radius:12px;flex-direction:column;gap:6px;padding:10px;display:flex}.chromosome-card.selected{border-color:var(--primary);box-shadow:0 4px 14px #2d1b4e26}.chromosome-card.best{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#d97706;box-shadow:0 10px 24px #d9770633}.chromosome-genes{letter-spacing:.08em;color:var(--text-primary);word-break:break-all;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.chip-box{background:#2d1b4e0f;border:1px solid #2d1b4e1f;border-radius:10px;flex-wrap:wrap;gap:2px;padding:8px;display:inline-flex}.best-chip{background:#fff6d8;border-color:#d97706}.gene{padding:0 1px}.gene.match{color:#16a34a;font-weight:700}.gene.mismatch{color:#b91c1c}.gene.mutated{color:#d97706;font-weight:700;animation:.8s flash}.gene-space{width:6px}.stepper{flex-direction:column;gap:8px;margin-top:12px;display:flex}.stepper-btn{text-align:left;cursor:pointer;background:#fff;border:1px solid #2d1b4e1f;border-radius:10px;padding:10px 12px;font-weight:700;transition:all .2s}.stepper-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 8px 18px #2d1b4e2e}.stepper-btn:disabled{opacity:.6;cursor:not-allowed}.chromosome-meta{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;display:flex}.chip.small{padding:6px 8px;font-size:.8rem}.empty-state{color:var(--text-muted);text-align:center;padding:12px}.crossover-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;display:grid}.crossover-card{background:#f9f8ff;border:1px solid #2d1b4e14;border-radius:12px;flex-direction:column;gap:8px;padding:10px;display:flex}.pair-row{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.pair-row.children{border-top:1px dashed #2d1b4e26;padding-top:8px}.mini-chromo{background:#fff;border:1px solid #2d1b4e1a;border-radius:10px;flex-direction:column;gap:4px;padding:8px;display:flex}.mini-chromo.child{background:#f5f3ff}.label{color:var(--text-muted);font-size:.85rem}.genes{word-break:break-all;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.crossover-info{justify-content:flex-start;display:flex}.mutation-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;display:grid}.mutation-card{background:#f8fbff;border:1px solid #2d1b4e14;border-radius:12px;flex-direction:column;gap:8px;padding:10px;display:flex}.mutation-genes{flex-direction:column;gap:4px;display:flex}.mutation-genes.after .genes{flex-wrap:wrap;gap:2px;display:flex}.mutated{color:#e74c3c;font-weight:700}.mutation-meta{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;display:flex}.summary .chromosome-card{background:#fffdf7}.lattice-row{grid-template-columns:1fr 240px;align-items:start;gap:12px;display:grid}.lattice-grid{background:#f3f2ff;border:1px solid #2d1b4e14;border-radius:10px;gap:2px;padding:8px;display:grid;box-shadow:inset 0 0 0 1px #2d1b4e08}.lattice-cell{background:#fff;border:1px dashed #2d1b4e14;border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.lattice-cell.filled{border:1px solid #2d1b4e26}.lattice-cell.moved{box-shadow:0 0 0 2px #d9770666}.residue{color:#fff;border-radius:8px;justify-content:center;align-items:center;width:20px;height:20px;font-size:.8rem;font-weight:700;display:inline-flex;position:relative}.residue small{color:var(--text-muted);font-size:.55rem;position:absolute;bottom:-9px}.residue.hydro{background:#16a34a}.residue.polar{background:#2563eb}.meta-card{background:#fff;border:1px solid #2d1b4e14;border-radius:12px;gap:6px;padding:10px;display:grid;box-shadow:0 4px 12px #2d1b4e14}.accept-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;display:grid}.energy-chart{background:#f7f6ff;border:1px solid #2d1b4e14;border-radius:12px;padding:10px}.energy-chart svg{width:100%;height:140px}@media (max-width:900px){.intro-card{grid-template-columns:1fr}.header-actions{flex-direction:column}.dual-pane{grid-template-columns:1fr}.progress-tracker{grid-template-columns:repeat(2,1fr)}.top-bar{flex-direction:column;align-items:flex-start}.lattice-row{grid-template-columns:1fr}}*{box-sizing:border-box}.app{background:var(--bg-main);flex-direction:column;min-height:100vh;display:flex}.app-header{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;text-align:center;padding:clamp(24px,5vw,48px) clamp(16px,4vw,24px);position:relative;overflow:hidden}.app-header:before{content:"";pointer-events:none;background:radial-gradient(circle at 20%,#ffffff1a 0%,#0000 50%),radial-gradient(circle at 80%,#ffffff14 0%,#0000 50%);position:absolute;inset:0}.header-content{z-index:1;position:relative}.header-content h1{color:#fff;text-shadow:0 2px 10px #0003;letter-spacing:-.5px;margin:0 0 clamp(8px,2vw,12px);font-size:clamp(1.5rem,5vw,3rem);font-weight:800}.header-content .subtitle{opacity:.95;color:#ffffffe6;margin:0;font-size:clamp(.9rem,2vw,1.15rem);font-weight:400}.app-main{flex:1;width:100%;max-width:min(1400px,95vw);margin:0 auto;padding:clamp(12px,3vw,24px)}.input-panel{margin-bottom:24px}.results-panel{margin-bottom:32px}.visualization-controls{justify-content:center;gap:12px;margin-bottom:28px;display:flex}.viz-toggle{border:2px solid var(--primary);background:var(--tile-bg);color:var(--primary);cursor:pointer;border-radius:50px;padding:clamp(10px,2vw,14px) clamp(16px,4vw,28px);font-size:clamp(.85rem,2vw,1rem);font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #2d1b4e1a}.viz-toggle:hover{background:#2d1b4e14;transform:translateY(-2px);box-shadow:0 4px 12px #2d1b4e26}.viz-toggle.active{background:var(--primary);color:#fff;box-shadow:0 4px 16px #2d1b4e4d}.result-section,.matrix-section,.step-section{margin-bottom:24px}.matrix-section h2{text-align:center;color:var(--text-primary);margin-bottom:16px}.step-by-step-layout{grid-template-columns:1fr minmax(280px,400px);align-items:start;gap:clamp(16px,3vw,24px);display:grid}.matrix-with-controls{overflow:hidden}.matrix-with-controls h2{text-align:center;color:var(--text-primary);margin-top:0;margin-bottom:16px}.matrix-with-controls .matrix-container{box-shadow:none;padding:0}.step-section{position:sticky;top:24px}@media (max-width:1200px){.step-by-step-layout{grid-template-columns:1fr}.step-section{position:static}}.info-section{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(16px,3vw,24px);margin-top:clamp(20px,4vw,32px);display:grid}.algorithm-info-card{background:var(--tile-bg);border:1px solid #2d1b4e0d;border-radius:clamp(12px,2vw,16px);padding:clamp(16px,3vw,28px);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px #2d1b4e14}.algorithm-info-card.full-width{grid-column:1/-1;max-width:900px;margin:0 auto}.algorithm-info-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #2d1b4e1f}.algorithm-info-card h3{color:var(--text-primary);border-bottom:2px solid #2d1b4e1a;margin-top:0;margin-bottom:16px;padding-bottom:12px;font-size:1.5rem;font-weight:700}.algorithm-info-card>p{color:var(--text-secondary);margin-bottom:24px;font-size:1.05rem;line-height:1.7}.algorithm-info-card ul{color:#666;margin:0;padding-left:20px}.algorithm-info-card li{margin-bottom:8px;line-height:1.5}.formula-section{border-left:4px solid var(--primary);background:linear-gradient(135deg,#2d1b4e08,#2d1b4e0f);border-radius:12px;margin-bottom:24px;padding:20px 24px}.formula-section h4{color:var(--primary);margin:0 0 12px;font-size:1.1rem;font-weight:600}.formula{background:var(--tile-bg);border-radius:8px;padding:16px 20px;font-family:Fira Code,SF Mono,Monaco,monospace;font-size:.95rem;line-height:1.8;overflow-x:auto;box-shadow:inset 0 2px 6px #0000000a}.formula code{color:var(--text-primary)}.formula-comment{color:#6a9955;font-size:.85rem;font-style:italic}.formula-legend{color:var(--text-secondary);margin:12px 0 0;font-size:.9rem}.info-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px;display:grid}.info-item{text-align:center;background:#2d1b4e08;border-radius:10px;padding:16px}.info-item h4{color:var(--primary);margin:0 0 8px;font-size:.95rem;font-weight:600}.info-item p{color:var(--text-secondary);margin:0;font-size:.9rem;line-height:1.5}.use-cases{background:#2d1b4e05;border-radius:10px;margin-bottom:16px;padding:16px 20px}.use-cases h4{color:var(--primary);margin:0 0 12px;font-size:1rem;font-weight:600}.use-cases ul{margin:0;padding-left:20px}.use-cases li{color:var(--text-secondary);margin-bottom:6px}.warning-box{color:#856404;background:linear-gradient(135deg,#ffc1071a,#ff98001a);border:1px solid #ff98004d;border-radius:8px;margin-top:8px;padding:12px 16px;font-size:.9rem}.warning-box strong{color:#e65100}.app-footer{background:var(--primary-dark);color:#fff;text-align:center;margin-top:auto;padding:clamp(12px,3vw,20px)}.app-footer p{opacity:.9;margin:0}@media (max-width:768px){.header-content h1{font-size:1.75rem}.app-main{padding:16px}.info-section{grid-template-columns:1fr}}