.app{width:100%;height:100dvh;position:relative;overflow:hidden}.content-layer{z-index:10;opacity:0;flex-direction:column;transition:opacity .8s;display:flex;position:absolute;inset:0}.content-layer.visible{opacity:1}.top-nav{z-index:30;pointer-events:auto;background:linear-gradient(#0a0a0fb3,#0000);justify-content:space-between;align-items:center;height:56px;padding:0 clamp(1rem,4vw,2.5rem);display:flex;position:fixed;top:0;left:0;right:0}.nav-logo{background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:.95rem;font-weight:600}.nav-dots{align-items:center;gap:10px;display:flex}.nav-dot{cursor:pointer;background:#6366f133;border:1px solid #6366f14d;border-radius:50%;width:8px;height:8px;padding:0;transition:all .3s}.nav-dot:hover{background:#6366f180;transform:scale(1.3)}.nav-dot.active{background:var(--accent);transform:scale(1.2);box-shadow:0 0 10px #6366f199}.bottom-bar{z-index:30;pointer-events:none;background:linear-gradient(#0000,#0a0a0fb3);justify-content:space-between;align-items:center;height:48px;padding:0 clamp(1rem,4vw,2.5rem);display:flex;position:fixed;bottom:0;left:0;right:0}.page-indicator{color:var(--text-secondary);font-family:Inter,monospace;font-size:.85rem}.current-page{color:var(--accent-light);font-weight:600}.page-sep{opacity:.4;margin:0 .3rem}.section-name{color:var(--text-secondary);opacity:.7;font-size:.8rem}.section-container{flex:1;justify-content:center;align-items:center;min-height:0;padding:70px clamp(1rem,4vw,3rem) 60px;animation:.8s forwards fogIn;display:flex}.section-container.down{animation:.8s forwards fogInDown}.section-container.up{animation:.8s forwards fogInUp}@keyframes fogInDown{0%{opacity:0;filter:blur(5px);transform:translateY(40px)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes fogInUp{0%{opacity:0;filter:blur(5px);transform:translateY(-40px)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes fogIn{0%{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur()}}.fade-item{opacity:0;animation:.6s forwards slideFromLeft}@keyframes slideFromLeft{0%{opacity:0;filter:blur(3px);transform:translate(-25px)}60%{filter:blur(.5px)}to{opacity:1;filter:blur();transform:translate(0)}}.fade-item:nth-child(2n){animation-name:slideFromRight}@keyframes slideFromRight{0%{opacity:0;filter:blur(3px);transform:translate(25px)}60%{filter:blur(.5px)}to{opacity:1;filter:blur();transform:translate(0)}}.hero-section{text-align:center;width:100%;max-width:800px;padding:0 1rem}.hero-title{background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.8rem;font-size:clamp(2.8rem,10vw,6rem);font-weight:700;line-height:1.1;animation:1s forwards heroFadeIn}.hero-subtitle{color:var(--text-secondary);opacity:0;margin-bottom:.5rem;font-size:clamp(.95rem,3.5vw,1.4rem);font-weight:300;animation:1s .15s forwards heroFadeIn}.hero-desc{color:var(--text-secondary);opacity:0;margin-bottom:2rem;font-size:clamp(.85rem,2.8vw,1.1rem);animation:1s .3s forwards heroFadeIn}.scroll-hint{color:var(--accent-light);opacity:0;font-size:.85rem;animation:1s .5s forwards heroFadeIn,2.5s ease-in-out infinite float}@keyframes heroFadeIn{0%{opacity:0;filter:blur(4px);transform:translateY(20px)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.content-section{-webkit-backdrop-filter:blur(24px);pointer-events:auto;-webkit-overflow-scrolling:touch;background:#0a0a0fcc;border:1px solid #6366f11f;border-radius:20px;width:100%;max-width:min(900px,92vw);max-height:calc(100dvh - 130px);padding:2rem 2.5rem;overflow:hidden auto}.content-section::-webkit-scrollbar{width:3px}.content-section::-webkit-scrollbar-thumb{background:var(--accent);border-radius:2px}.section-title{background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1rem;font-size:clamp(1.5rem,4vw,2.2rem);font-weight:700}.section-desc{color:var(--text-secondary);margin-bottom:1.2rem;font-size:clamp(.85rem,2.2vw,.95rem);line-height:1.65}.desktop-list{display:block}.info-grid{grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:1rem;display:grid}.info-item{background:#6366f10d;border-radius:10px;flex-direction:column;gap:.15rem;padding:.8rem;display:flex}.info-label{color:var(--text-secondary);font-size:.75rem}.info-value{color:var(--text-primary);font-size:.95rem;font-weight:600}.interests{flex-wrap:wrap;align-items:center;gap:.35rem;display:flex}.interest-label{color:var(--text-secondary);font-size:.85rem}.tag{color:var(--accent-light);background:#6366f11f;border-radius:14px;padding:.2rem .6rem;font-size:.75rem}.projects-list{flex-direction:column;gap:.6rem;display:flex}.project-card{background:#6366f10d;border:1px solid #6366f11a;border-radius:12px;padding:1rem;transition:all .3s}.project-card:hover{background:#6366f11a;border-color:#6366f140}.project-header{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.25rem;display:flex}.project-header h3{color:var(--text-primary);margin:0;font-size:1rem;font-weight:600}.project-role{color:var(--accent-light);white-space:nowrap;font-size:.75rem}.project-time{color:var(--text-secondary);margin-bottom:.4rem;font-size:.75rem}.project-card p{color:var(--text-secondary);margin-bottom:.5rem;font-size:.85rem;line-height:1.5}.project-tech{flex-wrap:wrap;gap:.3rem;display:flex}.skills-grid{grid-template-columns:repeat(2,1fr);gap:.8rem;display:grid}.skill-category{background:#6366f10d;border-radius:10px;padding:.9rem}.category-name{color:var(--text-primary);align-items:center;gap:.4rem;margin-bottom:.7rem;font-size:.88rem;font-weight:600;display:flex}.category-icon{font-size:1rem}.skill-item{margin-bottom:.5rem}.skill-item:last-child{margin-bottom:0}.skill-header{justify-content:space-between;margin-bottom:.15rem;font-size:.8rem;display:flex}.skill-header span:first-child{color:var(--text-primary)}.skill-level{color:var(--accent-light)}.skill-bar{background:#6366f11a;border-radius:2px;height:3px;overflow:hidden}.skill-progress{background:linear-gradient(90deg,#6366f1,#a855f7);border-radius:2px;height:100%}.contact-list{flex-direction:column;gap:.5rem;margin-bottom:1rem;display:flex}.contact-card{cursor:pointer;background:#6366f10d;border:1px solid #6366f11a;border-radius:10px;align-items:center;gap:.7rem;padding:.8rem .9rem;transition:all .3s;display:flex}.contact-card:hover{background:#6366f11a;border-color:#6366f140}.contact-icon{font-size:1.2rem}.contact-info{flex-direction:column;gap:.05rem;display:flex}.contact-name{color:var(--text-secondary);font-size:.7rem}.contact-value{color:var(--text-primary);font-size:.85rem}.footer{text-align:center;border-top:1px solid #6366f11a;padding-top:.8rem}.footer p{color:var(--text-secondary);margin:0;font-size:.75rem}@media (width<=768px){.top-nav{background:linear-gradient(#0a0a0fd9,#0000);height:48px;padding:0 1rem}.nav-logo{font-size:.85rem}.nav-dots{gap:8px}.nav-dot{width:7px;height:7px}.section-container{padding:48px .75rem 44px}.content-section{box-sizing:border-box;border-radius:16px;width:100%;max-width:100%;max-height:calc(100dvh - 100px);padding:1.2rem 1rem}.desktop-list{display:none}.hero-title{font-size:clamp(2.2rem,12vw,3.5rem)}.hero-subtitle{font-size:clamp(.85rem,4vw,1.05rem)}.hero-desc{margin-bottom:1.5rem;font-size:clamp(.8rem,3vw,.9rem)}.scroll-hint{font-size:.8rem}.section-title{margin-bottom:.8rem;font-size:clamp(1.3rem,5vw,1.6rem)}.section-desc{margin-bottom:1rem;font-size:clamp(.82rem,2.5vw,.88rem);line-height:1.6}.info-grid{gap:.5rem;margin-bottom:.8rem}.info-item{padding:.7rem}.info-label{font-size:.72rem}.info-value{font-size:.9rem}.interests{gap:.3rem}.tag{padding:.2rem .5rem;font-size:.72rem}.projects-list{gap:.5rem}.project-card{padding:.85rem}.project-header h3{font-size:.9rem}.project-role{font-size:.72rem}.project-time{margin-bottom:.3rem;font-size:.72rem}.project-card p{margin-bottom:.4rem;font-size:.8rem;line-height:1.45}.project-tech{gap:.25rem}.project-tech .tag{padding:.15rem .45rem;font-size:.68rem}.skills-grid{grid-template-columns:1fr;gap:.5rem}.skill-category{padding:.8rem}.category-name{margin-bottom:.6rem;font-size:.85rem}.skill-item{margin-bottom:.4rem}.skill-header{font-size:.78rem}.skill-bar{height:2.5px}.contact-list{gap:.4rem;margin-bottom:.8rem}.contact-card{gap:.6rem;padding:.7rem .8rem}.contact-icon{font-size:1.1rem}.contact-value{font-size:.82rem}.footer{padding-top:.6rem}.footer p{font-size:.7rem}.bottom-bar{background:linear-gradient(#0000,#0a0a0fd9);height:40px;padding:0 1rem}.page-indicator{font-size:.75rem}.section-name{font-size:.7rem}}@media (width<=360px){.section-container{padding:44px .5rem 40px}.content-section{border-radius:14px;padding:1rem .75rem}.hero-title{font-size:2rem}.info-grid,.skills-grid{grid-template-columns:1fr}}@media (height<=500px) and (orientation:landscape){.section-container{padding:44px 1rem 40px}.content-section{max-height:calc(100dvh - 90px)}}@supports (padding:env(safe-area-inset-top)){.top-nav{padding-top:env(safe-area-inset-top)}}@supports (padding:env(safe-area-inset-bottom)){.bottom-bar{padding-bottom:env(safe-area-inset-bottom)}}@media (hover:none) and (pointer:coarse){.nav-dot{width:10px;height:10px}.contact-card,.project-card{min-height:44px}}.htabs-container{width:100%}.htabs-header{-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:1px solid #6366f126;margin-bottom:.8rem;display:flex;position:relative;overflow-x:auto}.htabs-header::-webkit-scrollbar{display:none}.htab-btn{color:var(--text-secondary);cursor:pointer;z-index:2;white-space:nowrap;background:0 0;border:none;flex:none;padding:.55rem .75rem;font-family:inherit;font-size:.78rem;font-weight:500;transition:color .3s;position:relative}.htab-btn.active{color:var(--accent-light)}.htab-indicator{z-index:1;background:linear-gradient(90deg,#6366f1,#a855f7);border-radius:1px;height:2px;transition:transform .35s cubic-bezier(.25,.46,.45,.94);position:absolute;bottom:-1px;left:0}.htabs-track{will-change:transform;min-height:200px;display:flex}.htabs-panel{flex-shrink:0;min-width:100%}.htabs-dots{justify-content:center;gap:6px;padding:.6rem 0 .2rem;display:flex}.htab-dot{cursor:pointer;background:#6366f133;border-radius:50%;width:5px;height:5px;transition:all .3s}.htab-dot.active{background:var(--accent);border-radius:3px;width:16px}.htabs-panel .project-card,.htabs-panel .skill-category{background:#6366f10f;border:1px solid #6366f11f}@media (width>=769px){.htabs-container{display:none}}@media (width<=768px){.htabs-header{margin-bottom:.6rem}.htab-btn{padding:.5rem .6rem;font-size:.75rem}.htabs-track{min-height:180px}.htabs-dots{gap:5px;padding:.5rem 0 .15rem}.htab-dot{width:5px;height:5px}.htab-dot.active{width:14px}}@media (width<=360px){.htab-btn{padding:.45rem .5rem;font-size:.72rem}.htabs-track{min-height:160px}}:root{--bg-primary:#0a0a0f;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--accent:#6366f1;--accent-light:#818cf8}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg-primary);width:100%;height:100dvh;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:2px}