body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    background: #ffffff;
    color: #003d82;
    line-height: 1.6;
}

:root {
    --accent: #0056cc;
    --bg: #ffffff;
    --bg-alt: #f0f4f8;
    --border: #cce0ff;
    --text: #003d82;
    --text-dim: #0066cc;
}

.light {
    --bg: #ffffff;
    --bg-alt: #f0f4f8;
    --text: #003d82;
    --text-dim: #0066cc;
    --border: #cce0ff;
}

.light body {
    background: var(--bg);
    color: var(--text);
}

/* Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--accent);
    color: #fff;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
}

.skip-link:focus {
    top: 6px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Navigation */
.nav {
    position: sticky;
    top: 0;
    background: #ffffff;
    border-bottom: 2px solid #cce0ff;
    z-index: 100;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.nav-brand {
    font-weight: bold;
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--text);
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1.5rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dim);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.nav-links a:hover,
.nav-links a:focus {
    color: var(--accent);
}

.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2.2rem 4rem;
}

.hero {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    min-height: 60vh;
}

.hero-left {
    flex: 1 1 420px;
}

.glitch {
    position: relative;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: bold;
    letter-spacing: -1px;
}

.role {
    margin-top: 0.4rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--accent);
}

.summary {
    margin-top: 1rem;
    line-height: 1.55;
    max-width: 600px;
}

.actions {
    margin-top: 1.4rem;
    display: flex;
    gap: 0.8rem;
}

.btn {
    background: var(--accent);
    border: none;
    color: #fff;
    padding: 0.75rem 1.1rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn.secondary {
    background: #6c757d;
    color: #fff;
}

.btn:hover,
.btn:focus {
    background: #0056b3;
}

/* Skills */
.skills {
    margin-top: 4rem;
}

.skills h3,
.experience h3,
.projects h3,
.contact h3 {
    font-size: 1.9rem;
    margin-bottom: 1.2rem;
}

.hint {
    font-size: 0.9rem;
    color: var(--text-dim);
    font-weight: 400;
}

.skill-search-container {
    position: relative;
}

#skillSearch {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    color: var(--text);
    font-size: 0.95rem;
}

#skillSearch:focus {
    outline: 2px solid var(--accent);
    border-color: var(--accent);
}

.skill-results {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.7rem;
}

.skill-results .pill {
    background: var(--bg-alt);
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    font-size: 0.75rem;
}

.skill-groups {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 1.3rem;
}

.skill-group {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 1rem 1.1rem 1.2rem;
    border-radius: 4px;
}

.skill-group:focus {
    outline: 2px solid var(--accent);
}

.skill-group h4 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--accent);
}

.skill-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.skill-group li {
    font-size: 0.7rem;
    background: #28a745;
    color: #ffffff;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
}

/* Timeline */
.timeline {
    position: relative;
    margin: 2rem 0 0;
}

.timeline:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent);
}

.timeline-progress {
    position: absolute;
    left: 10px;
    top: 0;
    width: 2px;
    background: var(--accent);
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.timeline-item {
    position: relative;
    padding-left: 2.6rem;
    margin-bottom: 2.3rem;
}

.timeline-item:focus {
    outline: 2px solid var(--accent);
    border-radius: 8px;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 22px;
    height: 22px;
    background: var(--bg-alt);
    border: 2px solid var(--accent);
    border-radius: 50%;
}

.timeline-content h4 {
    margin: 0.1rem 0 0.4rem;
    font-size: 1.05rem;
}

.company {
    color: var(--text-dim);
    font-weight: 500;
}

.period {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    font-weight: 600;
}

.timeline-content ul {
    margin: 0.6rem 0 0.4rem 0;
    padding-left: 1.1rem;
}

.timeline-content li {
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.stack-tags {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.tag {
    font-size: 0.6rem;
    background: #dc3545;
    color: #ffffff;
    padding: 0.35rem 0.55rem;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Projects */
.project-filters {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-btn {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 0.5rem 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.filter-btn:hover,
.filter-btn:focus {
    color: var(--text);
    border-color: var(--accent);
}

.filter-btn.active,
.filter-btn[aria-pressed="true"] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.project-grid {
    display: grid;
    gap: 1.3rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 1rem;
}

.project-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 1rem 1.1rem 1.3rem;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.project-card:hover,
.project-card:focus {
    transform: translateY(-2px);
    border-color: var(--accent);
}

.project-card.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.project-card h4 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
}

.project-card p {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--text-dim);
}

.project-card .tech {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.project-card .tech span {
    background: #28a745;
    color: #ffffff;
    padding: 0.3rem 0.55rem;
    font-size: 0.6rem;
    border-radius: 4px;
}

.project-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
}

.project-link:hover {
    text-decoration: underline;
}

/* Footer */
.footer {
    text-align: center;
    padding: 2rem 0 0;
    font-size: 0.65rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.theme-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 4px;
}

.theme-btn:hover,
.theme-btn:focus {
    background: var(--bg-alt);
}

.contact {
    margin-top: 4rem;
}

.links a {
    margin-right: 1rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.links a:hover,
.links a:focus {
    text-decoration: underline;
}

#skillGalaxy {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #f8f9fa;
    border: 1px solid var(--border);
}

/* Blog Styles */
.blog-hero {
    text-align: center;
    margin: 2rem 0 3rem;
}

.blog-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.blog-hero p {
    color: var(--text-dim);
    font-size: 1.1rem;
}

.posts-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.post-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 1.5rem;
    border-radius: 4px;
    transition: transform 0.2s, border-color 0.2s;
}

.post-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}
.post-header h2 { margin:0 0 .5rem; font-size:1.3rem; }
.post-header h2 a { color:var(--text); text-decoration:none; }
.post-header h2 a:hover { color:var(--accent); }
.post-meta { display:flex; gap:1rem; font-size:.8rem; color:var(--text-dim); margin-bottom:.8rem; }
.post-excerpt { color:var(--text-dim); line-height:1.5; margin-bottom:.8rem; }
.post-tags { display:flex; gap:.4rem; flex-wrap:wrap; }
.post-tags .tag { background:#242c37; color:var(--text-dim); padding:.25rem .5rem; border-radius:4px; font-size:.7rem; }
.no-posts { text-align:center; color:var(--text-dim); padding:3rem; }

/* Blog Post Styles */
.blog-post { max-width:800px; margin:0 auto; }
.blog-post .post-header { text-align:center; margin-bottom:2rem; }
.blog-post h1 { font-size:2.2rem; margin-bottom:.8rem; }
.table-of-contents { background:var(--bg-alt); border:1px solid var(--border); padding:1rem; border-radius:8px; margin:1.5rem 0; }
.table-of-contents h3 { margin:0 0 .5rem; font-size:1rem; }
.post-content { line-height:1.7; }
.post-content h2, .post-content h3 { margin:2rem 0 1rem; color:var(--accent); }
.post-content pre { background:var(--bg-alt); border:1px solid var(--border); padding:1rem; border-radius:8px; overflow-x:auto; font-size:.9rem; }
.post-content code { background:var(--bg-alt); padding:.2rem .4rem; border-radius:4px; font-size:.9rem; }
.post-content pre code { background:none; padding:0; }
.post-footer { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); }
.back-link { color:var(--accent); text-decoration:none; font-weight:500; }
.back-link:hover { text-decoration:underline; }

/* Parallax and animations */
.hero.parallax-active { perspective:1200px; }
.project-card.tilt { transform-style:preserve-3d; }
.project-card.tilt .tech span { backface-visibility:hidden; }
.project-card.tilt-active { box-shadow:0 8px 28px -10px rgba(99,102,241,.35); }

/* Reduced motion */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }

/* Responsive */
@media (max-width:860px){ 
  .hero { flex-direction:column; } 
  .hero-right { order:-1; width:100%; } 
  .nav-links { display:none; }
  .project-filters { justify-content:center; }
  .posts-grid { grid-template-columns:1fr; }
}

@media (max-width:640px){
  .app-container { padding:1rem 1.5rem 3rem; }
  .nav-container { padding:0 1.5rem; }
  .skill-groups { grid-template-columns:1fr; }
  .project-grid { grid-template-columns:1fr; }
}

/* Education Styles */
.education { margin-top:4rem; }
.education-item { background: linear-gradient(145deg, #e8e8e8, #d3d3d3); border: 1px solid #c0c0c0; padding: 1.5rem; border-radius: 14px; margin-bottom: 1rem; box-shadow: 0 4px 15px rgba(192, 192, 192, 0.3); }
.education-item h4 { margin: 0 0 .5rem; font-size: 1.1rem; color: #333; }
.education-item .institution { font-size: 1rem; color: #333; font-weight: 500; margin-bottom: .3rem; background: #c0c0c0; padding: .3rem .6rem; border-radius: 4px; display: inline-block; }
.education-item .period-location { font-size: .9rem; color: #666; margin-bottom: .5rem; }
.education-item .gpa { font-size: .85rem; color: #666; margin-bottom: .8rem; }
.education-item .coursework { font-size: .85rem; line-height: 1.4; }
.education-item .course { background: #c0c0c0; padding: .2rem .5rem; border-radius: 4px; font-size: .75rem; color: #333; }

/* Certifications Styles */
.certifications { margin-top:4rem; }
.cert-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; margin-top:1.3rem; }
.cert-item { background: linear-gradient(145deg, #e8e8e8, #d3d3d3); border: 1px solid #c0c0c0; padding: 1.2rem; border-radius: 14px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 15px rgba(192, 192, 192, 0.3); }
.cert-item:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(192, 192, 192, 0.5); }
.cert-item h4 { margin: 0 0 .5rem; font-size: 1rem; color: #333; }
.cert-item .cert-issuer { font-size: .9rem; color: #555; font-weight: 500; margin-bottom: .3rem; }
.cert-item .cert-date { font-size: .8rem; color: #666; margin-bottom: .5rem; }
.cert-item .credential-id { font-size: .75rem; color: #666; background: #c0c0c0; padding: .3rem .6rem; border-radius: 4px; display: inline-block; }

/* Achievements Styles */
.achievements { margin-top:4rem; }
.achievements-list { list-style:none; margin:1.3rem 0 0; padding:0; }
.achievements-list li { background: linear-gradient(145deg, #ffd700, #ffed4e); border: 1px solid #daa520; padding: 1rem 1.2rem; border-radius: 10px; margin-bottom: .8rem; position: relative; padding-left: 2.5rem; box-shadow: 0 4px 15px rgba(218, 165, 32, 0.3); color: #333; }
.achievements-list li::before { content: "🏆"; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; }
.achievements-list li:nth-child(odd)::before { content: "⭐"; }
.achievements-list li:nth-child(3n)::before { content: "🚀"; }

/* Responsive for new sections */
@media (max-width:640px){
  .cert-grid { grid-template-columns:1fr; }
  .achievements-list li { padding-left:2rem; font-size:.9rem; }
}