:root{--color-red: #E30B17;--color-yellow: #FFD700;--color-blue: #0061C5;--color-green: #00A651;--color-light-gray: #E8E8E8;--color-dark-gray: #6E6E6E;--color-medium-gray: #9E9E9E;--color-black: #000000;--color-snes-gray: #E8E4DC;--color-yellow-hover: rgba(255, 215, 0, 0.3);--color-blue-hover: rgba(0, 97, 197, 0.3);--color-green-hover: rgba(0, 166, 81, 0.3);--color-text: var(--color-black);--color-text-secondary: var(--color-dark-gray);--color-text-muted: var(--color-medium-gray);--color-border: var(--color-light-gray);--color-bg-hover: var(--color-light-gray);--color-link: var(--color-blue);--color-link-hover: var(--color-red);--color-accent: var(--color-green)}*{box-sizing:border-box}body{font-family:"Jersey 25",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.6;max-width:800px;margin:0 auto;padding:1rem;background-color:var(--color-snes-gray)}.navbar{display:flex;align-items:center;gap:1.5rem;padding:1rem 0;border-bottom:1px solid var(--color-border);margin-bottom:2rem}.navbar a{text-decoration:none;color:var(--color-text);transition:color .2s ease}.navbar a:hover{text-decoration:underline}.nav-home{display:flex;align-items:center}.nav-home svg{width:80px;height:50px;color:var(--color-text)}.nav-home a{cursor:pointer}.nav-home a circle{transition:fill .15s ease,filter .15s ease}.nav-home .btn-red:hover circle{fill:#ff6b6b;filter:brightness(1.2)}.nav-home .btn-yellow:hover circle{fill:#ffe44d;filter:brightness(1.2)}.nav-home .btn-blue:hover circle{fill:#60a5fa;filter:brightness(1.2)}.nav-home .btn-green:hover circle{fill:#4ade80;filter:brightness(1.2)}.nav-home .btn-select rect,.nav-home .btn-start rect{transition:filter .15s ease}.nav-home .btn-select:hover rect,.nav-home .btn-start:hover rect{fill:var(--color-medium-gray)}.nav-home .btn-controller{cursor:pointer}.nav-home .btn-controller rect,.nav-home .btn-controller path{transition:opacity .15s ease}.nav-home .btn-controller:hover rect{opacity:.25}.navbar:has(.nav-bio:hover) .btn-red circle{fill:#ff6b6b;filter:brightness(1.2)}.navbar:has(.nav-blog:hover) .btn-yellow circle{fill:#ffe44d;filter:brightness(1.2)}.navbar:has(.nav-projects:hover) .btn-blue circle{fill:#60a5fa;filter:brightness(1.2)}.navbar:has(.nav-timeline:hover) .btn-green circle{fill:#4ade80;filter:brightness(1.2)}.navbar:has(.btn-red:hover) .nav-bio{color:var(--color-red);text-decoration:underline}.navbar:has(.btn-yellow:hover) .nav-blog{color:var(--color-yellow);text-decoration:underline}.navbar:has(.btn-blue:hover) .nav-projects{color:var(--color-blue);text-decoration:underline}.navbar:has(.btn-green:hover) .nav-timeline{color:var(--color-green);text-decoration:underline}.navbar:has(.btn-select:hover) .social-linkedin{color:var(--color-text);transform:scale(1.25)}.navbar:has(.btn-select:hover) .social-linkedin img{opacity:1}.navbar:has(.btn-start:hover) .social-github{color:var(--color-text);transform:scale(1.25)}.navbar:has(.btn-start:hover) .social-github img{opacity:1}.navbar:has(.social-linkedin:hover) .btn-select rect{fill:var(--color-medium-gray)}.navbar:has(.social-github:hover) .btn-start rect{fill:var(--color-medium-gray)}.nav-links{display:flex;gap:2rem;flex:1}.nav-links a:nth-child(4n+1):hover{color:var(--color-red)}.nav-links a:nth-child(4n+2):hover{color:var(--color-yellow)}.nav-links a:nth-child(4n+3):hover{color:var(--color-blue)}.nav-links a:nth-child(4n):hover{color:var(--color-green)}.nav-socials{display:flex;gap:1rem;align-items:center}.nav-socials a{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);transition:color .2s ease,transform .2s ease}.nav-socials a:hover{color:var(--color-text);transform:scale(1.25)}.nav-socials svg,.nav-socials img{width:24px;height:24px}.nav-socials .social-github img{width:28px;height:28px}.nav-socials img{opacity:.6;transition:opacity .2s ease}.nav-socials a:hover img{opacity:1}main{padding:1rem 0}.bio-page h1{margin-top:0;color:var(--color-text)}.bio-page .bio-content{color:var(--color-text);line-height:1.8}.bio-page .bio-placeholder{color:var(--color-text-muted);font-style:italic}.section-page h1{margin-top:0;color:var(--color-text)}.post-list{list-style:none;padding:0}.post-list li{margin-bottom:.5rem;display:flex;justify-content:space-between;align-items:baseline}.post-list .date{color:var(--color-text-secondary);font-size:.9rem}.blog-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:2rem;margin-top:2rem}.blog-card{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:inherit;padding:1.5rem;border-radius:8px;transition:background-color .2s ease,transform .2s ease}.blog-card:hover{background-color:var(--color-yellow-hover);transform:translateY(-2px)}.section-projects .blog-card:hover{background-color:var(--color-blue-hover)}.blog-icon{width:64px;height:64px;margin-bottom:1rem;color:var(--color-text);flex-shrink:0;overflow:hidden}.blog-icon img{width:64px !important;height:64px !important;max-width:64px !important;max-height:64px !important;object-fit:contain}.blog-icon svg{width:64px;height:64px}.blog-title{font-size:1.1rem;font-weight:600;margin:0 0 .5rem 0;color:var(--color-text)}.blog-description{font-size:.9rem;color:var(--color-text-secondary);margin:0;line-height:1.5}@media (max-width: 768px){.blog-grid{grid-template-columns:repeat(2, 1fr);gap:1.5rem}}@media (max-width: 480px){.blog-grid{grid-template-columns:1fr;gap:1rem}}article .date{color:var(--color-text-secondary);font-size:.9rem}article a{color:var(--color-link)}article a:hover{color:var(--color-link-hover)}.timeline-page h1{margin-top:0;color:var(--color-text)}.timeline-page .timeline-intro{color:var(--color-text-secondary);margin-bottom:2rem}.timeline{position:relative;padding-left:2rem}.timeline::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--color-border)}.timeline-year{margin-bottom:2rem}.timeline-year-heading{position:relative;font-size:1.5rem;color:var(--color-green);margin:0 0 1rem 0}.timeline-year-heading::before{content:"";position:absolute;left:-2rem;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--color-green);border-radius:50%;margin-left:-5px}.timeline-entry{display:flex;gap:1rem;padding:1rem;margin-bottom:.5rem;text-decoration:none;color:inherit;border-radius:8px;transition:background-color .2s ease;position:relative}.timeline-entry::before{content:"";position:absolute;left:-2rem;top:50%;transform:translateY(-50%);width:8px;height:8px;background:var(--color-text-muted);border-radius:50%;margin-left:-3px;transition:background-color .2s ease}.timeline-entry:hover{background-color:var(--color-green-hover)}.timeline-entry:hover::before{background:var(--color-green)}.timeline-content{flex:1}.timeline-title{font-size:1.1rem;font-weight:600;margin:0 0 .25rem 0;color:var(--color-text)}.timeline-description{font-size:.9rem;color:var(--color-text-secondary);margin:0;line-height:1.5}@media (max-width: 480px){.timeline{padding-left:1.5rem}.timeline-year-heading::before{left:-1.5rem}.timeline-entry::before{left:-1.5rem}}.arcade-button{position:fixed;bottom:2rem;right:2rem;display:block;z-index:1000;color:var(--color-text)}.arcade-button svg{width:48px;height:53px;overflow:visible}.arcade-button .screen{transition:fill .2s ease,filter .2s ease}.arcade-button .coin{opacity:0;transition:transform .3s ease,opacity .2s ease .3s}.arcade-button:hover .screen{fill:var(--color-green);filter:drop-shadow(0 0 8px var(--color-green))}.arcade-button:hover .coin{opacity:1;transform:translateY(50px);transition:transform .3s ease,opacity .1s ease}