*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{overflow-y:scroll}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;background:#fff}.navbar{width:100%;background:#fff;border-bottom:1px solid #e5e7eb;padding:1.25rem 2.5rem;position:sticky;top:0;z-index:100;box-shadow:0 2px 4px #0000000a}.nav-content{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.nav-logo{font-size:1.75rem;font-weight:700;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.03em}.nav-buttons{display:flex;gap:.5rem}.nav-button{padding:.75rem 1.5rem;font-size:1rem;font-weight:500;color:#374151;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;letter-spacing:-.005em;position:relative;text-decoration:none;display:inline-block}.nav-button:hover,.nav-button.active{color:#111827;background:#eff6ff}.header{text-align:center;margin:4rem 0 5rem;padding:0 2rem;max-width:800px}.title{font-size:3.5rem;font-weight:700;margin:0 0 1.5rem;letter-spacing:-.03em;color:#1a1a1a;line-height:1.2;white-space:nowrap}.subtitle{font-size:1.35rem;font-weight:400;margin:0;color:#666;line-height:1.6}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:0 2rem 4rem}.controls{display:flex;flex-direction:column;align-items:center;gap:0;width:600px;overflow:hidden}.mode-selector{width:80%;display:flex;gap:.75rem;padding:.5rem;background:#f9fafb;border-radius:10px;border:1px solid #e5e7eb;margin:0 auto 1rem}.mode-button{flex:1;padding:.75rem 1.5rem;font-size:.9375rem;font-weight:500;color:#6b7280;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;letter-spacing:-.005em}.mode-button:hover{color:#374151;background:#fff}.mode-button.active{color:#1f2937;background:#e0e7ff;box-shadow:0 1px 3px #0000001a}.button-group{display:flex;gap:1rem;align-items:center;justify-content:center;width:80%;margin:0 auto 1rem}.control-label{font-size:1.125rem;font-weight:500;color:#374151}.parameter-with-info{display:flex;align-items:center;justify-content:center;gap:.5rem;width:80%;margin:0 auto;position:relative}.info-button-wrapper{position:relative;display:inline-block}.info-button{width:14px;height:14px;border-radius:50%;background:#9ca3af;color:#fff;border:none;font-size:.625rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;font-style:italic;padding:0}.info-button:hover{background:#6b7280}.info-tooltip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%);width:250px;padding:.625rem .875rem;background:#fff;border:1px solid #d1d5db;border-radius:8px;font-size:.8125rem;color:#374151;line-height:1.4;text-align:left;box-shadow:0 4px 12px #00000026;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:1000;pointer-events:none}.info-tooltip:before{content:"";position:absolute;left:50%;bottom:-6px;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background:#fff;border-right:1px solid #d1d5db;border-bottom:1px solid #d1d5db}.info-button-wrapper:hover .info-tooltip{opacity:1;visibility:visible}.grid-size-value{font-weight:600;color:#3b82f6}.slider{width:80%;height:8px;border-radius:5px;background:#e5e7eb;outline:none;-webkit-appearance:none;appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);cursor:pointer;box-shadow:0 2px 8px #3b82f666;transition:all .2s ease}.slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #3b82f680}.slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);cursor:pointer;border:none;box-shadow:0 2px 8px #3b82f666;transition:all .2s ease}.slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #3b82f680}.randomize-button{padding:.75rem 1.75rem;font-size:.9375rem;font-weight:500;color:#374151;background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;letter-spacing:-.005em}.randomize-button:hover{color:#111827;background:#f9fafb;border-color:#d1d5db}.simulate-button{padding:.875rem 2.5rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border:none;border-radius:10px;cursor:pointer;box-shadow:0 4px 12px #3b82f64d;transition:all .2s ease;letter-spacing:-.01em}.simulate-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #3b82f666}.parameters-toggle-wrapper{width:80%;position:relative;margin:0 auto 1rem;min-height:40px}.parameters-toggle{width:100%;padding:.5rem 0;font-size:.9375rem;font-weight:500;color:#6b7280;background:transparent;border:none;border-bottom:1px solid #e5e7eb;cursor:pointer;transition:all .2s ease;letter-spacing:-.005em;text-align:center;display:flex;justify-content:center;align-items:center;gap:.5rem}.parameters-toggle:hover:not(.disabled){color:#374151;border-bottom-color:#d1d5db}.parameters-toggle.disabled{opacity:.5;cursor:not-allowed}.parameter-tooltip{position:absolute;top:-2.5rem;left:50%;transform:translate(-50%);background:#374151;color:#fff;padding:.5rem .875rem;border-radius:6px;font-size:.8125rem;white-space:nowrap;z-index:10;box-shadow:0 4px 12px #00000026}.parameter-tooltip:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%);width:8px;height:8px;background:#374151;transform:translate(-50%) rotate(45deg)}.toggle-icon{color:#9ca3af;transition:transform .2s ease}.parameters-panel{width:600px;display:flex;flex-direction:column;align-items:center;gap:1rem;padding-top:0;padding-bottom:1rem;margin-top:1rem;box-sizing:border-box}.interpretable-features-section{width:600px;margin-top:1.5rem;margin-bottom:1.5rem;display:flex;flex-direction:column;gap:1rem}.templates-section{width:100%;padding:1.25rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:.5rem}.templates-title{font-size:1rem;font-weight:600;color:#374151;margin:0 0 1rem;text-align:center}.template-buttons{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.template-button{padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;color:#1e40af;background:#fff;border:1px solid #bfdbfe;border-radius:6px;cursor:pointer;transition:all .2s ease}.template-button:hover{background:#eff6ff;border-color:#93c5fd;transform:translateY(-1px)}.interpretable-feature-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:1rem}.features-info-section{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem 1rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px}.features-info-section .info-tooltip{left:calc(100% + 8px);bottom:auto;top:50%;transform:translateY(-50%)}.features-info-section .info-tooltip:before{left:-6px;bottom:auto;top:50%;transform:translateY(-50%) rotate(45deg);border-right:none;border-bottom:1px solid #d1d5db;border-left:1px solid #d1d5db}.features-info-label{font-size:.9375rem;font-weight:500;color:#374151}.interpretable-feature-header{display:flex;gap:.5rem;margin-bottom:.75rem}.interpretable-feature-header .info-tooltip{left:calc(100% + 8px);bottom:auto;top:50%;transform:translateY(-50%)}.interpretable-feature-header .info-tooltip:before{left:-6px;bottom:auto;top:50%;transform:translateY(-50%) rotate(45deg);border-right:none;border-bottom:1px solid #d1d5db;border-left:1px solid #d1d5db}.feature-order-toggle{margin-bottom:1rem}.order-toggle-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.order-checkbox{width:18px;height:18px;cursor:pointer;accent-color:#3b82f6}.order-label-text{font-size:.875rem;color:#6b7280;font-weight:500}.interpretable-feature-name-input{flex:1;padding:.625rem .875rem;font-size:.9375rem;font-weight:500;color:#1a1a1a;background:#fff;border:1px solid #d1d5db;border-radius:6px;transition:all .2s ease;box-sizing:border-box}.interpretable-feature-name-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.interpretable-feature-name-input::placeholder{color:#9ca3af;font-weight:400}.remove-feature-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #d1d5db;border-radius:6px;color:#ef4444;font-size:1.5rem;font-weight:400;cursor:pointer;transition:all .2s ease;flex-shrink:0}.remove-feature-button:hover{background:#fef2f2;border-color:#ef4444}.interpretable-states-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.interpretable-state-item{display:flex;gap:.5rem;align-items:center}.interpretable-state-item .info-tooltip{left:calc(100% + 8px);bottom:auto;top:50%;transform:translateY(-50%)}.interpretable-state-item .info-tooltip:before{left:-6px;bottom:auto;top:50%;transform:translateY(-50%) rotate(45deg);border-right:none;border-bottom:1px solid #d1d5db;border-left:1px solid #d1d5db}.state-color-picker{width:32px;height:32px;border:2px solid #d1d5db;border-radius:50%;cursor:pointer;flex-shrink:0;transition:all .2s ease;overflow:hidden}.state-color-picker:hover{border-color:#9ca3af}.state-color-picker::-webkit-color-swatch-wrapper{padding:0}.state-color-picker::-webkit-color-swatch{border:none;border-radius:50%}.state-color-picker::-moz-color-swatch{border:none;border-radius:50%}.add-state-button-wrapper{grid-column:1 / -1;margin-top:.25rem}.interpretable-state-input{flex:1;min-width:0;padding:.5rem .75rem;font-size:.875rem;color:#1a1a1a;background:#fff;border:1px solid #d1d5db;border-radius:6px;transition:all .2s ease;box-sizing:border-box}.interpretable-state-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.interpretable-state-input::placeholder{color:#9ca3af}.remove-state-button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #d1d5db;border-radius:4px;color:#ef4444;font-size:1.25rem;font-weight:400;cursor:pointer;transition:all .2s ease;flex-shrink:0}.remove-state-button:hover{background:#fef2f2;border-color:#ef4444}.add-state-button{padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;cursor:pointer;transition:all .2s ease}.add-state-button:hover{background:#dbeafe;border-color:#93c5fd}.add-feature-button{padding:.75rem 1.5rem;font-size:.9375rem;font-weight:500;color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;cursor:pointer;transition:all .2s ease}.add-feature-button:hover{background:#dbeafe;border-color:#93c5fd}.correlations-section{width:100%;margin-top:2rem;padding:1.5rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px}.correlations-title-wrapper{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1.25rem}.correlations-title{font-size:1.125rem;font-weight:600;color:#1a1a1a;margin:0;letter-spacing:-.01em}.correlations-title-wrapper .info-tooltip{left:50%;bottom:calc(100% + 8px);top:auto;transform:translate(-50%)}.correlations-title-wrapper .info-tooltip:before{left:50%;bottom:-6px;top:auto;transform:translate(-50%) rotate(45deg);border-right:1px solid #d1d5db;border-bottom:1px solid #d1d5db;border-left:none}.correlation-item{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.correlation-item:last-child{margin-bottom:0}.correlation-label{font-size:.9375rem;font-weight:500;color:#374151;display:flex;justify-content:space-between;align-items:center}.correlation-value{font-weight:600;color:#3b82f6;font-size:1rem}.naming-section{width:600px;margin-top:1rem;margin-bottom:2rem;padding-top:0;overflow:hidden;box-sizing:border-box}.naming-toggle-button{width:100%;padding:.75rem 1rem;font-size:.9375rem;font-weight:500;color:#374151;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;display:flex;justify-content:center;align-items:center;gap:.5rem}.naming-toggle-button:hover{background:#f3f4f6;border-color:#d1d5db}.naming-toggle-icon{color:#9ca3af;transition:transform .2s ease}.naming-content{margin-top:1rem;padding:.75rem;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb;max-width:100%;width:100%;overflow-x:auto;box-sizing:border-box}.naming-description{font-size:.875rem;color:#6b7280;margin:0 0 1rem;text-align:center;line-height:1.5}.feature-naming-group{margin-bottom:1.5rem;padding:.75rem;background:#fff;border-radius:8px;border:1px solid #e5e7eb;min-width:0;max-width:100%}.feature-naming-group:last-child{margin-bottom:0}.feature-naming-header{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e5e7eb}.feature-naming-label{font-size:.875rem;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.025em}.feature-name-input{width:100%;max-width:100%;padding:.625rem .875rem;font-size:.9375rem;color:#1a1a1a;background:#fff;border:1px solid #d1d5db;border-radius:6px;transition:all .2s ease;box-sizing:border-box}.feature-name-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.feature-name-input::placeholder{color:#9ca3af}.value-naming-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.value-naming-item{display:flex;flex-direction:column;gap:.375rem;min-width:0}.value-index{flex-shrink:0;width:28px;height:24px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#3b82f6;font-size:.75rem;font-weight:600;border-radius:4px}.value-name-input{width:100%;min-width:0;padding:.4rem .5rem;font-size:.75rem;color:#1a1a1a;background:#fff;border:1px solid #d1d5db;border-radius:4px;transition:all .2s ease;box-sizing:border-box}.value-name-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.value-name-input::placeholder{color:#9ca3af}.grid-container{display:grid;padding:2rem;background:#f8f9fa;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 4px 6px #0000000d;width:400px;height:400px;place-items:center;transition:none}.node-wrapper{display:flex;align-items:center;justify-content:center;transition:none}.node{border-radius:50%;background:#3b82f6;box-shadow:0 2px 8px #3b82f633;cursor:pointer;transition:none}.node:hover{transform:scale(1.1);background:#2563eb;box-shadow:0 4px 12px #3b82f64d;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.node-tooltip{position:fixed;transform:translate(-50%,-100%);background:#1f2937;color:#fff;padding:.75rem 1rem;border-radius:8px;font-size:.875rem;z-index:1000;pointer-events:none;box-shadow:0 4px 12px #0003;min-width:150px}.node-tooltip:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background:#1f2937}.tooltip-title{font-weight:600;font-size:.9375rem;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.2)}.tooltip-features{display:flex;flex-direction:column;gap:.375rem}.tooltip-feature{display:flex;justify-content:space-between;gap:1rem}.tooltip-feature-name{color:#9ca3af;font-size:.8125rem;text-transform:capitalize}.tooltip-feature-value{font-weight:600;color:#fff;font-size:.875rem}.tooltip-feature-value-with-color{display:flex;align-items:center;gap:.5rem}.tooltip-state-color{width:16px;height:16px;border-radius:3px;border:1px solid rgba(255,255,255,.3);flex-shrink:0}@media(max-width:968px){.navbar{padding:1rem 1.5rem}.nav-logo{font-size:1.25rem}.nav-buttons{gap:.5rem}.nav-button{padding:.75rem 1.25rem;font-size:1rem}.header{margin:3rem 0}.title{font-size:2.5rem;white-space:normal}.subtitle{font-size:1.15rem}.grid-container{width:500px;height:500px;padding:2rem;gap:.75rem}}@media(max-width:640px){.navbar{padding:1rem}.nav-content{flex-direction:column;gap:1rem}.nav-logo{font-size:1.25rem}.nav-buttons{width:100%;justify-content:center;gap:.5rem}.nav-button{flex:1;padding:.75rem 1rem;font-size:.95rem}.header{margin:2.5rem 0;padding:0 1rem}.title{font-size:2rem}.subtitle{font-size:1rem}.grid-container{width:90vw;height:90vw;max-width:400px;max-height:400px;padding:1.5rem}.controls{width:100%}.parameters-panel,.naming-section{width:100%;max-width:100%}.value-naming-grid{grid-template-columns:1fr}.naming-content,.feature-naming-group{padding:.75rem}.interpretable-features-section{width:100%;padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem;gap:.75rem}.templates-section{margin-bottom:.75rem}.templates-title{font-size:.9375rem;margin-bottom:.5rem}.template-buttons{gap:.375rem}.template-button{padding:.375rem .625rem;font-size:.75rem;flex:1 1 calc(50% - .1875rem);min-width:0}.features-info-section{padding:.5rem .75rem;margin-bottom:.75rem}.features-info-label{font-size:.8125rem}.interpretable-feature-card{padding:.625rem;margin-bottom:.75rem}.interpretable-feature-header{flex-wrap:wrap;gap:.375rem;margin-bottom:.5rem}.interpretable-feature-name-input{min-width:0;flex:1;padding:.5rem;font-size:.875rem}.remove-feature-button{width:28px;height:28px;font-size:1.125rem}.feature-order-toggle{margin-bottom:.5rem}.order-toggle-label{gap:.375rem}.order-label-text{font-size:.8125rem}.interpretable-states-list{grid-template-columns:1fr;gap:.5rem}.interpretable-state-item{gap:.375rem}.state-color-picker{width:32px;height:32px}.interpretable-state-input{padding:.5rem;font-size:.875rem}.remove-state-button{width:28px;height:28px;min-width:28px;font-size:1.125rem}.add-state-button{padding:.375rem .625rem;font-size:.8125rem}.add-feature-button{padding:.5rem .875rem;font-size:.8125rem;margin-bottom:.75rem}.correlations-section{padding:.75rem;margin-top:.75rem}.correlations-title-wrapper{margin-bottom:.75rem}.correlations-title{font-size:.9375rem}.correlation-item{gap:.375rem;margin-bottom:.75rem}.correlation-label{font-size:.75rem;margin-bottom:.25rem}.correlation-value{font-size:.8125rem}.slider{height:6px}.state-name-with-color{width:100%}.interpretable-state-name-input{flex:1;min-width:0}}@media(max-width:400px){.nav-button{padding:.65rem .75rem;font-size:.85rem}.grid-container{width:85vw;height:85vw;max-width:350px;max-height:350px;padding:1rem}}.math-content{max-width:900px;margin:0 auto;padding:2rem}.math-section{margin-bottom:3rem}.math-heading{font-size:2rem;font-weight:700;color:#1a1a1a;margin-bottom:1.5rem;letter-spacing:-.02em}.math-text{font-size:1.125rem;line-height:1.8;color:#374151;margin-bottom:1rem}.parameter-list{display:flex;flex-direction:column;gap:1rem}.parameter-item{padding:1.25rem;background:#f9fafb;border-radius:8px;border-left:4px solid #3b82f6;font-size:1.0625rem;line-height:1.7;color:#374151}.parameter-item strong{color:#1a1a1a}.rule-steps{display:flex;flex-direction:column;gap:1.5rem}.rule-step{display:flex;gap:1.25rem;align-items:flex-start}.step-number{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem}.step-content{flex:1;font-size:1.0625rem;line-height:1.7;color:#374151}.step-content strong{color:#1a1a1a;display:block;margin-bottom:.5rem}.step-content ul{margin-top:.75rem;padding-left:1.5rem}.step-content li{margin-bottom:.5rem}.formula{margin-top:.75rem;padding:1rem;background:#f3f4f6;border-radius:6px;font-family:Courier New,monospace;font-size:1rem;color:#1a1a1a;border-left:3px solid #8b5cf6}.absorbing-states{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1.5rem}.state-card{padding:1.5rem;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb}.state-card h3{font-size:1.25rem;font-weight:600;color:#1a1a1a;margin-bottom:.75rem}.state-card p{font-size:1rem;line-height:1.7;color:#374151;margin:0}.insights-list{list-style:none;padding:0;margin:1.5rem 0 0}.insights-list li{padding:1.25rem;margin-bottom:1rem;background:#f9fafb;border-radius:8px;font-size:1.0625rem;line-height:1.7;color:#374151;border-left:4px solid #8b5cf6}.insights-list li strong{color:#1a1a1a}.color-mapping-visual{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.5rem}.mapping-case{background:#f9fafb;padding:1.5rem;border-radius:12px;border:1px solid #e5e7eb}.mapping-case h3{font-size:1.125rem;font-weight:600;color:#1a1a1a;margin-bottom:1rem}.mapping-explanation{display:flex;flex-direction:column;gap:1rem}.color-box{width:100%;height:80px;border-radius:8px;border:2px solid #e5e7eb}.mapping-text{font-size:.9375rem;line-height:1.8;color:#374151}.mapping-text strong{color:#1a1a1a}.demo-controls{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin:2rem 0;padding:2rem;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb}.demo-control-group{width:100%;max-width:400px;display:flex;flex-direction:column;gap:.5rem}.demo-visualization{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem}.demo-features,.demo-calculation,.demo-result{background:#f9fafb;padding:1.5rem;border-radius:12px;border:1px solid #e5e7eb}.demo-subtitle{font-size:1.125rem;font-weight:600;color:#1a1a1a;margin-bottom:1rem}.feature-values{display:flex;flex-direction:column;gap:.75rem}.feature-value-item{display:flex;justify-content:space-between;padding:.75rem;background:#fff;border-radius:6px;border:1px solid #e5e7eb}.feature-value-item.red-tint{background:#fef2f2}.feature-value-item.green-tint{background:#f0fdf4}.feature-value-item.blue-tint{background:#eff6ff}.feature-label{color:#6b7280;font-size:.9375rem}.feature-value{color:#1a1a1a;font-weight:600;font-size:1rem}.rgb-calculations{display:flex;flex-direction:column;gap:.75rem}.rgb-calc-item{padding:.75rem;background:#fff;border-radius:6px;border:1px solid #e5e7eb;font-size:.9375rem;line-height:1.6;color:#374151;font-family:Courier New,monospace}.rgb-calc-item.red-tint{background:#fef2f2}.rgb-calc-item.green-tint{background:#f0fdf4}.rgb-calc-item.blue-tint{background:#eff6ff}.rgb-calc-item strong{color:#1a1a1a;font-weight:700}.demo-result{display:flex;flex-direction:column;align-items:center;justify-content:center}.demo-color-circle{width:120px;height:120px;border-radius:50%;border:3px solid #e5e7eb;box-shadow:0 4px 12px #0000001a;margin-bottom:1rem}.demo-rgb-value{font-family:Courier New,monospace;font-size:1rem;color:#374151;font-weight:600}@media(max-width:768px){.math-content{padding:1.5rem}.math-heading{font-size:1.75rem}.math-text{font-size:1rem}.absorbing-states,.color-mapping-visual{grid-template-columns:1fr}.step-number{width:35px;height:35px;font-size:1rem}.step-content,.parameter-item,.insights-list li{font-size:1rem}.demo-visualization{grid-template-columns:1fr}.demo-color-circle{width:100px;height:100px}}@media(max-width:640px){.math-content{padding:1rem}.math-section{margin-bottom:2rem}.math-heading{font-size:1.5rem}.rule-step{flex-direction:column;gap:.75rem}.mapping-case{padding:1rem}.color-box{height:60px}.demo-controls{padding:1.5rem 1rem}.demo-color-circle{width:90px;height:90px}}.metrics-container{width:100%;max-width:600px;margin-top:2rem;padding:1.5rem;background:#fff;border-radius:12px;border:1px solid #e5e7eb;box-shadow:0 2px 8px #0000000d}.metrics-title{font-size:1.25rem;font-weight:600;color:#1a1a1a;margin:0 0 1.25rem;text-align:center;letter-spacing:-.01em}.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.metric-card{padding:1rem;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb;transition:all .2s ease}.metric-card:hover{background:#f3f4f6;transform:translateY(-2px);box-shadow:0 4px 8px #00000014}.metric-label{font-size:.875rem;font-weight:500;color:#6b7280;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.025em}.metric-value{font-size:1.75rem;font-weight:700;color:#1a1a1a;letter-spacing:-.02em}.metric-subvalue{font-size:1rem;font-weight:500;color:#6b7280;margin-left:.5rem}.save-button-container{margin-top:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}.save-database-button{padding:.875rem 2.5rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:10px;cursor:pointer;box-shadow:0 4px 12px #10b9814d;transition:all .2s ease;letter-spacing:-.01em}.save-database-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #10b98166}.save-database-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.save-error-message{font-size:.875rem;color:#dc2626;font-weight:500}@media(max-width:640px){.metrics-container{padding:1.25rem}.metrics-grid{grid-template-columns:1fr;gap:.75rem}.metric-value{font-size:1.5rem}.metric-subvalue{font-size:.875rem}.save-database-button{width:100%;padding:.875rem 1.5rem}}