:root{--bg-color:#0f111a;--text-color:#a6accd;--accent-color:#c792ea;--highlight-color:#82aaff;--success-color:#c3e88d;--code-bg:#1a1c23;--glass-border:#ffffff1a}html{scroll-behavior:smooth}body{background-color:var(--bg-color);color:var(--text-color);margin:0;padding:0;font-family:Inter,sans-serif;overflow-x:hidden}.text-center{text-align:center}#progress-bar{background:var(--accent-color);z-index:1000;width:0%;height:4px;transition:width .1s;position:fixed;top:0;left:0}#data-packet{color:var(--success-color);text-shadow:0 0 10px var(--success-color);z-index:999;font-family:JetBrains Mono,monospace;font-size:1.5rem;font-weight:700;transition:top .1s ease-out;position:fixed;top:-50px;left:50%;transform:translate(-50%)}.slide{opacity:0;box-sizing:border-box;justify-content:center;align-items:center;min-height:100vh;padding:4rem 2rem;transition:all .6s ease-out;display:flex;transform:translateY(30px)}.slide.visible{opacity:1;transform:translateY(0)}.content{text-align:left;z-index:10;width:100%;max-width:1300px}.slide#pipeline-overview .content{text-align:center}h1{color:#fff;margin-bottom:1rem;font-size:4rem;font-weight:700}h2{color:var(--highlight-color);border-bottom:1px solid var(--glass-border);margin-bottom:1rem;padding-bottom:.5rem;font-size:2.5rem}p{font-size:1.15rem;line-height:1.6}.subtitle{color:var(--accent-color);font-size:1.6rem}.terminal-prompt{color:var(--success-color);margin-top:2rem;font-family:JetBrains Mono,monospace}.pipeline-architecture{flex-direction:column;align-items:center;gap:30px;width:100%;margin-top:4rem;display:flex;position:relative}.pipeline-row{justify-content:center;align-items:center;gap:8px;width:100%;display:flex;position:relative}.pipeline-row.control{border-bottom:2px dashed #c792ea4d;padding-bottom:45px}.pipeline-row.data{padding:10px 0}.pipeline-row.security{border-top:2px dashed #ff5f564d;padding-top:20px}.plane-label{text-transform:uppercase;letter-spacing:1px;font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:700;position:absolute;top:50%;left:0;transform:translateY(-50%)}.plane-label.control{color:var(--accent-color)}.plane-label.data{color:var(--highlight-color)}.plane-label.security{color:#ff5f56}.parallel-group{flex-direction:column;gap:50px;display:flex}.pipeline-architecture .node{cursor:pointer;z-index:2;background:linear-gradient(145deg,#1a1c23,#0f111a);border:2px solid #82aaff33;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:90px;height:90px;transition:all .3s;display:flex;position:relative;box-shadow:4px 4px 10px #08090d,-4px -4px 10px #161927}.pipeline-architecture .node.orchestration{border-color:#c792ea80}.pipeline-architecture .node.security-node{border-color:#ff5f5680;width:120px}.pipeline-architecture .node:hover{border-color:var(--accent-color);transform:scale(1.15)translateY(-5px);box-shadow:0 0 25px #c792ea80,inset 0 0 10px #c792ea33}.pipeline-architecture .node:before{content:attr(data-tech);background:var(--code-bg);color:#fff;border:1px solid var(--accent-color);opacity:0;pointer-events:none;white-space:nowrap;z-index:100;border-radius:6px;padding:6px 12px;font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:700;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:absolute;top:-45px;transform:translateY(15px);box-shadow:0 4px 15px #c792ea66}.pipeline-architecture .node:hover:before{opacity:1;transform:translateY(0)}.pipeline-architecture .node .icon{margin-bottom:5px;font-size:2.2rem}.pipeline-architecture .node .label{color:var(--text-color);font-family:JetBrains Mono,monospace;font-size:.85rem;position:absolute;bottom:-30px}.pipeline-architecture .connector{background:#c3e88d1a;border-radius:2px;width:40px;height:4px;position:relative;overflow:hidden;box-shadow:inset 0 0 5px #c3e88d33}.pipeline-architecture .connector:after{content:"";background:linear-gradient(90deg, transparent, var(--success-color), transparent);width:50%;height:100%;box-shadow:0 0 10px var(--success-color);animation:2s linear infinite flow;position:absolute;top:0;left:-100%}@keyframes flow{0%{left:-50%}to{left:100%}}.interactive-cards{flex-wrap:wrap;gap:2rem;margin-top:2.5rem;display:flex}.card{background:var(--code-bg);border:1px solid var(--glass-border);cursor:pointer;box-sizing:border-box;border-radius:8px;flex:1;min-width:250px;padding:2rem;transition:all .2s}.card:hover{border-color:var(--accent-color);transform:translateY(-5px);box-shadow:0 4px 15px #c792ea33}.card h3{color:#fff;margin:0 0 .5rem;font-family:JetBrains Mono,monospace;font-size:1.4rem}.card p{margin:0;font-size:1rem}.tech-explanation{border:1px solid var(--glass-border);box-sizing:border-box;background:#82aaff0d;border-radius:12px;align-items:stretch;gap:2.5rem;margin-top:2rem;padding:2rem;display:flex}.tech-visual{flex:1;justify-content:center;align-items:center;display:flex}.tech-text{flex-direction:column;flex:1;display:flex}.code-block,.code-editor{background:var(--code-bg);border:1px solid var(--glass-border);border-radius:8px;margin-top:1rem;overflow:hidden;box-shadow:0 10px 30px #00000080}.details{opacity:1;max-height:2000px;transition:all .4s}.details.hidden{opacity:0;border-width:0;max-height:0;margin-top:0;padding:0}.editor-header{border-bottom:1px solid var(--glass-border);background:#15171e;align-items:center;padding:.8rem 1rem;display:flex}.dot{border-radius:50%;width:12px;height:12px;margin-right:8px;display:inline-block}.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}.filename{color:#717cb4;margin-left:10px;font-family:JetBrains Mono,monospace;font-size:.9rem}pre{margin:0;padding:1.5rem;overflow-x:auto}code{color:var(--success-color);font-family:JetBrains Mono,monospace;font-size:1rem;line-height:1.5}.terminal-output{color:#89ddff;background:#000;border-top:1px dashed #333;margin:0;padding:1rem;font-family:JetBrains Mono,monospace;font-size:.9rem}.explanation-box{border-left:4px solid var(--highlight-color);background:var(--code-bg);border-radius:0 8px 8px 0;margin-bottom:1rem;padding:1.5rem}.explanation-box h4{color:var(--success-color);margin-top:0;margin-bottom:.8rem;font-family:JetBrains Mono,monospace;font-size:1.2rem}.explanation-box p{color:var(--text-color);margin:0 0 1rem;font-size:1.05rem}.explanation-box p:last-child{margin-bottom:0}.mt-1{margin-top:1rem}.tool-preview{object-fit:cover;border:1px solid var(--glass-border);background:var(--code-bg);cursor:zoom-in;border-radius:8px;width:100%;height:100%;max-height:600px;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 25px #00000080}.tool-preview:hover{transform:scale(1.02);box-shadow:0 10px 30px #000c}.modal{z-index:2000;cursor:zoom-out;opacity:0;background-color:#000000f2;width:100%;height:100%;padding-top:50px;transition:opacity .3s;display:none;position:fixed;top:0;left:0;overflow:auto}.modal.show{opacity:1;display:block}.modal-content{object-fit:contain;border-radius:8px;max-width:90%;max-height:85vh;margin:auto;animation:.3s cubic-bezier(.175,.885,.32,1.275) zoom;display:block;box-shadow:0 0 40px #c792ea33}.close-modal{color:#f1f1f1;cursor:pointer;font-size:40px;font-weight:700;transition:all .3s;position:absolute;top:20px;right:35px}.close-modal:hover,.close-modal:focus{color:var(--accent-color);text-decoration:none}@keyframes zoom{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}#mini-map{transform-origin:100% 100%;z-index:1000;pointer-events:none;border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f111ad9;border-radius:20px;padding:40px;transition:opacity .3s;position:fixed;bottom:20px;right:20px;transform:scale(.3);box-shadow:0 10px 30px #00000080}#mini-map.hidden{opacity:0}#mini-map .node.active-node{border-color:var(--success-color);box-shadow:0 0 40px var(--success-color), inset 0 0 20px #c3e88d80;transform:scale(1.3)}.execution-panel{border-top:1px solid var(--glass-border);margin-top:15px;padding-top:15px}.run-btn{background-color:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:4px;align-items:center;gap:8px;padding:8px 16px;font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 15px #c792ea4d}.run-btn:hover{background-color:#d8a5f8;transform:translateY(-2px);box-shadow:0 6px 20px #c792ea80}.run-btn:active{transform:translateY(0)}.run-result{border-left:3px solid var(--success-color);background-color:#0000004d;border-radius:6px;min-height:40px;margin-top:15px;padding:15px}.run-result.hidden,.result-content.hidden,.spinner.hidden{display:none}.spinner{border:3px solid #c3e88d4d;border-top-color:var(--success-color);border-radius:50%;width:24px;height:24px;margin-bottom:10px;animation:1s ease-in-out infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.success-text{color:var(--success-color);margin:0 0 10px;font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:700}.text-green{color:var(--success-color);font-weight:700}.text-red{color:#ff5f56;font-weight:700}.data-table{border-collapse:collapse;background-color:#ffffff05;width:100%;margin-bottom:15px;font-family:JetBrains Mono,monospace;font-size:.85rem}.data-table th,.data-table td{border:1px solid var(--glass-border);text-align:left;padding:8px 12px}.data-table th{color:var(--highlight-color);background-color:#82aaff1a}@media (width<=1400px){.pipeline-row{flex-wrap:wrap}.plane-label{text-align:center;width:100%;margin-bottom:10px;position:static;transform:none}.pipeline-row{flex-direction:column}.pipeline-row.data{flex-direction:row}}@media (width<=1024px){.tech-explanation{flex-direction:column}.tool-preview{max-height:400px}h1{font-size:3.2rem}h2{font-size:2.2rem}.pipeline-architecture .node{width:75px;height:75px}.pipeline-architecture .node .icon{font-size:1.5rem}.pipeline-architecture .connector{width:20px}}@media (width<=768px){.slide{padding:2rem 1rem}h1{font-size:2.4rem}h2{font-size:1.8rem}p{font-size:1rem}.pipeline-row.data{flex-direction:column;align-items:center;gap:15px}.parallel-group{flex-direction:row}.pipeline-architecture .connector{width:4px;height:30px}.pipeline-architecture .connector:after{width:100%;height:50%;animation:2s linear infinite flow-vertical;top:-100%;left:0}.pipeline-architecture .node{width:70px;height:70px}.pipeline-architecture .node .label{white-space:nowrap;font-size:.9rem;position:absolute;top:50%;bottom:auto;left:85px;transform:translateY(-50%)}.interactive-cards{flex-direction:column;gap:1rem}.card{width:100%}.explanation-box{border-left:none;border-top:4px solid var(--highlight-color);border-radius:8px}#data-packet{font-size:1.2rem}.tech-explanation{gap:1.5rem;padding:1.5rem}pre{padding:1rem}}@keyframes flow-vertical{0%{top:-50%}to{top:100%}}