.navbar{width:100%;display:flex;align-items:center;justify-content:space-between;background:#feffff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px 7%;position:fixed;top:0;left:0;right:0;z-index:1000;box-shadow:0 2px 8px #0000000d;border-bottom:1px solid rgba(0,0,0,.05);transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease}.navbar-social{display:flex;align-items:center;gap:12px}.navbar-social-link{display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:#374151;transition:all .3s ease;text-decoration:none}.navbar-social-link:hover{color:#1f2937;transform:scale(1.1)}.navbar-social-icon{font-size:20px;transition:all .3s ease}body.dark-mode .navbar-social-link{color:#b3b3b3}body.dark-mode .navbar-social-link:hover{color:#fff}.navbar ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex:1;justify-content:center}.navbar ul li{margin:0}.navbar ul li a{display:block;padding:8px 20px;font-size:14px;font-weight:500;color:#374151;text-decoration:none;border-radius:50px;transition:all .3s ease;animation:fade-down .6s .5s backwards;font-family:Inter,sans-serif}.navbar ul li.active a{background:linear-gradient(135deg,pink,#ffb3d9);color:#1f2937}.navbar ul li:not(.active) a:hover{background:#f3f4f6;color:#1f2937}.theme-toggle{display:flex;align-items:center;gap:8px;background:#f3f4f6;padding:6px;border-radius:50px;cursor:pointer;transition:all .3s ease}.theme-toggle:hover{background:#e5e7eb}.theme-icon{font-size:20px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.theme-icon.active{background:#fff;box-shadow:0 2px 8px #0000001a}body.dark-mode{background:#1a1a1a;color:#e5e7eb}body.dark-mode .navbar{background:#2d2d2d;box-shadow:0 2px 8px #0000004d;border-bottom:1px solid rgba(255,255,255,.1)}body.dark-mode .navbar ul li a{color:#e5e7eb}body.dark-mode .navbar ul li.active a{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}body.dark-mode .navbar ul li:not(.active) a:hover{background:#3d3d3d;color:#fff}body.dark-mode .theme-toggle{background:#3d3d3d}body.dark-mode .theme-toggle:hover{background:#4d4d4d}body.dark-mode .theme-icon.active{background:#1a1a1a}@media (max-width: 768px){.navbar{padding:10px 4%}.navbar ul{gap:4px;flex-wrap:wrap}.navbar ul li a{padding:6px 14px;font-size:13px}.theme-toggle{padding:4px}.theme-icon{font-size:18px;width:28px;height:28px}}@media (max-width: 480px){.navbar{padding:8px 3%}.navbar ul{gap:3px}.navbar ul li a{padding:5px 10px;font-size:12px}}@keyframes fade-down{0%{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.hero{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:space-between;gap:24px;padding:72px 16px 80px;margin:35px auto 0;max-width:1200px;z-index:1}.content{display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:720px;z-index:1}.title{font-size:clamp(24px,5.5vw,48px);margin:0 0 12px;line-height:1.1;animation:fade-up 1.5s .5s backwards;font-family:Space Grotesk,Inter,sans-serif;font-weight:700;color:#1f2937;letter-spacing:-.02em;transition:color .3s ease}body.dark-mode .title{color:#fff}.titlename{color:red;transition:color .3s ease}body.dark-mode .titlename{color:red}.caption{color:gray;font-size:clamp(13px,2.2vw,16px);line-height:1.5;margin:0 0 12px;animation:fade-up 1.5s .5s backwards;font-weight:400;transition:color .3s ease}body.dark-mode .caption{color:#b3b3b3}.heroimage{width:min(45vw,380px);height:auto;aspect-ratio:1 / 1;margin-top:-40px;z-index:1;border-radius:50%;object-fit:cover;animation:fade-up 1.5s .5s backwards,floating 3s ease-in-out infinite}.socialmedia{float:left;width:36px;height:36px;padding:0;transition:transform .25s ease;cursor:pointer}.socialmedia:hover{transform:scale(1.2)}.socialmediaicons,.techstackitems{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;animation:fade-up 1.5s .5s backwards}.soicalmediaicons:after{content:"";clear:both;display:table}.techstackitems{margin-top:20px}.techstackitems p{margin:0 12px 0 0;font-weight:400}.techstack,.techstack2{width:40px;height:40px;object-fit:contain;transition:transform .25s ease;cursor:pointer}.techstack:hover,.techstack2:hover{transform:scale(1.2)}.techstackitems:after{content:"";clear:both;display:table}@media (min-width: 640px){.hero{padding:150px 24px 300px;gap:32px}.socialmedia,.techstack,.techstack2{width:40px;height:40px}.heroimage{width:min(32vw,320px)}}@media (min-width: 1024px){.hero{flex-direction:row;justify-content:space-between;align-items:center;gap:40px}.content{max-width:640px}.heroimage{width:360px}}@media (prefers-reduced-motion: reduce){.heroimage,.title,.caption,.socialmediaicons,.techstackitems{animation:none}}@keyframes floating{0%{transform:translate(0)}50%{transform:translateY(30px)}to{transform:translate(0)}}@keyframes fade-up{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.aboutpage{position:relative;z-index:1;max-width:800px;margin:80px auto 50px;padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}.aboutpagecontent{display:flex;justify-content:center;align-items:center}.aboutpageimage{display:block;width:100%;max-width:260px;height:auto;border-radius:10px;object-fit:cover;box-shadow:0 8px 20px #0000001f;opacity:1;transform:none}.aboutpagetext{display:flex;flex-direction:column;gap:14px}.aboutpagetitle{color:#7cb9e8;font-weight:700;letter-spacing:.06em;font-size:clamp(9px,1.6vw,12px);margin:0;opacity:1;transform:none;transition:color .3s ease}body.dark-mode .aboutpagetitle{color:#ff1b6b}.aboutpagetext h2{font-size:clamp(18px,4vw,26px);line-height:1.2;margin:0;opacity:1;transform:none;color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;font-weight:700;letter-spacing:-.02em;transition:color .3s ease}body.dark-mode .aboutpagetext h2{color:#fff}.aboutpagecaption{font-size:clamp(12px,2vw,14px);margin:0;color:#222;opacity:1;transform:none;line-height:1.5;font-weight:400;transition:color .3s ease}body.dark-mode .aboutpagecaption{color:#b3b3b3}.page-enter{animation:fade-up 1.2s ease-out .2s both}@media (max-width: 900px){.aboutpage{grid-template-columns:1fr;margin:40px auto;gap:20px}.aboutpagecontent{order:-1}.aboutpageimage{max-width:280px}.aboutpagetext{text-align:left}}.educationpage{position:relative;z-index:1;max-width:800px;margin:70px auto 60px;padding:0 16px;display:grid;grid-template-columns:1fr;gap:20px}.educationpageheadings{margin-bottom:5px}.educationpageheadings h2{font-size:clamp(22px,3.5vw,26px);color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;font-weight:700;letter-spacing:-.02em;transition:color .3s ease}body.dark-mode .educationpageheadings h2{color:#fff}.educationpagetitle{color:#7cb9e8;font-weight:700;letter-spacing:.06em;font-size:clamp(11px,2vw,15px);margin:0;opacity:1;transform:translateY(0);transition:color .3s ease}body.dark-mode .educationpagetitle{color:#ff1b6b}.education-content{display:flex;flex-direction:column;gap:28px}.education-school{display:flex;flex-direction:column}.education-school h3{font-size:clamp(18px,2.5vw,22px);font-weight:700;color:#1f2937;margin:0 0 12px;transition:color .3s ease}body.dark-mode .education-school h3{color:#fff}.education-degree{font-size:clamp(14px,2vw,16px);color:#374151;font-weight:500;margin:0 0 10px;transition:color .3s ease}body.dark-mode .education-degree{color:#b3b3b3}.education-dates{font-size:clamp(13px,1.8vw,15px);color:#666;font-weight:500;margin:0 0 10px;transition:color .3s ease}body.dark-mode .education-dates{color:#b3b3b3}.education-gpa{font-size:clamp(13px,1.8vw,15px);color:#666;font-weight:500;margin:0;transition:color .3s ease}body.dark-mode .education-gpa{color:#b3b3b3}.education-courses h4{font-size:clamp(16px,2.2vw,18px);font-weight:600;color:#1f2937;margin:0 0 12px;transition:color .3s ease}body.dark-mode .education-courses h4{color:#fff}.courses-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;margin:0}.course-item{display:flex;align-items:baseline;gap:10px;font-size:clamp(13px,1.8vw,15px);line-height:1.6;padding:4px 0;transition:color .3s ease}.course-code{font-weight:600;color:#2563eb;min-width:60px;flex-shrink:0;transition:color .3s ease}body.dark-mode .course-code{color:#60a5fa}.course-name{color:#222;font-weight:400;transition:color .3s ease}body.dark-mode .course-name{color:#b3b3b3}@media (max-width: 768px){.educationpage{margin:60px auto 50px;padding:0 20px}.educationpageheadings{margin-bottom:24px;text-align:center}.courses-list{grid-template-columns:1fr;gap:6px}}@media (max-width: 480px){.educationpage{margin:40px auto;padding:0 16px}.educationpageheadings{margin-bottom:20px}.courses-list{grid-template-columns:1fr;gap:6px}}.metricspage{position:relative;z-index:1;max-width:900px;margin:70px auto 60px;padding:0 16px;display:grid;grid-template-columns:1fr;gap:20px}.metricspageheadings{margin-bottom:5px}.metricspageheadings h2{font-size:clamp(22px,3.5vw,26px)}.metricspagetitle{color:#7cb9e8;font-weight:700;letter-spacing:.06em;font-size:clamp(11px,2vw,15px);margin:0;opacity:1;transform:translateY(0);transition:color .3s ease}body.dark-mode .metricspagetitle{color:#ff1b6b}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.metrics-card{background:#e5fcf5;padding:20px 18px;border-radius:6px;text-align:center;position:relative;transition:all .3s ease;opacity:1;transform:translateY(0)}.metrics-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026}.metrics-number{font-size:clamp(28px,4.5vw,38px);font-weight:700;margin-bottom:6px;line-height:1}.metrics-number.projects{color:#2563eb}.metrics-number.technologies{color:#059669}.metrics-number.commits{color:#7c3aed}.metrics-number.experience{color:#dc2626}.metrics-label{color:#374151;font-weight:600;font-size:clamp(14px,2.2vw,16px);margin-bottom:5px}.metrics-description{color:#666;font-size:clamp(11px,1.6vw,13px);font-weight:500;line-height:1.4}.github{text-align:center;margin-top:30px;opacity:1;transform:translateY(0)}.github img{max-width:90%;height:auto}.github:hover{transform:scale(1.1)}.metrics-status{text-align:center;margin-top:30px;opacity:1;transform:translateY(0)}.status-indicator{display:inline-flex;align-items:center;gap:8px;background:#e5fcf5;padding:10px 18px;border-radius:6px}.status-indicator:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.status-dot{width:8px;height:8px;background:#10b981;border-radius:50%}.status-text{color:#374151;font-weight:500;font-size:clamp(13px,1.8vw,14px)}@media (max-width: 768px){.metricspage{margin:60px auto 50px;padding:0 20px}.metricspageheadings{margin-bottom:24px;text-align:center}.metrics-grid{grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}.metrics-card{padding:16px 14px}}@media (max-width: 480px){.metricspage{margin:40px auto;padding:0 16px}.metricspageheadings{margin-bottom:20px}.metrics-grid{grid-template-columns:1fr;gap:14px}}.metrics-status{visibility:visible!important;display:block!important}.portfoliopage{position:relative;z-index:1;max-width:1200px;margin:80px auto 50px;padding:0 20px;display:flex;flex-direction:column}.portfoliopageheadings{margin-bottom:0;text-align:center}.portfoliopageheadings h2{font-size:clamp(18px,3.5vw,26px);color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;font-weight:700;letter-spacing:-.02em;transition:color .3s ease;margin-top:4px;margin-bottom:0}body.dark-mode .portfoliopageheadings h2{color:#fff}.porfoliopagetitle{color:#7cb9e8;font-weight:700;font-size:clamp(9px,1.6vw,12px);letter-spacing:.06em;transition:color .3s ease;margin-bottom:0;margin-right:0}body.dark-mode .porfoliopagetitle{color:#ff1b6b}.porfoliopagecaption{color:#1f2937;font-weight:700;margin-right:25%;font-family:Space Grotesk,Inter,sans-serif;font-size:clamp(18px,3.5vw,26px);letter-spacing:-.02em;transition:color .3s ease}body.dark-mode .porfoliopagecaption{color:#fff}.project1{position:relative;margin-top:30px;margin-bottom:50px}.project-content-wrapper{display:flex;gap:28px;align-items:flex-start}.project1screenshot{width:32%;flex-shrink:0;border-radius:16px;transition:.5s ease;cursor:pointer;opacity:1}.project1screenshot:hover{transform:scale(1.05)}.project-details{flex:1;display:flex;flex-direction:column;gap:12px}.project1title{font-weight:600;font-size:clamp(16px,2.5vw,20px);color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;transition:color .3s ease;margin:0}body.dark-mode .project1title{color:#fff}.project1caption{font-size:clamp(12px,1.8vw,14px);line-height:1.5;color:#374151;transition:color .3s ease;margin:0}body.dark-mode .project1caption{color:#b3b3b3}.project1-tags{margin:0}.projecttag1{color:#6495ed}.projecttag2{color:teal}.projecttag3{color:#dc143c}.projecttag4{color:#daa520}.projecttag5{color:#6a5acd}.projecttag6{color:#b22222}.projecttag7{color:#bdb76b}.project2{position:relative;margin-top:30px;margin-bottom:50px}.project2screenshot{width:32%;float:right;margin-left:28px;border-radius:16px;transition:.5s ease;cursor:pointer;scale:.9;opacity:1}.project2screenshot:hover{transform:scale(1.05)}.project2title{font-weight:600;margin-right:28px;font-size:clamp(16px,2.5vw,20px);color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;transition:color .3s ease}body.dark-mode .project2title{color:#fff}.project2caption{font-size:clamp(12px,1.8vw,14px);margin-right:28px;line-height:1.5;color:#374151;transition:color .3s ease}body.dark-mode .project2caption{color:#b3b3b3}.portfolio-controls{display:flex;flex-direction:column;gap:20px;align-items:center;margin-top:32px;margin-bottom:40px}.project-links{display:flex;align-items:center;gap:16px;margin-top:8px}.project1-links{margin-left:0}.project2-links,.project2-tags{margin-right:28px}.github-link-wrapper{display:flex;align-items:center;gap:6px;cursor:pointer;color:#374151;font-size:14px;font-weight:500;transition:all .3s ease}.github-link-wrapper:hover{color:#1f2937}.project-github-icon{font-size:18px;color:#222;transition:all .2s ease}.github-link-wrapper:hover .project-github-icon{transform:scale(1.1)}body.dark-mode .github-link-wrapper{color:#b3b3b3}body.dark-mode .github-link-wrapper:hover{color:#fff}body.dark-mode .project-github-icon{color:#b3b3b3}body.dark-mode .github-link-wrapper:hover .project-github-icon{color:#fff}.demo-btn{background:linear-gradient(135deg,#ff1b6b,#ff006e);color:#fff;border:none;padding:8px 18px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif}.demo-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ff1b6b4d}body.dark-mode .demo-btn{background:linear-gradient(135deg,#ff1b6b,#ff006e)}.project-fade-in{opacity:0;transform:translateY(30px);animation:project-appear .6s ease-out forwards}@keyframes project-appear{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.project-content-wrapper{flex-direction:column}.project1screenshot{width:100%}}@keyframes portfolio-fade-up{to{scale:1;opacity:1}}@keyframes fade-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.experiencepage{position:relative;z-index:1;max-width:1000px;margin:80px auto 200px;padding:0 16px;display:grid;grid-template-columns:1fr;gap:20px}.experiencepageheadings{margin-bottom:48px;text-align:center}.experiencepageheadings p{animation:experience-fade-in-text 2s 1s both;animation-timeline:view(10px)}.experiencepageheadings h2{animation:experience-fade-in-text 2s 1s both;animation-timeline:view(10px);font-size:clamp(20px,4vw,30px);color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;font-weight:700;letter-spacing:-.02em;transition:color .3s ease;margin-top:4px;margin-bottom:0}body.dark-mode .experiencepageheadings h2{color:#fff}.experiencepagetitle{color:#7cb9e8;font-weight:700;letter-spacing:.06em;font-size:clamp(9px,1.6vw,14px);margin:0;opacity:0;transform:translateY(10px);animation:about-fade-in-text 2s 1s both;animation-timeline:view(10px);transition:color .3s ease}body.dark-mode .experiencepagetitle{color:#ff1b6b}.timeline{position:relative;max-width:1200px;margin:0 auto;padding:20px 0}.timeline:before{content:"";position:absolute;width:4px;height:100%;background:linear-gradient(180deg,#7cb9e8,#5a9fd8,#7cb9e8);top:0;left:50%;margin-left:-2px;z-index:1;border-radius:2px;transition:background .3s ease}body.dark-mode .timeline:before{background:linear-gradient(180deg,#ff1b6b,#ff006e,#ff1b6b)}.timelineleftcontainer{padding:0 50px 40px 0;position:relative;width:50%;left:0;animation:slideInLeft .6s ease-out}.timelinerightcontainer{padding:0 0 40px 50px;position:relative;width:50%;left:50%;animation:slideInRight .6s ease-out}.timelineleftcontainer img,.timelinerightcontainer img{position:absolute;width:50px;height:50px;object-fit:cover;border-radius:50%;z-index:10;transition:all .3s ease;cursor:pointer;border:3px solid #ffffff;box-shadow:0 4px 12px #00000026;background:#fff}.timelineleftcontainer img{right:-25px;top:20px}.timelinerightcontainer img{left:-25px;top:20px}.timelineleftcontainer img:hover,.timelinerightcontainer img:hover{transform:scale(1.15);box-shadow:0 6px 20px #00000040}body.dark-mode .timelineleftcontainer img,body.dark-mode .timelinerightcontainer img{border-color:#1a1a1a;background:#1a1a1a;box-shadow:0 4px 12px #00000080}.timelinetextbox{padding:20px 24px;position:relative;background:#fff;border-radius:12px;font-size:clamp(12px,1.8vw,14px);color:#374151;transition:all .3s ease;box-shadow:0 2px 8px #00000014;border:1px solid rgba(0,0,0,.05)}.timelinetextbox:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}body.dark-mode .timelinetextbox{background:#1a1a1a;border:1px solid #2a2a2a;color:#b3b3b3;box-shadow:0 2px 8px #0000004d}body.dark-mode .timelinetextbox:hover{box-shadow:0 4px 16px #00000080;border-color:#333}.timelinetextbox h3{font-weight:700;font-size:clamp(15px,2.2vw,18px);margin-bottom:8px;color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;transition:color .3s ease;line-height:1.3}body.dark-mode .timelinetextbox h3{color:#fff}.timelinetextbox small{display:inline-block;margin-bottom:12px;font-size:clamp(11px,1.6vw,13px);color:#7cb9e8;font-weight:600;padding:4px 12px;background:#7cb9e81a;border-radius:12px;transition:all .3s ease}body.dark-mode .timelinetextbox small{color:#ff1b6b;background:#ff1b6b26}.timelinetextbox p{margin-bottom:12px;line-height:1.6;color:#374151;transition:color .3s ease}body.dark-mode .timelinetextbox p{color:#b3b3b3}.timelinetextbox ul{padding-left:20px;margin-top:8px}.timelinetextbox li{margin-bottom:10px;line-height:1.6;color:#374151;transition:color .3s ease}body.dark-mode .timelinetextbox li{color:#b3b3b3}.timelinetextbox li strong{color:#1f2937;font-weight:600}body.dark-mode .timelinetextbox li strong{color:#fff}.left-timelinetextbox-arrow,.right-timelinetextbox-arrow{display:none}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@media (max-width: 768px){.experiencepage{margin:60px auto 200px;padding:0 20px}.experiencepageheadings{margin-bottom:32px;text-align:center}.timeline{position:relative;padding:20px 0}.timeline:before{left:0;margin-left:-2px}.timelineleftcontainer,.timelinerightcontainer{width:100%;left:0;padding:0 0 40px 50px}.timelineleftcontainer img,.timelinerightcontainer img{left:-25px;right:auto;width:45px;height:45px;top:20px}.timelineleftcontainer img:hover,.timelinerightcontainer img:hover{transform:scale(1.1)}.timelinetextbox{padding:18px 20px;font-size:14px}.timelinetextbox h3{font-size:17px}}@media (max-width: 480px){.experiencepage{margin:40px auto 150px;padding:0 16px}.experiencepageheadings{margin-bottom:24px}.timeline:before{left:0;margin-left:-2px}.timelineleftcontainer,.timelinerightcontainer{padding:0 0 35px 45px}.timelineleftcontainer img,.timelinerightcontainer img{width:40px;height:40px;left:-20px;top:18px}.timelineleftcontainer img:hover,.timelinerightcontainer img:hover{transform:scale(1.1)}.timelinetextbox{padding:16px;font-size:13px}.timelinetextbox h3{font-size:16px;line-height:1.3}.timelinetextbox p{font-size:13px;margin-bottom:10px}.timelinetextbox small{font-size:11px;margin-bottom:8px;padding:3px 10px}.timelinetextbox ul{padding-left:16px}.timelinetextbox li{font-size:13px;margin-bottom:8px}}@media (max-width: 320px){.experiencepage{padding:0 12px}.timeline:before{width:3px;margin-left:-1.5px}.timelineleftcontainer,.timelinerightcontainer{padding:0 0 30px 35px}.timelineleftcontainer img,.timelinerightcontainer img{width:35px;height:35px;left:-17px;top:15px}.timelinetextbox{padding:14px}.timelinetextbox h3{font-size:15px}.timelinetextbox p,.timelinetextbox li{font-size:12px}.timelinetextbox small{font-size:10px}}@media (max-width: 768px) and (orientation: landscape){.experiencepage{margin:30px auto 100px}.experiencepageheadings{margin-bottom:20px}.timelineleftcontainer,.timelinerightcontainer{padding:0 0 30px 50px}}@keyframes experience-fade-up{to{scale:1;opacity:1}}@keyframes experience-fade-in-text{0%{opacity:0}to{opacity:1}0%{opacity:0}50%{opacity:1;transform:translateY()}to{transform:translateY()}}.appspage{position:relative;z-index:1;max-width:1200px;margin:80px auto 150px;padding:0 20px}.appspage-header{margin-bottom:48px}.appspage-headings{text-align:center;margin-bottom:40px}.appspage-title{color:#7cb9e8;font-weight:700;letter-spacing:.06em;font-size:clamp(10px,1.8vw,14px);margin:0 0 8px;transition:color .3s ease}body.dark-mode .appspage-title{color:#ff1b6b}.appspage-headings h2{font-size:clamp(20px,3.5vw,28px);margin:0 0 12px;color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;font-weight:700;letter-spacing:-.02em;transition:color .3s ease}body.dark-mode .appspage-headings h2{color:#fff}.appspage-subtitle{color:#666;font-size:clamp(13px,2vw,15px);line-height:1.5;font-weight:400;max-width:700px;margin:0 auto;transition:color .3s ease}body.dark-mode .appspage-subtitle{color:#b3b3b3}.appspage-controls{display:flex;flex-direction:column;gap:20px;align-items:center}.search-bar{position:relative;width:100%;max-width:500px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:18px;color:#777;pointer-events:none;transition:color .3s ease}body.dark-mode .search-icon{color:#666}.search-input{width:100%;font-size:14px;padding:10px 16px 10px 36px;background:#fff;border:2px solid #e5e7eb;border-radius:8px;outline:none;transition:all .3s ease;color:#1f2937}.search-input::placeholder{color:#9ca3af}.search-input:focus{border-color:#7cb9e8;box-shadow:0 0 0 3px #7cb9e81a}body.dark-mode .search-input{background:#1a1a1a;border:1px solid #2a2a2a;color:#fff}body.dark-mode .search-input::placeholder{color:#666}body.dark-mode .search-input:focus{border-color:#ff1b6b;box-shadow:0 0 0 3px #ff1b6b1a;background:#222}.category-filters{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.category-btn{padding:6px 16px;background:#f3f4f6;border:2px solid transparent;border-radius:18px;font-size:12px;font-weight:600;cursor:pointer;transition:all .3s ease;color:#374151}.category-btn:hover{background:#e5e7eb}.category-btn.active{background:#7cb9e8;color:#fff;border-color:#7cb9e8}body.dark-mode .category-btn{background:#1a1a1a;border:1px solid #2a2a2a;color:#b3b3b3}body.dark-mode .category-btn:hover{background:#222;border-color:#333;color:#fff}body.dark-mode .category-btn.active{background:linear-gradient(135deg,#ff1b6b,#ff006e);color:#fff;border-color:transparent}.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:32px}.app-card{background:#e5fcf5;border:1px solid transparent;border-radius:12px;padding:18px;transition:all .3s ease;cursor:pointer;position:relative}.app-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}body.dark-mode .app-card{background:#1a1a1a;border:1px solid #2a2a2a}body.dark-mode .app-card:hover{background:#222;border-color:#333;box-shadow:0 8px 24px #ff1b6b26}.github-icon{font-size:18px;color:#222;cursor:pointer;opacity:.85;transition:all .2s ease}.github-icon:hover{opacity:1;transform:scale(1.05)}body.dark-mode .github-icon{color:#b3b3b3}body.dark-mode .github-icon:hover{color:#fff}.featured-badge{position:absolute;top:12px;right:12px;font-size:20px}.app-icon{font-size:36px;margin-bottom:12px}.app-name{font-size:17px;font-weight:600;margin:0 0 6px;color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;transition:color .3s ease}body.dark-mode .app-name{color:#fff}.app-description{color:#6b7280;font-size:12px;line-height:1.5;margin:0 0 12px;min-height:50px;transition:color .3s ease}body.dark-mode .app-description{color:#a0a0a0}.app-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}.app-icons{display:flex;align-items:center;gap:12px}.external-link-icon{font-size:16px;color:#222;cursor:pointer;opacity:.85;transition:all .2s ease}.external-link-icon:hover{opacity:1;transform:scale(1.05)}body.dark-mode .external-link-icon{color:#b3b3b3}body.dark-mode .external-link-icon:hover{color:#fff}.app-category{font-size:12px;font-weight:600;color:#7cb9e8;background:#fff;padding:4px 12px;border-radius:12px}.try-now-btn{background:linear-gradient(135deg,#ff1b6b,#ff006e);color:#fff;border:none;padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .3s ease}.try-now-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #ff1b6b4d}.no-results{text-align:center;padding:60px 20px;color:#9ca3af;font-size:18px;transition:color .3s ease}body.dark-mode .no-results{color:#666}.app-fade-in{opacity:0;transform:translateY(20px) scale(.95);animation:app-appear .5s ease-out forwards}@keyframes app-appear{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.appspage{margin:80px auto 150px;padding:0 16px}.apps-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}.app-card{padding:20px}.category-filters{gap:8px}.category-btn{padding:6px 16px;font-size:13px}}@media (max-width: 480px){.apps-grid{grid-template-columns:1fr}.appspage-controls{gap:16px}}.app-wrapper{min-height:calc(100vh - 60px);padding-top:80px;padding-bottom:60px}.app-header{max-width:1200px;margin:0 auto 40px;padding:0 24px}.back-link{display:inline-flex;align-items:center;color:#7cb9e8;text-decoration:none;font-weight:600;margin-bottom:24px;transition:all .3s ease}.back-link:hover{color:#5a9fd8;transform:translate(-4px)}.app-title-section{display:flex;align-items:flex-start;gap:24px;margin-bottom:24px}.app-icon-large{font-size:64px;flex-shrink:0}.app-title{font-size:clamp(28px,5vw,42px);margin:0 0 8px;color:#1f2937}.app-subtitle{font-size:clamp(16px,2.5vw,18px);color:#6b7280;margin:0 0 16px;line-height:1.6}.app-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.app-category-badge{background:#7cb9e8;color:#fff;padding:6px 16px;border-radius:20px;font-size:14px;font-weight:600}.github-link{color:#7cb9e8;text-decoration:none;font-weight:600;font-size:14px;transition:color .3s ease}.github-link:hover{color:#5a9fd8}.app-features{background:#f9fafb;padding:20px 24px;border-radius:12px;margin-top:24px}.app-features h3{margin:0 0 12px;font-size:18px;color:#1f2937}.app-features ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}.app-features li{color:#4b5563;font-size:15px}.app-container{max-width:1400px;margin:0 auto;padding:0 24px}.app-not-found,.app-coming-soon{text-align:center;padding:80px 20px;max-width:600px;margin:0 auto}.app-not-found h2,.app-coming-soon h2{font-size:32px;margin-bottom:16px;color:#1f2937}.app-not-found p,.app-coming-soon p{font-size:18px;color:#6b7280;margin-bottom:24px}.back-btn{display:inline-block;background:#7cb9e8;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:all .3s ease}.back-btn:hover{background:#5a9fd8;transform:translateY(-2px)}body.dark-mode .app-title{color:#e5e7eb}body.dark-mode .app-subtitle{color:#9ca3af}body.dark-mode .app-features{background:#2d2d2d}body.dark-mode .app-features h3{color:#e5e7eb}body.dark-mode .app-features li{color:#d1d5db}body.dark-mode .app-not-found h2,body.dark-mode .app-coming-soon h2{color:#e5e7eb}body.dark-mode .app-not-found p,body.dark-mode .app-coming-soon p{color:#9ca3af}@media (max-width: 768px){.app-wrapper{padding-top:70px}.app-title-section{flex-direction:column;text-align:center;align-items:center}.app-icon-large{font-size:48px}.app-meta{justify-content:center}.app-features ul{grid-template-columns:1fr}}.wordle-app-body{text-align:center;font-size:14px;font-family:Inter,sans-serif;margin:0;transition:color .3s ease;color:#1f2937}body.dark-mode .wordle-app-body{color:#e5e7eb}.wordle-app-body h1{font-size:clamp(18px,2.5vw,24px);padding:16px 0;border-bottom:1px solid #e5e7eb;margin:0 0 24px;color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;font-weight:700;transition:color .3s ease,border-color .3s ease}body.dark-mode .wordle-app-body h1{color:#fff;border-bottom-color:#2a2a2a}.wordle-controls{margin-bottom:20px}.wordle-btn{padding:8px 16px;margin:0 4px;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:12px;font-family:Inter,sans-serif;transition:all .3s ease;background:#f3f4f6;color:#374151}.wordle-btn:hover{background:#e5e7eb}.wordle-btn.active{background:#6aaa64;color:#fff}.wordle-btn-primary{background:#7cb9e8;color:#fff}.wordle-btn-primary:hover{background:#5a9fd8}.wordle-btn-secondary{background:#374151;color:#fff}.wordle-btn-secondary:hover{background:#1f2937}body.dark-mode .wordle-btn{background:#2a2a2a;color:#b3b3b3}body.dark-mode .wordle-btn:hover{background:#333;color:#fff}body.dark-mode .wordle-btn.active{background:#6aaa64;color:#fff}body.dark-mode .wordle-btn-primary{background:#ff1b6b}body.dark-mode .wordle-btn-primary:hover{background:#ff006e}.wordle-loading{color:#666;font-size:14px;padding:20px;transition:color .3s ease}body.dark-mode .wordle-loading{color:#b3b3b3}.row{text-align:center;display:flex;justify-content:center}.row>div{display:block;width:48px;height:48px;border:2px solid #d1d5db;margin:3px;text-align:center;line-height:48px;text-transform:uppercase;font-weight:700;font-size:1.8em;transition:all .3s ease;background:#fff;color:#1f2937}body.dark-mode .row>div{border-color:#2a2a2a;background:#0a0a0a;color:#fff}.wordle-page{position:relative;z-index:1;max-width:800px;margin:80px auto 150px;padding:0 20px}.wordle-page-header{text-align:center;margin-bottom:40px}.wordle-page-title{color:#7cb9e8;font-weight:700;letter-spacing:.06em;font-size:clamp(9px,1.6vw,12px);margin:0 0 6px;transition:color .3s ease}body.dark-mode .wordle-page-title{color:#ff1b6b}.wordle-page-header h2{font-size:clamp(20px,4vw,32px);margin:0 0 10px;color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;font-weight:700;letter-spacing:-.02em;transition:color .3s ease}body.dark-mode .wordle-page-header h2{color:#fff}.wordle-page-subtitle{color:#666;font-size:clamp(12px,2vw,14px);max-width:600px;margin:0 auto;font-weight:400;line-height:1.5;transition:color .3s ease}body.dark-mode .wordle-page-subtitle{color:#b3b3b3}.wordle-game-wrapper{width:100%;max-width:600px;margin:0 auto;padding:20px;background:#e5fcf5;border-radius:12px;transition:background-color .3s ease,border-color .3s ease}body.dark-mode .wordle-game-wrapper{background:#1a1a1a;border:1px solid #2a2a2a}.pomodoro-timer-app{width:100%;max-width:600px;margin:0 auto;padding:20px}.pomodoro-timer-container{background:#fff;border-radius:16px;padding:32px;box-shadow:0 4px 20px #0000001a;transition:all .3s ease}body.dark-mode .pomodoro-timer-container{background:#0a0a0a;box-shadow:0 4px 20px #00000080}.pomodoro-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.pomodoro-title{font-size:clamp(20px,3vw,24px);font-weight:700;color:#1f2937;margin:0;font-family:Space Grotesk,Inter,sans-serif;transition:color .3s ease}body.dark-mode .pomodoro-title{color:#fff}.settings-btn{background:#f3f4f6;border:none;width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.settings-btn:hover{background:#e5e7eb;transform:rotate(90deg)}body.dark-mode .settings-btn{background:#2a2a2a}body.dark-mode .settings-btn:hover{background:#3a3a3a}.mode-switcher{display:flex;gap:8px;margin-bottom:32px;background:#f3f4f6;padding:6px;border-radius:12px}body.dark-mode .mode-switcher{background:#2a2a2a}.mode-btn{flex:1;padding:10px 16px;background:transparent;border:none;border-radius:8px;font-size:14px;font-weight:600;color:#6b7280;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif}.mode-btn:hover:not(:disabled){background:#0000000d}.mode-btn.active{background:#fff;color:#1f2937;box-shadow:0 2px 8px #0000001a}.mode-btn:disabled{opacity:.5;cursor:not-allowed}body.dark-mode .mode-btn{color:#9ca3af}body.dark-mode .mode-btn:hover:not(:disabled){background:#ffffff0d}body.dark-mode .mode-btn.active{background:#1a1a1a;color:#fff;box-shadow:0 2px 8px #0000004d}.timer-display{position:relative;width:280px;height:280px;margin:0 auto 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px solid #ef4444;border-radius:50%;transition:all .3s ease}.progress-ring{position:absolute;top:-4px;left:-4px;pointer-events:none}.mode-label{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;z-index:1}.time-text{font-size:clamp(48px,8vw,64px);font-weight:700;color:#1f2937;font-family:Space Grotesk,monospace;z-index:1;transition:color .3s ease}body.dark-mode .time-text{color:#fff}.timer-controls{display:flex;gap:12px;justify-content:center;margin-bottom:32px}.control-btn{padding:14px 32px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif}.control-btn.primary{background:#ef4444;color:#fff;flex:2}.control-btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #ef44444d}.control-btn.secondary{background:#f3f4f6;color:#374151;flex:1}.control-btn.secondary:hover{background:#e5e7eb}body.dark-mode .control-btn.secondary{background:#2a2a2a;color:#e5e7eb}body.dark-mode .control-btn.secondary:hover{background:#3a3a3a}.sessions-counter{text-align:center;padding:20px;background:#f9fafb;border-radius:12px;margin-bottom:20px}body.dark-mode .sessions-counter{background:#2a2a2a}.sessions-label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}body.dark-mode .sessions-label{color:#9ca3af}.sessions-count{font-size:36px;font-weight:700;color:#1f2937;font-family:Space Grotesk,sans-serif;margin-bottom:12px;transition:color .3s ease}body.dark-mode .sessions-count{color:#fff}.reset-sessions-btn{background:transparent;border:1px solid #e5e7eb;color:#6b7280;padding:6px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif}.reset-sessions-btn:hover{background:#f3f4f6;color:#374151}body.dark-mode .reset-sessions-btn{border-color:#3a3a3a;color:#9ca3af}body.dark-mode .reset-sessions-btn:hover{background:#3a3a3a;color:#fff}.settings-panel{margin-top:24px;padding:24px;background:#f9fafb;border-radius:12px;animation:slideDown .3s ease}body.dark-mode .settings-panel{background:#2a2a2a}.settings-panel h3{font-size:18px;font-weight:700;color:#1f2937;margin:0 0 20px;font-family:Space Grotesk,Inter,sans-serif;transition:color .3s ease}body.dark-mode .settings-panel h3{color:#fff}.setting-group{margin-bottom:16px}.setting-group label{display:block;font-size:14px;font-weight:600;color:#374151;margin-bottom:6px;font-family:Inter,sans-serif;transition:color .3s ease}body.dark-mode .setting-group label{color:#e5e7eb}.setting-group input[type=number]{width:100%;padding:10px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:Inter,sans-serif;transition:all .3s ease;background:#fff;color:#1f2937}.setting-group input[type=number]:focus{outline:none;border-color:#7cb9e8;box-shadow:0 0 0 3px #7cb9e81a}body.dark-mode .setting-group input[type=number]{background:#1a1a1a;border-color:#3a3a3a;color:#fff}body.dark-mode .setting-group input[type=number]:focus{border-color:#ff1b6b;box-shadow:0 0 0 3px #ff1b6b1a}.checkbox-group label{display:flex;align-items:center;cursor:pointer}.checkbox-group input[type=checkbox]{width:18px;height:18px;margin-right:8px;cursor:pointer}.close-settings-btn{width:100%;padding:10px;background:#7cb9e8;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:8px;font-family:Inter,sans-serif}.close-settings-btn:hover{background:#5a9fd8}body.dark-mode .close-settings-btn{background:#ff1b6b}body.dark-mode .close-settings-btn:hover{background:#ff006e}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.pomodoro-timer-container{padding:24px 20px}.timer-display{width:240px;height:240px}.progress-ring svg{width:240px;height:240px}.progress-ring circle{r:110}.time-text{font-size:48px}.timer-controls{flex-direction:column}.control-btn{width:100%}}@media (max-width: 480px){.pomodoro-timer-app{padding:16px}.pomodoro-timer-container{padding:20px 16px}.mode-switcher{flex-direction:column;gap:6px}.timer-display{width:200px;height:200px}.progress-ring svg{width:200px;height:200px}.progress-ring circle{r:90}.time-text{font-size:40px}}.pomodoro-page{position:relative;z-index:1;max-width:800px;margin:80px auto 150px;padding:0 20px}.pomodoro-page-header{text-align:center;margin-bottom:40px}.pomodoro-page-title{color:#7cb9e8;font-weight:700;letter-spacing:.06em;font-size:clamp(9px,1.6vw,12px);margin:0 0 6px;transition:color .3s ease}body.dark-mode .pomodoro-page-title{color:#ff1b6b}.pomodoro-page-header h2{font-size:clamp(20px,4vw,32px);margin:0 0 10px;color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;font-weight:700;letter-spacing:-.02em;transition:color .3s ease}body.dark-mode .pomodoro-page-header h2{color:#fff}.pomodoro-page-subtitle{color:#666;font-size:clamp(12px,2vw,14px);max-width:600px;margin:0 auto;font-weight:400;line-height:1.5;transition:color .3s ease}body.dark-mode .pomodoro-page-subtitle{color:#b3b3b3}.pomodoro-game-wrapper{width:100%;max-width:600px;margin:0 auto;padding:0;background:transparent;border-radius:12px;transition:background-color .3s ease,border-color .3s ease}.json-formatter-app{width:100%;max-width:1200px;margin:0 auto;padding:20px}.json-formatter-container{background:#fff;border-radius:16px;padding:32px;box-shadow:0 4px 20px #0000001a;transition:all .3s ease}body.dark-mode .json-formatter-container{background:#0a0a0a;box-shadow:0 4px 20px #00000080}.json-header{text-align:center;margin-bottom:24px}.json-title{font-size:clamp(20px,3vw,28px);font-weight:700;color:#1f2937;margin:0 0 8px;font-family:Space Grotesk,Inter,sans-serif;transition:color .3s ease}body.dark-mode .json-title{color:#fff}.json-subtitle{font-size:clamp(12px,2vw,14px);color:#6b7280;margin:0;transition:color .3s ease}body.dark-mode .json-subtitle{color:#9ca3af}.json-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:16px;flex-wrap:wrap}.control-group{display:flex;align-items:center;gap:8px}.control-group label{font-size:14px;font-weight:600;color:#374151;transition:color .3s ease}body.dark-mode .control-group label{color:#e5e7eb}.indent-select{padding:6px 12px;border:2px solid #e5e7eb;border-radius:6px;font-size:14px;font-weight:500;background:#fff;color:#1f2937;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif}.indent-select:focus{outline:none;border-color:#7cb9e8}body.dark-mode .indent-select{background:#1a1a1a;border-color:#3a3a3a;color:#fff}body.dark-mode .indent-select:focus{border-color:#ff1b6b}.sample-btn{padding:8px 16px;background:#f3f4f6;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;font-weight:600;color:#374151;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif}.sample-btn:hover{background:#e5e7eb;transform:translateY(-2px)}body.dark-mode .sample-btn{background:#2a2a2a;border-color:#3a3a3a;color:#e5e7eb}body.dark-mode .sample-btn:hover{background:#3a3a3a}.json-actions{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap;justify-content:center}.action-btn{padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif}.action-btn.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.action-btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.action-btn.secondary{background:#f3f4f6;color:#374151}.action-btn.secondary:hover{background:#e5e7eb;transform:translateY(-2px)}.action-btn.danger{background:#fee2e2;color:#dc2626}.action-btn.danger:hover{background:#fecaca;transform:translateY(-2px)}body.dark-mode .action-btn.primary{background:linear-gradient(135deg,#ff1b6b,#ff006e)}body.dark-mode .action-btn.secondary{background:#2a2a2a;color:#e5e7eb}body.dark-mode .action-btn.secondary:hover{background:#3a3a3a}body.dark-mode .action-btn.danger{background:#4a1a1a;color:#ff6b6b}body.dark-mode .action-btn.danger:hover{background:#5a2a2a}.json-editor{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}.editor-panel{display:flex;flex-direction:column}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.panel-header h3{font-size:16px;font-weight:700;color:#1f2937;margin:0;font-family:Space Grotesk,Inter,sans-serif;transition:color .3s ease}body.dark-mode .panel-header h3{color:#fff}.char-count{font-size:12px;color:#9ca3af;font-weight:500}body.dark-mode .char-count{color:#6b7280}.output-actions{display:flex;gap:8px}.icon-btn{background:#f3f4f6;border:none;width:32px;height:32px;border-radius:6px;font-size:16px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.icon-btn:hover{background:#e5e7eb;transform:scale(1.1)}body.dark-mode .icon-btn{background:#2a2a2a}body.dark-mode .icon-btn:hover{background:#3a3a3a}.json-textarea{width:100%;min-height:400px;padding:16px;border:2px solid #e5e7eb;border-radius:12px;font-size:14px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;resize:vertical;transition:all .3s ease;background:#fafafa;color:#1f2937;line-height:1.6}.json-textarea:focus{outline:none;border-color:#7cb9e8;box-shadow:0 0 0 3px #7cb9e81a}.json-textarea.output{background:#f9fafb}body.dark-mode .json-textarea{background:#1a1a1a;border-color:#3a3a3a;color:#e5e7eb}body.dark-mode .json-textarea:focus{border-color:#ff1b6b;box-shadow:0 0 0 3px #ff1b6b1a}body.dark-mode .json-textarea.output{background:#0f0f0f}.error-message{background:#fee2e2;border:2px solid #fecaca;border-radius:12px;padding:16px;margin-bottom:24px;color:#dc2626;font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px;animation:slideIn .3s ease}.error-icon{font-size:20px}body.dark-mode .error-message{background:#4a1a1a;border-color:#5a2a2a;color:#ff6b6b}.success-toast{position:fixed;bottom:30px;right:30px;background:#10b981;color:#fff;padding:16px 24px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 8px 20px #10b9814d;animation:slideUp .3s ease;z-index:1000}.json-info{background:#f9fafb;border-radius:12px;padding:20px;margin-top:24px}body.dark-mode .json-info{background:#2a2a2a}.json-info h3{font-size:16px;font-weight:700;color:#1f2937;margin:0 0 12px;font-family:Space Grotesk,Inter,sans-serif;transition:color .3s ease}body.dark-mode .json-info h3{color:#fff}.json-info ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}.json-info li{color:#6b7280;font-size:13px;line-height:1.6;transition:color .3s ease}.json-info li strong{color:#374151;font-weight:600}body.dark-mode .json-info li{color:#9ca3af}body.dark-mode .json-info li strong{color:#e5e7eb}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 968px){.json-editor{grid-template-columns:1fr}.json-textarea{min-height:300px}}@media (max-width: 768px){.json-formatter-container{padding:24px 20px}.json-actions{gap:8px}.action-btn{padding:8px 14px;font-size:13px}.json-info ul{grid-template-columns:1fr}.success-toast{bottom:20px;right:20px;left:20px;text-align:center}}@media (max-width: 480px){.json-formatter-app{padding:16px}.json-formatter-container{padding:20px 16px}.json-controls{flex-direction:column;align-items:flex-start}.json-actions{flex-direction:column;width:100%}.action-btn{width:100%}.json-textarea{min-height:250px;font-size:12px}}.json-formatter-page{position:relative;z-index:1;max-width:1200px;margin:80px auto 150px;padding:0 20px}.json-formatter-page-header{text-align:center;margin-bottom:40px}.json-formatter-page-title{color:#7cb9e8;font-weight:700;letter-spacing:.06em;font-size:clamp(9px,1.6vw,12px);margin:0 0 6px;transition:color .3s ease}body.dark-mode .json-formatter-page-title{color:#ff1b6b}.json-formatter-page-header h2{font-size:clamp(20px,4vw,32px);margin:0 0 10px;color:#1f2937;font-family:Space Grotesk,Inter,sans-serif;font-weight:700;letter-spacing:-.02em;transition:color .3s ease}body.dark-mode .json-formatter-page-header h2{color:#fff}.json-formatter-page-subtitle{color:#666;font-size:clamp(12px,2vw,14px);max-width:700px;margin:0 auto;font-weight:400;line-height:1.5;transition:color .3s ease}body.dark-mode .json-formatter-page-subtitle{color:#b3b3b3}.json-formatter-game-wrapper{width:100%;margin:0 auto;padding:0;background:transparent;border-radius:12px;transition:background-color .3s ease,border-color .3s ease}.page-enter{animation:fade-up 1.5s .5s backwards}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.grade-calculator{width:100%;max-width:900px;margin:0 auto;padding:20px}.grade-table{width:100%;border-collapse:collapse;margin-bottom:20px}.grade-table thead{background:#f3f4f6}body.dark-mode .grade-table thead{background:#374151}.grade-table th{padding:12px;text-align:left;font-weight:600;font-size:14px;color:#374151;border-bottom:2px solid #e5e7eb}body.dark-mode .grade-table th{color:#fff;border-bottom-color:#4b5563}.grade-table td{padding:12px;border-bottom:1px solid #e5e7eb}body.dark-mode .grade-table td{border-bottom-color:#4b5563}.component-name-input{width:100%;max-width:180px;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-weight:500;transition:all .2s ease;background:#fff;color:#374151}body.dark-mode .component-name-input{background:#374151;border-color:#4b5563;color:#d1d5db}.component-name-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.component-name-input::placeholder{color:#9ca3af;font-weight:400}body.dark-mode .component-name-input::placeholder{color:#6b7280}.grade-input,.weightage-input{width:100%;max-width:120px;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:all .2s ease;background:#fff;color:#1f2937}body.dark-mode .grade-input,body.dark-mode .weightage-input{background:#374151;border-color:#4b5563;color:#fff}.grade-input:focus,.weightage-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.table-actions{display:flex;gap:12px;justify-content:flex-start}.calculation-section{text-align:center;padding-top:20px;border-top:2px solid #e5e7eb}.result-value{font-size:36px;font-weight:700;color:#047857}@media (max-width: 768px){.calculator-container{padding:20px}.grade-table{font-size:12px}.grade-table th,.grade-table td{padding:8px}.grade-input,.weightage-input{max-width:100px;font-size:12px;padding:6px 10px}.table-actions{flex-direction:column}.add-row-btn,.clear-btn{width:100%}}.gpa-calculator{width:100%;max-width:1000px;margin:0 auto;padding:20px}.calculator-container{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 20px #00000014}body.dark-mode .calculator-container{background:#1f2937}.calculator-header{margin-bottom:30px;text-align:center}.calculator-header h2{font-size:28px;font-weight:700;color:#1f2937;margin:0 0 10px}body.dark-mode .calculator-header h2{color:#fff}.calculator-header p{font-size:14px;color:#666;margin:0}body.dark-mode .calculator-header p{color:#b3b3b3}.scale-info{font-size:13px;color:#667eea;font-weight:500;margin-top:8px!important}body.dark-mode .scale-info{color:#818cf8}.cumulative-gpa-section{margin-bottom:30px;text-align:center}.cumulative-gpa-display{background:linear-gradient(135deg,#667eea,#764ba2);padding:30px;border-radius:12px;color:#fff;box-shadow:0 4px 20px #667eea4d}.cumulative-label{font-size:16px;font-weight:500;margin-bottom:10px;opacity:.95}.cumulative-value{font-size:48px;font-weight:700;margin-bottom:5px;text-shadow:0 2px 4px rgba(0,0,0,.1)}.cumulative-scale{font-size:14px;opacity:.9}.semesters-container{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}.semester-card{background:#f9fafb;border-radius:10px;padding:20px;border:2px solid #e5e7eb;transition:all .3s ease}body.dark-mode .semester-card{background:#111827;border-color:#374151}.semester-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26}.semester-header{display:flex;align-items:center;gap:15px;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #e5e7eb}body.dark-mode .semester-header{border-bottom-color:#374151}.semester-name-input{flex:1;font-size:18px;font-weight:600;padding:8px 12px;border:2px solid #d1d5db;border-radius:6px;background:#fff;color:#1f2937;transition:all .2s ease;max-width:250px}body.dark-mode .semester-name-input{background:#374151;border-color:#4b5563;color:#fff}.semester-name-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.semester-gpa-badge{font-size:14px;font-weight:500;color:#059669;background:#d1fae5;padding:6px 12px;border-radius:6px;display:flex;align-items:center;gap:5px}body.dark-mode .semester-gpa-badge{color:#34d399;background:#064e3b}.semester-gpa-value{font-weight:700;font-size:16px}.remove-semester-btn{background:#ef4444;color:#fff;border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;line-height:1;margin-left:auto}.remove-semester-btn:hover{background:#dc2626;transform:scale(1.1)}.semester-courses{margin-top:15px}.table-container{margin-bottom:30px}.gpa-table{width:100%;border-collapse:collapse;margin-bottom:20px}.gpa-table thead{background:#f3f4f6}body.dark-mode .gpa-table thead{background:#374151}.gpa-table th{padding:12px;text-align:left;font-weight:600;font-size:14px;color:#374151;border-bottom:2px solid #e5e7eb}body.dark-mode .gpa-table th{color:#fff;border-bottom-color:#4b5563}.gpa-table td{padding:12px;border-bottom:1px solid #e5e7eb}body.dark-mode .gpa-table td{border-bottom-color:#4b5563}.course-name-input,.credits-input{width:100%;max-width:150px;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:all .2s ease;background:#fff;color:#1f2937}body.dark-mode .course-name-input,body.dark-mode .credits-input{background:#374151;border-color:#4b5563;color:#fff}.course-name-input:focus,.credits-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.grade-select{width:100%;max-width:150px;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:all .2s ease;background:#fff;color:#1f2937;cursor:pointer}body.dark-mode .grade-select{background:#374151;border-color:#4b5563;color:#fff}.grade-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.remove-btn{background:#ef4444;color:#fff;border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;line-height:1}.remove-btn:hover{background:#dc2626;transform:scale(1.1)}.table-actions{display:flex;gap:12px;justify-content:flex-start;margin-top:10px}.global-actions{display:flex;gap:12px;justify-content:center;padding-top:20px;border-top:2px solid #e5e7eb;margin-bottom:30px}body.dark-mode .global-actions{border-top-color:#4b5563}.add-semester-btn{padding:12px 24px;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;background:linear-gradient(135deg,#10b981,#059669);color:#fff}.add-semester-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #10b98166}.add-row-btn,.clear-btn{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.add-row-btn{background:#667eea;color:#fff}.add-row-btn:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.clear-btn{background:#f3f4f6;color:#374151}body.dark-mode .clear-btn{background:#374151;color:#d1d5db}.clear-btn:hover{background:#e5e7eb}body.dark-mode .clear-btn:hover{background:#4b5563}.calculation-section{text-align:center;padding-top:20px;border-top:2px solid #e5e7eb;margin-bottom:30px}body.dark-mode .calculation-section{border-top-color:#4b5563}.calculate-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px 32px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-bottom:20px}.calculate-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.result-display{background:linear-gradient(135deg,#e5fcf5,#d1fae5);padding:20px;border-radius:8px;margin-top:20px}body.dark-mode .result-display{background:linear-gradient(135deg,#064e3b,#065f46)}.result-label{font-size:14px;color:#059669;font-weight:500;margin-bottom:8px}body.dark-mode .result-label{color:#34d399}.result-value{font-size:36px;font-weight:700;color:#047857;margin-bottom:4px}body.dark-mode .result-value{color:#6ee7b7}.result-scale{font-size:12px;color:#059669;opacity:.8}body.dark-mode .result-scale{color:#34d399}.grade-info{margin-top:30px;padding-top:30px;border-top:2px solid #e5e7eb}body.dark-mode .grade-info{border-top-color:#4b5563}.grade-info h3{font-size:18px;font-weight:600;color:#1f2937;margin:0 0 16px;text-align:center}body.dark-mode .grade-info h3{color:#fff}.grade-scale-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:12px}.grade-scale-item{background:#f3f4f6;padding:12px;border-radius:6px;text-align:center;display:flex;flex-direction:column;gap:4px}body.dark-mode .grade-scale-item{background:#374151}.grade-letter{font-size:16px;font-weight:600;color:#1f2937}body.dark-mode .grade-letter{color:#fff}.grade-points{font-size:12px;color:#666}body.dark-mode .grade-points{color:#b3b3b3}@media (max-width: 768px){.calculator-container{padding:20px}.cumulative-value{font-size:36px}.semester-header{flex-direction:column;align-items:flex-start;gap:10px}.semester-name-input{max-width:100%;width:100%}.remove-semester-btn{align-self:flex-end}.gpa-table{font-size:12px}.gpa-table th,.gpa-table td{padding:8px}.course-name-input,.credits-input,.grade-select{max-width:100%;font-size:12px;padding:6px 10px}.table-actions{flex-direction:column}.add-row-btn,.clear-btn,.add-semester-btn{width:100%}.global-actions{flex-direction:column}.grade-scale-grid{grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:8px}}*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,Space Grotesk,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{width:100%;min-height:100vh;background:#feffff;color:#1f2937;transition:background-color .3s ease,color .3s ease}body.dark-mode .container{background:#1a1a1a;color:#e5e7eb}