body{margin:0;min-height:100vh}#root{min-height:100vh}:root{--bg: #0d0d0f;--bg-card: #1a1a1e;--text: #e8e8ec;--text-muted: #9a9aa8;--accent: #a855f7;--accent-dim: #7c3aed;--border: #2d2d35;--radius: 12px;--font-sans: "DM Sans", system-ui, sans-serif;--font-display: "Outfit", var(--font-sans);--ease-out: cubic-bezier(.33, 1, .68, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--duration-fast: .2s;--duration-normal: .35s;--duration-slow: .5s}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}.app{position:relative;min-height:100vh}.background-video-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden}.background-gradient{position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;background:radial-gradient(ellipse 80% 50% at 20% 40%,rgba(168,85,247,.15) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 80% 60%,rgba(124,58,237,.12) 0%,transparent 50%),radial-gradient(ellipse 50% 30% at 50% 80%,rgba(168,85,247,.08) 0%,transparent 45%);animation:gradientShift 15s ease-in-out infinite alternate}@keyframes gradientShift{0%{transform:scale(1) rotate(0);opacity:1}to{transform:scale(1.1) rotate(2deg);opacity:.95}}.background-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease-out}.background-video.visible{opacity:.25}.background-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,var(--bg) 0%,transparent 25%,transparent 75%,var(--bg) 100%);background-color:#0d0d0fbf}body.theme-light .background-overlay{background-color:#f5f5f7d1}.app>.header,.app>main{position:relative;z-index:1}main{padding-top:4.25rem}.header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.875rem 1.5rem;background:#0d0d0ff2;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);transition:background var(--duration-normal) var(--ease-out),border-color var(--duration-normal) var(--ease-out),padding var(--duration-normal) var(--ease-out)}.logo-link{display:flex;align-items:center;flex-shrink:0;color:var(--accent);text-decoration:none;transition:color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.logo-link:hover{color:var(--accent-dim);transform:translateY(-1px)}.logo-icon{display:block;flex-shrink:0;width:clamp(32px,8vw,40px);height:clamp(32px,8vw,40px)}.hamburger-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;padding:0;background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;color:var(--text);transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.hamburger-btn:hover{background:#a855f71a;border-color:#a855f759;color:var(--accent)}.hamburger-line{display:block;width:22px;height:2px;background:currentColor;border-radius:1px;transition:transform var(--duration-normal) var(--ease-out),opacity var(--duration-normal) var(--ease-out)}.header.menu-open .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}.header.menu-open .hamburger-line:nth-child(2){opacity:0}.header.menu-open .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.nav{display:flex;gap:.25rem;flex-wrap:nowrap;justify-content:flex-end;min-width:0}.nav-link{padding:.5rem .75rem;font-size:clamp(.8rem,1.8vw,.9rem);font-family:inherit;color:var(--text-muted);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:color var(--duration-normal) var(--ease-out),background var(--duration-normal) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.nav-link:hover{color:var(--text);transform:translateY(-1px)}.nav-link.active{color:var(--accent);background:#a855f724;transition:color var(--duration-normal) var(--ease-out),background var(--duration-normal) var(--ease-out)}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;margin-left:.25rem;padding:0;font-size:1.25rem;line-height:1;color:var(--text-muted);background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.theme-toggle:hover{color:var(--accent);background:#a855f71a;border-color:#a855f759;transform:scale(1.05)}.theme-icon{display:block}body.theme-light{--bg: #f5f5f7;--bg-card: #ffffff;--text: #1a1a1e;--text-muted: #5c5c6b;--border: #e0e0e6}body.theme-light .header{background:#f5f5f7f2;border-bottom-color:var(--border)}body.theme-light .hamburger-btn{color:var(--text);border-color:var(--border)}body.theme-light .hamburger-btn:hover{background:#a855f714;border-color:#a855f766;color:var(--accent)}body.theme-light .theme-toggle{color:var(--text-muted);background:#0000000a;border-color:var(--border)}body.theme-light .theme-toggle:hover{color:var(--accent);background:#a855f71a;border-color:#a855f759}.section{max-width:1100px;margin:0 auto;padding:clamp(2.5rem,6vw,4rem) clamp(1rem,4vw,2rem);animation:sectionFadeIn var(--duration-slow) var(--ease-out) backwards}main .section:nth-child(1){animation-delay:.05s}main .section:nth-child(2){animation-delay:.1s}main .section:nth-child(3){animation-delay:.15s}main .section:nth-child(4){animation-delay:.2s}main .section:nth-child(5){animation-delay:.25s}main .section:nth-child(6){animation-delay:.3s}main .section:nth-child(7){animation-delay:.35s}main .section:nth-child(8){animation-delay:.4s}@keyframes sectionFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.section-title{font-family:var(--font-display);font-size:clamp(1.75rem,4.5vw,2.75rem);font-weight:700;margin:0 0 clamp(1.5rem,4vw,2.5rem);color:var(--text);letter-spacing:-.03em;transition:font-size .3s var(--ease-out)}.hero-section{padding-top:clamp(4rem,10vw,6rem);padding-bottom:clamp(2.5rem,6vw,4rem);text-align:center}.hero-name{font-family:var(--font-display);font-size:clamp(2rem,6vw + 1rem,4rem);font-weight:700;margin:0 0 .5rem;color:var(--text);letter-spacing:-.04em;animation:heroNameIn var(--duration-slow) var(--ease-out) backwards}@keyframes heroNameIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hero-tagline{font-size:clamp(1rem,2.2vw,1.25rem);color:var(--accent);margin:0;animation:heroNameIn var(--duration-slow) var(--ease-out) .1s backwards}.about-section{padding-top:clamp(2rem,4vw,3rem)}.about-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:start}.about-content p{margin:0 0 1.25rem;color:var(--text);font-size:clamp(.95rem,1.5vw,1.05rem);max-width:56ch;transition:font-size .3s var(--ease-out)}.about-content p:last-child{margin-bottom:0}.about-graphic{flex-shrink:0}.pixel-art{width:clamp(100px,20vw,140px);height:clamp(100px,20vw,140px);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);position:relative;transition:transform var(--duration-normal) var(--ease-out),border-color var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}.pixel-art:hover{transform:scale(1.03);border-color:#a855f766;box-shadow:0 8px 24px #a855f71f}.pixel-emoji{font-size:clamp(2.5rem,6vw,3.5rem);line-height:1;transition:transform var(--duration-normal) var(--ease-out)}.pixel-art:hover .pixel-emoji{transform:rotate(-5deg) scale(1.05)}.pixel-deco{margin-top:.5rem;font-size:clamp(.7rem,1.5vw,.85rem);color:var(--accent);letter-spacing:.2em}.skills-section{padding-top:clamp(2rem,4vw,3rem)}.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(.875rem,2vw,1.25rem)}.skill-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(1.25rem,2.5vw,1.5rem);transition:transform var(--duration-normal) var(--ease-out),border-color var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}.skill-card:hover{transform:translateY(-4px);border-color:#a855f74d;box-shadow:0 12px 28px #00000040}.skill-card-title{font-size:clamp(.9rem,1.5vw,1rem);font-weight:600;margin:0 0 .875rem;color:var(--text)}.skill-tags{display:flex;flex-wrap:wrap;gap:.5rem}.skill-tag{padding:.35rem .75rem;font-size:clamp(.72rem,1.2vw,.8rem);color:var(--accent);background:#a855f714;border:1px solid rgba(168,85,247,.35);border-radius:999px;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.skill-tag:hover{background:#a855f729;border-color:#a855f78c;transform:scale(1.04)}.experience-section{padding-top:clamp(2rem,4vw,3rem)}.timeline{display:flex;flex-direction:column;gap:0;width:100%}.timeline-item{display:grid;grid-template-columns:72px 20px minmax(240px,1fr);gap:clamp(1rem,2.5vw,1.5rem);align-items:start;width:100%}.timeline-year{width:clamp(52px,10vw,72px);height:clamp(52px,10vw,72px);display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--bg);font-size:clamp(.65rem,1.2vw,.8rem);font-weight:600;border-radius:50%;text-align:center;line-height:1.2;flex-shrink:0;transition:transform var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}.timeline-item:hover .timeline-year{transform:scale(1.08);box-shadow:0 0 20px #a855f766}.timeline-connector{width:2px;min-height:48px;background:#ffffff1f;margin:.5rem 0 0;transform:translate(9px);transition:min-height .3s var(--ease-out)}.timeline-item:last-child .timeline-connector{display:none}.timeline-card{min-width:0;width:100%;max-width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(1.25rem,2.5vw,1.5rem);margin-bottom:clamp(1.25rem,3vw,2rem);transition:transform var(--duration-normal) var(--ease-out),border-color var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}.timeline-item:last-child .timeline-card{margin-bottom:0}.timeline-card:hover{transform:translate(4px);border-color:#a855f740;box-shadow:0 8px 24px #0003}.timeline-title{font-size:clamp(1rem,1.8vw,1.15rem);font-weight:600;margin:0 0 .25rem;color:var(--text)}.timeline-company{font-size:clamp(.8rem,1.4vw,.9rem);color:var(--text-muted);margin:0 0 .75rem}.timeline-desc{font-size:clamp(.875rem,1.4vw,.95rem);color:var(--text);margin:0;line-height:1.55;overflow-wrap:break-word;word-wrap:break-word}.projects-section{padding-top:clamp(2rem,4vw,3rem)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(1rem,2.5vw,1.25rem)}.project-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(1.25rem,2.5vw,1.5rem);transition:transform var(--duration-normal) var(--ease-out),border-color var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}.project-card:hover{transform:translateY(-4px);border-color:#a855f74d;box-shadow:0 12px 28px #00000038}.project-title{font-size:clamp(1rem,1.6vw,1.1rem);font-weight:600;margin:0 0 .5rem;color:var(--text)}.project-tech{font-size:clamp(.72rem,1.2vw,.8rem);color:var(--accent);margin:0 0 .75rem}.project-desc{font-size:clamp(.85rem,1.3vw,.9rem);color:var(--text-muted);margin:0;line-height:1.5}.contact-section{padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(3rem,8vw,5rem)}.contact-content{max-width:520px}.contact-intro{margin:0 0 1.5rem;font-size:clamp(.95rem,1.5vw,1.05rem);color:var(--text)}.contact-links{display:flex;flex-wrap:wrap;gap:clamp(.75rem,2vw,1rem)}.contact-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--accent);text-decoration:none;font-weight:500;padding:.5rem 0;border-bottom:1px solid transparent;transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),opacity var(--duration-fast) var(--ease-out)}.contact-link:hover{border-bottom-color:var(--accent);opacity:.9}.contact-link-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}@media (max-width: 900px){.about-grid{grid-template-columns:1fr}.about-graphic{justify-self:start}.skills-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}.projects-grid{grid-template-columns:1fr}}@media (max-width: 768px){.header{padding:.75rem 1rem;gap:.5rem;flex-wrap:wrap}.hamburger-btn{display:flex;order:2;margin-left:auto}.nav{order:3;flex:1 1 100%;flex-direction:column;align-items:stretch;gap:0;max-height:0;overflow:hidden;opacity:0;padding:0 0 .5rem;background:transparent;border:none;transition:max-height var(--duration-normal) var(--ease-out),opacity var(--duration-fast) var(--ease-out)}.header.menu-open .nav{max-height:80vh;opacity:1}.nav-link{flex-shrink:0;min-height:48px;padding:.75rem 1rem;font-size:1rem;display:flex;align-items:center;justify-content:flex-start;border-radius:8px;margin-bottom:.25rem}.nav-link:hover{background:#a855f71a}.theme-toggle{width:100%;height:48px;margin-left:0;margin-top:.5rem;padding:0 1rem;justify-content:flex-start;gap:.75rem;font-size:1rem;font-family:inherit;font-weight:500;color:var(--text-muted);background:transparent;border:none;border-radius:8px;box-shadow:none}.theme-toggle:hover{color:var(--accent);background:#a855f71a;transform:none}.theme-icon{font-size:1.25rem}body.theme-light .theme-toggle{color:var(--text-muted);background:transparent}body.theme-light .theme-toggle:hover{color:var(--accent);background:#a855f714}.section{padding:clamp(2rem,5vw,3rem) 1.25rem}.timeline-item{grid-template-columns:52px 14px minmax(200px,1fr);gap:.875rem}.timeline-year{width:48px;height:48px;font-size:.65rem}.timeline-connector{min-height:40px;transform:translate(5px)}.timeline-card{margin-bottom:1.5rem}.timeline-item:last-child .timeline-card{margin-bottom:0}}@media (max-width: 480px){.header{padding:.5rem .75rem;gap:.375rem}.logo-icon{width:32px;height:32px}.nav-link{padding:.35rem .45rem;font-size:.75rem;min-height:36px}.section{padding:1.75rem 1rem}.section-title{font-size:1.5rem;margin-bottom:1.25rem}.hero-section{padding-top:3rem;padding-bottom:2rem}.hero-name{font-size:1.75rem}.about-content p{font-size:.95rem}.pixel-art{width:90px;height:90px}.pixel-emoji{font-size:2.25rem}.skill-card,.project-card,.timeline-card{padding:1.125rem}.timeline-item{grid-template-columns:44px 12px minmax(180px,1fr);gap:.75rem}.timeline-item:last-child .timeline-card{margin-bottom:0}.timeline-year{width:42px;height:42px;font-size:.6rem}.timeline-connector{transform:translate(4px);min-height:32px}.contact-links{flex-direction:column;gap:.5rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.section,.hero-name,.hero-tagline{animation:none}}