.dashboard-wrapper{display:flex;height:100vh;width:100vw;overflow:hidden;background:radial-gradient(circle at 15% 15%,#181b2a 0%,var(--bg-primary) 50%)}.dashboard-sidebar{width:270px;background:#0d0f17d9;border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;padding:2rem 1.5rem;overflow-y:auto;z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:4px 0 24px #0003;flex-shrink:0}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5rem}.sidebar-header h2{background:linear-gradient(135deg,#fff 0%,var(--accent-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:1.6rem;margin:0;font-weight:800;letter-spacing:2px;text-transform:uppercase}.sidebar-close-btn{display:none;background:none;border:none;color:#94a3b8;font-size:1.2rem;cursor:pointer;padding:.2rem .5rem;border-radius:6px}.sidebar-toggle-btn{display:none;align-items:center;justify-content:center;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);color:#a0a5b5;width:36px;height:36px;border-radius:10px;cursor:pointer;transition:all .2s ease;padding:0}.sidebar-toggle-btn:hover{color:#00f0ff;background:#00f0ff1a;border-color:#00f0ff4d;box-shadow:0 0 12px #00f0ff33}.sidebar-backdrop{display:none}.sidebar-section{margin-bottom:2.5rem}.sidebar-section h3{font-size:.8rem;color:#71778e;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:1rem;padding-left:.5rem;font-weight:600}.sidebar-link{display:block;padding:.9rem 1.2rem;color:#a0a5b5;text-decoration:none;border-radius:12px;margin-bottom:.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:.95rem;font-weight:500;border:1px solid transparent}.sidebar-link:hover{background:#ffffff08;color:#fff;transform:translate(6px);border-color:#ffffff0d}.active-link{background:linear-gradient(90deg,#00f0ff1a,#00f0ff00);color:var(--accent-color);border-left:4px solid var(--accent-color);border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:inset 20px 0 20px -20px #00f0ff33}.active-link:hover{color:var(--accent-color);border-color:transparent;border-left:4px solid var(--accent-color)}.dashboard-content{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.dashboard-navbar{height:70px;min-height:70px;background:#0a0b1080;border-bottom:1px solid rgba(255,255,255,.03);display:flex;align-items:center;justify-content:space-between;padding:0 2.5rem;z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.nav-title{font-size:1.4rem;font-weight:600;color:#fff;letter-spacing:.5px}.nav-backoffice-btn{display:flex;align-items:center;gap:8px;color:#a0a5b5;font-size:.875rem;font-weight:500;background:#ffffff0a;padding:.5rem 1.1rem;border-radius:20px;border:1px solid rgba(255,255,255,.07);text-decoration:none;transition:all .2s ease;white-space:nowrap}.nav-backoffice-btn:hover{color:#e2e8f0;background:#6366f11f;border-color:#6366f14d;box-shadow:0 0 12px #6366f126}.nav-backoffice-btn.active{color:#818cf8;background:#6366f126;border-color:#6366f166}@keyframes pulse{0%{box-shadow:0 0 #00f0ff66}70%{box-shadow:0 0 0 10px #00f0ff00}to{box-shadow:0 0 #00f0ff00}}.dashboard-main{flex:1;position:relative;overflow:hidden}.content-scrollable{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;z-index:2;padding:2rem 0}.content-scrollable::-webkit-scrollbar{width:6px}.content-scrollable::-webkit-scrollbar-track{background:transparent}.content-scrollable::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.content-scrollable::-webkit-scrollbar-thumb:hover{background:#fff3}.dashboard-footer{height:50px;min-height:50px;background:#0a0b10cc;border-top:1px solid rgba(255,255,255,.03);display:flex;align-items:center;padding:0 2.5rem;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.footer-content{display:flex;justify-content:space-between;width:100%;color:#6a6f82;font-size:.85rem;font-weight:500}@media (max-width: 768px){.sidebar-toggle-btn{display:flex!important}.sidebar-backdrop{display:block!important;position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;animation:fadeIn .2s ease}.dashboard-wrapper{flex-direction:column;height:100vh;height:100dvh;width:100vw;overflow:hidden}.dashboard-sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:82vw;height:100vh;height:100dvh;max-height:100vh;background:#0d0f17f5;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:1000;padding:1.5rem 1.25rem;flex-direction:column;overflow-y:auto;overflow-x:hidden;white-space:normal;border-right:1px solid rgba(255,255,255,.1);box-shadow:10px 0 35px #0009;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);opacity:1!important;pointer-events:auto!important;margin-left:0!important}.dashboard-sidebar.open,.dashboard-wrapper.sidebar-open .dashboard-sidebar{transform:translate(0)}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.08)}.sidebar-header h2{font-size:1.5rem}.sidebar-close-btn{display:flex;align-items:center;justify-content:center;background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:#f8fafc;font-size:1.25rem;width:40px;height:40px;border-radius:12px;cursor:pointer}.sidebar-section{margin-bottom:1.75rem;display:block}.sidebar-section h3{display:block;font-size:.8rem;color:var(--accent-color, #00f0ff);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.6rem;font-weight:700}.sidebar-link{display:block;padding:.85rem 1.1rem;font-size:1rem;margin-bottom:.5rem;border-radius:12px;background:#ffffff08;border:1px solid rgba(255,255,255,.05)}.dashboard-navbar{height:auto;min-height:52px;padding:.5rem 1rem;flex-wrap:nowrap;gap:.5rem;border-bottom:1px solid rgba(255,255,255,.05)}.nav-title{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-backoffice-btn{padding:.35rem .75rem;font-size:.8rem}.content-scrollable{padding:1rem 0}.dashboard-footer{height:auto;min-height:38px;padding:.5rem 1rem}.footer-content{font-size:.75rem;flex-direction:column;align-items:center;gap:.25rem;text-align:center}}@media (max-width: 480px){.dashboard-sidebar{width:270px;max-width:85vw;height:100vh;height:100dvh;padding:1.25rem 1rem}.sidebar-link{padding:.7rem .9rem;font-size:.88rem;border-radius:8px}.dashboard-navbar{min-height:46px;padding:.35rem .6rem;gap:.35rem}.nav-title{font-size:.85rem}.nav-backoffice-btn{padding:.3rem .6rem;font-size:.75rem;gap:4px}.nav-backoffice-btn svg{width:13px;height:13px}.content-scrollable{padding:.5rem .25rem}}.cookie-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:flex-end;justify-content:center;padding:1rem;animation:fadeInOverlay .4s ease}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.cookie-banner{background:linear-gradient(135deg,#0f172afa,#1e293bfa);border:1px solid rgba(99,102,241,.3);border-radius:1.25rem 1.25rem 1rem 1rem;padding:2rem;max-width:760px;width:100%;box-shadow:0 -10px 60px #0009,0 0 0 1px #6366f11a;animation:slideUp .5s cubic-bezier(.16,1,.3,1);color:#f1f5f9;font-family:Inter,sans-serif}@keyframes slideUp{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}.cookie-banner-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.cookie-icon{font-size:2rem}.cookie-banner h2{font-size:1.25rem;font-weight:700;color:#f8fafc;margin:0}.cookie-description{font-size:.9rem;color:#94a3b8;line-height:1.6;margin-bottom:1.5rem}.cookie-description strong{color:#c7d2fe}.cookie-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}.btn-accept-all{padding:.75rem 1.5rem;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:none;border-radius:.75rem;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #4f46e566}.btn-accept-all:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4f46e580}.btn-reject{padding:.75rem 1.5rem;background:transparent;color:#94a3b8;border:1px solid rgba(148,163,184,.3);border-radius:.75rem;font-weight:500;font-size:.95rem;cursor:pointer;transition:all .2s ease}.btn-reject:hover{border-color:#94a3b899;color:#f1f5f9}.btn-details{padding:.75rem 1.5rem;background:#6366f11a;color:#818cf8;border:1px solid rgba(99,102,241,.2);border-radius:.75rem;font-weight:500;font-size:.95rem;cursor:pointer;transition:all .2s ease}.btn-details:hover{background:#6366f133}.btn-save{padding:.75rem 1.5rem;background:#10b98126;color:#34d399;border:1px solid rgba(16,185,129,.3);border-radius:.75rem;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s ease}.btn-save:hover{background:#10b98140}.cookie-details{border-top:1px solid rgba(255,255,255,.08);padding-top:1.25rem}.cookie-category{border:1px solid rgba(255,255,255,.07);border-radius:.75rem;padding:1rem;margin-bottom:.75rem;background:#ffffff08}.cookie-category-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.cookie-category strong{display:block;margin-bottom:.25rem;color:#e2e8f0}.cookie-category p{margin:0;font-size:.82rem;color:#64748b;line-height:1.5}.toggle-switch{position:relative;width:48px;height:26px;flex-shrink:0;cursor:pointer}.toggle-switch input{display:none}.toggle-switch.disabled{cursor:not-allowed;opacity:.7}.toggle-thumb{width:48px;height:26px;border-radius:9999px;background:#94a3b833;border:1px solid rgba(148,163,184,.3);transition:all .3s ease;position:relative}.toggle-thumb:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#94a3b8;transition:all .3s ease}.toggle-thumb.active{background:#4f46e54d;border-color:#6366f1}.toggle-thumb.active:after{transform:translate(22px);background:#6366f1}.cookie-legal{font-size:.8rem;color:#475569;padding:.75rem;background:#0003;border-radius:.5rem;margin-bottom:.5rem;line-height:1.5}.cookie-legal a{color:#818cf8;text-decoration:underline}.cookie-footer{margin-top:1.25rem;font-size:.78rem;color:#475569;text-align:center;border-top:1px solid rgba(255,255,255,.06);padding-top:.75rem}.cookie-footer strong{color:#64748b}@media (max-width: 768px){.cookie-banner{padding:1.25rem;border-radius:1rem 1rem 0 0;max-height:85vh;overflow-y:auto}.cookie-actions{flex-direction:column;width:100%;gap:.5rem}.cookie-actions button{width:100%;text-align:center}.cookie-category-header{flex-direction:row;align-items:flex-start}}:root{--bg-dark: #0f172a;--bg-gradient: linear-gradient(135deg, #0f172a 0%, #082f49 100%);--card-bg: rgba(30, 41, 59, .4);--card-border: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #06b6d4;--accent-hover: #22d3ee;--success-color: #10b981;--warning-color: #fbbf24;--danger-color: #ef4444;--font-main: "Inter", sans-serif;--font-mono: "Fira Code", monospace}.shape-1{top:-10%;left:-10%;width:50vw;height:50vw;background:#06b6d440;animation:float 15s ease-in-out infinite alternate}.shape-2{bottom:-10%;right:-10%;width:40vw;height:40vw;background:#10b98133;animation:float 20s ease-in-out infinite alternate-reverse}.shape-3{top:40%;left:40%;width:30vw;height:30vw;background:#8b5cf626;animation:float 18s ease-in-out infinite alternate}.hero h1{font-size:4.5rem;font-weight:800;margin-bottom:1rem;letter-spacing:-2px;background:linear-gradient(to right,#06b6d4,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero .subtitle{font-size:1.25rem;color:var(--text-secondary);max-width:700px;margin:0 auto}.hero-nav{margin-top:2rem;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.hero-nav a{padding:.5rem 1rem;background:#ffffff0d;color:var(--text-primary);text-decoration:none;border:1px solid var(--card-border);border-radius:8px;transition:all .2s;font-weight:600;font-size:.9rem}.hero-nav a:hover{background:#06b6d433;border-color:var(--accent-color)}.glass-card{background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:24px;padding:3rem;margin-bottom:3rem;box-shadow:0 4px 30px #0003}.highlight-box{background:#06b6d41a;border-left:4px solid var(--accent-color);padding:1.5rem;border-radius:0 12px 12px 0;margin-top:1.5rem;font-style:italic}.topology-container{margin:3rem 0;padding:3rem 2rem;background:#0000004d;border-radius:24px;position:relative;border:1px solid rgba(255,255,255,.05)}.master-node{text-align:center;margin-bottom:3rem;position:relative;z-index:2}.master-chip{display:inline-block;background:#2e1065;border:3px solid #a855f7;padding:1.5rem 2.5rem;border-radius:16px;box-shadow:0 10px 30px #a855f766}.master-chip h3{color:#fff;margin-bottom:.5rem;font-size:1.3rem}.master-chip p{color:#d8b4fe;font-size:.9rem;font-family:var(--font-mono)}@keyframes pulseTravel{0%{background-position:0 0,0 0}to{background-position:40px 0,0 0}}.bus-line{position:absolute;left:8%;right:-1rem;height:4px;background:repeating-linear-gradient(90deg,#fbbf24 0,#fbbf24 10px,transparent 10px,transparent 40px),linear-gradient(90deg,#ef4444,#b91c1c,#ef4444);background-size:40px 100%,100% 100%;top:0;z-index:1;border-radius:3px;box-shadow:0 0 10px #00000080;animation:pulseTravel 1s linear infinite}.bus-label{position:absolute;top:calc(50% - 30px);left:50%;transform:translate(-50%);background:var(--bg-dark);padding:4px 12px;border-radius:12px;font-size:.8rem;font-weight:700;color:#f59e0b;border:1px solid #f59e0b;z-index:2}.slaves-row{display:flex;justify-content:space-between;position:relative;z-index:2;padding-top:2rem}.slave-node{background:#064e3b;border:2px solid #10b981;padding:1rem .5rem;border-radius:12px;text-align:center;width:16%;position:relative;box-shadow:0 8px 20px #10b98133;transition:transform .3s}.slave-node:hover{transform:translateY(-10px)}.slave-node h4{color:#fff;font-size:1rem;margin-bottom:.3rem}.slave-node .slave-id{background:#022c22;color:#34d399;font-size:.75rem;padding:2px 6px;border-radius:4px;font-family:var(--font-mono);display:inline-block;margin-bottom:.5rem}.slave-node p{font-size:.75rem;color:#a7f3d0;line-height:1.2}.slave-dt{background:#0c4a6e;border-color:#0ea5e9;box-shadow:0 8px 20px #0ea5e933}.slave-dt .slave-id{background:#082f49;color:#7dd3fc}.slave-dt p{color:#bae6fd}.master-node:after{content:"";position:absolute;width:42%;height:calc(50% + 3rem);border-top:4px solid #f59e0b;border-left:4px solid #f59e0b;left:8%;top:50%;border-top-left-radius:8px;z-index:-1;box-sizing:border-box}.slave-node:before{content:"";position:absolute;width:4px;height:2rem;background:#f59e0b;left:50%;transform:translate(-50%);top:-2rem;z-index:1}.logic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:2rem}.logic-step{background:#ffffff08;border:1px solid var(--card-border);padding:1.5rem;border-radius:16px}.logic-step .step-num{font-size:2.5rem;font-weight:900;color:#06b6d433;float:right;line-height:1;margin-top:-10px}.logic-step h3{color:var(--accent-color);margin-bottom:.5rem}.logic-step p{color:var(--text-secondary);font-size:.95rem}.resistor-node{background:#7f1d1d;border:2px solid #ef4444;width:45px;height:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fca5a5;box-shadow:0 0 10px #ef444466;position:absolute;top:0;right:-1rem;transform:translate(50%,-50%);z-index:2}@media (max-width: 768px){.hero h1{font-size:2.5rem}.slaves-row{flex-wrap:wrap;gap:1rem;justify-content:center}.slave-node{width:45%}.master-node:after{width:4px;height:3rem;border:none;background:#f59e0b;left:50%;top:auto;bottom:-3rem;z-index:1}.bus-line{height:100%;width:4px;left:50%;top:0;transform:translate(-50%);background:linear-gradient(180deg,#ef4444,#f59e0b,#ef4444)}.topology-container{padding:2rem 1rem}.slave-node:before{width:50%;height:4px;top:50%;left:-50%;transform:translateY(-50%)}.slave-node:nth-child(2n):before{left:auto;right:-50%}}:root{--bg-dark: #0f172a;--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--card-bg: rgba(30, 41, 59, .4);--card-border: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #38bdf8;--accent-hover: #0ea5e9;--success-color: #10b981;--warning-color: #fbbf24;--font-main: "Inter", sans-serif;--font-mono: "Fira Code", monospace}.shape-1{top:-10%;left:-10%;width:50vw;height:50vw;background:#38bdf84d;animation:float 15s ease-in-out infinite alternate}.shape-2{bottom:-10%;right:-10%;width:40vw;height:40vw;background:#8b5cf64d;animation:float 20s ease-in-out infinite alternate-reverse}.shape-3{top:40%;left:40%;width:30vw;height:30vw;background:#10b98133;animation:float 18s ease-in-out infinite alternate}.hero h1{font-size:4rem;font-weight:800;margin-bottom:1rem;letter-spacing:-1px;background:linear-gradient(to right,#38bdf8,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.timeline{margin:2rem 0;border-left:2px solid var(--accent-color);padding-left:1.5rem}.timeline-item{margin-bottom:1.5rem;position:relative}.timeline-item:before{content:"";position:absolute;left:-1.8rem;top:.3rem;width:12px;height:12px;background:var(--bg-dark);border:2px solid var(--accent-color);border-radius:50%}.timeline-item h3{color:var(--text-primary);font-size:1.2rem;margin-bottom:.25rem}.timeline-item .year{color:var(--accent-color);font-weight:700;font-family:var(--font-mono);margin-right:.5rem}.highlight-box{background:#38bdf81a;border-left:4px solid var(--accent-color);padding:1.5rem;border-radius:0 12px 12px 0;margin-top:1.5rem;font-style:italic}.architecture-diagram{display:flex;align-items:center;justify-content:space-between;margin:3rem 0;flex-wrap:wrap;gap:2rem}.node{background:#0f172a99;border:1px solid var(--card-border);padding:1.5rem;border-radius:16px;text-align:center;flex:1;min-width:200px}.node .icon{font-size:3rem;margin-bottom:1rem}.master{border-color:var(--accent-color);box-shadow:0 0 20px #38bdf833}.arrows{display:flex;flex-direction:column;align-items:center;gap:1rem;flex:.5}.arrow{font-size:.9rem;color:var(--text-secondary);display:flex;align-items:center;gap:.5rem}.arrow span{font-size:1.5rem;color:var(--accent-color)}.slaves-group{display:flex;flex-direction:column;gap:1rem;flex:1}.frame-structure{display:flex;gap:.5rem;margin:2rem 0;overflow-x:auto;padding-bottom:1rem}.frame-part{flex:1;background:#ffffff0d;border:1px solid var(--card-border);border-radius:12px;padding:1.5rem 1rem;text-align:center;position:relative;cursor:pointer;transition:all .3s ease;min-width:120px}.frame-part:hover,.frame-part:focus{background:#38bdf81a;border-color:var(--accent-color);outline:none}.frame-part .size{display:block;font-family:var(--font-mono);font-size:.8rem;color:var(--text-secondary);margin-bottom:.5rem}.frame-part h3{font-size:1.1rem;margin:0}.tooltip{position:absolute;bottom:120%;left:50%;transform:translate(-50%) scale(.9);background:var(--bg-dark);color:var(--text-primary);padding:1rem;border-radius:8px;font-size:.9rem;width:200px;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);border:1px solid var(--card-border);box-shadow:0 10px 25px #00000080;z-index:10}.frame-part:hover .tooltip,.frame-part:focus .tooltip{opacity:1;visibility:visible;transform:translate(-50%) scale(1)}.instruction-text{font-size:.85rem;color:var(--text-secondary);text-align:center;margin-top:-.5rem}.table-responsive{overflow-x:auto}table{width:100%;border-collapse:collapse;margin-top:1rem}th,td{padding:1rem;text-align:left;border-bottom:1px solid var(--card-border)}th{color:var(--text-secondary);font-weight:600;text-transform:uppercase;font-size:.85rem;letter-spacing:.05em}tr:last-child td{border-bottom:none}tr:hover td{background:#ffffff05}.tag{background:#38bdf826;color:var(--accent-color);padding:.25rem .75rem;border-radius:20px;font-family:var(--font-mono);font-size:.9rem}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:2rem}.feature-list{list-style:none;margin-top:1.5rem}.feature-list li{position:relative;padding-left:1.5rem;margin-bottom:.5rem}.feature-list li:before{content:"→";position:absolute;left:0;color:var(--accent-color)}@media (max-width: 768px){.hero h1{font-size:2.5rem}.glass-card{padding:1.5rem}.architecture-diagram{flex-direction:column}.arrows{flex-direction:row}.arrow{flex-direction:column}.arrow span{transform:rotate(90deg)}.frame-structure{flex-direction:column}}:root{--bg-dark: #0f172a;--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--card-bg: rgba(30, 41, 59, .4);--card-border: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #f59e0b;--accent-hover: #fbbf24;--success-color: #10b981;--warning-color: #fbbf24;--danger-color: #ef4444;--font-main: "Inter", sans-serif;--font-mono: "Fira Code", monospace}.shape-1{top:-10%;left:-10%;width:50vw;height:50vw;background:#f59e0b4d;animation:float 15s ease-in-out infinite alternate}.shape-2{bottom:-10%;right:-10%;width:40vw;height:40vw;background:#ef44444d;animation:float 20s ease-in-out infinite alternate-reverse}.shape-3{top:40%;left:40%;width:30vw;height:30vw;background:#d9770633;animation:float 18s ease-in-out infinite alternate}.hero h1{font-size:4rem;font-weight:800;margin-bottom:1rem;letter-spacing:-1px;background:linear-gradient(to right,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-nav{margin-top:1.5rem}.hero-nav a{color:var(--accent-color);text-decoration:none;border-bottom:1px dashed var(--accent-color);transition:all .2s}.highlight-box{background:#f59e0b1a;border-left:4px solid var(--accent-color);padding:1.5rem;border-radius:0 12px 12px 0;margin-top:1.5rem;font-style:italic}.topology-diagram{display:flex;align-items:center;justify-content:space-between;margin:3rem 0;padding:2rem;background:#0003;border-radius:12px;position:relative}.wire{position:absolute;height:4px;background:linear-gradient(to right,#f59e0b,#ef4444);top:50%;left:10%;right:10%;transform:translateY(-50%);z-index:1}.device{background:var(--bg-dark);border:2px solid var(--accent-color);padding:1rem;border-radius:8px;z-index:2;text-align:center;font-weight:600;width:100px}.device.terminator{border-style:dashed;border-color:var(--danger-color)}.resistor-label{position:absolute;bottom:-30px;font-size:.8rem;color:var(--danger-color);white-space:nowrap}.limitations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:2rem}.limitation-card{border-top:3px solid var(--danger-color);background:#ef44440d;padding:1.5rem;border-radius:0 0 16px 16px}.limitation-card h3{color:#fca5a5;font-size:1.1rem;margin-bottom:.5rem}.limitation-card p{font-size:.9rem;color:var(--text-secondary)}@media (max-width: 768px){.hero h1{font-size:2.5rem}.glass-card{padding:1.5rem}.topology-diagram{flex-direction:column;gap:2rem}.wire{width:4px;height:80%;top:10%;bottom:10%;left:50%;transform:translate(-50%)}.resistor-label{bottom:auto;right:-80px;top:10px}}:root{--bg-dark: #0f172a;--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--card-bg: rgba(30, 41, 59, .4);--card-border: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #a855f7;--accent-hover: #c084fc;--success-color: #10b981;--warning-color: #fbbf24;--font-main: "Inter", sans-serif;--font-mono: "Fira Code", monospace}.shape-1{top:-10%;left:-10%;width:50vw;height:50vw;background:#a855f74d;animation:float 15s ease-in-out infinite alternate}.shape-2{bottom:-10%;right:-10%;width:40vw;height:40vw;background:#38bdf84d;animation:float 20s ease-in-out infinite alternate-reverse}.shape-3{top:40%;left:40%;width:30vw;height:30vw;background:#ec489933;animation:float 18s ease-in-out infinite alternate}.hero h1{font-size:4rem;font-weight:800;margin-bottom:1rem;letter-spacing:-1px;background:linear-gradient(to right,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-nav{margin-top:1.5rem;display:flex;justify-content:center;gap:1.5rem}.highlight-box{background:#a855f71a;border-left:4px solid var(--accent-color);padding:1.5rem;border-radius:0 12px 12px 0;margin-top:1.5rem;font-style:italic}.integration-box{display:flex;align-items:center;background:#0003;border-radius:16px;padding:2rem;margin-top:2rem;gap:2rem;flex-wrap:wrap}.integration-text{flex:1;min-width:250px}.integration-visual{display:flex;align-items:center;gap:1rem;flex:1;justify-content:center}.chip{background:var(--bg-dark);border:2px solid var(--accent-color);padding:1rem;border-radius:8px;text-align:center}.chip h4{color:var(--text-primary);font-size:1.1rem;margin-bottom:.25rem}.chip span{font-size:.8rem;color:var(--text-secondary);font-family:var(--font-mono)}.arrows{display:flex;flex-direction:column;align-items:center;font-size:1.5rem;color:var(--accent-color)}@media (max-width: 768px){.hero h1{font-size:2.5rem}.glass-card{padding:1.5rem}.integration-box{flex-direction:column;text-align:center}.integration-visual{flex-direction:column;gap:.5rem}.arrows{flex-direction:row;gap:1rem}}.exec-timeline{position:relative;margin:3rem 0;padding:2rem 0}.exec-timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;background:#a855f733;transform:translate(-50%);border-radius:4px}.exec-step{display:flex;align-items:center;margin-bottom:2rem;position:relative}.exec-step:nth-child(2n){flex-direction:row-reverse}.exec-content{width:45%;background:#ffffff08;padding:1.5rem;border-radius:16px;border:1px solid var(--card-border);position:relative;transition:transform .3s ease,border-color .3s ease}.exec-content:hover{transform:translateY(-5px);border-color:var(--accent-color)}.exec-content h4{color:var(--accent-color);margin-bottom:.5rem;font-size:1.1rem}.exec-content p{font-size:.9rem;color:var(--text-secondary)}.exec-marker{width:20px;height:20px;background:var(--bg-dark);border:4px solid var(--accent-color);border-radius:50%;position:absolute;left:50%;transform:translate(-50%);z-index:2;box-shadow:0 0 15px #a855f780}@media (max-width: 768px){.exec-timeline:before{left:20px}.exec-step{flex-direction:column!important;align-items:flex-start;margin-bottom:1.5rem}.exec-marker{left:20px;transform:translate(-50%)}.exec-content{width:100%;margin-left:50px}}:root{--bg-dark: #0f172a;--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--card-bg: rgba(30, 41, 59, .4);--card-border: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #eab308;--accent-hover: #fef08a;--success-color: #10b981;--warning-color: #fbbf24;--font-main: "Inter", sans-serif;--font-mono: "Fira Code", monospace}.shape-1{top:-10%;left:-10%;width:50vw;height:50vw;background:#eab30833;animation:float 15s ease-in-out infinite alternate}.shape-2{bottom:-10%;right:-10%;width:40vw;height:40vw;background:#ef444433;animation:float 20s ease-in-out infinite alternate-reverse}.shape-3{top:40%;left:40%;width:30vw;height:30vw;background:#a855f726;animation:float 18s ease-in-out infinite alternate}.hero h1{font-size:4rem;font-weight:800;margin-bottom:1rem;letter-spacing:-1px;background:linear-gradient(to right,#eab308,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.highlight-box{background:#eab3081a;border-left:4px solid var(--accent-color);padding:1.5rem;border-radius:0 12px 12px 0;margin-top:1.5rem;font-style:italic}.register-table{width:100%;border-collapse:collapse;margin-top:2rem;font-family:var(--font-mono);font-size:.9rem}.register-table th,.register-table td{padding:1rem;text-align:left;border-bottom:1px solid var(--card-border)}.register-table th{background:#eab3081a;color:var(--accent-color);font-weight:700}.register-table tr:hover{background:#ffffff05}@media (max-width: 768px){.hero h1{font-size:2.5rem}.glass-card{padding:1.5rem}.register-table{font-size:.8rem}.register-table th,.register-table td{padding:.5rem}}:root{--bg-dark: #0f172a;--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--card-bg: rgba(30, 41, 59, .4);--card-border: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #10b981;--accent-hover: #34d399;--success-color: #10b981;--warning-color: #fbbf24;--font-main: "Inter", sans-serif;--font-mono: "Fira Code", monospace}.shape-1{top:-10%;left:-10%;width:50vw;height:50vw;background:#10b98133;animation:float 15s ease-in-out infinite alternate}.shape-3{top:40%;left:40%;width:30vw;height:30vw;background:#8b5cf633;animation:float 18s ease-in-out infinite alternate}.hero{text-align:center;padding:6rem 0 3rem}.hero h1{font-size:4rem;font-weight:800;margin-bottom:1rem;letter-spacing:-1px;background:linear-gradient(to right,#10b981,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.glass-card{background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:24px;padding:3rem;margin-bottom:3rem;box-shadow:0 4px 30px #0000001a;transition:transform .3s ease,box-shadow .3s ease}.glass-card:hover{transform:translateY(-5px);box-shadow:0 10px 40px #0003}.highlight-box{background:#10b9811a;border-left:4px solid var(--accent-color);padding:1.5rem;border-radius:0 12px 12px 0;margin-top:1.5rem;font-style:italic}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:2rem}.benefit-card{background:#ffffff08;border:1px solid var(--card-border);padding:1.5rem;border-radius:16px;transition:all .3s ease}.benefit-card:hover{background:#ffffff0d;border-color:var(--accent-color);transform:translateY(-3px)}.benefit-card .icon{font-size:2rem;margin-bottom:1rem}.benefit-card h3{font-size:1.1rem;margin-bottom:.5rem;color:var(--text-primary)}.benefit-card p{font-size:.9rem;color:var(--text-secondary)}.protocols-tags{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem}.tag{background:#10b98126;color:var(--accent-color);padding:.5rem 1rem;border-radius:20px;font-family:var(--font-mono);font-weight:600;font-size:.9rem;border:1px solid rgba(16,185,129,.3)}.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}.fade-in.visible{opacity:1;transform:translateY(0)}@media (max-width: 768px){.hero h1{font-size:2.5rem}.glass-card{padding:1.5rem}}.board-diagram{background:#1a2530;border:2px solid #334155;border-radius:12px;padding:2rem;margin:2rem 0;display:flex;flex-direction:column;gap:1.5rem;position:relative;box-shadow:0 10px 30px #0000004d}.relays-row{display:flex;justify-content:space-between;gap:.5rem}.relay-block{background:#0ea5e9;width:11%;aspect-ratio:1;border-radius:4px;border-bottom:4px solid #0284c7;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.85rem;font-weight:700;color:#fff;box-shadow:inset 0 2px 4px #ffffff4d}.components-row{display:flex;justify-content:space-between;align-items:center;padding:0 1rem}.esp-chip{background:#27272a;border:2px solid #52525b;width:70px;height:70px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#a1a1aa;flex-direction:column;box-shadow:0 4px 6px #00000080}.esp-chip span{font-weight:700;color:#fff;font-size:.9rem}.ports-group{display:flex;gap:1.5rem}.port-rj45{background:#d4d4d8;width:50px;height:40px;border-radius:4px;border:2px solid #a1a1aa;position:relative;box-shadow:inset 0 -5px 10px #0003}.port-rj45:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:24px;height:12px;background:#3f3f46;border-radius:4px 4px 0 0}.terminals{display:flex;flex-direction:column;gap:4px;background:#22c55e;padding:6px;border-radius:4px;border:1px solid #16a34a;box-shadow:0 2px 4px #0000004d}.terminal-pin{width:14px;height:14px;background:#e4e4e7;border-radius:50%;border:2px solid #52525b;box-shadow:inset 0 1px 2px #00000080}@media (max-width: 768px){.relay-block{font-size:.6rem}.board-diagram{padding:1rem}.ports-group{gap:.5rem}}:root{--bg-dark: #0f172a;--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--card-bg: rgba(30, 41, 59, .4);--card-border: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #38bdf8;--accent-hover: #7dd3fc;--success-color: #10b981;--danger-color: #ef4444;--warning-color: #fbbf24;--font-main: "Inter", sans-serif;--font-mono: "Fira Code", monospace}.shape-1{top:-10%;left:-10%;width:50vw;height:50vw;background:#38bdf833;animation:float 15s ease-in-out infinite alternate}.shape-2{bottom:-10%;right:-10%;width:40vw;height:40vw;background:#a855f733;animation:float 20s ease-in-out infinite alternate-reverse}.hero h1{font-size:3.5rem;font-weight:800;margin-bottom:1rem;letter-spacing:-1px;background:linear-gradient(to right,#38bdf8,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hmi-frame{background:#000;border:12px solid #1e293b;border-radius:20px;width:100%;max-width:800px;aspect-ratio:16/9;margin:3rem auto;position:relative;box-shadow:0 20px 50px #00000080,inset 0 0 0 2px #334155;overflow:hidden;display:flex;flex-direction:column}.hmi-screen{flex:1;background:#0b1120;background-image:radial-gradient(circle at top right,rgba(56,189,248,.15),transparent 50%),radial-gradient(circle at bottom left,rgba(168,85,247,.1),transparent 50%);display:flex;flex-direction:column;padding:1rem}.hmi-topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.5rem;margin-bottom:1rem}.hmi-title{font-size:1.2rem;font-weight:600;color:#e2e8f0;letter-spacing:1px}.hmi-status{display:flex;gap:1rem;align-items:center;font-size:.85rem;font-family:var(--font-mono);color:var(--text-secondary)}.status-indicator{display:flex;align-items:center;gap:6px}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--success-color);box-shadow:0 0 8px var(--success-color);animation:pulse-dot 2s infinite}.status-dot.mqtt{background:var(--accent-color);box-shadow:0 0 8px var(--accent-color)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.hmi-content{display:flex;gap:1.5rem;flex:1}.hmi-panel{background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:1rem;flex:1;display:flex;flex-direction:column;align-items:center}.panel-title{font-size:.9rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:1.5rem;align-self:flex-start}.gauge-container{position:relative;width:140px;height:140px;margin:auto}.gauge-ring{width:100%;height:100%;border-radius:50%;border:8px solid rgba(255,255,255,.1);border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-135deg)}.gauge-value-ring{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border:8px solid var(--accent-color);border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-135deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);animation:gauge-fill 3s ease-out infinite alternate}.gauge-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.gauge-number{font-size:2rem;font-weight:800;color:#fff;line-height:1}.gauge-unit{font-size:.8rem;color:var(--text-secondary)}@keyframes gauge-fill{0%{clip-path:polygon(50% 50%,0 100%,0 100%,0 100%)}to{clip-path:polygon(50% 50%,0 100%,100% 100%,100% 0)}}.relay-controls{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;margin-top:auto;margin-bottom:auto}.relay-btn{background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1rem;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:.5rem;align-items:center}.relay-btn:hover{background:#ffffff0d}.relay-icon{font-size:1.5rem;color:var(--text-secondary);transition:color .3s}.relay-name{font-size:.85rem;font-weight:600;color:#e2e8f0}.relay-checkbox{display:none}.relay-checkbox:checked+.relay-btn{background:#10b98126;border-color:var(--success-color);box-shadow:inset 0 0 15px #10b98133}.relay-checkbox:checked+.relay-btn .relay-icon{color:var(--success-color);text-shadow:0 0 10px var(--success-color)}footer{text-align:center;padding:2rem 0;color:var(--text-secondary);border-top:1px solid var(--card-border);margin-top:4rem}@media (max-width: 768px){.hmi-frame{aspect-ratio:auto;height:600px}.hmi-content{flex-direction:column}.relay-controls{grid-template-columns:1fr 1fr 1fr 1fr}}@media (max-width: 480px){.relay-controls{grid-template-columns:1fr 1fr}}:root{--bg-dark: #0f172a;--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--card-bg: rgba(30, 41, 59, .4);--card-border: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #22c55e;--accent-hover: #4ade80;--font-main: "Inter", sans-serif;--font-mono: "Fira Code", monospace}.shape-1{top:-10%;left:-10%;width:50vw;height:50vw;background:#22c55e33;animation:float 15s ease-in-out infinite alternate}.hero h1{font-size:3.5rem;font-weight:800;margin-bottom:1rem;letter-spacing:-1px;background:linear-gradient(to right,#22c55e,#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-logo{margin-bottom:1.5rem;display:flex;justify-content:center;align-items:center;gap:1rem}.sl-logo-box{background:#111827;padding:12px 24px;border-radius:12px;border:1px solid #374151;display:flex;align-items:center;gap:12px;box-shadow:0 10px 25px #22c55e33}.sl-logo-box span:first-child{color:#4ade80;font-weight:900;font-size:2rem}.sl-logo-box span:last-child{color:#fff;font-weight:700;font-size:1.5rem;font-family:var(--font-main);letter-spacing:.5px}.workflow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem}.step-card{background:#0000004d;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:2rem;text-align:center;position:relative}.step-number{position:absolute;top:-15px;left:-15px;width:40px;height:40px;background:var(--accent-color);color:var(--bg-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;box-shadow:0 5px 15px #22c55e66}.step-card h3{color:#fff;margin-bottom:1rem}.step-card p{font-size:.9rem;color:var(--text-secondary)}:root{--bg-dark: #0f172a;--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--card-bg: rgba(30, 41, 59, .4);--card-border: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #00979d;--accent-hover: #00b4bc;--font-main: "Inter", sans-serif;--font-mono: "Fira Code", monospace}body{font-family:var(--font-main);background:var(--bg-gradient);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;position:relative;padding-top:60px}.shape-1{top:-10%;left:-10%;width:50vw;height:50vw;background:#00979d33;animation:float 15s ease-in-out infinite alternate}.hero h1{font-size:3.5rem;font-weight:800;margin-bottom:1rem;letter-spacing:-1px;background:linear-gradient(to right,#00979d,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-logo{margin-bottom:1.5rem}.hero-logo img{height:80px;filter:drop-shadow(0 10px 15px rgba(0,151,157,.4))}.code-header{background:#1e293b;padding:.5rem 1rem;font-family:var(--font-mono);font-size:.85rem;color:var(--text-secondary);border-bottom:1px solid #334155}.code-content{padding:1.5rem;font-family:var(--font-mono);font-size:.9rem;color:#e2e8f0;white-space:pre;overflow-x:auto;line-height:1.5}.kw{color:#c678dd}.fn{color:#61afef}.type{color:#e5c07b}.str{color:#98c379}.num{color:#d19a66}.com{color:#5c6370;font-style:italic}.global-navbar{position:fixed;top:0;left:0;width:100%;background:#0f172acc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05);z-index:1000;display:flex;justify-content:center;align-items:center;padding:1rem 2rem;gap:2rem;flex-wrap:wrap}:root{--bg-dark: #0f172a;--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);--card-bg: rgba(30, 41, 59, .4);--card-border: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #f59e0b;--accent-hover: #fbbf24;--success-color: #10b981;--info-color: #38bdf8;--font-main: "Inter", sans-serif;--font-mono: "Fira Code", monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-main);background:var(--bg-gradient);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;position:relative}.background-shapes{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;overflow:hidden;pointer-events:none}.shape{position:absolute;border-radius:50%;filter:blur(120px);opacity:.5}.shape-1{top:-10%;left:-10%;width:50vw;height:50vw;background:#f59e0b33;animation:float 15s ease-in-out infinite alternate}.shape-2{bottom:-10%;right:-10%;width:40vw;height:40vw;background:#38bdf833;animation:float 20s ease-in-out infinite alternate-reverse}@keyframes float{0%{transform:translate(0) scale(1)}to{transform:translate(50px,50px) scale(1.1)}}.container{max-width:1000px;margin:0 auto;padding:0 2rem}.hero{text-align:center;padding:4rem 0 2rem}.hero h1{font-size:3.5rem;font-weight:800;margin-bottom:1rem;letter-spacing:-1px;background:linear-gradient(to right,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero .subtitle{font-size:1.25rem;color:var(--text-secondary);max-width:600px;margin:0 auto}.hero-nav{margin-top:1.5rem;display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}.hero-nav a{color:var(--accent-color);text-decoration:none;border-bottom:1px dashed var(--accent-color);transition:all .2s;font-weight:600}.hero-nav a:hover{color:var(--text-primary);border-bottom-color:var(--text-primary)}.glass-card{background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:24px;padding:3rem;margin-bottom:3rem;box-shadow:0 4px 30px #0000001a}.glass-card h2{font-size:2rem;margin-bottom:1.5rem;color:var(--accent-color)}.flow-diagram{display:flex;align-items:center;justify-content:space-between;background:#0003;padding:2rem;border-radius:16px;margin-bottom:3rem;flex-wrap:wrap;gap:1rem}.flow-node{background:#ffffff0d;border:2px solid var(--card-border);border-radius:12px;padding:1.5rem;text-align:center;flex:1;min-width:150px;position:relative;z-index:2}.flow-node h4{color:#fff;margin-bottom:.5rem}.flow-node span{font-size:.8rem;color:var(--text-secondary);font-family:var(--font-mono)}.flow-node.highlight{border-color:var(--accent-color);box-shadow:0 0 20px #f59e0b33}.flow-arrow{color:var(--accent-color);font-size:2rem;animation:pulse-arrow 1.5s infinite}@keyframes pulse-arrow{0%,to{opacity:.3;transform:translate(-5px)}50%{opacity:1;transform:translate(5px)}}.code-block{background:#0f172a;border:1px solid #334155;border-radius:12px;overflow:hidden;margin-bottom:2rem}.code-header{background:#1e293b;padding:.5rem 1rem;font-family:var(--font-mono);font-size:.85rem;color:var(--info-color);border-bottom:1px solid #334155;display:flex;justify-content:space-between}.code-content{padding:1.5rem;font-family:var(--font-mono);font-size:.9rem;color:#e2e8f0;white-space:pre;overflow-x:auto}.json-key{color:#7dd3fc}.json-string{color:#a7f3d0}.json-number{color:#fdba74}.integration-logos{display:flex;gap:2rem;justify-content:center;align-items:center;margin-top:2rem;flex-wrap:wrap}.integration-logos img{height:60px;filter:grayscale(100%) brightness(200%);transition:filter .3s;opacity:.7}.integration-logos img:hover{filter:grayscale(0%) brightness(100%);opacity:1}@media (max-width: 768px){.flow-diagram{flex-direction:column}.flow-arrow{transform:rotate(90deg);animation:pulse-arrow-down 1.5s infinite}@keyframes pulse-arrow-down{0%,to{opacity:.3;transform:rotate(90deg) translate(-5px)}50%{opacity:1;transform:rotate(90deg) translate(5px)}}}.global-navbar{position:fixed;top:0;left:0;width:100%;background:#0f172acc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05);z-index:1000;display:flex;justify-content:center;padding:1rem 2rem;gap:2rem;flex-wrap:wrap}.global-navbar a{color:var(--text-secondary);text-decoration:none;font-size:.9rem;font-weight:600;transition:color .2s,text-shadow .2s}.global-navbar a:hover,.global-navbar a.active{color:var(--text-primary);text-shadow:0 0 10px rgba(255,255,255,.5)}.nav-dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;top:100%;left:50%;transform:translate(-50%);background:#1e293bf2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:12px;min-width:180px;box-shadow:0 10px 30px #00000080;padding:.5rem 0;z-index:1001;margin-top:.5rem}.nav-dropdown:hover .dropdown-content{display:flex;flex-direction:column}.dropdown-content a{padding:.75rem 1.5rem;display:block;text-align:center;border-bottom:1px solid rgba(255,255,255,.05)}.dropdown-content a:last-child{border-bottom:none}.dropdown-content a:hover{background:#ffffff0d}body{padding-top:60px}.quiz-page-wrapper{padding-bottom:2rem}.quiz-container{background:var(--surface, rgba(30, 41, 59, .7));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border, rgba(148, 163, 184, .1));border-radius:1rem;padding:2.5rem;max-width:800px;width:100%;box-shadow:0 10px 30px -10px #00000080;margin:2rem auto 0}.question-section{margin-bottom:3rem}.question-count{font-size:1.25rem;color:var(--text-secondary, #94a3b8);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600}.question-count span{color:var(--primary, #3b82f6)}.question-text{font-size:1.75rem;font-weight:700;line-height:1.4}.answer-section{display:flex;flex-direction:column;gap:.75rem}.answer-button{width:100%;text-align:left;padding:1rem 1.5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;color:inherit;font-size:1.125rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center}.mini-graph{display:flex;align-items:flex-end;height:40px;gap:4px;padding-left:1rem}.graph-bar{width:8px;background-color:var(--primary, #3b82f6);border-radius:2px 2px 0 0;transition:height .5s ease}.answer-button.correct .graph-bar{background-color:#4ade80}.answer-button.incorrect .graph-bar{background-color:#f87171}.answer-button:hover:not(:disabled){background:#ffffff1a;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.answer-button:disabled{cursor:default}.answer-button.correct{background:#22c55e33;border-color:#22c55e80;color:#4ade80}.answer-button.incorrect{background:#ef444433;border-color:#ef444480;color:#f87171}.score-section{text-align:center;animation:fadeIn .5s ease-out}.score-section h2{font-size:2rem;margin-bottom:1.5rem;color:var(--primary, #3b82f6)}.score-circle{width:140px;height:140px;border-radius:50%;background:conic-gradient(from 0deg,var(--primary, #3b82f6),var(--accent, #8b5cf6));display:flex;justify-content:center;align-items:center;margin:0 auto 1.5rem;font-size:1.5rem;font-weight:600;color:#fff;box-shadow:0 0 20px #3b82f64d;position:relative}.score-circle:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:var(--surface, #1e293b);border-radius:50%;z-index:0}.score-circle span{font-size:3rem}.score-content{position:relative;z-index:10}.score-message{font-size:1.25rem;margin-bottom:2rem;color:var(--text-secondary, #cbd5e1)}.restart-button{padding:1rem 2.5rem;background:linear-gradient(135deg,var(--primary, #3b82f6),var(--accent, #8b5cf6));border:none;border-radius:9999px;color:#fff;font-weight:600;font-size:1.125rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #3b82f64d}.restart-button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px #3b82f666}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.wet-effect{animation:wetBlur 1.5s ease-in-out forwards;position:relative;overflow:hidden}.wet-effect:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#fff0,#87ceeb33,#3b82f666);pointer-events:none;z-index:10;animation:dripDown 1.5s ease-in forwards}@keyframes wetBlur{0%{filter:blur(0px) contrast(100%)}20%{filter:blur(4px) contrast(120%) brightness(.8) hue-rotate(-10deg)}80%{filter:blur(2px) contrast(110%) brightness(.9)}to{filter:blur(0px) contrast(100%)}}@keyframes dripDown{0%{transform:translateY(-100%);opacity:.5}30%{opacity:1}to{transform:translateY(100%);opacity:0}}@media (max-width: 768px){.quiz-container{padding:1.25rem;margin:1rem auto 0;width:95%;border-radius:.85rem}.question-text{font-size:1.25rem}.question-count{font-size:1rem}.answer-button{padding:.85rem 1rem;font-size:.95rem;flex-direction:column;align-items:flex-start;gap:.5rem}.mini-graph{padding-left:0;height:30px;align-self:flex-end}.score-circle{width:110px;height:110px}.score-circle span{font-size:2.2rem}.score-message{font-size:1rem}.restart-button{padding:.85rem 2rem;font-size:1rem}}@media (max-width: 480px){.quiz-container{padding:.85rem;width:98%}.question-text{font-size:1.05rem}.answer-button{padding:.65rem .85rem;font-size:.85rem}.score-circle{width:90px;height:90px}.score-circle span{font-size:1.8rem}.restart-button{padding:.65rem 1.5rem;font-size:.9rem}}:root{font-family:Inter,Outfit,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--bg-primary: #0a0b10;--bg-secondary: rgba(25, 27, 36, .6);--text-primary: #ffffff;--text-secondary: #a0a5b5;--accent-color: #00f0ff;--accent-glow: rgba(0, 240, 255, .4);--card-bg: rgba(20, 22, 31, .4);--card-border: rgba(255, 255, 255, .05);--glass-bg: rgba(255, 255, 255, .02);--glass-border: rgba(255, 255, 255, .05);--glass-blur: blur(16px);color-scheme:light dark;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}a{font-weight:500;color:#646cff;text-decoration:inherit;transition:color .3s}a:hover{color:#535bf2}h1,h2,h3,h4,h5,h6{line-height:1.1;color:#f1f1f1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s,background-color .25s,transform .1s}button:hover{border-color:#646cff;background-color:#242424;transform:translateY(-2px)}button:active{transform:translateY(0)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#f8f9fa}a:hover{color:#747bff}button{background-color:#f9f9f9;border-color:#e0e0e0}h1,h2,h3,h4,h5,h6{color:#111}}