@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Open+Sans:wght@400;600&family=Roboto:wght@400;700&display=swap";@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap";.controlled-animation-container{display:flex;flex-direction:column;align-items:center;padding:0;background-color:var(--bg-lighter);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);position:relative;width:100%;height:100%;box-sizing:border-box;perspective:1000px;overflow:hidden;max-width:1600px;margin:0 auto}.animation-stage{width:100%;flex:1;position:relative;margin:0;border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);background:linear-gradient(135deg,var(--bg-lighter) 0%,var(--bg-light) 100%);transition:var(--transition-normal);height:100%;overflow:visible;padding:10px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;max-width:none}.animation-stage:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.animation-svg{width:100%;height:100%;overflow:visible;padding:0;margin:0}.control-panel{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--spacing-sm);margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-lighter);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm)}.control-button{padding:var(--spacing-sm) var(--spacing-md);font-size:14px;background:var(--color-primary-gradient);color:var(--text-light);border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:var(--transition-normal);display:flex;align-items:center;justify-content:center;min-width:80px;font-family:var(--font-body);font-weight:600}.control-button:hover:not(:disabled){background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.control-button:active:not(:disabled){transform:translateY(0);box-shadow:none}.control-button:disabled{background-color:var(--text-tertiary);color:var(--bg-light);cursor:not-allowed}.speed-controls{display:flex;align-items:center;gap:var(--spacing-xs);margin-left:var(--spacing-sm)}.speed-controls span{font-size:14px;color:var(--text-secondary);font-family:var(--font-body)}.speed-button{padding:var(--spacing-xs) var(--spacing-sm);font-size:12px;background-color:var(--bg-light);color:var(--text-secondary);border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:var(--transition-fast);font-family:var(--font-body)}.speed-button:hover{background-color:var(--border-color)}.speed-button.active{background:var(--color-primary-gradient);color:var(--text-light)}.frame-counter{font-size:14px;color:var(--text-secondary);font-family:var(--font-code)}.highlight{display:inline-block;background-color:var(--color-accent);color:var(--text-light);padding:2px 8px;border-radius:var(--border-radius-sm);font-weight:700;animation:pulse 2s infinite}.number-block{fill:var(--color-primary);stroke:var(--color-primary-dark);stroke-width:2px}.number-text{font-size:20px;fill:var(--text-light);text-anchor:middle;dominant-baseline:middle;font-family:var(--font-code)}.title-text{font-size:24px;font-weight:700;text-anchor:middle;dominant-baseline:middle;fill:var(--color-primary-dark);animation:fadeIn .5s ease;font-family:var(--font-title)}.description-text{font-size:16px;text-anchor:middle;dominant-baseline:middle;fill:var(--text-secondary);animation:fadeIn .5s ease;font-family:var(--font-body)}.xor-symbol{font-size:20px;font-weight:700;text-anchor:middle;dominant-baseline:middle;fill:var(--color-accent);font-family:var(--font-code)}.result-block{fill:var(--color-secondary);stroke:var(--color-secondary-dark);stroke-width:2px}.result-text{font-size:20px;fill:var(--text-light);text-anchor:middle;dominant-baseline:middle;font-family:var(--font-code)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.pulse{animation:pulse 2s infinite ease-in-out}.glow{filter:drop-shadow(0 0 5px rgba(77,171,247,.7))}.rotate-3d{animation:rotate3d 10s infinite linear;transform-style:preserve-3d}@keyframes rotate3d{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.particle{position:absolute;width:8px;height:8px;border-radius:50%;background-color:var(--color-primary-light);opacity:.7;animation:particleFade 1.5s ease-out forwards;--x: 0;--y: 0}@keyframes particleFade{0%{transform:translate(0) scale(1);opacity:.7}to{transform:translate(var(--x),var(--y)) scale(0);opacity:0}}.blink{animation:blink 1s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.light-ripple{position:absolute;width:20px;height:20px;border-radius:50%;background-color:#fff0;border:2px solid var(--color-primary-light);animation:ripple 1.5s ease-out infinite;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes ripple{0%{width:0px;height:0px;opacity:.8}to{width:100px;height:100px;opacity:0}}@media (max-width: 767px){.control-panel{flex-direction:column;align-items:stretch;padding:var(--spacing-sm)}.speed-controls{flex-wrap:wrap;justify-content:center;margin:var(--spacing-sm) 0}.control-button{padding:var(--spacing-xs) var(--spacing-sm);font-size:12px;width:100%}}@media (max-width: 480px){.animation-stage{min-height:300px}.controlled-animation-container{padding:var(--spacing-xs)}}@media (max-height: 600px) and (orientation: landscape){.controlled-animation-container{padding:var(--spacing-xs)}.animation-stage{min-height:250px;height:60vh}.control-panel{padding:var(--spacing-xs)}.animation-result{font-size:14px}}.animation-progress{width:100%;height:8px;background-color:var(--bg-light);border-radius:var(--border-radius-sm);margin:var(--spacing-xs) 0;overflow:hidden;position:relative}.progress-bar{position:absolute;top:0;left:0;height:100%;width:100%;background-color:var(--bg-light)}.progress-filled{position:absolute;top:0;left:0;height:100%;background:var(--color-primary-gradient);transition:width .2s ease}svg{max-width:100%!important;width:100%!important;overflow:hidden!important;padding:0;margin:0}.visualizer{display:flex;flex-direction:column;align-items:center;padding:15px;width:100%;height:100%;margin:0 auto;font-family:Arial,sans-serif;box-sizing:border-box;overflow:hidden}.problem-description{width:100%;margin-bottom:15px;text-align:left;overflow-y:auto;flex-shrink:0;max-height:45%;background-color:#f8f9fa;padding:15px;border-radius:8px;box-shadow:0 2px 8px #0000000d}.problem-description h2{color:#333;border-bottom:2px solid #4dabf7;padding-bottom:6px;margin-bottom:10px;font-size:clamp(1.1rem,2.5vw,1.4rem)}.problem-description p{line-height:1.6;color:#333;font-size:clamp(15px,2vw,18px);margin-bottom:12px}.result{background-color:#f8f9fa;padding:15px;border-radius:8px;border-left:4px solid #4dabf7;margin-top:15px;width:100%;box-sizing:border-box;box-shadow:0 2px 8px #0000000d}.result h3{margin:0 0 10px;color:#333;font-size:clamp(18px,2.5vw,22px)}.result p{font-size:clamp(15px,2vw,18px);line-height:1.5;margin-bottom:8px}.highlight{color:#ff6b6b;font-weight:700;font-size:1.2em}@media (max-width: 767px){.visualizer{padding:10px}.problem-description{margin-bottom:10px;padding:10px;max-height:50%}.problem-description h2{padding-bottom:4px;margin-bottom:8px}.problem-description p{margin-bottom:8px}.result{padding:10px;margin-top:10px}}@media (max-height: 600px) and (orientation: landscape){.visualizer{padding:8px}.problem-description{margin-bottom:8px;padding:8px;max-height:40vh}.problem-description h2{padding-bottom:3px;margin-bottom:5px}.problem-description p{margin-bottom:6px;line-height:1.4}.result{padding:8px;margin-top:8px}}:root{--color-primary-light: #4dabf7;--color-primary: #339af0;--color-primary-dark: #1c7ed6;--color-primary-gradient: linear-gradient(135deg, #4dabf7, #228be6);--color-secondary-light: #63e6be;--color-secondary: #20c997;--color-secondary-dark: #0ca678;--color-secondary-gradient: linear-gradient(135deg, #63e6be, #0ca678);--color-tertiary-light: #b197fc;--color-tertiary: #845ef7;--color-tertiary-dark: #7048e8;--color-tertiary-gradient: linear-gradient(135deg, #b197fc, #7048e8);--color-accent-light: #ffa94d;--color-accent: #fd7e14;--color-accent-dark: #e67700;--color-accent-gradient: linear-gradient(135deg, #ffa94d, #e67700);--color-highlight-light: #ffe066;--color-highlight: #fcc419;--color-highlight-dark: #f59f00;--color-highlight-gradient: linear-gradient(135deg, #ffe066, #f59f00);--text-primary: #212529;--text-secondary: #495057;--text-tertiary: #868e96;--text-light: #f8f9fa;--bg-light: #f8f9fa;--bg-lighter: #ffffff;--bg-dark: #343a40;--bg-darker: #212529;--border-color: #dee2e6;--shadow-sm: 0 2px 5px rgba(0, 0, 0, .08);--shadow-md: 0 4px 10px rgba(0, 0, 0, .12);--shadow-lg: 0 10px 20px rgba(0, 0, 0, .15);--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--transition-fast: all .2s ease;--transition-normal: all .3s ease;--transition-slow: all .5s ease;--font-title: "Inter", "Roboto", sans-serif;--font-body: "Open Sans", sans-serif;--font-code: "JetBrains Mono", "Consolas", monospace}body{font-family:var(--font-body);color:var(--text-primary);background-color:var(--bg-light);line-height:1.5}h1,h2,h3,h4,h5,h6{font-family:var(--font-title);font-weight:700;margin-bottom:var(--spacing-md)}h1{font-size:24px;color:var(--text-primary);text-align:center;position:relative;padding-bottom:var(--spacing-sm);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm)}h1:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100px;height:3px;background:var(--color-primary-gradient);border-radius:var(--border-radius-sm)}button{font-family:var(--font-body);font-weight:600;cursor:pointer;border:none;border-radius:var(--border-radius-md);padding:var(--spacing-sm) var(--spacing-md);transition:var(--transition-normal)}button.primary{background:var(--color-primary-gradient);color:var(--text-light);box-shadow:var(--shadow-sm)}button.primary:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}button.primary:active{transform:scale(.95)}button.secondary{background:var(--color-secondary-gradient);color:var(--text-light);box-shadow:var(--shadow-sm)}button.accent{background:var(--color-accent-gradient);color:var(--text-light);box-shadow:var(--shadow-sm)}button:disabled{opacity:.7;cursor:not-allowed;transform:none!important;box-shadow:none!important}input,textarea{font-family:var(--font-body);font-size:16px;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius-md);background-color:var(--bg-lighter);width:100%;transition:var(--transition-fast)}input:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #4dabf733}.code,code,pre{font-family:var(--font-code);font-size:14px;background-color:var(--bg-lighter);border-radius:var(--border-radius-sm);padding:var(--spacing-xs) var(--spacing-sm)}.number{font-family:var(--font-code);font-weight:600}@keyframes breathe{0%{box-shadow:0 0 5px #4dabf733;filter:brightness(.2)}50%{box-shadow:0 0 15px #4dabf7cc;filter:brightness(1)}to{box-shadow:0 0 5px #4dabf733;filter:brightness(.2)}}.breathe{animation:breathe 2s infinite ease-in-out}@media (max-width: 768px){:root{--spacing-lg: 16px;--spacing-xl: 24px}h1{font-size:20px}button{padding:var(--spacing-xs) var(--spacing-sm)}}a{text-decoration:none;border-bottom:none;box-shadow:none;outline:none}a:hover,a:focus{text-decoration:none;border-bottom:none;box-shadow:none;outline:none}#root{max-width:1280px;margin:0 auto;padding:0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);text-align:center;width:100%;height:100%;display:flex;flex-direction:column}.app{max-width:1200px;margin:0 auto;padding:0;font-family:var(--font-body);display:flex;flex-direction:column;height:100vh;overflow:hidden;box-sizing:border-box;width:100%;position:relative}.github-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background-color:transparent;transition:var(--transition-normal);border-radius:50%;opacity:.7;vertical-align:middle;margin-left:var(--spacing-md);z-index:1}.github-button:hover{transform:scale(1.1);opacity:1}.github-button svg{width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.main-title{position:relative;color:var(--text-primary);text-align:center;margin:0 0 var(--spacing-xs) 0;padding:var(--spacing-xs) var(--spacing-sm);font-size:24px;font-family:var(--font-title);font-weight:700;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;box-shadow:var(--shadow-sm);border-radius:var(--border-radius-md);background:linear-gradient(to right,var(--bg-lighter),var(--bg-light),var(--bg-lighter))}.main-title:after{display:none}.main-title a,.main-title a:link,.main-title a:visited,.main-title a:hover,.main-title a:active,.main-title a:focus,.no-underline-link,.main-title *{color:inherit!important;text-decoration:none!important;-webkit-text-decoration:none!important;-moz-text-decoration:none!important;border-bottom:none!important;border-bottom-color:transparent!important;border-bottom-style:none!important;border-bottom-width:0!important;box-shadow:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;outline:none!important;background-image:none!important;position:relative;transition:color .2s;display:inline-flex;align-items:center}.main-title a:first-child{max-width:85%}.main-title a:hover{color:var(--color-primary)}.input-section{margin-bottom:var(--spacing-xs);background-color:var(--bg-lighter);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);display:flex;flex-direction:column}form{display:flex;width:100%}.input-wrapper{display:flex;width:100%;gap:var(--spacing-sm);align-items:center}label{font-weight:600;color:var(--text-secondary);font-size:16px;white-space:nowrap;margin-right:var(--spacing-sm)}input{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius-md);flex:1;min-width:200px;outline:none;transition:var(--transition-fast);font-family:var(--font-code);font-size:16px;height:48px}input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px #4dabf733}.start-button{padding:var(--spacing-sm) var(--spacing-md);font-size:16px;font-weight:600;white-space:nowrap;height:48px}.random-button{display:flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:var(--spacing-md)!important;background:var(--color-accent-gradient)!important;border:none!important;border-radius:var(--border-radius-md)!important;box-shadow:var(--shadow-sm);transition:var(--transition-normal);position:relative;overflow:hidden;font-size:24px;line-height:1;color:var(--text-light)}.random-button:hover{background:var(--color-accent-gradient)!important;transform:translateY(-3px) rotate(10deg);box-shadow:var(--shadow-md)}.random-button:active{transform:translateY(1px) rotate(0);box-shadow:var(--shadow-sm)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.random-button:hover{animation:bounce .5s ease infinite}.tabs{display:flex;margin-bottom:var(--spacing-xs);border-bottom:1px solid var(--border-color);gap:var(--spacing-xs)}.tab-button{background:none;border:none;padding:var(--spacing-md) var(--spacing-lg);margin-right:var(--spacing-sm);border-radius:var(--border-radius-md) var(--border-radius-md) 0 0;cursor:pointer;font-family:var(--font-body);font-weight:600;color:var(--text-secondary);transition:var(--transition-fast);border-bottom:3px solid transparent}.tab-button:hover{color:var(--color-primary);background-color:#4dabf70d}.tab-button.active{color:var(--color-primary);border-bottom:3px solid var(--color-primary);background-color:#4dabf71a}.content{flex:1;background-color:var(--bg-lighter);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);overflow:hidden;min-height:400px}@media (min-width: 1024px){.app{padding:var(--spacing-xs)}.main-title{font-size:28px}}@media (max-width: 1023px) and (min-width: 768px){.app{padding:var(--spacing-xs)}.main-title{font-size:24px}}@media (max-width: 767px){.app{padding:0}.main-title{font-size:20px}form{flex-direction:column}input,.start-button{width:100%}.random-button{min-width:42px;height:42px;font-size:20px}.input-section{padding:var(--spacing-sm)}.tabs{flex-wrap:wrap}.tab-button{flex:1;padding:var(--spacing-sm) var(--spacing-md);margin-right:0;font-size:14px}.github-button{width:24px;height:24px;margin-left:var(--spacing-sm)}.github-button svg{width:18px;height:18px}.main-title a:first-child{max-width:80%}.input-wrapper{flex-wrap:wrap}label{width:100%;margin-bottom:var(--spacing-xs)}input,.start-button{flex:1}}@media (max-height: 600px) and (orientation: landscape){.app{height:auto;min-height:100vh}.main-title{font-size:18px;margin-bottom:var(--spacing-sm);padding:var(--spacing-sm)}.input-section,.tabs{margin-bottom:var(--spacing-sm)}.tab-button{padding:var(--spacing-sm) var(--spacing-md)}.random-button{min-width:36px;height:36px;font-size:18px}.random-button svg{width:16px;height:16px}}.input-error{border-color:var(--color-accent)!important;background-color:#fd7e140d;box-shadow:0 0 0 1px #fd7e1440}.input-error:focus{box-shadow:0 0 0 2px #fd7e1440}.error-message{margin-top:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);background-color:#ff6b6b1a;border-left:3px solid var(--color-accent);color:var(--text-secondary);font-size:14px;text-align:left;position:relative;font-family:var(--font-body)}.error-message:before{content:"⚠️";margin-right:var(--spacing-sm);font-size:16px}.error-message strong,.error-message b{color:var(--color-accent-dark);font-weight:600;background-color:#ff6b6b1a;padding:0 var(--spacing-xs);border-radius:var(--border-radius-sm)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.content{animation:fadeIn .3s ease-out}:root{font-family:Arial,Helvetica,sans-serif;line-height:1.4;font-weight:400;color-scheme:light dark;color:#213547;background-color:#fff;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,#root{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column}body{margin:0;display:flex;flex-direction:column;min-width:320px;min-height:100vh}h1{font-size:clamp(1.1rem,3.5vw,1.6rem);line-height:1.2}h2{font-size:clamp(1rem,3vw,1.4rem);line-height:1.2}button{border-radius:8px;border:1px solid transparent;padding:.4em .8em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;cursor:pointer;transition:border-color .25s,background-color .25s}button:hover{border-color:#4dabf7}button:focus,button:focus-visible{outline:2px auto -webkit-focus-ring-color}@media (prefers-color-scheme: dark){:root{color:#ffffffde;background-color:#242424}button{background-color:#1a1a1a}}@media (max-width: 480px){h1{font-size:clamp(1rem,3vw,1.4rem)}h2{font-size:clamp(.9rem,2.5vw,1.2rem)}button{padding:.3em .6em;font-size:.9em}}@media (max-height: 600px) and (orientation: landscape){h1{font-size:clamp(.9rem,2.5vw,1.2rem)}button{padding:.2em .4em}}a,a:link,a:visited,a:hover,a:active,a:focus{text-decoration:none!important;border-bottom:none!important;box-shadow:none!important;outline:none!important;color:inherit}