: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}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.alphabet-container{display:flex;justify-content:center;gap:80px;padding:15px;position:relative;-webkit-user-select:none;user-select:none;border:1px solid #444;border-radius:8px;background-color:#1a1a1a}.drawing-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.column{display:flex;flex-direction:column;gap:8px;position:relative;z-index:2}.letter-row{display:flex;align-items:center;gap:10px;height:24px}.letter{font-size:16px;font-weight:700;color:#fff;width:20px;text-align:center}.anchor{width:10px;height:10px;background:#333;border-radius:50%;cursor:pointer;position:relative;border:2px solid #666;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.anchor:after{content:"";position:absolute;width:3px;height:3px;background:#888;border-radius:50%;transition:all .2s ease}.anchor:hover{background:#444;box-shadow:0 0 5px #646cff80}.anchor:hover:after{background:#646cff}.anchor.connected{background:#646cff;border-color:#8489ff;box-shadow:0 0 8px #646cffcc}.anchor.connected:after{background:#fff;width:6px;height:6px}.anchor.dragging{background:#64ff64;border-color:#84ff84;transform:scale(1.2)}.anchor.dragging:after{background:#fff;width:6px;height:6px}.anchor.available{border-color:#64ff64;animation:pulse 1s infinite}.cable{position:absolute;pointer-events:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.3))}.cable-core{stroke:#646cff;stroke-width:4;fill:none;stroke-linecap:round}.cable-glow{stroke:#646cff4d;stroke-width:8;fill:none;filter:blur(2px)}.cable-highlight{stroke:#ffffff80;stroke-width:2;fill:none;stroke-linecap:round}.connection-port{position:absolute;width:16px;height:16px;background:#222;border-radius:50%;border:2px solid #444;transition:all .2s ease}.connection-port.available{border-color:#646cff;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #646cff66}70%{box-shadow:0 0 0 6px #646cff00}to{box-shadow:0 0 #646cff00}}.left-column .letter-row{flex-direction:row;justify-content:flex-end}.right-column .letter-row{flex-direction:row;justify-content:flex-start}.matching-game{display:flex;flex-direction:column;align-items:center;gap:30px;padding:0;width:100%}.text-inputs{display:flex;flex-direction:column;gap:15px;width:100%;max-width:100%;margin-top:30px}.input-group{display:flex;flex-direction:column;gap:5px}.input-group label{font-weight:700;color:#fff}.input-group input{padding:12px 16px;font-size:16px;border:2px solid #ccc;border-radius:4px;width:100%;min-height:100px;resize:vertical;font-family:inherit;line-height:1.5}.input-group input:focus{outline:none;border-color:#646cff}.input-group input[readonly]{background-color:#f5f5f5;cursor:not-allowed}.input-group textarea{padding:12px 16px;font-size:16px;border:2px solid #444;border-radius:4px;width:100%;min-height:100px;resize:vertical;font-family:inherit;line-height:1.5;background-color:#1a1a1a;color:#fff}.input-group textarea:focus{border-color:#646cff}.input-group textarea[readonly]{background-color:#242424}.game-container{display:flex;align-items:flex-start;gap:30px}.permutation-blocks{display:flex;flex-direction:column;height:100%}.permutation-blocks textarea{flex:1;min-height:0;resize:none}.rotary-container{display:flex;flex-direction:row;gap:20px;justify-content:center;align-items:flex-start;flex-wrap:wrap;width:100%}.permutation-block{background-color:#242424;padding:15px;border-radius:8px;border:2px solid #444;min-width:200px;display:flex;flex-direction:column;gap:10px;flex:0 1 auto}.block-header{font-size:18px;font-weight:700;margin-bottom:15px;color:#fff}.permutation-block select{width:100%;padding:8px;font-size:16px;border:2px solid #444;border-radius:4px;margin-bottom:15px;background-color:#1a1a1a;color:#fff}.permutation-block select:focus{outline:none;border-color:#646cff}.current-permutation{font-size:14px;color:#888;line-height:1.4}.matching-columns{display:flex;gap:30px}.final-matching{margin-left:30px;padding-left:30px}.matching-section{display:flex;flex-direction:column;gap:10px;align-items:center;padding:15px;background-color:#242424;border-radius:10px}.auto-connect-btn{padding:8px 16px;background-color:#646cff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;transition:all .2s}.auto-connect-btn:hover{background-color:#535bf2;transform:translateY(-1px)}.auto-connect-btn:active{transform:translateY(0)}.position-dots{display:flex;justify-content:space-between;padding:10px 0;margin-bottom:10px;border-radius:4px;background-color:#1a1a1a}.position-dots .dot{color:#444;font-size:12px;cursor:help;transition:color .2s}.position-dots .dot.selected{color:#646cff;opacity:.5}.position-dots .dot.active,.position-dots .dot.selected.active{color:#646cff;transform:scale(1.2);opacity:1}.motion-indicator{background-color:#242424;padding:15px;border-radius:8px;border:2px solid #444;margin-bottom:20px;margin-top:20px}.motion-indicator select{width:100%;padding:8px;font-size:16px;border:2px solid #444;border-radius:4px;background-color:#1a1a1a;color:#fff}.motion-indicator select:focus{outline:none;border-color:#646cff}.speed-label{font-size:14px;color:#646cff;margin-left:8px;font-weight:400}.button-group{display:flex;gap:10px;margin-bottom:10px}.control-btn{padding:6px 12px;background:none;color:#fff;border:1px solid;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s}.matching-section:not(.final-matching) .control-btn:nth-child(1){color:#64ff64;border-color:#64ff64}.matching-section:not(.final-matching) .control-btn:nth-child(2){color:#ff6464;border-color:#ff6464}.matching-section:not(.final-matching) .control-btn:nth-child(3){color:#646cff;border-color:#646cff}.final-matching .control-btn:nth-child(1){color:#646cff;border-color:#646cff}.final-matching .control-btn:nth-child(2){color:#64ff64;border-color:#64ff64}.final-matching .control-btn:nth-child(3){color:#ff6464;border-color:#ff6464}.control-btn[style*="64ff64"]:hover,.matching-section:not(.final-matching) .control-btn:nth-child(1):hover,.final-matching .control-btn:nth-child(2):hover{background:#64ff6422;transform:translateY(-1px)}.control-btn[style*=ff6464]:hover,.matching-section:not(.final-matching) .control-btn:nth-child(2):hover,.final-matching .control-btn:nth-child(3):hover{background:#ff646422;transform:translateY(-1px)}.control-btn[style*="646cff"]:hover,.matching-section:not(.final-matching) .control-btn:nth-child(3):hover,.final-matching .control-btn:nth-child(1):hover{background:#646cff22;transform:translateY(-1px)}.control-btn:active{transform:translateY(0)}.header{text-align:center;margin-bottom:30px}.header h1{font-size:2.5em;color:#646cff;margin-bottom:10px}.header h2{font-size:1.2em;color:#888;font-weight:400;margin-bottom:20px}.info-button{background:none;border:1px solid #646cff;color:#646cff;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s}.info-button:hover{background:#646cff22;transform:translateY(-1px)}.info-button:active{transform:translateY(0)}.header-buttons{display:flex;gap:15px;justify-content:center}.reset-button{background:none;border:1px solid #ff6464;color:#ff6464;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s}.reset-button:hover{background:#ff646422;transform:translateY(-1px)}.reset-button:active{transform:translateY(0)}.mode-switch{padding:8px 16px;border-radius:20px;border:none;font-weight:700;cursor:pointer;transition:all .3s ease;margin-right:10px}.mode-switch.encrypting{background-color:#646cff;color:#fff}.mode-switch.decrypting{background-color:#ff6464;color:#fff}.mode-switch:hover{opacity:.9;transform:scale(1.05)}.matching-section .button-group{margin-bottom:0}.permutation-block .rotary-container{margin-top:0;padding-top:0}.permutation-row{display:flex;flex-direction:column;margin:10px 0;overflow-x:auto}.index-row,.value-row{display:flex;flex-direction:row}.index-cell,.value-cell{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid #ccc;margin:1px;font-family:monospace}.index-cell.highlighted,.value-cell.highlighted,.value-cell.highlighted.input,.value-cell.highlighted.output{background-color:#646cff;color:#fff}.permutation-table{margin:15px auto;padding:10px;border:1px solid #ccc;border-radius:5px;max-width:fit-content}.permutation-table p{margin:5px 0;font-weight:700}.index-cell.label,.value-cell.label{width:70px;border:none;justify-content:flex-end;padding-right:10px}.move-steps{text-align:center}.move-steps p{margin:10px 0}.final-result{font-weight:700;color:#646cff;margin-top:20px}.permutations-tables{max-height:80vh;overflow-y:auto;padding:20px;width:90vw;max-width:800px;margin:0 auto}.permutations-tables h3{margin-top:0;margin-bottom:15px;color:#646cff}.permutations-tables h4{margin:10px 0;color:#646cff}.motion-table{width:100%;margin-bottom:20px;border-collapse:collapse}.motion-table th,.motion-table td{border:1px solid #646cff;padding:6px;text-align:center;font-size:14px}.motion-table th{background-color:#646cff;color:#fff}.tables-container{display:flex;flex-direction:column;gap:30px;width:100%}.table-section{width:100%}.table-group{width:100%;overflow:hidden}.scrollable-table{max-height:none;overflow:hidden;border:1px solid #646cff;border-radius:4px;width:100%;position:relative}.encryption-table{border-color:#646cff}.encryption-table tr:first-child td{background-color:#646cff11}.decryption-table{border-color:#ff6464}.scrollable-table tr:hover{background-color:#646cff22}.scrollable-table tr:first-child td{border-top:2px solid currentColor;background-color:#646cff11;font-weight:700}.scrollable-table th{background-color:#646cff;border-bottom:2px solid white;font-weight:700;padding:4px 2px;color:#fff}.scrollable-table td:first-child{background-color:#646cff}.scrollable-table table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;table-layout:fixed;border-right:1px solid currentColor}.scrollable-table th,.scrollable-table td{border-right:1px solid currentColor;border-bottom:1px solid currentColor;padding:2px;text-align:center;width:calc((100% - 35px)/20);min-width:24px;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.table-group h4:contains("Chiffrement")~.scrollable-table th,.table-group h4:contains("Chiffrement")~.scrollable-table td{border-color:#646cff}.scrollable-table th:last-child,.scrollable-table td:last-child{border-right:1px solid currentColor}.scrollable-table tr:first-child td:first-child{background-color:#646cff;color:#fff;border-top:2px solid white}@media (max-width: 1400px){.tables-container{grid-template-columns:1fr}}@media (max-width: 768px){.permutations-tables{padding:10px;width:98vw}}.scrollable-table th,.scrollable-table td:first-child{background-color:#646cff;color:#fff}.scrollable-table tr:first-child td{background-color:#646cff11}.decryption-table th,.decryption-table td:first-child{background-color:#ff6464}.decryption-table tr:first-child td{background-color:#ff646411}.decryption-table tr:first-child td:first-child{background-color:#ff6464}.encryption-table tr:hover{background-color:#646cff22}.encryption-table tr:hover td:first-child{background-color:#535bf2}.decryption-table tr:hover{background-color:#ff646422}.decryption-table tr:hover td:first-child{background-color:#f55}.decryption-table,.decryption-table th,.decryption-table td{border-color:#ff6464}.rotary-selector{display:flex;flex-direction:column;align-items:center;gap:10px;margin:10px}.rotary-switch{position:relative;width:100px;height:100px;cursor:pointer;-webkit-user-select:none;user-select:none}.rotary-switch-base{position:absolute;width:100%;height:100%;border-radius:50%;background:#2a2a2a;border:2px solid #444}.rotary-switch-knob{position:absolute;top:50%;left:50%;width:40%;height:8px;transform-origin:left center;border-radius:4px;box-shadow:0 0 10px var(--glow-color, rgba(100, 108, 255, .3))}.position-marker{position:absolute;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);transition:all .2s ease}.position-marker.active{width:10px;height:10px;box-shadow:0 0 8px var(--glow-color, rgba(100, 108, 255, .5))}.position-label{position:absolute;font-size:12px;transform:translate(-50%,-50%);transition:all .2s ease}.position-label.active{font-size:14px;font-weight:700;text-shadow:0 0 5px var(--glow-color, rgba(100, 108, 255, .3))}.current-mode{text-align:center;font-size:12px;min-height:2em}.position-marker.real-time{width:8px;height:8px;box-shadow:0 0 5px #ff0}.position-label.real-time{font-weight:700;text-shadow:0 0 5px #ffff00}body{display:flex;flex-direction:column;min-height:100vh;margin:0;padding:0}#root{padding:0!important;width:100%}.app{display:flex;flex-direction:column;min-height:100vh}.info-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;display:flex;justify-content:center;align-items:center;z-index:1000}.info-modal-content{background:#1a1a1a;padding:30px;border-radius:8px;max-width:600px;max-height:80vh;overflow-y:auto;position:relative;border:1px solid #444}.info-content{margin-top:20px}.info-content h3{color:#646cff;margin-top:20px;margin-bottom:10px}.info-content p{margin-bottom:15px;line-height:1.5}.info-content ul{list-style-type:disc;margin-left:20px;margin-bottom:15px}.info-content li{margin-bottom:8px;line-height:1.4}.header{position:sticky;top:0;width:100%;z-index:1000;background-color:#1a1a1a;padding:1rem;box-shadow:0 2px 4px #0000001a;border-bottom:1px solid #333;margin:0;left:0;right:0}.content-container{flex:1;width:100%;max-width:100%;margin:0 auto;padding:1rem;overflow-y:auto}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#1a1a1a;padding:30px;border-radius:8px;max-width:800px;max-height:90vh;overflow-y:auto;position:relative;border:1px solid #444}.close-button{position:absolute;top:10px;right:10px;background:none;border:none;font-size:24px;color:#888;cursor:pointer;padding:5px}.close-button:hover{color:#fff}.modal-body{margin-top:20px}#root{margin:0 auto;padding:0;text-align:center;width:100%;max-width:none}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.App{width:100%;min-height:100vh;display:flex;justify-content:center}