:root{--bg-primary: #010101;--bg-secondary: #0a0a0a;--bg-tertiary: #111111;--text-primary: #e8e3d5;--text-secondary: #999;--accent-teal: #a9ddd3;--accent-teal-dark: #8fcdbd;--accent-tan: #e8c48f;--accent-rose: #d39da9;--state-waiting: #4a4a4a;--state-active: #a9ddd3;--state-completed: #e8e3d5;--state-error: #d39da9;--glass-bg: rgba(10, 10, 10, .8);--glass-border: rgba(169, 221, 211, .3);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .6);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata", monospace;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 32px;--font-size-3xl: 48px;--font-size-4xl: 64px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--spacing-4xl: 96px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 24px;--transition-fast: .15s ease;--transition-base: .3s ease;--transition-slow: .5s ease}@media(max-width:768px){:root{--font-size-4xl: 40px;--font-size-3xl: 32px;--font-size-2xl: 24px;--font-size-xl: 20px}}@media(max-width:480px){:root{--font-size-4xl: 32px;--font-size-3xl: 28px}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--text-primary);background-color:var(--bg-primary);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100%;min-height:100vh;display:flex;flex-direction:column}main{flex:1}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;color:var(--text-primary)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg);font-weight:600}p{color:var(--text-secondary);margin-bottom:var(--spacing-md)}a{color:var(--accent-teal);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-teal-dark)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}.section{padding:var(--spacing-3xl) 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--accent-teal),var(--accent-teal-dark));border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-teal)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(8px)}60%{transform:translateY(4px)}}.animate-fade-in{animation:fadeIn .6s ease forwards}.animate-fade-in-delay-1{animation:fadeIn .6s ease .1s forwards;opacity:0}.animate-fade-in-delay-2{animation:fadeIn .6s ease .2s forwards;opacity:0}.animate-fade-in-delay-3{animation:fadeIn .6s ease .3s forwards;opacity:0}.glass-card{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-xl)}.header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:var(--spacing-md) 0;transition:all var(--transition-base)}.header.scrolled{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border)}.header-content{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}.header-brand{display:flex;align-items:center;gap:var(--spacing-md)}.header-brand a{display:flex;align-items:center}.logo{height:32px;width:auto}.brand-divider{width:1px;height:24px;background:var(--glass-border)}.brand-name{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary)}.tutorial-name{font-size:var(--font-size-md);font-weight:500;color:var(--text-secondary)}.nav-links{display:flex;list-style:none;gap:var(--spacing-xl)}.nav-links a{color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:500;transition:color var(--transition-fast)}.nav-links a:hover{color:var(--text-primary)}.nav-links a.back-link{display:flex;align-items:center;gap:var(--spacing-xs)}.nav-links a.back-link svg{width:16px;height:16px}.footer{padding:var(--spacing-2xl) 0;background:var(--bg-primary);border-top:1px solid rgba(169,221,211,.1)}.footer-content{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}.footer-logo{height:24px;width:auto;opacity:.6;transition:opacity var(--transition-fast)}.footer-logo:hover{opacity:1}.footer-links{display:flex;gap:var(--spacing-xl);align-items:center}.footer-links a{color:var(--text-secondary);font-size:var(--font-size-sm);display:flex;align-items:center;gap:var(--spacing-xs);transition:color var(--transition-fast)}.footer-links a:hover{color:var(--text-primary)}.footer-links svg{width:16px;height:16px}.footer-copyright{font-size:var(--font-size-xs);color:var(--text-secondary);opacity:.6}@media(max-width:768px){.header{padding:0}.header-content{flex-direction:column;align-items:stretch;padding:0;gap:0}.header-brand{padding:var(--spacing-sm) var(--spacing-md);justify-content:center}.brand-divider,.brand-name,.tutorial-name{display:none}.header-content nav{border-top:1px solid var(--glass-border);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.header-content nav::-webkit-scrollbar{display:none}.nav-links{gap:0;padding:0 var(--spacing-sm);flex-wrap:nowrap;white-space:nowrap}.nav-links li{flex-shrink:0}.nav-links a{display:flex;align-items:center;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-xs);position:relative}.nav-links a.back-link{padding-left:var(--spacing-sm)}.nav-links a.back-link svg{width:14px;height:14px}.footer-content{flex-direction:column;gap:var(--spacing-lg);text-align:center}.footer-links{flex-wrap:wrap;justify-content:center}}main{position:relative;width:100%;min-height:100vh;overflow:hidden}#main-content{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;position:relative}#canvas-container{width:100vw;height:100vh;position:relative;display:flex;justify-content:center;align-items:center}#visualization-canvas{border:2px solid var(--accent-teal);border-radius:var(--radius-lg);background:var(--bg-secondary);box-shadow:0 0 30px #a9ddd34d}#info-panel{position:absolute;top:80px;right:290px;background:var(--glass-bg);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--glass-border);max-width:300px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--glass-shadow);transition:all var(--transition-base);z-index:100}#info-panel.collapsed{max-width:none;width:auto;padding:3px 15px 17px;display:flex;align-items:center;justify-content:center}#info-panel.collapsed .panel-content{display:none}#info-panel.collapsed .panel-header{gap:10px;justify-content:center}.panel-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;overflow:hidden}.panel-header h1,.panel-header h2{margin-bottom:0;white-space:nowrap;font-size:var(--font-size-lg);color:var(--accent-teal)}.collapse-btn{background:none;border:none;color:var(--accent-teal);font-size:var(--font-size-lg);cursor:pointer;padding:5px;line-height:1;opacity:.7;transition:opacity var(--transition-fast)}.collapse-btn:hover{opacity:1}.collapsed .collapse-btn{transform:rotate(180deg)}.legend{margin-top:var(--spacing-md);padding:var(--spacing-sm);background:#ffffff0d;border-radius:var(--radius-sm)}.legend-item{display:flex;align-items:center;margin:var(--spacing-sm) 0;font-size:var(--font-size-sm)}.legend-color{width:20px;height:20px;border-radius:var(--radius-sm);margin-right:var(--spacing-sm);border:2px solid rgba(255,255,255,.3)}.color-waiting{background:var(--state-waiting)}.color-active{background:var(--state-active)}.color-completed{background:var(--state-completed)}.color-retrying{background:var(--state-error)}.rw-mode-info{margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:#e8c48f1a;border-radius:var(--radius-sm);font-size:var(--font-size-xs)}.conflicts-info{margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:#a9ddd31a;border-radius:var(--radius-sm);font-size:var(--font-size-xs)}#controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:var(--glass-bg);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--glass-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;gap:var(--spacing-md);align-items:center;box-shadow:var(--glass-shadow);z-index:50}.slider-container{display:flex;gap:var(--spacing-lg);align-items:center}.slider-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.slider-group label{font-size:var(--font-size-sm);color:var(--accent-teal);font-weight:600}.slider-group input[type=range]{width:120px;height:6px;background:#4a4a4a80;border-radius:3px;outline:none;-webkit-appearance:none}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:linear-gradient(135deg,var(--accent-teal),var(--accent-teal-dark));border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #a9ddd366}.slider-group input[type=range]::-moz-range-thumb{width:16px;height:16px;background:linear-gradient(135deg,var(--accent-teal),var(--accent-teal-dark));border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #a9ddd366}.slider-group input[type=range]:hover::-webkit-slider-thumb{background:linear-gradient(135deg,var(--accent-teal-dark),#75bda7);box-shadow:0 4px 12px #a9ddd399}.slider-group input[type=range]:hover::-moz-range-thumb{background:linear-gradient(135deg,var(--accent-teal-dark),#75bda7);box-shadow:0 4px 12px #a9ddd399}.slider-group input[type=range]:disabled{opacity:.4;cursor:not-allowed}.slider-group input[type=range]:disabled::-webkit-slider-thumb{background:var(--state-waiting);cursor:not-allowed;box-shadow:none}.slider-group input[type=range]:disabled::-moz-range-thumb{background:var(--state-waiting);cursor:not-allowed;box-shadow:none}.toggle-group{display:flex;flex-direction:column;gap:var(--spacing-xs);align-items:center}.toggle-group label{font-size:var(--font-size-sm);color:var(--accent-teal);font-weight:600;white-space:nowrap}.toggle-switch{position:relative;width:50px;height:26px;background:#4a4a4a80;border-radius:13px;cursor:pointer;transition:background var(--transition-base)}.toggle-switch.active{background:linear-gradient(135deg,var(--accent-teal),var(--accent-teal-dark))}.toggle-switch.disabled{opacity:.4;cursor:not-allowed}.toggle-switch:after{content:"";position:absolute;width:20px;height:20px;background:var(--text-primary);border-radius:50%;top:3px;left:3px;transition:transform var(--transition-base);box-shadow:0 2px 4px #0000004d}.toggle-switch.active:after{transform:translate(24px)}button{padding:12px 24px;font-size:var(--font-size-base);font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);text-transform:uppercase;letter-spacing:.5px}#start-btn{background:linear-gradient(135deg,var(--accent-teal),var(--accent-teal-dark));color:var(--bg-primary);box-shadow:0 4px 12px #a9ddd366}#start-btn:hover{background:linear-gradient(135deg,var(--accent-teal-dark),#75bda7);transform:translateY(-2px);box-shadow:0 6px 20px #a9ddd399}#start-btn:disabled{background:#2a2a2a;color:#666;cursor:not-allowed;transform:none;box-shadow:none}#reset-btn{background:linear-gradient(135deg,var(--accent-rose),#c18793);color:var(--bg-primary);box-shadow:0 4px 12px #d39da966}#reset-btn:hover{background:linear-gradient(135deg,#c18793,#af717d);transform:translateY(-2px);box-shadow:0 6px 20px #d39da999}.mode-selector{display:flex;gap:var(--spacing-sm)}.mode-btn{padding:10px 20px;background:#4a4a4a4d;color:var(--text-secondary);border:1px solid rgba(169,221,211,.2)}.mode-btn.active{background:linear-gradient(135deg,var(--accent-teal),var(--accent-teal-dark));color:var(--bg-primary);border-color:var(--accent-teal);box-shadow:0 4px 12px #a9ddd366}.button-row{display:flex;gap:var(--spacing-sm);width:100%}.button-row button{flex:1}#conflicts-btn{background:linear-gradient(135deg,var(--accent-tan),#d4a76a);color:var(--bg-primary);box-shadow:0 4px 12px #e8c48f66}#conflicts-btn:hover{background:linear-gradient(135deg,#d4a76a,#c09456);transform:translateY(-2px);box-shadow:0 6px 20px #e8c48f99}#conflicts-btn:disabled{background:#2a2a2a;color:#666;cursor:not-allowed;transform:none;box-shadow:none}#stats{position:absolute;top:80px;right:20px;background:var(--glass-bg);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--glass-border);min-width:250px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--glass-shadow);transition:all var(--transition-base)}#stats.collapsed{min-width:auto;padding:3px 15px 17px;display:flex;align-items:center;justify-content:center}#stats.collapsed .panel-content{display:none}#stats.collapsed .panel-header{justify-content:center;gap:var(--spacing-sm)}.stat-row{display:flex;justify-content:space-between;margin:var(--spacing-sm) 0;font-size:var(--font-size-base)}.stat-label{color:var(--text-secondary)}.stat-value{color:var(--accent-teal);font-weight:600}.transaction-item{padding:10px 12px;margin:6px 0;border-radius:var(--radius-md);border-left:3px solid;background:#4a4a4a1a;font-size:var(--font-size-sm);transition:background var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base);min-height:60px;box-sizing:border-box}.transaction-item.waiting{border-color:var(--state-waiting);background:#4a4a4a26}.transaction-item.active{border-color:var(--state-active);background:#a9ddd326;animation:pulse 1.5s ease-in-out infinite;box-shadow:0 0 20px #a9ddd333}.transaction-item.validating{border-color:var(--accent-tan);background:#e8c48f26;animation:pulse 1.5s ease-in-out infinite;box-shadow:0 0 20px #e8c48f33}.transaction-item.committing{border-color:var(--state-active);background:#a9ddd340;animation:pulse-bright 1s ease-in-out infinite;box-shadow:0 0 30px #a9ddd366}.transaction-item.completed{border-color:var(--state-completed);background:#e8e3d51a;opacity:.7}.transaction-item.retrying{border-color:var(--state-error);background:#d39da926;box-shadow:0 0 20px #d39da933}.transaction-item.rerunning{border-color:var(--state-error);background:#d39da926;box-shadow:0 0 20px #d39da933;animation:pulse 1.5s ease-in-out infinite}.transaction-item.waiting_to_commit{border-color:var(--accent-tan);background:#e8c48f33;box-shadow:0 0 20px #e8c48f4d}@keyframes pulse{0%,to{background:#a9ddd326;box-shadow:0 0 20px #a9ddd333}50%{background:#a9ddd340;box-shadow:0 0 30px #a9ddd366}}@keyframes pulse-bright{0%,to{background:#a9ddd340;box-shadow:0 0 30px #a9ddd366}50%{background:#a9ddd366;box-shadow:0 0 40px #a9ddd399}}.transaction-id{font-weight:700;font-size:var(--font-size-sm);margin-bottom:var(--spacing-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transaction-status{font-size:var(--font-size-xs);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}.log-entry{padding:5px;margin:3px 0;border-radius:3px;animation:logFadeIn .3s}@keyframes logFadeIn{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.log-success{color:var(--accent-teal)}.log-wait{color:var(--accent-tan)}.log-retry{color:var(--accent-rose)}.log-info{color:var(--text-primary)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:2000;justify-content:center;align-items:center;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.modal.open{display:flex}.modal-content{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);max-width:800px;width:90%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #000c}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);border-bottom:1px solid rgba(169,221,211,.2)}.modal-header h2{margin:0;color:var(--accent-teal)}.modal-close{background:none;border:none;color:var(--text-primary);font-size:28px;cursor:pointer;padding:0;line-height:1;opacity:.7;transition:opacity var(--transition-fast)}.modal-close:hover{opacity:1}.modal-body{padding:var(--spacing-lg);overflow-y:auto;flex:1}.modal-description{color:var(--text-secondary);margin-bottom:var(--spacing-lg);font-size:var(--font-size-base)}.modal-footer{padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid rgba(169,221,211,.2);display:flex;justify-content:flex-end}#conflicts-save-btn{background:linear-gradient(135deg,var(--accent-teal),var(--accent-teal-dark));color:var(--bg-primary)}.conflict-item{background:#4a4a4a33;border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md);border-left:3px solid var(--accent-teal)}.conflict-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.conflict-tx-name{font-weight:600;font-size:var(--font-size-md);color:var(--accent-teal)}.conflict-accounts{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.account-checkbox{display:flex;align-items:center;gap:6px;background:#4a4a4a4d;padding:6px 10px;border-radius:6px;cursor:pointer;transition:background var(--transition-fast)}.account-checkbox:hover{background:#4a4a4a80}.account-checkbox input{cursor:pointer}.account-checkbox label{cursor:pointer;font-size:var(--font-size-sm);-webkit-user-select:none;user-select:none}.account-checkbox.read-only label{color:var(--accent-tan)}.account-checkbox.write label{color:var(--accent-teal)}.account-checkbox.none label{color:#666}.access-type-selector{display:flex;gap:4px;margin-left:var(--spacing-sm)}.access-type-btn{padding:2px 8px;font-size:var(--font-size-xs);border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;background:#4a4a4a4d;color:var(--text-secondary);transition:all var(--transition-fast)}.access-type-btn:hover{background:#4a4a4a80}.access-type-btn.active{border-color:currentColor}.access-type-btn.read{color:var(--accent-tan)}.access-type-btn.write{color:var(--accent-teal)}.access-type-btn.active.read{background:#e8c48f33}.access-type-btn.active.write{background:#a9ddd333}#tutorial-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:3000;pointer-events:none}#tutorial-overlay.active{display:block}.tutorial-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;pointer-events:auto}.tutorial-highlight{position:absolute;box-shadow:0 0 0 4px var(--accent-teal),0 0 20px #a9ddd380;border-radius:var(--radius-md);z-index:3001;pointer-events:none;transition:all var(--transition-base)}.tutorial-tooltip{position:absolute;background:var(--glass-bg);border:2px solid var(--accent-teal);border-radius:var(--radius-lg);padding:var(--spacing-lg);max-width:350px;z-index:3002;pointer-events:auto;box-shadow:0 8px 32px #000c;transition:all var(--transition-base)}.tutorial-step-indicator{font-size:var(--font-size-xs);color:var(--accent-teal);margin-bottom:var(--spacing-sm);font-weight:600}.tutorial-content p{font-size:var(--font-size-base);line-height:1.6;color:var(--text-primary);margin:0}.tutorial-arrow{position:absolute;width:0;height:0}.tutorial-arrow.arrow-down{border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid var(--accent-teal);bottom:-12px;left:50%;transform:translate(-50%)}.tutorial-arrow.arrow-up{border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid var(--accent-teal);top:-12px;left:50%;transform:translate(-50%)}.tutorial-arrow.arrow-left{border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:12px solid var(--accent-teal);left:-12px;top:50%;transform:translateY(-50%)}.tutorial-arrow.arrow-right{border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:12px solid var(--accent-teal);right:-12px;top:50%;transform:translateY(-50%)}.tutorial-buttons{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-lg);gap:var(--spacing-sm)}.tutorial-nav{display:flex;gap:var(--spacing-sm)}.tutorial-btn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm);font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:all var(--transition-fast)}.tutorial-skip{background:transparent;color:var(--text-secondary);border:1px solid #666}.tutorial-skip:hover{color:var(--text-primary);border-color:var(--text-secondary)}.tutorial-prev{background:#4a4a4a80;color:var(--text-primary)}.tutorial-prev:hover{background:#4a4a4acc}.tutorial-prev:disabled{opacity:.4;cursor:not-allowed}.tutorial-next{background:linear-gradient(135deg,var(--accent-teal),var(--accent-teal-dark));color:var(--bg-primary)}.tutorial-next:hover{background:linear-gradient(135deg,var(--accent-teal-dark),#75bda7)}.start-tutorial-btn{background:linear-gradient(135deg,var(--accent-teal),var(--accent-teal-dark));color:var(--bg-primary);border:none;padding:10px 20px;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;margin-top:var(--spacing-md);width:100%;transition:all var(--transition-fast)}.start-tutorial-btn:hover{background:linear-gradient(135deg,var(--accent-teal-dark),#75bda7);transform:translateY(-2px);box-shadow:0 4px 12px #a9ddd366}@media(max-width:768px){body{overflow-x:hidden;overflow-y:auto;padding:60px 10px 10px}#canvas-container{position:relative;width:100%;height:auto;padding:0;margin-bottom:10px}#visualization-canvas{width:100%;height:auto;aspect-ratio:1 / 1;border-radius:var(--radius-md)}#info-panel{position:fixed;inset:60px 150px auto auto;max-width:200px;width:auto;padding:var(--spacing-sm) var(--spacing-sm);max-height:50vh;overflow-y:auto;z-index:100;transition:right var(--transition-base)}#info-panel .panel-header h1,#info-panel .panel-header h2{font-size:var(--font-size-md)}#info-panel .panel-content{font-size:var(--font-size-xs)}#info-panel .panel-content p{font-size:var(--font-size-xs);margin-bottom:var(--spacing-sm)}#info-panel .panel-content h2{font-size:var(--font-size-base);margin-top:var(--spacing-sm);margin-bottom:6px}#info-panel .legend{padding:var(--spacing-sm);margin-top:var(--spacing-sm)}#info-panel .legend-item{font-size:var(--font-size-xs);margin:4px 0}#info-panel .legend-color{width:16px;height:16px}#info-panel .start-tutorial-btn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-xs);margin-top:var(--spacing-sm)}#info-panel.collapsed{top:60px;bottom:auto;max-height:none;padding:6px 10px!important;max-width:none;width:auto;transition:right var(--transition-base)}#info-panel.collapsed .panel-header{gap:5px}#info-panel.collapsed .panel-header h2{font-size:var(--font-size-xs);margin-bottom:0}#info-panel.collapsed .collapse-btn{font-size:var(--font-size-xs);padding:2px}#stats{position:fixed;top:60px;right:10px;left:auto;padding:var(--spacing-sm) var(--spacing-sm);min-width:auto;max-width:130px;font-size:var(--font-size-xs);z-index:100}#stats h2{font-size:var(--font-size-xs);margin-bottom:var(--spacing-xs)}#stats .stat-row{margin:3px 0;font-size:10px}#stats.collapsed{padding:6px 10px!important}#stats.collapsed .panel-header{gap:5px}#stats.collapsed .panel-header h2{font-size:var(--font-size-xs);margin-bottom:0}#stats.collapsed .collapse-btn{font-size:var(--font-size-xs);padding:2px}.transaction-item{padding:var(--spacing-sm);margin:4px 0;min-height:45px;font-size:var(--font-size-xs)}.transaction-id{font-size:var(--font-size-xs)}.transaction-status{font-size:9px}#controls{position:relative;bottom:auto;left:auto;transform:none;width:100%;max-width:100%;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-md);margin-bottom:var(--spacing-lg)}.mode-selector{width:100%;justify-content:center}.mode-btn{padding:10px var(--spacing-md);font-size:var(--font-size-xs);flex:1}.slider-container{width:100%;flex-direction:column;gap:var(--spacing-sm)}.slider-group{width:100%;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--spacing-sm)}.slider-group label{font-size:var(--font-size-xs);min-width:90px}.slider-group input[type=range]{flex:1;min-width:100px}.toggle-group{flex-direction:row;justify-content:space-between;width:100%;gap:var(--spacing-sm)}.button-row{width:100%}.button-row button{padding:var(--spacing-md) var(--spacing-md);font-size:var(--font-size-sm)}.modal-content{width:95%;max-height:90vh}.modal-header,.modal-body,.conflict-item{padding:var(--spacing-md)}.account-checkbox{padding:5px var(--spacing-sm)}.account-checkbox label{font-size:var(--font-size-xs)}.tutorial-tooltip{max-width:280px;padding:var(--spacing-md);position:fixed!important;left:50%!important;transform:translate(-50%)}.tutorial-content p{font-size:var(--font-size-sm)}.tutorial-btn{padding:6px var(--spacing-md);font-size:var(--font-size-xs)}.tutorial-arrow{display:none}.tutorial-buttons{flex-direction:column;gap:var(--spacing-sm)}.tutorial-nav{width:100%;justify-content:space-between}.tutorial-skip{width:100%}}@media(max-width:480px){body{padding:var(--spacing-sm);padding-top:55px}#stats{max-width:110px;padding:6px var(--spacing-sm)}#stats h2{font-size:var(--font-size-xs)}#stats .stat-row{font-size:9px}.mode-btn{padding:var(--spacing-sm) var(--spacing-sm);font-size:var(--font-size-xs)}.slider-group label{font-size:10px;min-width:80px}.transaction-item{min-height:40px;padding:6px}.transaction-id{font-size:10px}.button-row button{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-xs)}.tutorial-tooltip{max-width:calc(100vw - 40px);padding:var(--spacing-md);left:20px!important;right:20px!important;transform:none}.tutorial-step-indicator{font-size:var(--font-size-xs)}.tutorial-content p{font-size:var(--font-size-xs);line-height:1.5}.tutorial-btn{padding:var(--spacing-sm) var(--spacing-sm);font-size:var(--font-size-xs)}}