@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--primary-color: #29b6f6;--primary-dark: #1976d2;--primary-light: #4fc3f7;--secondary-color: #ab47bc;--secondary-dark: #7b1fa2;--secondary-light: #ba68c8;--neutral-50: #fafafa;--neutral-100: #f5f5f5;--neutral-200: #eeeeee;--neutral-300: #e0e0e0;--neutral-400: #bdbdbd;--neutral-500: #9e9e9e;--neutral-600: #757575;--neutral-700: #616161;--neutral-800: #424242;--neutral-900: #212121;--success-color: #4caf50;--success-light: #81c784;--warning-color: #ff9800;--warning-light: #ffb74d;--error-color: #f44336;--error-light: #e57373;--info-color: #2196f3;--info-light: #64b5f6;--gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);--gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);--gradient-success: linear-gradient(135deg, var(--success-color) 0%, var(--success-light) 100%);--gradient-warning: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-light) 100%);--gradient-error: linear-gradient(135deg, var(--error-color) 0%, var(--error-light) 100%);--bg-gradient-main: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--bg-gradient-light: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);--bg-gradient-card: linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(248, 250, 252, .9) 100%);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0 4px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .15);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .2);--shadow-2xl: 0 20px 40px rgba(0, 0, 0, .25);--border-radius-sm: 6px;--border-radius-md: 8px;--border-radius-lg: 12px;--border-radius-xl: 16px;--border-radius-2xl: 20px;--border-radius-full: 9999px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--z-toast: 1080}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-family:var(--font-family-sans);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:1.6;color:var(--neutral-800);background:var(--bg-gradient-main);min-height:100vh;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}a{color:var(--primary-color);text-decoration:none;transition:color var(--duration-normal) var(--ease-out)}a:hover,a:focus{color:var(--primary-dark);outline:none}a:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-bold);line-height:1.25;margin-bottom:var(--spacing-md);color:var(--neutral-900)}h1{font-size:var(--font-size-4xl);font-weight:var(--font-weight-extrabold)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base)}p{margin-bottom:var(--spacing-md);line-height:1.6}ul,ol{margin-bottom:var(--spacing-md);padding-left:var(--spacing-lg)}li{margin-bottom:var(--spacing-xs)}input,textarea,select,button{font-family:inherit;font-size:inherit;line-height:inherit}button{background:none;border:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;transition:all var(--duration-normal) var(--ease-out)}button:disabled{opacity:.5;cursor:not-allowed}img{max-width:100%;height:auto;display:block}code,pre{font-family:var(--font-family-mono);font-size:var(--font-size-sm)}code{background:#0000000d;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);color:var(--neutral-800)}pre{background:var(--neutral-100);padding:var(--spacing-md);border-radius:var(--border-radius-md);overflow-x:auto;margin-bottom:var(--spacing-md)}pre code{background:none;padding:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--neutral-100);border-radius:var(--border-radius-sm)}::-webkit-scrollbar-thumb{background:var(--gradient-primary);border-radius:var(--border-radius-sm);transition:background var(--duration-normal) var(--ease-out)}::-webkit-scrollbar-thumb:hover{background:var(--primary-dark)}::-webkit-scrollbar-corner{background:var(--neutral-100)}::selection{background:#29b6f633;color:var(--neutral-900)}::-moz-selection{background:#29b6f633;color:var(--neutral-900)}:focus{outline:none}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px;border-radius:var(--border-radius-sm)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media print{*,*:before,*:after{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-family-mono)}.font-sans{font-family:var(--font-family-sans)}.hidden{display:none}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}@media (max-width: 640px){:root{--font-size-4xl: 2rem;--font-size-3xl: 1.5rem;--spacing-2xl: 32px;--spacing-3xl: 48px}}@media (max-width: 480px){:root{--font-size-4xl: 1.75rem;--font-size-3xl: 1.375rem;--spacing-xl: 24px;--spacing-2xl: 32px}}.cache-simulator-container{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;padding:0;background:#fffffff2;border-radius:20px;box-shadow:0 20px 60px #0000001a;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:30px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden}.cache-simulator-container:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4fc3f7,#29b6f6,#1976d2,#0d47a1);background-size:200% 100%;animation:gradientMove 3s ease-in-out infinite}h2{color:#1a237e;text-align:center;margin:30px 0 0;font-size:2.2em;font-weight:700;background:linear-gradient(135deg,#1a237e,#3949ab);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative}h2:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(90deg,#4fc3f7,#29b6f6);border-radius:2px}h3{color:#1565c0;margin-bottom:20px;font-size:1.4em;font-weight:600;display:flex;align-items:center;gap:10px}h3:before{content:"";width:4px;height:20px;background:linear-gradient(135deg,#4fc3f7,#29b6f6);border-radius:2px}.config-section,.address-input-section,.cache-visualization-section{background:linear-gradient(135deg,#ffffffe6,#f8fafce6);padding:30px;border-radius:16px;box-shadow:0 8px 32px #00000014;border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:0 20px;position:relative;transition:all .3s ease}.config-section:hover,.address-input-section:hover,.cache-visualization-section:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0000001f}.config-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;align-items:start}.config-section input[type=number],.config-section select,.address-input-section textarea{padding:12px 16px;border:2px solid #e3f2fd;border-radius:12px;font-size:1rem;transition:all .3s ease;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.config-section input[type=number]:focus,.config-section select:focus,.address-input-section textarea:focus{outline:none;border-color:#29b6f6;box-shadow:0 0 0 4px #29b6f61a;background:#fffffff2}.config-section input[type=number]:hover,.config-section select:hover,.address-input-section textarea:hover{border-color:#4fc3f7}.address-input-section textarea{width:100%;min-height:120px;resize:vertical;font-family:JetBrains Mono,Fira Code,monospace;line-height:1.6}.address-input-section button,.config-section button{background:linear-gradient(135deg,#29b6f6,#1976d2);color:#fff;padding:14px 28px;border:none;border-radius:12px;cursor:pointer;font-size:1.1rem;font-weight:600;margin-top:20px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #29b6f64d;position:relative;overflow:hidden}.address-input-section button:before,.config-section button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.address-input-section button:hover:before,.config-section button:hover:before{left:100%}.address-input-section button:hover,.config-section button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #29b6f666}.address-input-section button:active,.config-section button:active{transform:translateY(0)}.cache-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:25px;padding:20px;background:linear-gradient(135deg,#f8faff,#e8f4fd);border-radius:16px;border:2px dashed #bbdefb}.cache-line{background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border:2px solid #e1f5fe;padding:20px;border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.cache-line:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4caf50,#81c784);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.cache-line:hover:before{transform:scaleX(1)}.cache-line.invalid{background:linear-gradient(135deg,#fff5f5e6,#ffebeee6);border-color:#ffcdd2}.cache-line.invalid:before{background:linear-gradient(90deg,#f44336,#e57373)}.cache-line:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 40px #00000026;border-color:#29b6f6}.cache-line-index{font-weight:700;color:#1565c0;margin-bottom:12px;font-size:1.1em;display:flex;align-items:center;gap:8px}.cache-line-index:before{content:"📊";font-size:1em}.cache-line-tag,.cache-line-data,.cache-line-status,.cache-line-lru{font-size:.95em;color:#37474f;margin-bottom:8px;padding:6px 12px;background:#fff9;border-radius:8px;font-family:JetBrains Mono,monospace;word-break:break-all;border-left:3px solid #e3f2fd}.cache-line-status{font-weight:600}.simulation-steps-log{margin-top:40px;padding:30px;background:linear-gradient(135deg,#f8faff,#e8f4fd);border-radius:16px;border:2px solid #e1f5fe}.simulation-steps-log h4{color:#1565c0;margin-bottom:20px;font-size:1.3em;font-weight:600;display:flex;align-items:center;gap:10px}.simulation-steps-log h4:before{content:"🔄";font-size:1.2em}.simulation-step{background:linear-gradient(135deg,#fffffff2,#f8fafcf2);border:2px solid #e3f2fd;padding:20px;margin-bottom:16px;border-radius:12px;transition:all .3s ease;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.simulation-step:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:0 2px 2px 0}.simulation-step.hit:before{background:linear-gradient(135deg,#4caf50,#81c784)}.simulation-step.miss:before{background:linear-gradient(135deg,#f44336,#e57373)}.simulation-step.hit{border-color:#c8e6c9;background:linear-gradient(135deg,#e8f5e9e6,#c8e6c9e6)}.simulation-step.miss{border-color:#ffcdd2;background:linear-gradient(135deg,#fff5f5e6,#ffcdd2e6)}.simulation-step:hover{transform:translate(8px);box-shadow:0 8px 25px #0000001a}.simulation-step p{margin-bottom:8px;line-height:1.6}.status{font-weight:700;margin-left:12px;padding:4px 12px;border-radius:20px;font-size:.9em;display:inline-block}.hit-text{color:#2e7d32;background:#4caf501a}.miss-text{color:#c62828;background:#f443361a}.replacement-info{font-style:italic;color:#5e6c84;margin-top:8px;padding:8px 12px;background:#9e9e9e1a;border-radius:8px;border-left:3px solid #9e9e9e}@media (max-width: 768px){.cache-simulator-container{margin:0 10px}.config-section,.address-input-section,.cache-visualization-section{margin:0 10px;padding:20px}.config-section{grid-template-columns:1fr}.cache-grid{grid-template-columns:1fr;padding:15px}h2{font-size:1.8em}}@media (max-width: 480px){.cache-simulator-container{margin:0 5px}.config-section,.address-input-section,.cache-visualization-section{margin:0 5px;padding:15px}h2{font-size:1.6em}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.loading{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.memory-addressing-container{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;padding:0;background:#fffffff2;border-radius:20px;box-shadow:0 20px 60px #0000001a;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:30px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden}.memory-addressing-container:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);background-size:200% 100%;animation:gradientMove 4s ease-in-out infinite}@keyframes gradientMove{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}h2{color:#1a237e;text-align:center;margin:30px 0 0;font-size:2.2em;font-weight:700;background:linear-gradient(135deg,#1a237e,#7b1fa2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative}h2:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:80px;height:3px;background:linear-gradient(90deg,#ff6b6b,#feca57);border-radius:2px}h3{color:#6a1b9a;margin-bottom:20px;font-size:1.4em;font-weight:600;display:flex;align-items:center;gap:10px}h3:before{content:"";width:4px;height:20px;background:linear-gradient(135deg,#ff6b6b,#feca57);border-radius:2px}h4{color:#4a148c;margin-bottom:15px;font-size:1.2em;font-weight:600;display:flex;align-items:center;gap:8px}h4:before{content:"🔍";font-size:1em}.config-section,.visualization-section{background:linear-gradient(135deg,#ffffffe6,#f8fafce6);padding:30px;border-radius:16px;box-shadow:0 8px 32px #00000014;border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:0 20px;position:relative;transition:all .3s ease}.config-section:hover,.visualization-section:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0000001f}.config-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;align-items:start}.config-section h3{grid-column:1 / -1;margin-bottom:10px}.config-section label{display:flex;flex-direction:column;gap:8px;font-weight:600;color:#37474f;font-size:.95em}.config-section input[type=number],.config-section select{padding:12px 16px;border:2px solid #f3e5f5;border-radius:12px;font-size:1rem;transition:all .3s ease;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.config-section input[type=number]:focus,.config-section select:focus{outline:none;border-color:#ab47bc;box-shadow:0 0 0 4px #ab47bc1a;background:#fffffff2}.config-section input[type=number]:hover,.config-section select:hover{border-color:#ba68c8}.config-section button{background:linear-gradient(135deg,#ab47bc,#7b1fa2);color:#fff;padding:14px 28px;border:none;border-radius:12px;cursor:pointer;font-size:1.1rem;font-weight:600;margin-top:20px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #ab47bc4d;position:relative;overflow:hidden;grid-column:1 / -1;justify-self:center;max-width:200px}.config-section button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.config-section button:hover:before{left:100%}.config-section button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #ab47bc66}.config-section button:active{transform:translateY(0)}.steps-log{background:linear-gradient(135deg,#fafafa,#f5f5f5);border:2px solid #e8eaf6;padding:25px;border-radius:12px;margin-top:20px;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.steps-log:before{content:"💻";position:absolute;top:-12px;left:20px;background:linear-gradient(135deg,#ab47bc,#7b1fa2);color:#fff;padding:8px 12px;border-radius:20px;font-size:1em}.steps-log p{margin-bottom:12px;line-height:1.6;color:#37474f;padding:8px 12px;background:#ffffffb3;border-radius:8px;border-left:3px solid #e1bee7;font-family:JetBrains Mono,monospace;font-size:.95em;transition:all .2s ease}.steps-log p:hover{background:#ffffffe6;border-left-color:#ab47bc;transform:translate(4px)}.result{font-size:1.3em;font-weight:700;color:#2e7d32;margin:30px 0;text-align:center;padding:20px;background:linear-gradient(135deg,#4caf501a,#8bc34a1a);border:2px solid #c8e6c9;border-radius:12px;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.result:before{content:"🎯";position:absolute;top:-12px;left:50%;transform:translate(-50%);background:#4caf50;color:#fff;padding:8px 12px;border-radius:20px;font-size:1.2em}.page-table-visualization{margin-top:40px;padding:30px;background:linear-gradient(135deg,#fafafa,#f0f4c3);border-radius:16px;border:2px solid #f0f4c3;position:relative}.page-table-visualization:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#ffeb3b,#ffc107,#ff9800);border-radius:16px 16px 0 0}.page-table-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:20px}.page-table-entry{background:linear-gradient(135deg,#fffffff2,#f8fafcf2);border:2px solid #e8eaf6;padding:16px;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;font-family:JetBrains Mono,monospace;font-size:.9em}.page-table-entry:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:12px 12px 0 0;transition:all .3s ease}.page-table-entry.valid:before{background:linear-gradient(90deg,#4caf50,#81c784)}.page-table-entry.invalid:before{background:linear-gradient(90deg,#f44336,#e57373)}.page-table-entry.valid{border-color:#c8e6c9;background:linear-gradient(135deg,#e8f5e9f2,#c8e6c9f2)}.page-table-entry.invalid{border-color:#ffcdd2;background:linear-gradient(135deg,#fff5f5f2,#ffcdd2f2)}.page-table-entry.highlighted{border:3px solid #ff9800;box-shadow:0 0 20px #ff980066;transform:scale(1.05);z-index:10}.page-table-entry:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 25px #00000026}.page-table-entry div{margin-bottom:6px;font-weight:600}.page-table-entry div:last-child{margin-bottom:0}.page-fault-message{color:#d32f2f;font-weight:700;text-align:center;margin:30px 0;font-size:1.3em;padding:20px;background:linear-gradient(135deg,#f443361a,#e539351a);border:2px solid #ffcdd2;border-radius:12px;animation:pulse 2s infinite alternate;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.page-fault-message:before{content:"⚠️";position:absolute;top:-12px;left:50%;transform:translate(-50%);background:#f44336;color:#fff;padding:8px 12px;border-radius:20px;font-size:1.2em}@keyframes pulse{0%{opacity:1;transform:scale(1)}to{opacity:.8;transform:scale(1.02)}}@media (max-width: 768px){.memory-addressing-container{margin:0 10px}.config-section,.visualization-section{margin:0 10px;padding:20px}.config-section{grid-template-columns:1fr}.page-table-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}h2{font-size:1.8em}}@media (max-width: 480px){.memory-addressing-container{margin:0 5px}.config-section,.visualization-section{margin:0 5px;padding:15px}.page-table-grid{grid-template-columns:1fr}h2{font-size:1.6em}}@keyframes dataFlow{0%{transform:translate(-10px);opacity:0}50%{opacity:1}to{transform:translate(10px);opacity:0}}.steps-log p:nth-child(2n){animation:dataFlow 2s ease-in-out infinite;animation-delay:.5s}.steps-log p:contains("有效地址"),.steps-log p:contains("物理地址"){background:linear-gradient(135deg,#ffc1071a,#ffeb3b1a);border-left-color:#ffc107;font-weight:600}.loading-state{display:flex;justify-content:center;align-items:center;padding:40px;font-size:1.1em;color:#666}.loading-state:before{content:"";width:20px;height:20px;border:2px solid #e0e0e0;border-top:2px solid #ab47bc;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}body{margin:0;font-family:Inter,SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.App{text-align:center;display:flex;flex-direction:column;min-height:100vh}.app-header{background:linear-gradient(135deg,#1e3c72,#2a5298);padding:30px 20px;color:#fff;box-shadow:0 8px 32px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.app-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.05"><circle cx="30" cy="30" r="2"/></g></svg>');opacity:.3}.app-header h1{margin:0 0 25px;font-size:2.8em;font-weight:700;background:linear-gradient(135deg,#fff,#64b5f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;z-index:1;text-shadow:0 2px 10px rgba(0,0,0,.1)}.app-header nav{display:flex;justify-content:center;gap:20px;position:relative;z-index:1;flex-wrap:wrap}.app-header button{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.2);padding:12px 24px;border-radius:50px;cursor:pointer;font-size:1.1em;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden;min-width:120px}.app-header button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.app-header button:hover:before{left:100%}.app-header button:hover{background:#fff3;border-color:#fff6;transform:translateY(-3px);box-shadow:0 10px 25px #0003}.app-header button.active{background:linear-gradient(135deg,#4fc3f7,#29b6f6);border-color:#29b6f6;color:#fff;box-shadow:0 8px 25px #29b6f666;transform:translateY(-2px)}.app-header button.active:hover{transform:translateY(-4px);box-shadow:0 12px 30px #29b6f680}.app-main-content{flex-grow:1;padding:30px 20px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);position:relative;min-height:calc(100vh - 200px)}.app-main-content:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e0e0e0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)" /></svg>');opacity:.1;pointer-events:none}code{font-family:JetBrains Mono,Fira Code,source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;background:#0000000d;padding:2px 6px;border-radius:4px;font-size:.9em}@media (max-width: 768px){.app-header{padding:20px 15px}.app-header h1{font-size:2.2em;margin-bottom:20px}.app-header nav{gap:15px}.app-header button{padding:10px 20px;font-size:1em;min-width:100px}.app-main-content{padding:20px 15px}}@media (max-width: 480px){.app-header h1{font-size:1.8em}.app-header nav{flex-direction:column;align-items:center;gap:10px}.app-header button{width:200px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.app-main-content>*{animation:fadeInUp .6s ease-out}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#4fc3f7,#29b6f6);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#29b6f6,#1976d2)}