.input-section{display:flex;margin-bottom:20px;padding:15px;background:#f9f9f9;border-radius:8px;box-shadow:0 1px 3px #0000000d}.inputs-row{display:flex;width:100%;align-items:center;gap:15px;justify-content:center}.input-cell{flex:1;padding:0 10px;box-sizing:border-box}.button-cell{display:flex;flex-direction:column;padding:0 10px;box-sizing:border-box}.input-label{font-weight:600;color:#333;margin-bottom:8px;height:20px;display:block}.input-cell input,.random-button{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:8px;font-size:14px;transition:all .3s ease;outline:none;height:40px;box-sizing:border-box;margin:0}.input-cell input:focus{border-color:#4caf50;box-shadow:0 0 0 3px #4caf5033}.input-cell input.error{border-color:#f44336}.input-cell input.error:focus{box-shadow:0 0 0 3px #f4433633}.input-limit{font-size:11px;color:#666;margin-top:4px;height:15px}.error-message{color:#f44336;font-size:12px;margin-top:4px;min-height:18px;transition:all .3s ease}.random-button{background-color:#4caf50;color:#fff;border:none;cursor:pointer;white-space:nowrap;display:flex;align-items:center;justify-content:center}.random-button:hover{background-color:#45a049;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.random-button:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}:root{--bg-color: #f8f9fa;--title-color: #333333;--binary-color: #1890ff;--diff-color: #ff4d4f;--hover-bg: #e6f7ff;--hover-color: #0050b3;--transition: all .3s ease-in-out;--table-bg: #f8f9fa;--num1-bg: linear-gradient(to right, #e6f2ff, #f0f8ff);--num2-bg: linear-gradient(to right, #f5f5f5, #ffffff);--diff-bg: #fff0f0;--active-bg: #fff0f0;--active-color: #ff4d4f}.bit-table-wrapper{margin:20px auto;max-width:100%;overflow-x:visible;width:100%;background-color:transparent}.bit-table-wrapper h3{font-size:16px;font-weight:700;color:var(--title-color);margin-bottom:15px;text-align:center}.bit-table-container{margin-top:20px;width:100%}.bit-table{border-collapse:collapse;margin:0 auto;width:100%;table-layout:fixed;background-color:transparent;box-shadow:none}.bit-label{text-align:right;padding-right:10px;font-weight:700;color:var(--title-color);height:40px}.bit-header{padding:8px;border-bottom:1px solid #e8e8e8;font-weight:400;color:#aaa;font-size:12px;background-color:transparent;text-align:center;height:40px}.bit-cell{padding:10px;text-align:center;position:relative;transition:all .3s ease;width:30px;height:40px;border-bottom:1px solid #e8e8e8}.bit-0,.bit-1{color:var(--binary-color);font-size:14px;font-weight:400}tr:nth-child(1) .bit-cell{background:var(--num1-bg)}tr:nth-child(2) .bit-cell{background:var(--num2-bg)}.bit-diff{background-color:var(--diff-bg)!important;color:var(--diff-color);font-size:16px;font-weight:700}.bit-cell:hover{background-color:var(--hover-bg);color:var(--hover-color);transform:scale(1.05);cursor:pointer;z-index:10}.bit-cell.active{background-color:var(--active-bg)!important;color:var(--active-color);transform:scale(1.1);z-index:20;box-shadow:0 4px 8px #0000001a}.bit-cell:active{background-color:var(--diff-bg);color:var(--diff-color);transform:scale(1.1)}.bit-tooltip{position:absolute;bottom:-45px;left:50%;transform:translate(-50%) translateY(-10px);background-color:#333333d9;color:#fff;padding:4px 6px;border-radius:3px;font-size:11px;z-index:100;pointer-events:none;opacity:0;transition:all .2s ease;white-space:nowrap;box-shadow:0 2px 4px #0000001a;border:1px solid rgba(255,255,255,.1);line-height:1.4;max-width:160px}.bit-tooltip:after{content:"";position:absolute;bottom:100%;left:50%;margin-left:-4px;border-width:4px;border-style:solid;border-color:transparent transparent rgba(51,51,51,.85) transparent}.bit-tooltip.visible{opacity:1;transform:translate(-50%) translateY(0)}@media screen and (max-width: 768px){.bit-table{width:100%}}.bit-cell.unused{background-color:#f8f8f8!important;opacity:.4;border:1px dotted #ddd;transform:scale(.95)}.bit-cell.unused .bit-value{color:#ccc}.bit-cell:not(.unused){position:relative;z-index:5;transform:scale(1.05);box-shadow:0 2px 4px #0000001a;border:1px solid rgba(0,0,0,.1)}.bit-cell.bit-1:not(.unused){background-color:#32cd32cc!important;font-weight:700;color:#fff}.bit-cell.bit-0:not(.unused){background-color:#87cefa80!important}.bit-cell.bit-diff:not(.unused){background-color:#ff6347cc!important;font-weight:700;transform:scale(1.1);box-shadow:0 2px 8px #ff63474d}tr:nth-child(1) .bit-cell,tr:nth-child(2) .bit-cell{background:transparent}.bit-cell.effective-bit{animation:pulse-subtle 2s infinite ease-in-out}@keyframes pulse-subtle{0%,to{transform:scale(1.05)}50%{transform:scale(1.1)}}.bit-cell.effective-bit{border:2px solid rgba(0,0,0,.1);z-index:10}.bit-cell.bit-1.effective-bit{background-color:#28a745cc!important;font-weight:700;color:#fff;border-color:#28a74580}.bit-cell.bit-0.effective-bit{background-color:#6cc2efb3!important;border-color:#6cc2ef80}.bit-cell.bit-diff.effective-bit{background-color:#f55a3ccc!important;border-color:#f55a3c80}.bit-cell.highest-bit{position:relative}.bit-cell.highest-bit:before{content:"↑";position:absolute;top:-15px;left:50%;transform:translate(-50%);color:#f44336;font-weight:700}@keyframes breathe{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes highlightCell{0%{background-color:#ef9a9a}50%{background-color:#e57373}to{background-color:#ef9a9a}}.bit-diff-animated{animation:highlightCell 1.5s infinite}.bit-value-animated{animation:breathe .5s ease-in-out}.bit-table-container-animated{animation:fadeIn .8s ease-in-out}.result-section{margin-top:30px}.result-title{text-align:center;font-size:1.5em;margin-bottom:20px}.distance-value{color:#f44336;font-weight:700;font-size:1.2em;transition:all .3s ease}.bit-visualization{margin-top:20px}.distance-value-animated{animation:fadeIn .5s ease-in-out}.hamming-distance-container{max-width:100%;width:100%;margin:0 auto;padding:10px 0;background-color:#fff;text-align:center}body{font-family:Arial,sans-serif;line-height:1.6;color:#333;margin:0;padding:0;background-color:#fff}.github-corner{position:absolute;top:0;right:0;z-index:10}.app-content{width:100%;margin:0;padding:0;text-align:center}h1{font-size:2.5em;margin-bottom:10px;color:#333;text-align:center}h2{font-size:1.8em;margin-bottom:20px}h3{font-size:1.4em;margin-bottom:15px}p{margin-bottom:20px}a{color:#4caf50;text-decoration:none;font-weight:700}a:hover{text-decoration:underline}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.app{width:100%;max-width:100%;margin:0;padding:0;text-align:center;box-sizing:border-box;position:relative}.app-content{padding:1rem;width:100%;text-align:center;margin:0 auto;max-width:100%}.github-corner{position:absolute;top:0;right:0;z-index:10;margin:0;padding:0;line-height:0}.github-corner svg{fill:#333;color:#fff;width:100px;height:100px;display:block;border:0}.github-corner:hover .octo-arm{animation:octocat-wave .56s ease-in-out}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 768px){.app{padding:1rem}h1{font-size:2rem;margin-bottom:.75rem}p{font-size:1rem;margin-bottom:1.5rem}.github-corner svg{width:80px;height:80px}.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .56s ease-in-out}.app-content{padding:.5rem .25rem}}h1{font-size:2.5rem;margin-bottom:1rem;text-align:center}p{font-size:1.2rem;margin-bottom:2rem;color:#666}a{color:#4285f4;text-decoration:none;transition:color .3s ease}a:hover{color:#1a73e8;text-decoration:underline}.more-problems{text-align:center;margin:20px 0;padding:10px;background-color:#f8f9fa;border-radius:8px;box-shadow:0 2px 4px #0000000d}.more-problems a{color:#1890ff;font-weight:700;text-decoration:none;transition:all .3s ease;display:inline-block;padding:8px 16px;border-radius:4px;border:1px solid #1890ff}.more-problems a:hover{background-color:#1890ff;color:#fff;transform:translateY(-2px);box-shadow:0 4px 8px #1890ff33}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background-color:#f5f5f5;color:#333}body{font-family:Arial,sans-serif;background-color:#fff;color:#333}#root{display:flex;flex-direction:column;width:100%;min-height:100vh;background-color:#fff}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}}