*{margin:0;padding:0;box-sizing:border-box}*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;font-size:16px}body{font-family:"Inter",system-ui,sans-serif;background:#0A0A0A;color:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin-bottom:1rem;color:#fff}h1{font-size:2.25rem;font-weight:800}h2{font-size:1.875rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}p{margin-bottom:1rem;color:#A0A0A0}a{color:#00E5FF;text-decoration:none;transition:all 0.2s ease}a:hover{color:#00B2CC}ul,ol{margin-bottom:1rem;padding-left:2rem}li{margin-bottom:.25rem;color:#A0A0A0}code{font-family:"JetBrains Mono",monospace;font-size:.875rem;background:#1A1A1A;color:#00E5FF;padding:.25rem .5rem;border-radius:.25rem}pre{background:#111;color:#fff;padding:1.5rem;border-radius:.5rem;overflow-x:auto;margin-bottom:1rem;border:1px solid rgba(255,255,255,0.1)}pre code{background:transparent;padding:0;color:inherit}img{max-width:100%;height:auto;border-radius:.5rem}input,textarea,select{font-family:inherit;font-size:1rem;background:#111;color:#fff;border:1px solid rgba(255,255,255,0.1);border-radius:.5rem;padding:1rem;transition:all 0.2s ease}input:focus,textarea:focus,select:focus{outline:none;border-color:#00E5FF;box-shadow:0 0 0 2px rgba(0,229,255,0.2)}input::placeholder,textarea::placeholder,select::placeholder{color:#606060}table{width:100%;border-collapse:collapse;margin-bottom:1rem;background:#111;border-radius:.5rem;overflow:hidden}th,td{padding:1rem;text-align:left;border-bottom:1px solid rgba(255,255,255,0.1)}th{background:#1A1A1A;color:#fff;font-weight:600}td{color:#A0A0A0}::selection{background:rgba(0,229,255,0.3);color:#fff}::-moz-selection{background:rgba(0,229,255,0.3);color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#111}::-webkit-scrollbar-thumb{background:#1A1A1A;border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}.layout{display:flex;min-height:100vh;padding-top:60px}.header{position:fixed;top:0;left:0;right:0;height:60px;background:rgba(10,10,10,0.95);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.1);z-index:300}.nav-container{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:#fff;font-weight:700;font-size:1.25rem;transition:all 0.2s ease}.brand:hover{color:#00E5FF}.brand-icon{width:28px;height:28px;background:#00E5FF;border-radius:.5rem;display:flex;align-items:center;justify-content:center;color:#0A0A0A;font-size:.875rem}.brand-text{display:flex;flex-direction:column;line-height:1.1}.brand-name{font-size:1.25rem;font-weight:700}.brand-tagline{font-size:.75rem;color:#A0A0A0;font-weight:400}.main-nav{display:flex;align-items:center;gap:2rem}.nav-item{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;text-decoration:none;color:#A0A0A0;font-weight:500;font-size:.875rem;transition:all 0.2s ease;border:1px solid transparent}.nav-item:hover{color:#00E5FF;background:rgba(0,229,255,0.1);border-color:rgba(0,229,255,0.2)}.nav-item.github-link{background:#00E5FF;color:#0A0A0A;font-weight:600}.nav-item.github-link:hover{background:#00B2CC;color:#0A0A0A}.mobile-toggle{display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:.5rem;border-radius:.5rem;transition:all 0.2s ease}.mobile-toggle:hover{background:rgba(255,255,255,0.05)}.mobile-toggle span{width:18px;height:2px;background:#fff;margin:2px 0;transition:all 0.2s ease;border-radius:9999px}.sidebar{width:240px;background:#111;border-right:1px solid rgba(255,255,255,0.1);height:calc(100vh - 60px);position:sticky;top:60px;overflow-y:auto;z-index:200}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid rgba(255,255,255,0.1)}.sidebar-header h3{font-size:.875rem;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0}.sidebar-toggle{display:none;background:none;border:none;color:#A0A0A0;cursor:pointer;padding:.5rem;border-radius:.5rem;transition:all 0.2s ease}.sidebar-toggle:hover{color:#fff;background:rgba(255,255,255,0.05)}.sidebar-nav{padding:1.5rem}.main-content{flex:1;background:#0A0A0A;min-height:calc(100vh - 60px)}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}.content-section{padding:3rem 0}.content-section:not(:last-child){border-bottom:1px solid rgba(255,255,255,0.1)}.section-header{text-align:center;margin-bottom:3rem}.section-header h2{font-size:1.875rem;font-weight:700;margin-bottom:1rem;color:#fff}.section-header p{font-size:1.125rem;color:#A0A0A0;max-width:600px;margin:0 auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 2rem;border:1px solid transparent;border-radius:.5rem;font-family:inherit;font-weight:600;font-size:.875rem;text-decoration:none;cursor:pointer;transition:all 0.2s ease;white-space:nowrap}.btn:focus{outline:none;box-shadow:0 0 0 2px rgba(0,229,255,0.5)}.btn:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:#00E5FF;color:#0A0A0A;border-color:#00E5FF}.btn-primary:hover{background:#00B2CC;border-color:#00B2CC;color:#0A0A0A;transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,0.3)}.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,0.2)}.btn-outline:hover{background:rgba(255,255,255,0.05);border-color:#00E5FF;color:#00E5FF}.btn-ghost{background:transparent;color:#A0A0A0;border-color:transparent}.btn-ghost:hover{background:rgba(255,255,255,0.05);color:#fff}.btn-small{padding:.5rem 1.5rem;font-size:.75rem}.btn-large{padding:1.5rem 3rem;font-size:1rem}.card{background:#111;border:1px solid rgba(255,255,255,0.1);border-radius:.5rem;padding:2rem;transition:all 0.2s ease}.card:hover{transform:translateY(-4px);box-shadow:0 4px 20px rgba(0,0,0,0.3);border-color:#00E5FF}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.card-title{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;color:#fff}.card-subtitle{font-size:.875rem;color:#606060;margin-bottom:0}.card-content p:last-child{margin-bottom:0}.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.1)}.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}.badge-primary{background:rgba(0,229,255,0.2);color:#00E5FF;border:1px solid rgba(0,229,255,0.3)}.badge-success{background:rgba(0,255,136,0.2);color:#0f8;border:1px solid rgba(0,255,136,0.3)}.badge-warning{background:rgba(255,184,0,0.2);color:#FFB800;border:1px solid rgba(255,184,0,0.3)}.badge-error{background:rgba(255,68,68,0.2);color:#f44;border:1px solid rgba(255,68,68,0.3)}.tag{display:inline-block;padding:.25rem .5rem;background:#1A1A1A;color:#A0A0A0;border-radius:.5rem;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem;transition:all 0.2s ease}.tag:hover{background:rgba(255,255,255,0.1);color:#fff}.project-link{display:flex;align-items:center;gap:1rem;padding:1rem;margin-bottom:.5rem;border-radius:.5rem;text-decoration:none;color:#A0A0A0;transition:all 0.2s ease;border:1px solid transparent}.project-link:hover{background:#1A1A1A;border-color:rgba(255,255,255,0.2);color:#fff}.project-link.active{background:#1A1A1A;border-color:#00E5FF;color:#00E5FF}.project-link.active .project-icon{background:#00E5FF;color:#0A0A0A}.project-icon{width:32px;height:32px;background:#1A1A1A;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#A0A0A0;transition:all 0.2s ease}.project-info{flex:1}.project-name{font-weight:600;font-size:.875rem;margin-bottom:2px;line-height:1.2}.project-status{font-size:.75rem;color:#606060;text-transform:uppercase;letter-spacing:0.05em}.project-badge{width:6px;height:6px;border-radius:9999px;background:#0f8;flex-shrink:0}.project-badge.warning{background:#FFB800}.project-badge.error{background:#f44}.hero{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;min-height:70vh;padding:3rem;max-width:1200px;margin:0 auto}.hero-content{max-width:500px}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:rgba(0,229,255,0.1);border:1px solid rgba(0,229,255,0.2);color:#00E5FF;border-radius:.5rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:2rem}.hero-title{font-size:clamp(2.5rem, 5vw, 4.5rem);font-weight:800;line-height:1;margin-bottom:1.5rem;color:#fff}.gradient-text{background:linear-gradient(135deg, #00E5FF 0%, #fff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-description{font-size:1.125rem;line-height:1.6;color:#A0A0A0;margin-bottom:2rem}.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}.hero-visual{display:flex;align-items:center;justify-content:center}.tech-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:1.5rem}.tech-item{width:70px;height:70px;background:#111;border:1px solid rgba(255,255,255,0.1);border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:1.75rem;color:#A0A0A0;transition:all 0.2s ease}.tech-item:hover{background:#1A1A1A;border-color:rgba(255,255,255,0.2);transform:translateY(-2px)}.tech-item:nth-child(1){color:#00E5FF}.tech-item:nth-child(2){color:#0f8}.tech-item:nth-child(3){color:#FFB800}.tech-item:nth-child(4){color:#fff}.footer{background:#0A0A0A;border-top:1px solid rgba(255,255,255,0.1);padding:3rem 0;margin-top:auto}.footer-content{max-width:1200px;margin:0 auto;padding:0 1.5rem}.footer-main{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.footer-brand{display:flex;align-items:center;gap:.5rem;font-weight:600;color:#fff}.footer-links{display:flex;gap:2rem}.footer-links a{color:#A0A0A0;text-decoration:none;font-weight:500;font-size:.875rem;transition:all 0.2s ease}.footer-links a:hover{color:#00E5FF}.footer-social{display:flex;gap:1rem}.footer-social a{width:32px;height:32px;background:#111;border:1px solid rgba(255,255,255,0.1);border-radius:.5rem;display:flex;align-items:center;justify-content:center;color:#A0A0A0;text-decoration:none;transition:all 0.2s ease}.footer-social a:hover{background:#00E5FF;border-color:#00E5FF;color:#0A0A0A;transform:translateY(-2px)}.footer-bottom{padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.1);text-align:center;color:#606060;font-size:.75rem}.license-link{color:#00E5FF;text-decoration:none;transition:all 0.2s ease}.license-link:hover{color:#00B2CC}.d-none{display:none !important}.d-block{display:block !important}.d-inline{display:inline !important}.d-inline-block{display:inline-block !important}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-grid{display:grid !important}.flex-row{flex-direction:row !important}.flex-column{flex-direction:column !important}.flex-wrap{flex-wrap:wrap !important}.flex-nowrap{flex-wrap:nowrap !important}.justify-start{justify-content:flex-start !important}.justify-center{justify-content:center !important}.justify-end{justify-content:flex-end !important}.justify-between{justify-content:space-between !important}.justify-around{justify-content:space-around !important}.align-start{align-items:flex-start !important}.align-center{align-items:center !important}.align-end{align-items:flex-end !important}.align-stretch{align-items:stretch !important}.flex-1{flex:1 !important}.flex-none{flex:none !important}.text-left{text-align:left !important}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-primary{color:#fff !important}.text-secondary{color:#A0A0A0 !important}.text-muted{color:#606060 !important}.text-accent{color:#00E5FF !important}.text-success{color:#0f8 !important}.text-warning{color:#FFB800 !important}.text-error{color:#f44 !important}.font-light{font-weight:300 !important}.font-normal{font-weight:400 !important}.font-medium{font-weight:500 !important}.font-semibold{font-weight:600 !important}.font-bold{font-weight:700 !important}.font-extrabold{font-weight:800 !important}.text-xs{font-size:.75rem !important}.text-sm{font-size:.875rem !important}.text-base{font-size:1rem !important}.text-lg{font-size:1.125rem !important}.text-xl{font-size:1.25rem !important}.text-2xl{font-size:1.5rem !important}.text-3xl{font-size:1.875rem !important}.text-4xl{font-size:2.25rem !important}.m-0{margin:0 !important}.m-auto{margin:auto !important}.mx-auto{margin-left:auto !important;margin-right:auto !important}.my-auto{margin-top:auto !important;margin-bottom:auto !important}.mt-0{margin-top:0 !important}.mr-0{margin-right:0 !important}.mb-0{margin-bottom:0 !important}.ml-0{margin-left:0 !important}.mt-xs{margin-top:.25rem !important}.mr-xs{margin-right:.25rem !important}.mb-xs{margin-bottom:.25rem !important}.ml-xs{margin-left:.25rem !important}.mt-sm{margin-top:.5rem !important}.mr-sm{margin-right:.5rem !important}.mb-sm{margin-bottom:.5rem !important}.ml-sm{margin-left:.5rem !important}.mt-md{margin-top:1rem !important}.mr-md{margin-right:1rem !important}.mb-md{margin-bottom:1rem !important}.ml-md{margin-left:1rem !important}.mt-lg{margin-top:1.5rem !important}.mr-lg{margin-right:1.5rem !important}.mb-lg{margin-bottom:1.5rem !important}.ml-lg{margin-left:1.5rem !important}.mt-xl{margin-top:2rem !important}.mr-xl{margin-right:2rem !important}.mb-xl{margin-bottom:2rem !important}.ml-xl{margin-left:2rem !important}.mt-2xl{margin-top:3rem !important}.mr-2xl{margin-right:3rem !important}.mb-2xl{margin-bottom:3rem !important}.ml-2xl{margin-left:3rem !important}.p-0{padding:0 !important}.pt-0{padding-top:0 !important}.pr-0{padding-right:0 !important}.pb-0{padding-bottom:0 !important}.pl-0{padding-left:0 !important}.pt-xs{padding-top:.25rem !important}.pr-xs{padding-right:.25rem !important}.pb-xs{padding-bottom:.25rem !important}.pl-xs{padding-left:.25rem !important}.pt-sm{padding-top:.5rem !important}.pr-sm{padding-right:.5rem !important}.pb-sm{padding-bottom:.5rem !important}.pl-sm{padding-left:.5rem !important}.pt-md{padding-top:1rem !important}.pr-md{padding-right:1rem !important}.pb-md{padding-bottom:1rem !important}.pl-md{padding-left:1rem !important}.pt-lg{padding-top:1.5rem !important}.pr-lg{padding-right:1.5rem !important}.pb-lg{padding-bottom:1.5rem !important}.pl-lg{padding-left:1.5rem !important}.pt-xl{padding-top:2rem !important}.pr-xl{padding-right:2rem !important}.pb-xl{padding-bottom:2rem !important}.pl-xl{padding-left:2rem !important}.pt-2xl{padding-top:3rem !important}.pr-2xl{padding-right:3rem !important}.pb-2xl{padding-bottom:3rem !important}.pl-2xl{padding-left:3rem !important}.rounded-none{border-radius:0 !important}.rounded-sm{border-radius:.25rem !important}.rounded{border-radius:.5rem !important}.rounded-lg{border-radius:.75rem !important}.rounded-xl{border-radius:1rem !important}.rounded-full{border-radius:9999px !important}.shadow-none{box-shadow:none !important}.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.05) !important}.shadow{box-shadow:0 4px 20px rgba(0,0,0,0.3) !important}.shadow-lg{box-shadow:0 10px 30px rgba(0,0,0,0.4) !important}.opacity-0{opacity:0 !important}.opacity-25{opacity:0.25 !important}.opacity-50{opacity:0.5 !important}.opacity-75{opacity:0.75 !important}.opacity-100{opacity:1 !important}.overflow-hidden{overflow:hidden !important}.overflow-visible{overflow:visible !important}.overflow-scroll{overflow:scroll !important}.overflow-auto{overflow:auto !important}.overflow-x-hidden{overflow-x:hidden !important}.overflow-x-visible{overflow-x:visible !important}.overflow-x-scroll{overflow-x:scroll !important}.overflow-x-auto{overflow-x:auto !important}.overflow-y-hidden{overflow-y:hidden !important}.overflow-y-visible{overflow-y:visible !important}.overflow-y-scroll{overflow-y:scroll !important}.overflow-y-auto{overflow-y:auto !important}.relative{position:relative !important}.absolute{position:absolute !important}.fixed{position:fixed !important}.sticky{position:sticky !important}.w-full{width:100% !important}.h-full{height:100% !important}.w-auto{width:auto !important}.h-auto{height:auto !important}.max-w-none{max-width:none !important}.max-w-xs{max-width:320px !important}.max-w-sm{max-width:384px !important}.max-w-md{max-width:448px !important}.max-w-lg{max-width:512px !important}.max-w-xl{max-width:576px !important}.max-w-2xl{max-width:672px !important}.max-w-3xl{max-width:768px !important}.max-w-4xl{max-width:896px !important}.max-w-5xl{max-width:1024px !important}.max-w-6xl{max-width:1152px !important}.max-w-7xl{max-width:1280px !important}.max-w-full{max-width:100% !important}.cursor-pointer{cursor:pointer !important}.cursor-default{cursor:default !important}.cursor-not-allowed{cursor:not-allowed !important}.visible{visibility:visible !important}.invisible{visibility:hidden !important}.z-0{z-index:0 !important}.z-10{z-index:10 !important}.z-20{z-index:20 !important}.z-30{z-index:30 !important}.z-40{z-index:40 !important}.z-50{z-index:50 !important}@keyframes pulse{0%, 100%{opacity:1}50%{opacity:0.5}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%, 100%{transform:scale(2);opacity:0}}@keyframes bounce{0%, 100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:none;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}@keyframes float{0%, 100%{transform:translateY(0px)}50%{transform:translateY(-8px)}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important}.animate-spin{animation:spin 1s linear infinite !important}.animate-ping{animation:ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important}.animate-bounce{animation:bounce 1s infinite !important}.animate-float{animation:float 3s ease-in-out infinite !important}@media (max-width: 1280px){.hero{gap:2rem;padding:2rem}.nav-container{padding:0 1rem}}@media (max-width: 1024px){.hero{grid-template-columns:1fr;text-align:center;gap:2rem;padding:2rem 1rem}.hero-visual{order:-1}.tech-grid{grid-template-columns:repeat(4, 1fr);max-width:400px;margin:0 auto}.projects-grid{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}.footer-main{flex-direction:column;gap:1.5rem;text-align:center}.footer-links{justify-content:center}}@media (max-width: 768px){.main-nav{display:none}.mobile-toggle{display:flex}.sidebar{position:fixed;top:60px;left:-100%;z-index:500;transition:left 0.3s ease;width:280px}.sidebar.open{left:0}.sidebar-toggle{display:block}.main-content{width:100%}.hero{padding:1.5rem 1rem;min-height:60vh}.hero-title{font-size:clamp(2rem, 8vw, 3rem)}.hero-actions{flex-direction:column;align-items:center}.btn{width:100%;justify-content:center}.tech-grid{grid-template-columns:repeat(2, 1fr);gap:1rem}.tech-item{width:60px;height:60px;font-size:1.5rem}.projects-grid{grid-template-columns:1fr;gap:1.5rem}.project-card{padding:1.5rem}.content-section{padding:2rem 0}.section-header{margin-bottom:2rem}.section-header h2{font-size:1.5rem}.footer{padding:2rem 0}.footer-links{flex-direction:column;gap:.5rem}.footer-social{justify-content:center;margin-top:1.5rem}.nav-container{padding:0 1rem}.brand-tagline{display:none}}@media (max-width: 640px){.hero{padding:1rem}.hero-title{font-size:clamp(1.75rem, 10vw, 2.5rem);margin-bottom:1rem}.hero-description{font-size:1rem}.brand-text{display:none}.brand{font-size:1.125rem}.card{padding:1.5rem}.project-card{padding:1rem}.tech-item{width:50px;height:50px;font-size:1.25rem}.content-section{padding:1.5rem 0}.container{padding:0 1rem}.section-header h2{font-size:1.25rem}.card-title{font-size:1.125rem}.btn{padding:.5rem 1.5rem;font-size:.875rem}.btn-large{padding:1rem 2rem}}.sidebar-overlay{display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);z-index:400;cursor:pointer}.sidebar-overlay.show{display:block}@media (max-width: 640px){.hidden-sm{display:none !important}}@media (max-width: 768px){.hidden-md{display:none !important}}@media (max-width: 1024px){.hidden-lg{display:none !important}}@media (max-width: 1280px){.hidden-xl{display:none !important}}@media (min-width: 640px){.visible-sm{display:block !important}}@media (min-width: 768px){.visible-md{display:block !important}}@media (min-width: 1024px){.visible-lg{display:block !important}}@media (min-width: 1280px){.visible-xl{display:block !important}}@media print{.header,.sidebar,.footer,.btn,.mobile-toggle,.sidebar-toggle{display:none !important}.layout{padding-top:0}.main-content{width:100%}body{color:#000;background:#fff}.card{border:1px solid #ccc;background:#fff}}