*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-height:100vh;background-color:#fff;color:#2d3748}#root{width:100%;min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;line-height:1.2}p{margin:0}a{text-decoration:none;color:inherit}ul,ol{list-style:none;margin:0;padding:0}img{max-width:100%;height:auto;display:block}button{font-family:inherit;cursor:pointer;border:none;background:none}::-webkit-scrollbar{width:14px}::-webkit-scrollbar-track{background:linear-gradient(to bottom,#f8f9fa,#e9ecef);border-left:1px solid #dee2e6;box-shadow:inset 0 0 6px #0000000d}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#667eea,#764ba2);border-radius:10px;border:2px solid transparent;background-clip:padding-box;box-shadow:0 2px 6px #667eea4d;transition:all .3s cubic-bezier(.4,0,.2,1)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5568d3,#653a8b);box-shadow:0 4px 12px #667eea80;transform:scaleX(1.1)}::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#4a5bbd,#562f78);box-shadow:0 2px 8px #667eea99}.portfolio{width:100%;position:relative}.code-editor-section{width:100%;padding:4rem 2rem;background:#0a0a0a}.code-editor-container{max-width:1200px;margin:0 auto;width:100%;height:600px;background:#1e1e1e;border-radius:8px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;transition:all .3s ease}.code-editor-container.minimized{height:40px}.code-editor-header{background:#323233;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1e1e1e;cursor:move}.code-editor-title{display:flex;align-items:center;gap:8px;color:#ccc;font-size:13px;font-weight:500}.code-editor-icon{font-size:16px}.code-editor-controls{display:flex;gap:8px}.code-editor-control-btn{background:none;border:none;color:#ccc;font-size:16px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background .2s}.code-editor-control-btn:hover{background:#ffffff1a}.code-editor-body{display:flex;height:100%;overflow:hidden}.code-editor-sidebar{width:200px;background:#252526;border-right:1px solid #1e1e1e;display:flex;flex-direction:column;overflow:hidden}.file-tree-header{padding:8px 12px;font-size:11px;font-weight:600;color:#ccc;background:#252526;letter-spacing:.5px}.file-tree{flex:1;overflow-y:auto;padding:4px 0}.file-tree-item{display:flex;align-items:center;gap:6px;padding:4px 8px;cursor:pointer;color:#ccc;font-size:13px;transition:background .2s;-webkit-user-select:none;user-select:none}.file-tree-item:hover{background:#ffffff1a}.file-tree-item.selected{background:#37373d}.file-tree-icon{font-size:14px;flex-shrink:0}.file-tree-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.code-editor-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.code-editor-tab{background:#2d2d2d;padding:8px 12px;display:flex;align-items:center;gap:8px;color:#fff;font-size:13px;border-bottom:1px solid #1e1e1e}.tab-icon{font-size:14px}.code-editor-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#858585;text-align:center;padding:2rem}.code-editor-placeholder p{margin:.5rem 0}.placeholder-hint{font-size:12px;opacity:.7}.file-tree::-webkit-scrollbar{width:10px}.file-tree::-webkit-scrollbar-track{background:#252526}.file-tree::-webkit-scrollbar-thumb{background:#424242;border-radius:5px}.file-tree::-webkit-scrollbar-thumb:hover{background:#4e4e4e}@media(max-width:768px){.code-editor-section{padding:2rem 1rem}.code-editor-container{height:400px}.code-editor-sidebar{width:150px}}.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center;padding:2rem}.hero-content{max-width:800px}.hero-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;margin-bottom:1rem;animation:fadeInUp .8s ease-out}.highlight{color:gold;position:relative}.hero-subtitle{font-size:clamp(1.25rem,3vw,1.75rem);margin-bottom:1rem;opacity:.95;animation:fadeInUp .8s ease-out .2s backwards}.hero-description{font-size:clamp(1rem,2vw,1.25rem);margin-bottom:2rem;opacity:.9;animation:fadeInUp .8s ease-out .4s backwards}.social-links{display:flex;gap:1.5rem;justify-content:center;margin-bottom:2rem;animation:fadeInUp .8s ease-out .5s backwards}.social-link{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border-radius:50%;color:#fff;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.social-link:hover{background:#fff3;transform:translateY(-3px)}.social-link svg{width:24px;height:24px}.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fadeInUp .8s ease-out .6s backwards}.btn{padding:.875rem 2rem;border-radius:8px;text-decoration:none;font-weight:600;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem;justify-content:center}.btn-primary{background-color:#fff;color:#667eea}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0003}.btn-secondary{background-color:transparent;color:#fff;border:2px solid white}.btn-secondary:hover{background-color:#fff;color:#667eea;transform:translateY(-2px)}.btn-cv{background:linear-gradient(135deg,gold,#ffed4e);color:#333;display:inline-flex;align-items:center;gap:.5rem;font-weight:700;box-shadow:0 4px 15px #ffd70066}.btn-cv:hover{transform:translateY(-2px);box-shadow:0 8px 25px #ffd70099;background:linear-gradient(135deg,#ffed4e,gold)}.btn-cv svg{width:20px;height:20px}section{padding:5rem 2rem}.container{max-width:1200px;margin:0 auto}.section-title{font-size:clamp(2rem,4vw,3rem);text-align:center;margin-bottom:3rem;color:#2d3748;position:relative}.section-title:after{content:"";display:block;width:60px;height:4px;background:linear-gradient(135deg,#667eea,#764ba2);margin:1rem auto 0;border-radius:2px}.projects-header{display:flex;justify-content:center;align-items:center;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}.view-other-projects-btn{padding:1rem 2rem;font-size:1.125rem;font-weight:600;background:linear-gradient(135deg,gold,orange);color:#2d3748;border:none;border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:.75rem;transition:all .3s ease;box-shadow:0 4px 12px #ffa5004d}.view-other-projects-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px #ffa50066;background:linear-gradient(135deg,orange,gold)}.view-other-projects-btn svg{transition:transform .3s ease}.view-other-projects-btn:hover svg{transform:translate(4px)}.about{background-color:#f7fafc}.about-content{max-width:1000px;margin:0 auto;display:flex;gap:3rem;align-items:center}.about-image{flex-shrink:0}.image-placeholder{width:300px;height:400px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;font-weight:600;box-shadow:0 8px 20px #00000026}.about-text{font-size:1.125rem;line-height:1.8;color:#4a5568}.about-text p{margin-bottom:1.5rem}.skills{background-color:#fff;position:relative}.skills .container{position:relative}.terminal-toggle-btn{position:absolute;bottom:-20px;right:20px;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #667eea66;transition:all .3s ease;z-index:10}.terminal-toggle-btn:hover{transform:translateY(-3px) scale(1.1);box-shadow:0 8px 20px #667eea80}.terminal-toggle-btn:active{transform:translateY(-1px) scale(1.05)}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2rem}.skill-card{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 6px #00000012;transition:all .3s ease;border:1px solid #e2e8f0}.skill-card:hover{transform:translateY(-5px);box-shadow:0 12px 24px #00000026}.skill-card h3{color:#667eea;font-size:1.5rem;margin-bottom:1.5rem}.skill-card ul{list-style:none;padding:0}.skill-card li{padding:.75rem 0;color:#4a5568;display:flex;align-items:center;gap:.75rem;transition:all .3s ease}.skill-card li:hover{transform:translate(5px);color:#2d3748}.skill-card li .skill-icon{width:24px;height:24px;flex-shrink:0;transition:transform .3s ease}.skill-card li:hover .skill-icon{transform:scale(1.2)}.skill-card li:has(span:first-of-type:contains("React")) .skill-icon{color:#61dafb}.skill-card li:nth-child(2) .skill-icon{color:#e34f26}.skill-card li:nth-child(3) .skill-icon{color:#3178c6}.skill-card li:nth-child(4) .skill-icon{color:#667eea}.skill-card:nth-child(2) li:nth-child(1) .skill-icon{color:#393}.skill-card:nth-child(2) li:nth-child(2) .skill-icon{color:#512bd4}.skill-card:nth-child(2) li:nth-child(3) .skill-icon{color:#6db33f}.skill-card:nth-child(2) li:nth-child(4) .skill-icon{color:#777bb4}.skill-card:nth-child(2) li:nth-child(5) .skill-icon{color:#512bd4}.skill-card:nth-child(3) li:nth-child(1) .skill-icon{color:#21759b}.skill-card:nth-child(3) li:nth-child(2) .skill-icon{color:#777bb4}.skill-card:nth-child(4) li .skill-icon{color:#0078d4}.skill-card:nth-child(5) li:nth-child(1) .skill-icon{color:#512bd4}.skill-card:nth-child(5) li:nth-child(2) .skill-icon{color:#3498db}.skill-card:nth-child(6) li:nth-child(1) .skill-icon{color:#dc382d}.skill-card:nth-child(6) li:nth-child(2) .skill-icon{color:#2496ed}.projects{background-color:#fff}.projects-container{display:flex;flex-direction:column;gap:3rem;margin-top:2rem}.project-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 6px #00000012;transition:all .3s ease;display:flex;border:1px solid #e2e8f0;cursor:pointer}.project-card:hover{box-shadow:0 12px 24px #00000026;transform:translateY(-3px);border-color:#667eea}.project-image{width:400px;min-width:400px;height:300px;min-height:300px;overflow:hidden;background:linear-gradient(135deg,#667eea,#764ba2);position:relative}.project-thumbnail{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}.project-card:hover .project-thumbnail{transform:scale(1.05)}.placeholder-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:600}.project-content{padding:2rem;display:flex;flex-direction:column;flex:1}.project-content h3{color:#2d3748;font-size:1.75rem;margin-bottom:1.25rem}.project-content p{color:#4a5568;line-height:1.8;margin-bottom:1.5rem;flex:1}.project-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.tag{background-color:#edf2f7;color:#667eea;padding:.375rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500;display:inline-flex;align-items:center;gap:.5rem}.project-links{display:flex;gap:1rem}.project-link{color:#667eea;text-decoration:none;font-weight:600;transition:color .3s ease}.project-link:hover{color:#764ba2;text-decoration:underline}.view-details{color:#667eea;font-weight:600;font-size:.95rem}.footer{background-color:#2d3748;color:#fff;padding:5rem 2rem 2rem}.footer .section-title{color:#fff}.footer .section-title:after{background:linear-gradient(135deg,gold,orange)}.contacts-intro{text-align:center;max-width:600px;margin:0 auto 3rem;color:#ffffffe6;font-size:1.125rem;line-height:1.8}.contact-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem;margin-bottom:3rem}.contact-card{background:#ffffff1a;padding:2.5rem 2rem;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;border:1px solid rgba(255,255,255,.2);text-align:center;display:flex;flex-direction:column;align-items:center}.contact-card:hover{transform:translateY(-5px);background:#ffffff26;border-color:#ffd70080;box-shadow:0 12px 24px #0000004d}.contact-icon{width:70px;height:70px;background:linear-gradient(135deg,gold,orange);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2d3748;margin-bottom:1.5rem;transition:all .3s ease}.contact-card:hover .contact-icon{transform:scale(1.1) rotate(5deg)}.contact-card h3{color:#fff;font-size:1.25rem;margin-bottom:.75rem}.contact-link{color:gold;text-decoration:none;font-weight:500;transition:all .3s ease;word-break:break-all}.contact-link:hover{color:orange;text-decoration:underline}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}html{scroll-behavior:smooth}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:50;padding:2rem;animation:fadeIn .3s ease-out;pointer-events:auto}.portfolio.side-menu-active .modal-overlay{right:400px}.modal-content{background:#fff;border-radius:16px;width:100%;max-width:900px;max-height:90vh;overflow-y:auto;position:relative;animation:slideIn .3s ease-out;box-shadow:0 20px 60px #0000004d}.modal-close{position:sticky;top:1rem;right:1rem;float:right;width:40px;height:40px;border-radius:50%;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 2px 8px #0000001a;z-index:10}.modal-close:hover{background:#f7fafc;transform:rotate(90deg)}.modal-close svg{color:#2d3748}.modal-header{padding:2rem 2rem 1rem;border-bottom:1px solid #e2e8f0;clear:both}.modal-header h2{color:#2d3748;font-size:2rem;margin-bottom:1rem}.modal-tags{display:flex;flex-wrap:wrap;gap:.5rem}.modal-body{padding:2rem}.modal-images{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.modal-image{width:100%;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000001a}.modal-image img{width:100%;height:auto;display:block;object-fit:cover}.modal-image .placeholder-image{width:100%;height:400px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:600}.modal-section{margin-bottom:2.5rem}.modal-section h3{color:#2d3748;font-size:1.5rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #667eea}.modal-section p{color:#4a5568;line-height:1.8;font-size:1.05rem}.features-list{list-style:none;padding:0}.features-list li{color:#4a5568;position:relative;padding:.75rem 0 .75rem 2rem;line-height:1.6}.features-list li:before{content:"✓";position:absolute;left:0;color:#667eea;font-weight:700;font-size:1.2rem}.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,150px));gap:1rem;margin-top:1rem;justify-content:start}.tech-item{background:#f7fafc;padding:1rem;border-radius:8px;text-align:center;color:#667eea;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:.5rem;border:1px solid #e2e8f0}.modal-actions{display:flex;gap:1.5rem;justify-content:center;padding-top:2rem;border-top:1px solid #e2e8f0}.modal-actions .btn{padding:1rem 2.5rem;font-size:1.125rem;font-weight:700;gap:.75rem;min-width:180px}.modal-actions .btn svg{width:24px;height:24px;flex-shrink:0}.modal-actions .btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea66;border:none}.modal-actions .btn-primary:hover{box-shadow:0 8px 25px #667eea99;transform:translateY(-3px)}.modal-actions .btn-secondary{background-color:#2d3748;color:#fff;border:2px solid #2d3748;box-shadow:0 4px 15px #2d37484d}.modal-actions .btn-secondary:hover{background-color:#1a202c;border-color:#1a202c;color:#fff;box-shadow:0 8px 25px #2d374880;transform:translateY(-3px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1024px){.project-card{flex-direction:column}.project-image{width:100%;min-width:100%;height:250px;min-height:250px}.about-content{flex-direction:column;text-align:center}.image-placeholder{width:250px;height:250px;margin:0 auto}}@media(max-width:768px){section{padding:3rem 1.5rem}.skills-grid{grid-template-columns:1fr}.contact-methods{grid-template-columns:1fr;gap:1.5rem}.image-placeholder{width:200px;height:200px}.project-image{height:200px;min-height:200px}.projects-container{gap:2rem}}@media(max-width:1024px){.modal-overlay{right:0}.portfolio.side-menu-active .modal-overlay{right:350px}}@media(max-width:768px){.modal-overlay{padding:1rem;right:0}.portfolio.side-menu-active .modal-overlay{right:320px}}@media(max-width:480px){.modal-overlay{right:0;padding:0;z-index:150}.portfolio.side-menu-active .modal-overlay{right:0;z-index:150}.modal-content{max-width:100%;max-height:100vh;border-radius:0}.modal-header{padding:1rem}.modal-header h2{font-size:1.5rem}.modal-body{padding:1rem}.modal-image .placeholder-image{height:200px}.modal-actions{flex-direction:column}.modal-actions .btn{width:100%}.tech-grid{grid-template-columns:1fr}.hero-cta{flex-direction:column;align-items:center}.btn{width:100%;max-width:250px}.project-content{padding:1.5rem}.contact-card{padding:2rem 1.5rem}.contact-icon{width:60px;height:60px}}.modal-section svg{max-width:1200px;width:100%;height:auto;margin:0 auto;display:block}.architecture-gol svg{max-width:1200px}.architecture-ita svg{max-width:400px}@media(max-width:768px){.modal-section svg{max-width:800px}.architecture-gol svg{max-width:800px}}@media(max-width:480px){.modal-section svg{max-width:100%}.architecture-gol svg{max-width:100%}}.portfolio{display:flex;transition:margin-right .4s ease}.portfolio.side-menu-active{margin-right:400px}.main-content{flex:1;width:100%;min-width:0}.side-menu{position:fixed;top:0;right:-400px;width:400px;height:100vh;background:#fff;box-shadow:-4px 0 20px #00000026;z-index:100;transition:right .4s ease;display:flex;flex-direction:column;overflow:hidden}.side-menu.open{right:0}.side-menu-header{padding:2rem;border-bottom:2px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.side-menu-header h2{margin:0;font-size:1.75rem;font-weight:700}.side-menu-close{width:40px;height:40px;border-radius:50%;background:#fff3;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.side-menu-close:hover{background:#ffffff4d;transform:rotate(90deg)}.side-menu-close svg{color:#fff}.side-menu-content{flex:1;overflow-y:auto;padding:2rem}.code-editor-btn{width:100%;padding:1.25rem 1.5rem;margin-bottom:2rem;background:linear-gradient(135deg,#4ec9b0,#3a9d8f);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.75rem;transition:all .3s ease;box-shadow:0 4px 12px #4ec9b04d}.code-editor-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px #4ec9b066;background:linear-gradient(135deg,#3a9d8f,#4ec9b0)}.code-editor-btn svg{flex-shrink:0}.side-menu-section{margin-bottom:2.5rem}.side-menu-section h3{color:#2d3748;font-size:1.25rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #667eea}.side-menu-project{background:#f7fafc;padding:1rem;border-radius:8px;margin-bottom:1rem;border:1px solid #e2e8f0;transition:all .3s ease;cursor:pointer;display:flex;gap:1rem}.side-menu-project:hover{background:#edf2f7;border-color:#667eea;transform:translate(-4px);box-shadow:0 4px 12px #667eea26}.side-menu-project.active{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea;border-width:2px;box-shadow:0 4px 16px #667eea33}.side-menu-project.active h4{color:#667eea}.side-menu-project-image{flex-shrink:0;width:80px;height:80px;border-radius:6px;overflow:hidden;background:#e2e8f0}.side-menu-project-image img{width:100%;height:100%;object-fit:cover}.side-menu-project-content{flex:1;min-width:0}.side-menu-project h4{margin:0 0 .5rem;color:#2d3748;font-size:1rem;font-weight:600}.side-menu-project p{margin:0 0 .75rem;color:#4a5568;font-size:.813rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.side-menu-project-tags{display:flex;flex-wrap:wrap;gap:.5rem}.side-menu-tag{background:#fff;color:#667eea;padding:.25rem .625rem;border-radius:4px;font-size:.75rem;font-weight:600;border:1px solid #e2e8f0;display:inline-flex;align-items:center;gap:.375rem}@media(max-width:1024px){.portfolio.side-menu-active{margin-right:0}.side-menu{width:350px;right:-350px}}@media(max-width:768px){.side-menu{width:320px;right:-320px}.side-menu-header{padding:1.5rem}.side-menu-header h2{font-size:1.5rem}.side-menu-content{padding:1.5rem}.projects-header{flex-direction:column;gap:1.5rem}.view-other-projects-btn{width:100%;max-width:300px;justify-content:center}}@media(max-width:480px){.side-menu{width:100%;right:-100%}.view-other-projects-btn{font-size:1rem;padding:.875rem 1.5rem}}.side-menu-content::-webkit-scrollbar{width:12px}.side-menu-content::-webkit-scrollbar-track{background:linear-gradient(to bottom,#f7fafc,#edf2f7);border-left:1px solid #e2e8f0}.side-menu-content::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#667eea,#764ba2);border-radius:8px;border:2px solid #f7fafc;box-shadow:0 2px 4px #667eea40;transition:all .3s cubic-bezier(.4,0,.2,1)}.side-menu-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5568d3,#653a8b);box-shadow:0 3px 8px #667eea66;border-color:#edf2f7}.side-menu-content::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#4a5bbd,#562f78);box-shadow:0 2px 6px #667eea80}.modal-content::-webkit-scrollbar{width:12px}.modal-content::-webkit-scrollbar-track{background:linear-gradient(to bottom,#f8f9fa,#e9ecef);border-left:1px solid #dee2e6;box-shadow:inset 0 0 6px #0000000d}.modal-content::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#667eea,#764ba2);border-radius:8px;border:2px solid transparent;background-clip:padding-box;box-shadow:0 2px 4px #667eea4d;transition:all .3s cubic-bezier(.4,0,.2,1)}.modal-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5568d3,#653a8b);box-shadow:0 4px 10px #667eea80;transform:scaleX(1.1)}.modal-content::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#4a5bbd,#562f78);box-shadow:0 2px 6px #667eea99}.terminal-playground-section{background-color:#f7fafc;padding:5rem 2rem;min-height:120vh;display:flex;align-items:center}.terminal-description{text-align:center;max-width:600px;margin:0 auto 3rem;color:#4a5568;font-size:1.125rem;line-height:1.8}.laptop-showcase{width:100%;max-width:1600px;margin:0 auto;height:1000px;display:flex;align-items:center;justify-content:center;padding:4rem}@media(max-width:1200px){.laptop-showcase{max-width:1200px;height:800px;padding:3rem}}@media(max-width:768px){.laptop-showcase{height:600px;max-width:900px;padding:2rem}}@media(max-width:480px){.laptop-showcase{height:500px;padding:1rem}}.skills-terminal-wrapper{position:relative}.terminal-section{position:absolute;left:20px;top:100px;width:600px;height:auto;z-index:50;pointer-events:none}.laptop-corner-container{width:100%;height:600px;padding:1rem;pointer-events:auto}@media(max-width:1400px){.terminal-section{width:500px}.laptop-corner-container{height:500px}}@media(max-width:1200px){.terminal-section{width:400px;left:10px}.laptop-corner-container{height:400px;padding:.5rem}}@media(max-width:968px){.terminal-section{position:relative;left:auto;top:auto;width:100%;margin:0 auto;pointer-events:auto}.laptop-corner-container{height:550px;padding:.75rem}}@media(max-width:768px){.laptop-corner-container{height:500px;padding:.5rem}}@media(max-width:480px){.laptop-corner-container{height:400px;padding:.25rem}}.terminal-activate{display:flex;justify-content:center;align-items:center;min-height:400px}.terminal-power-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;width:120px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 32px #667eea4d;position:relative}.terminal-power-button:hover{transform:scale(1.1);box-shadow:0 12px 40px #667eea66}.terminal-power-button:active{transform:scale(.95)}.power-icon{font-size:3rem;color:#fff;margin-bottom:.5rem}.power-text{color:#fff;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}.laptop-container{width:100%;max-width:900px;margin:0 auto;perspective:1000px}.laptop-screen{background:#2d2d2d;border-radius:12px 12px 0 0;box-shadow:0 0 0 12px #1a1a1a,0 0 0 14px #333,0 20px 60px #0006;overflow:hidden;min-height:500px;display:flex;flex-direction:column;animation:laptopOpen .6s ease-out}@keyframes laptopOpen{0%{opacity:0;transform:rotateX(-20deg) translateY(20px)}to{opacity:1;transform:rotateX(0) translateY(0)}}.screen-header{background:#1e1e1e;padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3a3a3a}.screen-buttons{display:flex;gap:.5rem}.screen-btn{width:12px;height:12px;border-radius:50%;border:none;cursor:pointer;transition:all .2s}.screen-btn.close{background:#ff5f57}.screen-btn.close:hover{background:#ff3b30}.screen-btn.minimize{background:#ffbd2e}.screen-btn.minimize:hover{background:#ff9500}.screen-btn.maximize{background:#28ca42}.screen-btn.maximize:hover{background:#00c957}.screen-title{color:#8a8a8a;font-size:.875rem;font-weight:500;position:absolute;left:50%;transform:translate(-50%)}.screen-content{flex:1;background:#1e1e1e;padding:1.5rem;font-family:Courier New,Courier,monospace;overflow-y:auto;min-height:450px}.terminal-output{color:#0f0;font-size:.95rem;line-height:1.6;margin-bottom:1rem;max-height:400px;overflow-y:auto}.terminal-line{margin-bottom:.25rem;white-space:pre-wrap;word-wrap:break-word}.terminal-input-form{display:flex;align-items:center;gap:.5rem}.terminal-prompt{color:#0f0;font-size:1rem;font-weight:700}.terminal-input{flex:1;background:transparent;border:none;color:#0f0;font-family:Courier New,Courier,monospace;font-size:.95rem;outline:none;caret-color:#0f0}.terminal-input::selection{background:#00ff004d}.laptop-base{background:linear-gradient(to bottom,#333,#1a1a1a);height:20px;border-radius:0 0 12px 12px;box-shadow:0 4px 20px #0000004d;display:flex;align-items:center;justify-content:center;position:relative}.laptop-base:before{content:"";position:absolute;width:120px;height:4px;background:#4a4a4a;border-radius:2px;bottom:8px}.laptop-trackpad{width:100px;height:8px;background:#2a2a2a;border-radius:4px;margin-top:2px}.game-container{width:100%;display:flex;flex-direction:column;align-items:center}.game-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:.75rem 1rem;background:#2a2a2a;border-radius:8px}.game-score,.game-info{color:#0f0;font-size:1rem;font-weight:700}.game-exit-btn{background:#ff5f57;color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-family:Courier New,Courier,monospace;font-size:.875rem;font-weight:600;transition:all .2s}.game-exit-btn:hover{background:#ff3b30;transform:scale(1.05)}.flappy-game{position:relative;background:linear-gradient(to bottom,#4ec0ca,#87ceeb);border-radius:8px;overflow:hidden;box-shadow:0 4px 20px #0000004d}.bird{position:absolute;background:gold;border-radius:50%;border:3px solid #ff8c00;transition:transform .1s;box-shadow:0 2px 8px #0000004d;z-index:10}.pipe{position:absolute;background:linear-gradient(to right,#228b22,#2e7d32,#1b5e20);border:3px solid #1b5e20;box-shadow:inset 0 0 10px #0000004d}.pipe-top{top:0;border-radius:0 0 8px 8px}.pipe-bottom{border-radius:8px 8px 0 0}.game-overlay{position:absolute;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100}.game-message{background:#2a2a2a;padding:2rem;border-radius:12px;text-align:center;box-shadow:0 8px 32px #00000080}.game-message h3{color:#0f0;font-size:2rem;margin:0 0 1rem;text-shadow:0 0 10px rgba(0,255,0,.5)}.game-message p{color:#fff;font-size:1.25rem;margin:.5rem 0}.game-controls{color:#8a8a8a;font-size:.875rem;margin-top:1rem}.snake-game{position:relative;background:#1a1a1a;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px #0000004d;gap:0}.snake-cell{background:#2a2a2a;border:.5px solid #333}.snake-segment{background:linear-gradient(135deg,#0f0,#0c0);border:1px solid #00aa00;box-shadow:inset 0 0 5px #00ff004d}.snake-head{background:linear-gradient(135deg,#0f0,#0f8);border:2px solid #00ff00;box-shadow:0 0 10px #00ff0080}.snake-food{background:radial-gradient(circle,red,#c00);border:2px solid #ff0000;border-radius:50%;box-shadow:0 0 10px #f009}@media(max-width:768px){.laptop-container{max-width:100%}.laptop-screen{border-radius:8px 8px 0 0}.screen-content{padding:1rem;min-height:400px}.terminal-output{font-size:.85rem;max-height:300px}.flappy-game,.snake-game{transform:scale(.8);transform-origin:center}.game-header{flex-direction:column;gap:.5rem;text-align:center}}@media(max-width:480px){.terminal-section{padding:2rem 1rem}.terminal-power-button{width:100px;height:100px}.power-icon{font-size:2.5rem}.screen-content{padding:.75rem;min-height:350px}.terminal-output{font-size:.8rem}.flappy-game,.snake-game{transform:scale(.6)}}.terminal-output::-webkit-scrollbar{width:8px}.terminal-output::-webkit-scrollbar-track{background:#1a1a1a}.terminal-output::-webkit-scrollbar-thumb{background:#0f0;border-radius:4px}.terminal-output::-webkit-scrollbar-thumb:hover{background:#0c0}.screen-content::-webkit-scrollbar{width:10px}.screen-content::-webkit-scrollbar-track{background:#1a1a1a}.screen-content::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:5px}.screen-content::-webkit-scrollbar-thumb:hover{background:#4a4a4a}.laptop-screen-3d{width:100%;height:100%;display:flex;flex-direction:column;background:#1e1e1e;border-radius:8px;overflow:hidden}.laptop-screen-3d .screen-content{flex:1;overflow-y:auto;background:#1e1e1e;padding:2rem;display:flex;flex-direction:column}.laptop-screen-3d .terminal-output{flex:1;overflow-y:auto;font-family:Courier New,monospace;font-size:1.4rem;color:#0f0;padding:1rem;margin-bottom:1rem;max-height:none}.laptop-screen-3d .terminal-line{margin-bottom:.5rem;white-space:pre-wrap;word-wrap:break-word;line-height:1.5}.laptop-screen-3d .terminal-input-form{display:flex;align-items:center;gap:1rem;padding:1rem;background:#2d2d2d;border-radius:4px;flex-shrink:0}.laptop-screen-3d .terminal-prompt{color:#0f0;font-family:Courier New,monospace;font-size:1.4rem;font-weight:700}.laptop-screen-3d .terminal-input{flex:1;background:transparent;border:none;color:#0f0;font-family:Courier New,monospace;font-size:1.4rem;outline:none;caret-color:#0f0}.laptop-screen-3d .terminal-input::selection{background:#0f0;color:#1e1e1e}.build-intro{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;background:#1e1e1e;z-index:9999;overflow:hidden}.skip-intro-btn{position:fixed;bottom:20px;right:20px;z-index:10000;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3);padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.skip-intro-btn:hover{background:#fff3;border-color:#ffffff80;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.build-intro-left{height:100%;background:#1e1e1e;overflow:hidden;box-shadow:2px 0 10px #00000080;position:relative;z-index:2}.build-intro-right{height:100%;background:#f5f5f5;overflow:hidden;position:relative}.code-editor{width:100%;height:100%;display:flex;flex-direction:column;font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;color:#d4d4d4}.code-editor-header{background:#252526;border-bottom:1px solid #3e3e42;padding:0;height:35px;display:flex;align-items:center}.editor-tabs{display:flex;height:100%}.editor-tab{background:#2d2d30;border-right:1px solid #3e3e42;padding:8px 16px;display:flex;align-items:center;gap:8px;color:#fff;font-size:13px}.editor-tab.active{background:#1e1e1e}.tab-icon{font-size:16px}.code-editor-body{flex:1;display:flex;overflow-y:scroll;background:#1e1e1e;padding:12px 0;max-height:100%}.line-numbers{padding:0 16px 0 20px;text-align:right;color:#858585;-webkit-user-select:none;user-select:none;min-width:50px}.line-number{line-height:22px;font-size:13px}.code-content{flex:1;padding-right:20px}.code-line{line-height:22px;min-height:22px;white-space:pre;font-size:13px;position:relative}.cursor{display:inline-block;width:2px;height:18px;background:#fff;animation:blink 1s step-end infinite;margin-left:1px;vertical-align:text-bottom}@keyframes blink{50%{opacity:0}}.code-line :global(.keyword){color:#569cd6}.code-line :global(.string){color:#ce9178}.code-line :global(.component){color:#4ec9b0}.code-line :global(.comment){color:#6a9955;font-style:italic}.build-preview{width:100%;height:100%;display:flex;flex-direction:column;background:#fff}.preview-header{background:#e8e8e8;padding:12px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #d0d0d0;box-shadow:0 1px 3px #0000001a}.preview-controls{display:flex;gap:8px}.preview-dot{width:12px;height:12px;border-radius:50%}.preview-dot.red{background:#ff5f57}.preview-dot.yellow{background:#ffbd2e}.preview-dot.green{background:#28ca42}.preview-url{background:#fff;padding:4px 12px;border-radius:4px;font-size:12px;color:#666;border:1px solid #d0d0d0;font-family:Consolas,monospace}.preview-content{flex:1;overflow-y:scroll;background:#fff;scroll-behavior:smooth;position:relative}.preview-section{padding:60px 40px;opacity:0;transition:opacity .5s ease}.preview-section.visible{opacity:1}.preview-section.hero{min-height:400px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff}.preview-hero-content{text-align:center;max-width:600px}.preview-hero-content h1{font-size:2.5rem;margin-bottom:1rem;font-weight:700}.preview-hero-content .highlight{color:gold}.preview-hero-content .subtitle{font-size:1.25rem;margin-bottom:1rem;opacity:.95}.preview-hero-content .hero-desc{font-size:1.1rem;margin-bottom:1.5rem;opacity:.9}.preview-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.preview-btn{padding:12px 24px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer}.preview-btn.primary{background:#fff;color:#667eea}.preview-btn.secondary{background:transparent;border:2px solid white;color:#fff}.preview-btn.cv{background:linear-gradient(135deg,gold,#ffed4e);color:#333;font-weight:700}.preview-section.about{background:#f7fafc}.preview-section h2{font-size:2rem;text-align:center;margin-bottom:2rem;color:#2d3748;position:relative}.preview-section h2:after{content:"";display:block;width:60px;height:4px;background:linear-gradient(135deg,#667eea,#764ba2);margin:1rem auto 0;border-radius:2px}.preview-about-content{display:flex;gap:2rem;align-items:center;max-width:900px;margin:0 auto}.preview-about-image{width:300px;height:300px;flex-shrink:0;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px #00000026}.about-img{width:100%;height:100%;object-fit:cover}.preview-about-text{flex:1}.preview-about-text p{font-size:1.1rem;line-height:1.8;color:#4a5568;margin-bottom:1rem}.preview-section.projects{background:#fff}.preview-projects-grid{display:flex;flex-direction:column;gap:2rem;max-width:900px;margin:0 auto}.preview-project-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000001a;display:flex;min-height:200px}.preview-project-img{width:300px;min-width:300px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-img{width:100%;height:100%;object-fit:cover}.img-placeholder{font-size:4rem}.preview-project-content{flex:1;padding:24px;display:flex;flex-direction:column;gap:12px}.preview-project-content h3{font-size:1.5rem;color:#2d3748;margin:0}.preview-project-content p{font-size:1rem;color:#4a5568;line-height:1.6;margin:0}.preview-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.preview-tag{background:#edf2f7;color:#667eea;padding:.375rem .75rem;border-radius:6px;font-size:.875rem;font-weight:600}.preview-section.skills{background:#fff}.preview-skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:900px;margin:0 auto}.preview-skill-box{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 12px #0000001a;border:1px solid #e2e8f0}.preview-skill-box h3{color:#667eea;font-size:1.5rem;margin:0 0 1rem}.preview-skill-box ul{list-style:none;padding:0;margin:0}.preview-skill-box li{color:#4a5568;position:relative;padding:.5rem 0 .5rem 1.5rem}.preview-skill-box li:before{content:"▹";position:absolute;left:0;color:#667eea;font-weight:700}.preview-section.footer{background:#2d3748;color:#fff;min-height:500px;padding-bottom:200px}.preview-section.footer h2{color:#fff}.footer-intro{text-align:center;font-size:1.1rem;max-width:600px;margin:0 auto 2rem;opacity:.9}.preview-footer-contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;max-width:1200px;margin:0 auto 3rem}.contact-item{background:#ffffff1a;padding:2.5rem 2rem;border-radius:12px;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.contact-item h3{color:#fff;font-size:1.25rem;margin:0 0 .75rem}.contact-item p{color:gold;font-weight:500;font-size:.95rem;margin:0;word-break:break-all}.footer-copyright{text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.2)}.footer-copyright p{margin:0;opacity:.7;font-size:.95rem;color:#fffc}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media(max-width:1024px){.code-editor{font-size:12px}.preview-section{padding:40px 24px}.preview-projects-grid{gap:1.5rem}.preview-project-card{flex-direction:column;min-height:auto}.preview-project-img{width:100%;height:200px}.preview-skills-grid{grid-template-columns:1fr;gap:1.5rem}}@media(max-width:768px){.build-intro{flex-direction:column}.build-intro-left{width:100%!important;height:40%;box-shadow:0 2px 10px #00000080}.build-intro-right{width:100%!important;height:60%}.code-editor{font-size:11px}.line-number,.code-line{line-height:18px}.preview-section{padding:30px 16px}.preview-hero-content h1{font-size:1.75rem}.preview-hero-content .subtitle{font-size:1rem}.preview-section h2{font-size:1.5rem}}.preview-content::-webkit-scrollbar{width:14px}.preview-content::-webkit-scrollbar-track{background:linear-gradient(to bottom,#f8f9fa,#e9ecef);border-left:1px solid #dee2e6;box-shadow:inset 0 0 6px #0000000d}.preview-content::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#667eea,#764ba2);border-radius:10px;border:2px solid transparent;background-clip:padding-box;box-shadow:0 2px 6px #667eea4d;transition:all .3s cubic-bezier(.4,0,.2,1)}.preview-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5568d3,#653a8b);box-shadow:0 4px 12px #667eea80;transform:scaleX(1.1)}.preview-content::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#4a5bbd,#562f78);box-shadow:0 2px 8px #667eea99}.code-editor-body::-webkit-scrollbar{width:12px}.code-editor-body::-webkit-scrollbar-track{background:#1e1e1e;border-left:1px solid #333333}.code-editor-body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#569cd6,#4ec9b0);border-radius:8px;border:2px solid #1e1e1e;box-shadow:0 0 8px #569cd666;transition:all .3s cubic-bezier(.4,0,.2,1)}.code-editor-body::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#6aa4db,#5ed4b5);box-shadow:0 0 14px #569cd699,0 0 20px #4ec9b04d;border-color:#252526}.code-editor-body::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#4a8abd,#3fb89a);box-shadow:0 0 10px #569cd6b3}.preview-side-menu{position:absolute;top:0;right:0;width:350px;height:100%;background:#fff;box-shadow:-4px 0 20px #00000026;z-index:10;display:flex;flex-direction:column;overflow:hidden}.preview-side-menu .side-menu-header{padding:1.5rem;border-bottom:2px solid #e2e8f0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.preview-side-menu .side-menu-header h2{margin:0;font-size:1.5rem;font-weight:700;color:#fff}.preview-side-menu .side-menu-header h2:after{display:none}.preview-side-menu .side-menu-content{flex:1;overflow-y:auto;padding:1.5rem}.preview-side-menu .side-menu-section{margin-bottom:2rem}.preview-side-menu .side-menu-section h3{color:#2d3748;font-size:1.1rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #667eea}.preview-side-menu .side-menu-project{background:#f7fafc;padding:1rem;border-radius:8px;margin-bottom:.875rem;border:1px solid #e2e8f0;display:flex;gap:.875rem}.preview-side-menu .side-menu-project-image{flex-shrink:0;width:70px;height:70px;border-radius:6px;overflow:hidden;background:#e2e8f0}.preview-side-menu .side-menu-project-image img{width:100%;height:100%;object-fit:cover}.preview-side-menu .side-menu-project-content{flex:1;min-width:0}.preview-side-menu .side-menu-project h4{margin:0 0 .5rem;color:#2d3748;font-size:.95rem;font-weight:600}.preview-side-menu .side-menu-project p{margin:0 0 .625rem;color:#4a5568;font-size:.75rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.preview-side-menu .side-menu-project-tags{display:flex;flex-wrap:wrap;gap:.375rem}.preview-side-menu .side-menu-tag{background:#fff;color:#667eea;padding:.25rem .5rem;border-radius:4px;font-size:.688rem;font-weight:600;border:1px solid #e2e8f0}.preview-side-menu .side-menu-content::-webkit-scrollbar{width:10px}.preview-side-menu .side-menu-content::-webkit-scrollbar-track{background:linear-gradient(to bottom,#f7fafc,#edf2f7);border-left:1px solid #e2e8f0}.preview-side-menu .side-menu-content::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#667eea,#764ba2);border-radius:8px;border:2px solid #f7fafc;box-shadow:0 2px 4px #667eea40;transition:all .3s cubic-bezier(.4,0,.2,1)}.preview-side-menu .side-menu-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5568d3,#653a8b);box-shadow:0 3px 8px #667eea66;border-color:#edf2f7}.preview-side-menu .side-menu-content::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#4a5bbd,#562f78);box-shadow:0 2px 6px #667eea80}.split-screen-editor{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;background:#1e1e1e;z-index:9998;overflow:hidden}.split-screen-left{height:100%;background:#1e1e1e;overflow:hidden;box-shadow:2px 0 10px #00000080;position:relative;z-index:2;display:flex;flex-direction:column}.split-screen-left .split-screen-close-btn{position:absolute;top:10px;right:10px;z-index:1000;background:#ffffff1a;width:32px;height:32px;border-radius:50%}.split-screen-editor-header{background:#323233;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1e1e1e}.split-screen-editor-title{display:flex;align-items:center;gap:10px;color:#ccc;font-size:14px;font-weight:600}.split-screen-editor-title svg{color:#4ec9b0}.split-screen-editor-controls{display:flex;align-items:center;gap:12px}.split-screen-reset-btn{background:linear-gradient(135deg,orange,#ff8c00);border:none;color:#fff;cursor:pointer;padding:6px 12px;border-radius:6px;transition:all .2s;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}.split-screen-reset-btn:hover{background:linear-gradient(135deg,#ff8c00,orange);transform:translateY(-1px);box-shadow:0 4px 12px #ffa50066}.split-screen-reset-btn svg{width:16px;height:16px}.split-screen-close-btn{background:none;border:none;color:#ccc;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center}.split-screen-close-btn:hover{background:#ffffff1a;color:#fff}.split-screen-editor-body{flex:1;overflow:hidden}.split-screen-editor-body .code-editor-container{height:100%;max-width:none;margin:0;border-radius:0;box-shadow:none}.split-screen-editor-body .code-editor-section{padding:0;background:transparent}.split-screen-right{height:100%;background:#f5f5f5;overflow:hidden;position:relative;display:flex;flex-direction:column}.split-screen-preview-content{flex:1;overflow-y:auto;background:#fff}@media(max-width:1024px){.split-screen-editor{flex-direction:column}.split-screen-left{width:100%!important;height:50%;box-shadow:0 2px 10px #00000080}.split-screen-right{width:100%!important;height:50%}}.floating-editor-btn{position:fixed;left:20px;bottom:20px;padding:.625rem 1rem;background:linear-gradient(135deg,#4ec9b0,#3a9d8f);color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.5rem;box-shadow:0 4px 12px #4ec9b04d;transition:all .3s ease;z-index:1000}.floating-editor-btn:hover{transform:translateY(-3px);box-shadow:0 6px 16px #4ec9b066;background:linear-gradient(135deg,#3a9d8f,#4ec9b0)}.floating-editor-btn:active{transform:translateY(-1px)}.floating-editor-btn svg{flex-shrink:0}@media(max-width:768px){.floating-editor-btn{left:50%;transform:translate(-50%);bottom:20px}.floating-editor-btn:hover{transform:translate(-50%) translateY(-3px)}}.floating-reset-btn{position:fixed;top:20px;right:20px;width:40px;height:40px;padding:0;background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #ff6b6b66;transition:all .3s ease;z-index:999}.floating-reset-btn:hover{transform:scale(1.1) rotate(180deg);box-shadow:0 6px 16px #ff6b6b99}.floating-reset-btn:active{transform:scale(.95) rotate(180deg)}.floating-reset-btn svg{flex-shrink:0}@media(max-width:768px){.floating-reset-btn{top:15px;right:15px;width:36px;height:36px}.floating-reset-btn svg{width:16px;height:16px}}.error-overlay{position:fixed;inset:0;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:99999;padding:2rem}.error-container{background:#1e1e1e;border:2px solid #ff6b6b;border-radius:12px;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;padding:2rem;color:#fff;box-shadow:0 8px 32px #ff6b6b66}.error-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #ff6b6b}.error-header svg{color:#ff6b6b;flex-shrink:0}.error-header h1{margin:0;font-size:1.75rem;color:#ff6b6b}.error-content{margin-bottom:2rem}.error-message{margin-bottom:1.5rem}.error-message h2{font-size:1.125rem;margin-bottom:.75rem;color:#ccc}.error-message pre{background:#2d2d2d;padding:1rem;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,Courier New,monospace;font-size:.875rem;line-height:1.5;color:#ff6b6b;border-left:4px solid #ff6b6b}.error-details{margin-top:1rem}.error-details summary{cursor:pointer;-webkit-user-select:none;user-select:none;color:#ccc;font-weight:600;padding:.5rem;background:#2d2d2d;border-radius:6px;margin-bottom:.5rem}.error-details summary:hover{background:#3d3d3d}.error-details pre{background:#2d2d2d;padding:1rem;border-radius:6px;overflow-x:auto;font-family:Consolas,Monaco,Courier New,monospace;font-size:.75rem;line-height:1.5;color:#ccc;margin-top:.5rem}.error-reload-btn{width:100%;padding:.875rem 1.5rem;background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.error-reload-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #ff6b6b66}.error-reload-btn:active{transform:translateY(0)}.error-container::-webkit-scrollbar{width:10px}.error-container::-webkit-scrollbar-track{background:#1e1e1e}.error-container::-webkit-scrollbar-thumb{background:#ff6b6b;border-radius:5px}.error-container::-webkit-scrollbar-thumb:hover{background:#ff5252}.custom-cursor,.cursor-outer,.cursor-trail{position:fixed;pointer-events:none;z-index:99999;mix-blend-mode:difference}.custom-cursor{width:8px;height:8px;transform:translate(-50%,-50%);transition:transform .15s cubic-bezier(.22,.61,.36,1)}.cursor-inner{width:100%;height:100%;background:#667eea99;border-radius:50%;box-shadow:0 0 8px #667eea66;animation:subtlePulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-outer{width:30px;height:30px;border:1.5px solid rgba(102,126,234,.3);border-radius:50%;transform:translate(-50%,-50%);transition:width .3s cubic-bezier(.22,.61,.36,1),height .3s cubic-bezier(.22,.61,.36,1),opacity .3s ease;animation:rotate 10s linear infinite}.cursor-outer:before{content:"";position:absolute;top:50%;left:50%;width:3px;height:3px;background:#667eea66;border-radius:50%;transform:translate(-50%,-150%)}.cursor-trail{width:10px;height:10px;background:radial-gradient(circle,rgba(102,126,234,.8) 0%,rgba(118,75,162,.4) 50%,transparent 100%);border-radius:50%;transform:translate(-50%,-50%);transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);box-shadow:0 0 15px #667eea80,0 0 25px #764ba24d;animation:trailFade .6s ease-out forwards}.custom-cursor.clicking{transform:translate(-50%,-50%) scale(.8)}.cursor-outer.clicking{width:35px;height:35px}.custom-cursor.hovering{transform:translate(-50%,-50%) scale(1.2)}.cursor-outer.hovering{width:50px;height:50px;border-color:#ffd70080;animation:rotate 6s linear infinite,subtleGlow 1.5s ease-in-out infinite}.custom-cursor.hovering .cursor-inner{background:#ffd700b3;box-shadow:0 0 12px #ffd70099}@keyframes subtlePulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.05);opacity:.8}}@keyframes trailFade{0%{opacity:1}to{opacity:0}}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes subtleGlow{0%,to{box-shadow:0 0 10px #ffd7004d}50%{box-shadow:0 0 20px #ffd70080,0 0 30px #ffd70033}}body,button,a,input,textarea,select{cursor:none!important}@media(pointer:coarse){.custom-cursor,.cursor-outer,.cursor-trail{display:none}body,button,a,input,textarea,select{cursor:auto!important}}