.header h1,.main-nav .nav-logo,.page-header h1{-webkit-text-fill-color:transparent}#main-canvas,.main-nav{top:0;left:0;width:100%}.header,.page-header,.status-item{text-align:center}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Orbitron,SFMono-Regular,monospace;background:radial-gradient(circle at 50% 50%,#0a0515,#000);color:#e0e6ff;min-height:100vh;display:flex;flex-direction:column}.main-nav{position:fixed;background:rgba(10,5,21,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(224,230,255,.15);padding:0 30px;display:flex;justify-content:space-between;align-items:center;height:60px;z-index:1000}.controls,.header,.main-nav ul li a::after{left:50%;transform:translateX(-50%)}.header,.legend-container{backdrop-filter:blur(10px)}.controls,.header,.legend-container{position:absolute;z-index:100}.main-nav .nav-logo{font-size:1.8em;font-weight:700;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);-webkit-background-clip:text;animation:5s ease-in-out infinite alternate gradientShift}.main-nav ul{list-style:none;display:flex;gap:25px}.main-nav ul li a{text-decoration:none;color:#e0e6ff;font-size:.95em;padding:10px 0;position:relative;transition:color .3s;text-transform:uppercase;letter-spacing:.5px}.main-nav ul li a.active,.main-nav ul li a:hover,.status-connecting{color:#4ecdc4}.main-nav ul li a::after{content:'';position:absolute;bottom:0;width:0;height:2px;background-color:#4ecdc4;transition:width .3s}.main-nav ul li a.active::after,.main-nav ul li a:hover::after{width:100%}.page-content{flex-grow:1;width:100%;padding:80px 20px 20px}.page-header{padding:20px 0;margin-bottom:20px}.page-header h1{font-size:2.2em;margin-bottom:10px;background:linear-gradient(60deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4);background-size:300% 300%;-webkit-background-clip:text;animation:4s ease-in-out infinite gradientShift}.page-header p{font-size:1.1em;opacity:.8;max-width:600px;margin-left:auto;margin-right:auto}@keyframes gradientShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}.status-label{display:block;font-size:.7em;opacity:.7;margin-bottom:3px;text-transform:uppercase}.status-value{font-weight:700;font-size:1.1em}.data-display-container .status-label{display:inline-block;margin-bottom:0;margin-right:5px;font-size:.8em}.data-display-container .status-value{font-size:1em}.status-connected{color:#96ceb4}.status-disconnected,.status-error{color:#ff6b6b}.status-error{font-weight:700}.header{top:80px;background:rgba(10,5,21,.85);padding:15px 30px;border-radius:15px;border:1px solid rgba(224,230,255,.2);min-width:300px}.header h1{font-size:1.8em;margin-bottom:8px;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4);background-size:400% 400%;-webkit-background-clip:text;animation:3s ease-in-out infinite gradientShift}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;font-size:.8em;margin-top:10px}.status-item{padding:8px;background:rgba(255,255,255,.05);border-radius:8px;border:1px solid rgba(255,255,255,.1)}.controls{bottom:30px;display:flex;gap:15px}.controls button,.controls select{background:linear-gradient(135deg,rgba(78,205,196,.8),rgba(69,183,209,.8));color:#fff;border:1px solid rgba(255,255,255,.2);padding:12px 20px;border-radius:25px;cursor:pointer;font-weight:700;backdrop-filter:blur(5px);transition:.3s;font-size:.9em}.controls select{min-width:180px}.controls button:hover,.controls select:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(78,205,196,.3)}.controls button.active{background:linear-gradient(135deg,rgba(255,107,107,.8),rgba(255,154,158,.8))}#main-canvas{position:absolute;height:100%;z-index:1}.legend-container{top:220px;right:30px;background:rgba(10,5,21,.9);padding:15px;border-radius:15px;border:1px solid rgba(224,230,255,.2);font-size:.75em;max-width:220px}.legend-container h3{margin-bottom:10px;color:#4ecdc4;text-align:center;font-size:1.1em}.legend-item{display:flex;align-items:center;margin-bottom:6px}.legend-color{width:15px;height:15px;border-radius:50%;margin-right:8px;border:1px solid rgba(255,255,255,.2);flex-shrink:0}.intro-section{max-width:800px;margin:20px auto;padding:25px;background:rgba(12,7,23,.75);border-radius:12px;border:1px solid rgba(224,230,255,.1);box-shadow:0 5px 25px rgba(0,0,0,.2)}.intro-section p,.intro-section ul{line-height:1.7;margin-bottom:18px;font-size:1.05em}.intro-section ul{list-style-type:'✧ ';padding-left:25px}.intro-section strong{color:#4ecdc4;font-weight:600}