body{margin:0;padding:0;font-family:Arial,sans-serif}canvas{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;pointer-events:auto}.container{position:relative;width:100vw;height:100vh}.canvas-container{width:100%;height:100%;position:relative}.info-panel{position:absolute;top:10px;left:10px;background-color:#19191ef5;color:#e8e8e8;padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);font-size:13px;max-width:350px;min-width:280px;box-shadow:0 6px 20px #0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:Segoe UI,Arial,sans-serif;display:flex;flex-direction:column;gap:10px}.info-panel h4{color:#fff;margin-top:0;margin-bottom:12px;border-bottom:2px solid rgba(255,255,255,.2);padding-bottom:8px;font-size:16px;font-weight:600}.info-panel p{color:#b8b8b8;margin:8px 0;line-height:1.4}.info-section{margin-bottom:16px;padding:12px;background-color:#ffffff08;border-radius:8px;border:1px solid rgba(255,255,255,.08)}.info-header{font-weight:600;color:#fff;font-size:14px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.15)}.info-row{display:flex;justify-content:space-between;align-items:center;margin:6px 0;line-height:1.3}.info-label{color:silver;font-weight:500;min-width:100px}.info-detail{color:#909090;font-size:11px;font-style:italic}.numerical-value{color:#4fc3f7;font-family:Courier New,monospace;font-weight:600}.analytical-value{color:#81c784;font-family:Courier New,monospace;font-weight:600}.error-value{font-family:Courier New,monospace;font-weight:600}.good-error{color:#81c784}.moderate-error{color:#ffb74d}.poor-error{color:#f06292}.accuracy-badge{padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;text-transform:uppercase}.excellent-accuracy{background-color:#81c78433;color:#81c784;border:1px solid rgba(129,199,132,.3)}.good-accuracy{background-color:#9ccc6533;color:#9ccc65;border:1px solid rgba(156,204,101,.3)}.moderate-accuracy{background-color:#ffb74d33;color:#ffb74d;border:1px solid rgba(255,183,77,.3)}.poor-accuracy{background-color:#f0629233;color:#f06292;border:1px solid rgba(240,98,146,.3)}.integration-results{border-left:3px solid #4fc3f7;background-color:#4fc3f70d}.controls-panel{position:fixed;right:0;top:0;width:350px;height:100vh;background-color:#19191ef5;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-left:1px solid rgba(255,255,255,.12);overflow-y:auto;z-index:1000;box-shadow:-6px 0 20px #0006;display:flex;align-items:center;flex-direction:column;gap:10px}.visualization-area{margin-right:350px;flex:1;padding:20px;min-height:100vh;background-color:#f0f0f0}.plot-container{background-color:#fffffff2;border-radius:12px;border:1px solid rgba(0,0,0,.08);padding:24px;margin-bottom:24px;box-shadow:0 4px 12px #0000001a;transition:all .3s ease;display:flex;flex-direction:column}.plot-container h2{color:#333;margin-top:0;margin-bottom:16px;font-size:1.5rem;font-weight:600;text-align:center}.plot-area{flex:1;min-height:0;background:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.05);overflow:hidden}.loading{display:flex;align-items:center;justify-content:center;min-height:400px;color:#666;font-size:1.1rem;background:#f8f9fa}.loading:after{content:"";margin-left:10px;width:16px;height:16px;border:2px solid #e0e0e0;border-top:2px solid #4fc3f7;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{color:#f06292;font-style:italic;background-color:#f062921a;padding:8px;border-radius:4px;border:1px solid rgba(240,98,146,.2)}@media (prefers-reduced-motion: reduce){.loading:after{animation:none;border-top-color:transparent}}.stats-panel{padding:20px;border-top:1px solid rgba(255,255,255,.12)}.stats-panel h3{color:#fff;margin-top:0;margin-bottom:16px;font-size:1.2rem;font-weight:600;display:flex;align-items:center;gap:8px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}.stat-item{background:#ffffff0d;border-radius:8px;padding:12px;text-align:center;border:1px solid rgba(255,255,255,.08);transition:all .3s ease}.stat-item:hover{background:#ffffff14;transform:translateY(-1px)}.stat-value{font-size:1.4rem;font-weight:700;color:#4fc3f7;margin-bottom:4px;font-family:Courier New,monospace}.stat-label{font-size:.8rem;color:#a0a0a0;text-transform:uppercase;letter-spacing:.5px}.method-legend{display:flex;flex-direction:column;gap:8px}.legend-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#ffffff08;border-radius:6px;border:1px solid rgba(255,255,255,.05);transition:all .3s ease}.legend-item:hover{background:#ffffff0f}.legend-color{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.2)}.legend-item span{font-size:.9rem;color:silver}.navigate-button{background-color:#343434;padding:1rem 2rem;border-radius:10px;font-size:2em;text-decoration:none;color:#4fc3f7;border:2px solid #4fc3f7;box-shadow:#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px;transition:all .1s;text-align:center}.navigate-button:hover{transform:scale(1.02)}@media (max-width: 1200px){.controls-panel{width:300px}.visualization-area{margin-right:300px}}@media (max-width: 768px){.container{flex-direction:column}.controls-panel{position:relative;width:100%;height:auto;max-height:50vh;border-left:none;border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 6px 20px #0006;right:auto;top:auto}.visualization-area{margin-right:0;padding:12px}.plot-container{height:40vh}}