*{margin:0;padding:0;box-sizing:border-box}:root{--off-white: #f8f7f4;--off-white-2: #f0efe8;--off-white-3: #e8e7e0;--off-white-4: #e0dfd8;--off-white-5: #d8d7d0;--black: #0a0a0a;--black-2: #1a1a1a;--black-3: #2a2a2a;--black-4: #3a3a3a;--black-5: #4a4a4a;--accent: #d4af37;--accent-2: #b8941f;--accent-3: #9c7c1a;--gray-50: var(--off-white);--gray-100: var(--off-white-2);--gray-200: var(--off-white-3);--gray-300: var(--off-white-4);--gray-400: var(--off-white-5);--gray-500: #8a8a8a;--gray-600: #6a6a6a;--gray-700: #4a4a4a;--gray-800: #2a2a2a;--gray-900: var(--black);--success-50: #f0fdf4;--success-500: #22c55e;--success-600: #16a34a;--error-50: #fef2f2;--error-500: #ef4444;--error-600: #dc2626;--warning-50: #fffbeb;--warning-500: #f59e0b;--warning-600: #d97706;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs: .7rem;--font-size-sm: .8rem;--font-size-base: .9rem;--font-size-lg: 1rem;--font-size-xl: 1.1rem;--font-size-2xl: 1.3rem;--font-size-3xl: 1.6rem;--font-size-4xl: 2rem;--font-size-5xl: 2.5rem;--spacing-1: .2rem;--spacing-2: .4rem;--spacing-3: .6rem;--spacing-4: .8rem;--spacing-5: 1rem;--spacing-6: 1.2rem;--spacing-8: 1.6rem;--spacing-10: 2rem;--spacing-12: 2.4rem;--spacing-16: 3.2rem;--spacing-20: 4rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .15), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .15), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .15), 0 8px 10px -6px rgba(0, 0, 0, .1);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--radius-sm: .3rem;--radius-md: .4rem;--radius-lg: .6rem;--radius-xl: .8rem;--radius-2xl: 1.2rem;--radius-3xl: 1.6rem;--radius-full: 9999px;--white: var(--off-white);--transition-fast: .15s ease-in-out;--transition-normal: .25s ease-in-out;--transition-slow: .35s ease-in-out}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.5;color:var(--black);background:var(--off-white);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-6)}header{text-align:center;margin-bottom:var(--spacing-8);position:relative}header h1{font-size:var(--font-size-3xl);font-weight:700;color:var(--black);margin-bottom:var(--spacing-2);letter-spacing:-.025em}header p{font-size:var(--font-size-base);color:var(--gray-600);font-weight:400;max-width:450px;margin:0 auto}.btn-about{position:absolute;top:0;right:0;background:var(--off-white);border:2px solid var(--black);border-radius:var(--radius-full);padding:var(--spacing-1);font-size:var(--font-size-base);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-sm);color:var(--black)}.btn-about:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px);background:var(--accent);color:var(--black)}.instructions-section{background:var(--off-white);border-radius:var(--radius-2xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6);box-shadow:var(--shadow-xl);border-left:4px solid var(--accent);animation:slideInUp .6s ease-out}.instructions-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-4)}.instructions-header h3{font-size:var(--font-size-xl);color:var(--black);font-weight:600;margin:0}.btn-close{background:none;border:none;font-size:var(--font-size-xl);color:var(--black);cursor:pointer;padding:var(--spacing-2);border-radius:50%;transition:all var(--transition-normal);width:32px;height:32px;display:flex;align-items:center;justify-content:center}.btn-close:hover{background:var(--black);color:var(--off-white)}.instructions-content{display:flex;flex-direction:column;gap:var(--spacing-3)}.instruction-step{padding:var(--spacing-3);background:var(--off-white-2);border-radius:var(--radius-lg);border-left:3px solid var(--accent);transition:all var(--transition-normal)}.instruction-step:hover{background:var(--accent);border-left-color:var(--black);color:var(--black)}.math-explanation{margin-top:var(--spacing-4);padding:var(--spacing-4);background:var(--off-white-2);border-radius:var(--radius-xl);border:1px solid var(--accent)}.math-explanation ul{margin:var(--spacing-2) 0;padding-left:var(--spacing-6)}.math-explanation li{margin:var(--spacing-1) 0;color:var(--black)}.math-explanation p{margin:var(--spacing-2) 0 0 0;font-style:italic;color:var(--gray-600)}.controls-section{background:var(--off-white);border-radius:var(--radius-2xl);padding:var(--spacing-5);margin-bottom:var(--spacing-4);box-shadow:var(--shadow-xl);animation:slideInUp .6s ease-out .1s both}.data-inputs-container h3{font-size:var(--font-size-lg);color:var(--black);margin-bottom:var(--spacing-3);font-weight:600;text-align:center}.data-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--spacing-3);margin-bottom:var(--spacing-4)}.input-group,.input-group label{display:flex;flex-direction:column;gap:var(--spacing-1)}.input-label{font-weight:600;color:var(--black);font-size:var(--font-size-sm)}.input-sublabel{font-size:var(--font-size-base);color:var(--gray-500);font-family:Courier New,monospace}.data-input{padding:var(--spacing-2);border:2px solid var(--black);border-radius:var(--radius-lg);font-size:var(--font-size-sm);transition:all var(--transition-normal);background:var(--off-white);font-weight:500;text-align:center;color:var(--black)}.data-input:focus{outline:none;border-color:var(--accent);background:var(--off-white-2);box-shadow:0 0 0 3px #d4af3733}.data-input:disabled{background:var(--off-white-3);color:var(--gray-500);cursor:not-allowed}.speed-control{background:var(--off-white-2);padding:var(--spacing-3);border-radius:var(--radius-xl);margin-bottom:var(--spacing-4);text-align:center}.speed-control label{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-2);font-weight:600;color:var(--black)}.speed-value{background:var(--accent);color:var(--black);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:700}.speed-slider{width:100%;height:4px;border-radius:2px;background:var(--black);outline:none;-webkit-appearance:none;margin-bottom:var(--spacing-2)}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-normal);border:2px solid var(--black)}.speed-slider::-webkit-slider-thumb:hover{background:var(--accent-2);transform:scale(1.1)}.speed-markers{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--gray-500)}.action-buttons{display:flex;gap:var(--spacing-2);justify-content:center;flex-wrap:wrap;margin-bottom:var(--spacing-4)}.btn{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);border:none;border-radius:var(--radius-xl);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-normal);min-width:110px;justify-content:center;box-shadow:var(--shadow-md)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:var(--shadow-sm)}.btn-icon{font-size:var(--font-size-base)}.btn-primary{background:var(--black);color:var(--off-white)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-xl);background:var(--black-2)}.btn-secondary{background:var(--accent);color:var(--black)}.btn-secondary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-xl);background:var(--accent-2)}.btn-reset{background:var(--gray-600);color:var(--off-white)}.btn-reset:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-xl);background:var(--gray-700)}.btn-info{background:var(--off-white-2);color:var(--black);border:1px solid var(--black)}.btn-info:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-xl);background:var(--black);color:var(--off-white)}.current-data{background:var(--off-white-2);padding:var(--spacing-3);border-radius:var(--radius-xl);text-align:center}.current-data h4{font-size:var(--font-size-sm);color:var(--black);margin-bottom:var(--spacing-2);font-weight:600}.data-display{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:var(--spacing-2)}.data-item{display:flex;flex-direction:column;gap:var(--spacing-1)}.data-label{font-size:var(--font-size-base);color:var(--gray-600);font-weight:500}.data-value{background:var(--black);color:var(--off-white);padding:var(--spacing-1);border-radius:var(--radius-lg);font-weight:700;font-size:var(--font-size-sm);transition:all var(--transition-normal)}.data-value.active{background:var(--accent);color:var(--black);transform:scale(1.05)}.fano-section{background:var(--off-white);border-radius:var(--radius-2xl);padding:var(--spacing-5);box-shadow:var(--shadow-xl);text-align:center;animation:slideInUp .6s ease-out .2s both}.fano-section h3{font-size:var(--font-size-lg);color:var(--black);margin-bottom:var(--spacing-2);font-weight:600}.fano-description{color:var(--gray-600);margin-bottom:var(--spacing-3);font-size:var(--font-size-sm);max-width:450px;margin-left:auto;margin-right:auto}.fano-container{display:flex;justify-content:center;align-items:center;min-height:250px;position:relative}.fano-svg{max-width:100%;height:auto;filter:drop-shadow(var(--shadow-lg))}.fano-point{cursor:pointer;transition:all var(--transition-normal)}.fano-point:hover{filter:brightness(1.1)}.fano-label{font-size:11px;font-weight:600;fill:var(--black);pointer-events:none}.fano-legend{position:absolute;top:var(--spacing-2);right:var(--spacing-2);background:var(--off-white);padding:var(--spacing-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--black);max-width:180px}.fano-legend h4{font-size:var(--font-size-xs);color:var(--black);margin-bottom:var(--spacing-1);font-weight:600}.fano-legend p{font-size:var(--font-size-xs);color:var(--gray-600);margin-bottom:var(--spacing-1)}.legend-formula{background:var(--accent);padding:var(--spacing-1);border-radius:var(--radius-md);font-family:Courier New,monospace;font-size:var(--font-size-xs);color:var(--black);font-weight:600}.point-tooltip{position:absolute;background:var(--black);color:var(--off-white);padding:var(--spacing-2);border-radius:var(--radius-lg);font-size:var(--font-size-xs);max-width:160px;box-shadow:var(--shadow-xl);z-index:1000;pointer-events:none}.point-tooltip strong{display:block;margin-bottom:var(--spacing-1);color:var(--accent)}.tooltip-content{font-size:var(--font-size-xs);line-height:1.3}.codeword-section{background:var(--off-white);border-radius:var(--radius-2xl);padding:var(--spacing-5);margin-bottom:var(--spacing-3);box-shadow:var(--shadow-xl);text-align:center;animation:slideInUp .6s ease-out .3s both}.codeword-section.appear{animation:slideInUp .6s ease-out both}.codeword-section h3{font-size:var(--font-size-lg);color:var(--black);margin-bottom:var(--spacing-3);font-weight:600}.bit-boxes-container{display:flex;flex-direction:column;gap:var(--spacing-3)}.bit-boxes{display:flex;justify-content:center;gap:var(--spacing-2);margin-bottom:var(--spacing-3);flex-wrap:wrap}.bit-box{width:55px;height:55px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-normal);border:2px solid transparent;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}.bit-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-1);z-index:2;position:relative}.bit-value{font-size:var(--font-size-base);font-weight:700}.bit-label{font-size:var(--font-size-xs);font-weight:600}.bit-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000e6;color:var(--off-white);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-normal);border-radius:var(--radius-xl)}.bit-box:hover .bit-overlay{opacity:1}.overlay-text{font-size:var(--font-size-xs);font-weight:600;text-align:center}.parity-bit{background:var(--black);color:var(--off-white)}.parity-bit.active{background:var(--accent);color:var(--black);transform:scale(1.05)}.data-bit{background:var(--gray-600);color:var(--off-white)}.data-bit.active{background:var(--accent);color:var(--black);transform:scale(1.05)}.bit-box:disabled{cursor:not-allowed;opacity:.6;transform:none!important}.bit-box.flipping{transform:scale(.95)}.bit-labels{display:flex;justify-content:center;gap:var(--spacing-2);flex-wrap:wrap}.bit-label-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-1);width:55px}.label-text{font-size:var(--font-size-sm);font-weight:700;color:var(--black)}.label-type{font-size:var(--font-size-xs);color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}.bit-legend{display:flex;justify-content:center;gap:var(--spacing-4);margin-top:var(--spacing-2)}.legend-item{display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-xs);color:var(--gray-600)}.legend-color{width:14px;height:14px;border-radius:var(--radius-md)}.parity-color{background:var(--black)}.data-color{background:var(--gray-600)}.status-section{background:var(--off-white);border-radius:var(--radius-2xl);padding:var(--spacing-3);margin-bottom:var(--spacing-3);box-shadow:var(--shadow-xl);text-align:center;animation:slideInUp .6s ease-out .4s both}.status-text{font-size:var(--font-size-sm);color:var(--black);font-weight:500;padding:var(--spacing-2);background:var(--off-white-2);border-radius:var(--radius-xl);border-left:4px solid var(--accent)}.log-panel{background:var(--off-white);border-radius:var(--radius-2xl);padding:var(--spacing-4);margin-bottom:var(--spacing-4);box-shadow:var(--shadow-xl);animation:slideInUp .6s ease-out .5s both}.log-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-4)}.log-header h3{font-size:var(--font-size-xl);color:var(--black);font-weight:600;margin:0}.log-tabs{display:flex;gap:var(--spacing-2)}.tab{padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.tab.active{background:var(--accent);color:var(--black)}.tab:not(.active){background:var(--off-white-2);color:var(--gray-600)}.log-content{display:flex;flex-direction:column;gap:var(--spacing-4)}.log-section h4{font-size:var(--font-size-base);color:var(--black);margin-bottom:var(--spacing-3);font-weight:600}.math-log{max-height:200px;overflow-y:auto;background:var(--off-white-2);border-radius:var(--radius-xl);padding:var(--spacing-3);border:1px solid var(--black)}.empty-log{text-align:center;padding:var(--spacing-4);color:var(--gray-500)}.empty-icon{font-size:var(--font-size-2xl);display:block;margin-bottom:var(--spacing-3)}.log-entry{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2);border-bottom:1px solid var(--black);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:var(--font-size-sm);transition:all var(--transition-normal)}.log-entry:last-child{border-bottom:none}.log-entry.calculation{background:var(--accent);border-left:3px solid var(--black)}.log-entry.error{background:var(--error-50);border-left:3px solid var(--error-500)}.log-entry.success{background:var(--success-50);border-left:3px solid var(--success-500)}.log-icon{font-size:var(--font-size-base)}.log-timestamp{color:var(--gray-500);font-size:var(--font-size-xs);min-width:60px}.log-message{color:var(--black);flex:1}.error-history{background:var(--off-white-2);border-radius:var(--radius-xl);padding:var(--spacing-3);border:1px solid var(--black)}.error-entry{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2);border-bottom:1px solid var(--black);font-size:var(--font-size-sm)}.error-entry:last-child{border-bottom:none}.error-icon{font-size:var(--font-size-base)}.error-message{color:var(--black)}.log-actions{display:flex;gap:var(--spacing-3);justify-content:center;margin-top:var(--spacing-4)}.btn-clear,.btn-export{display:flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--black);border-radius:var(--radius-lg);background:var(--off-white);color:var(--black);cursor:pointer;transition:all var(--transition-normal);font-size:var(--font-size-sm);font-weight:500}.btn-clear:hover,.btn-export:hover{background:var(--black);color:var(--off-white);transform:translateY(-1px)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-3);animation:fadeIn .3s ease-out}.modal-content{background:var(--off-white);border-radius:var(--radius-2xl);max-width:500px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-2xl);animation:slideInUp .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-4);border-bottom:1px solid var(--black)}.modal-header h2{font-size:var(--font-size-xl);color:var(--black);font-weight:600;margin:0}.modal-close{background:none;border:none;font-size:var(--font-size-xl);color:var(--black);cursor:pointer;padding:var(--spacing-2);border-radius:50%;transition:all var(--transition-normal);width:28px;height:28px;display:flex;align-items:center;justify-content:center}.modal-close:hover{background:var(--black);color:var(--off-white)}.modal-body{padding:var(--spacing-4)}.about-section{margin-bottom:var(--spacing-4)}.about-section h3{font-size:var(--font-size-base);color:var(--black);margin-bottom:var(--spacing-2);font-weight:600}.about-section p,.about-section ul{color:var(--gray-600);line-height:1.5}.about-section ul{margin:var(--spacing-2) 0;padding-left:var(--spacing-4)}.about-section li{margin:var(--spacing-1) 0}.tech-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-2);margin-top:var(--spacing-2)}.tech-item{display:flex;justify-content:space-between;padding:var(--spacing-1);background:var(--off-white-2);border-radius:var(--radius-md)}.tech-label{font-weight:600;color:var(--black)}.tech-value{color:var(--accent);font-weight:500}.project-links{display:flex;gap:var(--spacing-3);margin-top:var(--spacing-2)}.project-link{display:flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-2) var(--spacing-3);background:var(--accent);color:var(--black);text-decoration:none;border-radius:var(--radius-lg);font-weight:500;transition:all var(--transition-normal)}.project-link:hover{background:var(--accent-2);transform:translateY(-2px)}.link-icon{font-size:var(--font-size-base)}.modal-footer{padding:var(--spacing-4);border-top:1px solid var(--black);text-align:center}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 1024px){.container{padding:var(--spacing-4)}header h1{font-size:var(--font-size-3xl)}.data-inputs{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.bit-boxes{gap:var(--spacing-2)}.bit-box{width:55px;height:55px}.bit-label-item{width:55px}.horizontal-container{flex-direction:column;gap:var(--spacing-3)}.left-panel{max-width:none}}@media (max-width: 768px){.container{padding:var(--spacing-3)}header h1{font-size:var(--font-size-2xl)}.data-inputs{grid-template-columns:1fr}.action-buttons{flex-direction:column;align-items:center}.btn{width:100%;max-width:200px}.bit-boxes{gap:var(--spacing-2)}.bit-box{width:50px;height:50px}.bit-label-item{width:50px}.instructions-content{gap:var(--spacing-2)}.instruction-step{padding:var(--spacing-2);font-size:var(--font-size-sm)}.modal-content{margin:var(--spacing-3);max-height:calc(100vh - 1.5rem)}.horizontal-container{flex-direction:column;gap:var(--spacing-3)}}@media (max-width: 480px){.bit-boxes{gap:var(--spacing-1)}.bit-box{width:45px;height:45px}.bit-label-item{width:45px}.bit-value{font-size:var(--font-size-base)}.bit-label{font-size:var(--font-size-xs)}.instructions-section,.controls-section,.codeword-section,.status-section,.log-panel{padding:var(--spacing-4)}.fano-container{min-height:250px}.horizontal-container{flex-direction:column;gap:var(--spacing-2)}}.header-buttons{display:flex;gap:var(--spacing-2);margin-top:var(--spacing-2)}.header-buttons .btn{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-sm);border-radius:var(--radius-md);transition:all var(--transition-fast)}.header-buttons .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.instructions-modal{max-width:500px;max-height:75vh;overflow-y:auto}.instructions-modal .modal-header h2{color:var(--accent);margin:0;font-size:var(--font-size-lg);font-weight:600}.instructions-modal .modal-body{padding:var(--spacing-4)}.instruction-step{background:var(--off-white-2);padding:var(--spacing-3);margin-bottom:var(--spacing-2);border-radius:var(--radius-md);border-left:4px solid var(--accent);font-size:var(--font-size-sm);line-height:1.5}.instruction-step strong{color:var(--accent)}.math-explanation{background:var(--accent);padding:var(--spacing-3);margin-top:var(--spacing-4);border-radius:var(--radius-md);border:1px solid var(--black)}.math-explanation h3{color:var(--black);margin:0 0 var(--spacing-2) 0;font-size:var(--font-size-base);font-weight:600}.math-explanation ul{margin:var(--spacing-2) 0;padding-left:var(--spacing-4)}.math-explanation li{margin-bottom:var(--spacing-1);line-height:1.4}.math-explanation p{margin:var(--spacing-2) 0 0 0;font-style:italic;color:var(--black)}.instructions-modal .modal-footer{padding:var(--spacing-3) var(--spacing-4);border-top:1px solid var(--black);text-align:center}.instructions-modal .modal-footer .btn{min-width:100px}.fano-section{text-align:center}.fano-section h3{color:var(--accent);margin-bottom:var(--spacing-2);font-size:var(--font-size-lg);font-weight:600}.fano-description{color:var(--gray-600);margin-bottom:var(--spacing-4);font-size:var(--font-size-sm);line-height:1.5;max-width:500px;margin-left:auto;margin-right:auto}.encoding-progress{margin-bottom:var(--spacing-4);padding:var(--spacing-3);background:var(--off-white-2);border-radius:var(--radius-xl);border:2px solid var(--black)}.progress-steps{display:flex;justify-content:center;gap:var(--spacing-4);align-items:center}.step{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-1);padding:var(--spacing-2);border-radius:var(--radius-lg);transition:all var(--transition-normal);opacity:.6}.step.active{opacity:1;background:var(--accent);color:var(--black);transform:scale(1.1)}.step-number{width:24px;height:24px;border-radius:50%;background:var(--black);color:var(--off-white);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:700}.step.active .step-number{background:var(--black);color:var(--accent)}.step-label{font-size:var(--font-size-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.horizontal-container{display:flex;gap:var(--spacing-4);width:100%;margin-bottom:var(--spacing-4)}.left-panel{flex:1;max-width:500px}.fano-section{flex:1;min-width:0}.fano-section .relative{position:relative}.fano-section .absolute{position:absolute}.fano-section .z-10{z-index:10}.fano-section .bg-black{background-color:var(--black)}.fano-section .text-white{color:var(--off-white)}.fano-section .px-3{padding-left:var(--spacing-2);padding-right:var(--spacing-2)}.fano-section .py-2{padding-top:var(--spacing-1);padding-bottom:var(--spacing-1)}.fano-section .rounded-lg{border-radius:var(--radius-lg)}.fano-section .text-sm{font-size:var(--font-size-sm)}.fano-section .font-medium{font-weight:500}.fano-section .shadow-lg{box-shadow:var(--shadow-lg)}.fano-section .pointer-events-none{pointer-events:none}