.app{width:100%;height:100vh;position:relative}.canvas-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}:root{--primary-blue: #0066ff;--accent-gold: #FFD700;--dark-gold: #FFA500;--bg-dark: #000000;--bg-light: #ffffff;--text-light: #ffffff;--text-dark: #333333;--text-grey: #666666;--font-primary: "Inter", system-ui, -apple-system, sans-serif;--font-secondary: "Fira Code", "Monaco", "Cascadia Code", monospace}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow-x:hidden;font-family:var(--font-primary);background:var(--bg-light);color:var(--text-dark)}#root{width:100%;height:100vh;position:relative}#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--bg-dark) 0%,#1a1a1a 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10000;transition:opacity 1s ease-out}#loading-screen.hidden{opacity:0;pointer-events:none}.loading-spinner{width:60px;height:60px;border:3px solid rgba(255,215,0,.3);border-top:3px solid var(--accent-gold);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:2rem}.loading-text{font-family:var(--font-secondary);color:var(--accent-gold);font-size:1.2rem;letter-spacing:2px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#main-nav{position:fixed;top:0;left:0;width:100%;padding:1rem 2rem;background:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;transition:all .3s ease;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 2px 12px #00000014}.nav-container{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto}.nav-logo{font-family:var(--font-secondary);font-size:1.5rem;font-weight:700;color:#111;text-decoration:none;letter-spacing:1px}.nav-menu{display:flex;gap:2rem;list-style:none}.nav-btn{background:none;border:none;color:#111;font-family:var(--font-primary);font-size:1rem;font-weight:600;cursor:pointer;padding:.5rem 1rem;border-radius:25px;transition:all .3s ease;position:relative;text-decoration:none}.nav-btn:hover{color:#111;background:#0000000f}.nav-btn.active{color:#0a0a0a;background:var(--accent-gold);box-shadow:0 6px 20px #ffd70059}#section-indicator{position:fixed;right:2rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1rem;z-index:1000}.section-dot{width:12px;height:12px;border-radius:50%;background:#66666680;cursor:pointer;transition:all .3s ease;border:2px solid transparent}.section-dot:hover{background:#ffd700b3;transform:scale(1.2)}.section-dot.active{background:var(--accent-gold);border-color:var(--dark-gold);transform:scale(1.3)}#matrix-info-card{position:fixed;bottom:2rem;left:2rem;max-width:550px;min-height:320px;background:#1a1a1a;border-radius:14px;box-shadow:0 20px 60px #0009;border:1px solid rgba(255,215,0,.3);transform:translateY(100px);opacity:0;transition:all .6s ease;z-index:1000;font-family:var(--font-secondary);overflow:hidden}#matrix-info-card.visible{transform:translateY(0);opacity:1}.code-card-header{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.5rem;background:#2a2a2a;border-bottom:1px solid rgba(255,215,0,.15)}.code-card-title{font-family:var(--font-secondary);font-size:.9rem;color:var(--accent-gold);font-weight:600;letter-spacing:.6px}.code-card-body{padding:1.8rem 1.5rem;background:#1a1a1a;font-family:var(--font-secondary);font-size:.85rem;line-height:1.5;min-height:200px}.code-block{margin:0;padding:0;background:transparent;border:none;font-family:var(--font-secondary);font-size:.85rem;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;overflow-x:auto}.code-content{color:#fff;font-weight:400;font-size:.85rem;line-height:1.5;font-family:var(--font-secondary);white-space:pre-wrap;word-wrap:break-word;display:block}.typing-cursor{color:var(--accent-gold);animation:blink 1s infinite;font-weight:700;font-size:1rem}.info-btn{margin:1.5rem;background:var(--accent-gold);color:#111;border:none;padding:.6rem 1.2rem;border-radius:10px;font-weight:600;font-size:.9rem;cursor:pointer;box-shadow:0 6px 20px #ffd70059;transition:all .3s ease;letter-spacing:.3px}.info-btn:hover{transform:translateY(-1px);box-shadow:0 8px 25px #ffd70073;background:#ffed4e}#canvas-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}.modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10002;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal{width:min(640px,92vw);background:#fff;border-radius:16px;box-shadow:0 30px 70px #00000040;border:1px solid rgba(0,0,0,.06);overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(0,0,0,.06)}.modal-title{font-family:var(--font-secondary);font-size:1.1rem;color:#111}.modal-close{background:var(--accent-gold);border:none;width:32px;height:32px;border-radius:50%;font-size:1.1rem;line-height:1;cursor:pointer;color:#111;display:grid;place-items:center;box-shadow:0 6px 18px #ffd70059;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.modal-close:hover{transform:translateY(-1px);box-shadow:0 10px 24px #ffd70073;background:#ffea4d}.modal-body{padding:1rem 1.25rem 1.25rem;color:#444;line-height:1.6}.modal-footer{padding:0 1.25rem 1.25rem}.modal-body>*+*{margin-top:.8rem}.modal-body h4,.modal-body h3{margin-top:.2rem;margin-bottom:.5rem;font-weight:600;color:#111}.modal-body p{margin:0 0 .8rem}.modal-body ul{margin:.2rem 0 .8rem 1rem;padding-left:1rem;list-style:disc}.modal-body li{margin-bottom:.3rem}.code-modal{width:min(800px,95vw);background:#1a1a1a;border-radius:12px;box-shadow:0 20px 60px #0009;border:1px solid rgba(255,215,0,.2);overflow:hidden;font-family:var(--font-secondary);position:relative}.code-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:#2a2a2a;border-bottom:1px solid rgba(255,215,0,.1)}.code-window-controls{display:flex;gap:8px}.control-dot{width:12px;height:12px;border-radius:50%}.control-dot.red{background:#ff5f56}.control-dot.yellow{background:#ffbd2e}.control-dot.green{background:#27ca3f}.code-title{font-family:var(--font-secondary);font-size:.9rem;color:var(--accent-gold);font-weight:500;letter-spacing:.5px}.code-close{background:transparent;border:none;font-size:1.2rem;line-height:1;cursor:pointer;color:#888;padding:4px 8px;border-radius:4px;transition:all .2s ease}.code-close:hover{background:#ff00001a;color:#ff5f56}.code-body{padding:2rem;background:#1a1a1a;font-family:var(--font-secondary);font-size:1rem;line-height:1.6}.code-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.code-keyword{color:#ff6b6b;font-weight:600}.code-variable{color:#4ecdc4;font-weight:500}.code-operator{color:#ffe66d}.code-string{color:#a8e6cf}.code-content{color:#fff;font-weight:400}.typing-cursor{color:var(--accent-gold);animation:blink 1s infinite;font-weight:700}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}@media (max-width: 768px){#main-nav{padding:1rem}.nav-container{flex-direction:column;gap:1rem}.nav-menu{gap:1rem;flex-wrap:wrap;justify-content:center}.nav-btn{font-size:.9rem;padding:.4rem .8rem}#section-indicator{right:1rem}#matrix-info-card{left:1rem;right:1rem;max-width:none}.section-dot{width:10px;height:10px}.code-modal{width:95vw;margin:1rem}.code-body{padding:1.5rem;font-size:.9rem}.code-line{flex-direction:column;align-items:flex-start;gap:8px}}@media (max-width: 480px){.nav-logo{font-size:1.2rem}.nav-btn{font-size:.8rem;padding:.3rem .6rem}#matrix-info-card{bottom:1rem;padding:1rem}#card-title{font-size:1.1rem}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:var(--accent-gold);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--dark-gold)}.welcome-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000e6;color:var(--accent-gold);padding:2rem 3rem;border-radius:15px;text-align:center;z-index:10001;font-family:var(--font-secondary);box-shadow:0 20px 40px #00000080;border:2px solid var(--accent-gold)}.welcome-message h2{margin-bottom:1rem;font-size:1.8rem}.welcome-message p{font-size:1rem;line-height:1.6;opacity:.9}.hidden{display:none!important}.fade-in{animation:fadeIn .5s ease-in}.fade-out{animation:fadeOut .5s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}