@import "https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Kanit:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box;font-family:Geist,sans-serif}html{scroll-behavior:smooth}body{color:#f8fafc;background:#111821;margin:0}a{color:inherit;text-decoration:none}html[lang=th] *,html[lang=th] :before,html[lang=th] :after{font-family:Kanit,sans-serif}:root{--bg:#111318;--bg-soft:#151922;--panel:#191e27;--panel-soft:#1d232e;--panel-hover:#222936;--border:#e2e8f01c;--border-strong:#e2e8f038;--text:#f3f4f6;--text-soft:#c4c9d4;--text-muted:#8f96a3;--accent:#d7dde8;--accent-soft:#ffffff12;--shadow:#00000038;--radius-lg:20px;--radius-md:14px;--sidebar-width:280px;--nav-height:92px;--page-width:1180px;--accent-blue:#8bb8ff;--accent-violet:#b49cff}.topbar{z-index:40;height:var(--nav-height);pointer-events:none;align-items:center;padding:14px clamp(18px,3vw,44px);display:flex;position:fixed;inset:0 0 auto}.topbar-inner{-webkit-backdrop-filter:blur(22px)saturate(140%);pointer-events:auto;background:#10131ac7;border:1px solid #ffffff1a;border-radius:22px;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);align-items:center;gap:22px;width:min(100%,1440px);min-height:64px;margin:0 auto;padding:8px 10px;display:grid;position:relative;box-shadow:0 16px 50px #00000047,inset 0 1px #ffffff09}.topbar-inner:before{content:"";background:linear-gradient(90deg,#0000,#8bb8ff99,#0000);height:1px;position:absolute;inset:-1px 18% auto}.topbar-brand,.drawer-profile{width:fit-content;color:var(--text);cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:10px;padding:0;display:flex}.topbar-brand .avatar{border-radius:13px;width:42px;height:42px;transition:transform .25s,border-color .25s}.topbar-brand:hover .avatar{border-color:#8bb8ffa6;transform:rotate(-4deg)scale(1.06)}.brand-copy{gap:1px;display:grid}.brand-copy strong{letter-spacing:-.02em;font-size:14px}.brand-copy small{color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-size:10px}.desktop-nav{background:#ffffff09;border:1px solid #ffffff12;border-radius:16px;justify-content:center;align-items:center;gap:3px;padding:4px;display:flex}.desktop-nav a{min-height:42px;color:var(--text-muted);border-radius:12px;justify-content:center;align-items:center;gap:7px;padding:0 14px;font-size:12px;font-weight:600;transition:color .22s,background .22s,transform .22s;display:flex;position:relative;overflow:hidden}.desktop-nav a:after{content:"";background:var(--accent-blue);width:4px;height:4px;box-shadow:0 0 12px var(--accent-blue);opacity:0;border-radius:50%;transition:opacity .22s,transform .22s;position:absolute;bottom:5px;left:50%;transform:translate(-50%,8px)}.desktop-nav a svg{width:14px;height:14px;transition:transform .22s}.desktop-nav a:hover{color:var(--text);background:#ffffff0e;transform:translateY(-1px)}.desktop-nav a:hover svg{transform:rotate(-7deg)scale(1.08)}.desktop-nav a.active{color:#fff;background:linear-gradient(135deg,#8bb8ff26,#b49cff1a)}.desktop-nav a.active:after{opacity:1;transform:translate(-50%)}.topbar-actions{justify-self:end;align-items:center;gap:8px;display:flex}.topbar-cv,.drawer-cv{color:#11151d;background:linear-gradient(135deg,#f7f9fc,#dce8ff);border-radius:13px;justify-content:center;align-items:center;gap:8px;min-height:42px;padding:0 15px;font-size:12px;font-weight:750;transition:transform .22s,box-shadow .22s;display:inline-flex;box-shadow:0 7px 20px #8bb8ff29}.topbar-cv:hover{transform:translateY(-2px);box-shadow:0 10px 26px #8bb8ff40}.topbar-cv svg{width:15px;height:15px}.mobile-menu-button,.mobile-drawer,.mobile-menu-overlay{display:none}.main{min-height:100vh;padding:calc(var(--nav-height) + 58px) clamp(24px, 5vw, 72px) 130px;margin-left:0}.home-content,.about-page,.projects-page,.experience-page,.tools-page,.contact-page{width:min(100%, var(--page-width))}.about-hero h2,.projects-header h2,.experience-header h2,.tools-header h2,.contact-header h2{background:linear-gradient(110deg,#fff 15%,#bcd5ff 58%,#baa7ff);color:#0000;-webkit-background-clip:text;background-clip:text}.about-education-card,.about-block,.tool-box,.contact-social-card,.experience-content,.project-showcase-card,.project-card{background:linear-gradient(145deg,#1d232ef0,#151922f0);position:relative;overflow:hidden}.about-block:before,.tool-box:before,.contact-social-card:before,.experience-content:before,.project-showcase-card:before{content:"";opacity:0;background:linear-gradient(#0000,#8bb8ff8c,#0000);width:2px;transition:opacity .25s;position:absolute;inset:0 auto 0 0}.about-block:hover:before,.tool-box:hover:before,.contact-social-card:hover:before,.experience-content:hover:before,.project-showcase-card:hover:before{opacity:1}.about-block,.tool-box,.experience-content{transition:transform .25s,border-color .25s}.about-block:hover,.tool-box:hover,.experience-content:hover{border-color:#8bb8ff3d;transform:translateY(-3px)}.tools-grid,.about-sections,.contact-socials{gap:22px}.footer{min-height:72px;width:min(calc(100% - 48px), var(--page-width));border:1px solid var(--border);background:#12161ebf;border-radius:18px;margin:-92px auto 20px;padding:0 22px;position:relative;left:auto}@media (width<=1120px){.topbar-inner{grid-template-columns:auto 1fr auto}.brand-copy{display:none}.desktop-nav a{padding:0 10px}}@media (width<=860px){:root{--nav-height:78px}.topbar{padding:10px 14px}.topbar-inner{border-radius:18px;min-height:58px;padding:7px 8px}.brand-copy{display:grid}.desktop-nav,.topbar-cv{display:none}.mobile-menu-button{width:42px;height:42px;color:var(--text);border:1px solid var(--border);cursor:pointer;background:#ffffff0e;border-radius:13px;place-items:center;padding:0;display:grid}.mobile-menu-button svg{width:20px;height:20px}.mobile-menu-overlay{z-index:48;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#05070ba8;border:0;padding:0;display:block;position:fixed;inset:0}.mobile-drawer{z-index:50;visibility:hidden;background:#13171ff7;border:1px solid #ffffff1f;border-radius:24px;flex-direction:column;width:min(88vw,360px);padding:18px;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility .32s;display:flex;position:fixed;inset:10px 10px 10px auto;transform:translate(calc(100% + 24px));box-shadow:-24px 0 70px #0000006b}.mobile-drawer.show{visibility:visible;transform:translate(0)}.drawer-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:14px;padding-bottom:18px;display:flex}.drawer-profile .avatar{border-radius:14px;width:48px;height:48px}.drawer-profile>span:last-child{gap:3px;display:grid}.drawer-profile strong{font-size:15px}.drawer-profile small{color:var(--text-muted);font-size:11px}.mobile-close-button{width:42px;height:42px;color:var(--text);border:1px solid var(--border);cursor:pointer;background:#ffffff0d;border-radius:13px;place-items:center;padding:0;display:grid;position:static}.drawer-nav{gap:7px;margin-top:20px;display:grid}.drawer-nav a{min-height:50px;color:var(--text-soft);opacity:0;border:1px solid #0000;border-radius:14px;align-items:center;gap:13px;padding:0 15px;font-size:14px;font-weight:600;display:flex;transform:translate(16px)}.mobile-drawer.show .drawer-nav a{animation:.35s forwards drawerItemIn;animation-delay:calc(var(--item-index) * 45ms + 80ms)}.drawer-nav a.active{color:#fff;background:linear-gradient(135deg,#8bb8ff24,#b49cff14);border-color:#8bb8ff38}.drawer-nav a svg{width:18px;height:18px}.drawer-cv{width:100%;margin-top:auto}.main{padding:calc(var(--nav-height) + 34px) 20px 120px}.home-content{padding-top:clamp(16px,4vh,40px)}.footer{width:calc(100% - 28px);margin-bottom:14px}}@keyframes drawerItemIn{to{opacity:1;transform:translate(0)}}@media (width<=640px){.main{padding-left:16px;padding-right:16px}.projects-grid,.tools-grid,.about-sections,.contact-socials{grid-template-columns:1fr;gap:16px}.about-hero,.projects-header,.experience-header,.tools-header,.contact-header{margin-bottom:26px}.footer{grid-template-columns:1fr auto;min-height:64px;padding:0 15px}.footer-center{justify-self:end}.footer-right{display:none}}@media (width<=420px){.brand-copy small{display:none}.topbar-brand .avatar{width:40px;height:40px}.main{padding-top:calc(var(--nav-height) + 24px)}.footer-center{max-width:170px}}@media (prefers-reduced-motion:reduce){.desktop-nav a,.topbar-brand .avatar,.mobile-drawer,.drawer-nav a,.about-block,.tool-box,.experience-content{transition-duration:.01ms!important;animation:none!important}html{scroll-behavior:auto}}::selection{color:#111318;background:#f3f4f6}.app{min-height:100vh;color:var(--text);background:var(--bg);position:relative}.app:before{content:"";pointer-events:none;background-color:#0000;background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:42px 42px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#00000073,#0000 72%);mask-image:linear-gradient(#00000073,#0000 72%)}.main,.sidebar,.footer,.mobile-header{z-index:2;position:relative}.main{min-height:100vh;margin-left:var(--sidebar-width);padding:72px 48px 110px}.home-main{align-items:center;display:flex}.home-content,.about-page,.projects-page,.experience-page,.tools-page,.contact-page{width:min(100%,1040px);margin:0 auto}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}.rain-background{display:none}.sidebar{width:var(--sidebar-width);z-index:30;border-right:1px solid var(--border);background:#12161f;flex-direction:column;height:100vh;padding:28px 18px;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.mobile-close-button{display:none}.profile,.mobile-profile{color:var(--text);align-items:center;gap:12px;display:flex}.profile{border-radius:var(--radius-md);border:1px solid #0000;margin-bottom:32px;padding:10px;transition:background .2s,border-color .2s}.profile:hover{border-color:var(--border);background:#ffffff0a}.avatar{border:1px solid var(--border-strong);background:#222834;border-radius:16px;flex-shrink:0;width:56px;height:56px;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%;display:block}.profile h3,.mobile-profile h3{letter-spacing:-.02em;margin:0;font-size:14px;font-weight:650;line-height:1.2}.typewriter{color:var(--text-muted);margin-top:4px;font-size:12px;line-height:1.4}.type-cursor{display:none}.menu{flex-direction:column;gap:5px;display:flex}.menu a,.connect a{min-height:42px;color:var(--text-soft);border:1px solid #0000;border-radius:12px;align-items:center;gap:11px;padding:10px 12px;font-size:13px;font-weight:500;transition:background .18s,color .18s,border-color .18s;display:flex}.menu a svg,.connect a svg{width:16px;height:16px;color:var(--text-muted);flex-shrink:0}.menu a:hover,.connect a:hover{color:var(--text);border-color:var(--border);background:#ffffff0b}.menu a.active{color:var(--text);border-color:var(--border-strong);background:#202632}.menu a.active svg{color:var(--text)}.connect{flex-direction:column;gap:5px;margin-top:34px;display:flex}.connect p{color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;padding:0 12px;font-size:11px;font-weight:650}.sidebar-cv{margin-top:auto;padding-top:22px}.cv-button{color:#111318;background:#f3f4f6;border:1px solid #f3f4f6;border-radius:12px;justify-content:center;align-items:center;gap:9px;width:100%;min-height:46px;padding:12px 14px;font-size:13px;font-weight:700;transition:background .18s,border-color .18s,transform .18s;display:flex}.cv-button:hover{background:#fff;border-color:#fff;transform:translateY(-1px)}.cv-button svg{width:16px;height:16px}.mobile-header,.mobile-menu-overlay{display:none}.home-content{max-width:820px}.home-content h1{color:var(--text);letter-spacing:-.06em;margin:0;font-size:clamp(42px,7vw,82px);font-weight:760;line-height:.98}.home-content h1 span{color:var(--text)}.home-content h2{color:var(--text-soft);letter-spacing:-.025em;margin:18px 0 24px;font-size:clamp(18px,2.5vw,28px);font-weight:500;line-height:1.35}.headline{max-width:720px;color:var(--text);letter-spacing:-.04em;margin:28px 0 14px;font-size:clamp(20px,3vw,32px);font-weight:680;line-height:1.24}.small-text,.description,.talk-text{max-width:720px;color:var(--text-soft);font-size:15px;line-height:1.8}.small-text{color:var(--text-muted);margin:0 0 16px}.description{margin:10px 0 0}.talk-text{margin:20px 0 28px}.talk-text b{color:var(--text);font-weight:650}.email-link{color:var(--text);border-bottom:1px solid var(--text-muted)}.email-link:hover{border-color:var(--text)}.social-card{width:fit-content;max-width:100%;color:var(--text-soft);border:1px solid var(--border);cursor:pointer;background:#181d27;border-radius:999px;align-items:center;gap:14px;padding:10px 10px 10px 14px;transition:background .18s,border-color .18s;display:flex}.social-card:hover{border-color:var(--border-strong);background:#1d232f}.social-left{align-items:center;gap:8px;font-size:13px;font-weight:500;display:flex}.social-left svg{width:17px;height:17px;color:var(--text)}.social-card button{color:#111318;cursor:pointer;background:#f3f4f6;border:0;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:700}.project-card{border-radius:var(--radius-lg);background:var(--panel);border:1px solid var(--border);max-width:720px;box-shadow:0 18px 44px var(--shadow);grid-template-columns:116px 1fr;gap:18px;margin-top:34px;padding:18px;transition:transform .18s,border-color .18s,background .18s;display:grid}.project-card:hover{background:var(--panel-hover);border-color:var(--border-strong);transform:translateY(-2px)}.project-image{border:1px solid var(--border);background:#222834;border-radius:16px;place-items:center;min-height:116px;display:grid}.project-image svg{width:34px;height:34px;color:var(--text-soft)}.project-info span:first-child{color:var(--text-muted);letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px;font-size:11px;font-weight:700;display:inline-block}.project-info h3{color:var(--text);letter-spacing:-.02em;margin:0 0 8px;font-size:19px;line-height:1.35}.project-info p{color:var(--text-soft);margin:0;font-size:14px;line-height:1.65}.project-read-more{align-items:center;gap:7px;margin-top:14px;color:var(--text)!important;letter-spacing:0!important;text-transform:none!important;font-size:13px!important;font-weight:650!important;display:inline-flex!important}.project-read-more svg{width:12px;height:12px}.about-hero h2,.projects-header h2,.experience-header h2,.tools-header h2,.contact-header h2{color:var(--text);letter-spacing:-.055em;margin:0;font-size:clamp(34px,5vw,56px);font-weight:740;line-height:1}.about-role,.projects-header p,.experience-header p,.tools-header p,.contact-header p{max-width:720px;color:var(--text-soft);margin:14px 0 0;font-size:15px;line-height:1.75}.about-page{max-width:960px}.about-education-card,.about-block,.tool-box,.contact-social-card,.experience-content,.project-showcase-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 18px 44px var(--shadow)}.about-education-card h3{color:var(--text);letter-spacing:-.02em;margin:0 0 18px;font-size:18px}.education-item{justify-content:space-between;align-items:flex-start;gap:24px;display:flex}.education-item h4{color:var(--text);margin:0 0 8px;font-size:16px;line-height:1.45}.education-item p{color:var(--text-soft);margin:0 0 8px;font-size:14px}.education-item strong{color:var(--text);font-size:13px;font-weight:650}.education-item>span{color:var(--text-muted);white-space:nowrap;font-size:13px}.education-line{background:var(--border);height:1px;margin:20px 0}.about-sections{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.about-sections:empty{display:none}.about-block{padding:24px}.about-block h2{color:var(--text);letter-spacing:-.025em;margin:0 0 10px;font-size:19px;line-height:1.3}.about-block p{color:var(--text-soft);margin:0;font-size:14px;line-height:1.75}.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.project-showcase-card{flex-direction:column;min-height:100%;transition:transform .18s,border-color .18s,background .18s;display:flex;overflow:hidden}.project-showcase-card:hover{background:var(--panel-hover);border-color:var(--border-strong);transform:translateY(-2px)}.project-preview{border-bottom:1px solid var(--border);background:#141922;height:190px}.project-preview:empty:before{content:"Project";height:100%;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;place-items:center;font-size:13px;display:grid}.project-preview img{object-fit:cover;width:100%;height:100%;display:block}.project-showcase-body{flex-direction:column;flex:1;justify-content:space-between;gap:20px;padding:22px;display:flex}.project-showcase-body h2{color:var(--text);letter-spacing:-.03em;margin:0 0 8px;font-size:20px;line-height:1.3}.project-showcase-body h3{color:var(--text-muted);margin:0 0 12px;font-size:13px;font-weight:600}.project-showcase-body p{color:var(--text-soft);margin:0;font-size:14px;line-height:1.75}.project-actions{margin-top:16px}.project-actions button{min-height:36px;color:var(--text);border:1px solid var(--border);background:#ffffff0f;border-radius:999px;align-items:center;padding:8px 14px;font-size:13px;font-weight:650;display:inline-flex}.project-actions button:hover{border-color:var(--border-strong);background:#ffffff1a}.project-tags,.experience-tags,.tool-tags{flex-wrap:wrap;gap:8px;display:flex}.project-tags span,.experience-tags span,.tool-tag{min-height:30px;color:var(--text-soft);border:1px solid var(--border);background:#ffffff0e;border-radius:999px;align-items:center;padding:6px 10px;font-size:12px;font-weight:550;display:inline-flex}.experience-timeline{flex-direction:column;gap:18px;display:flex}.experience-item{grid-template-columns:120px 1fr;align-items:stretch;gap:18px;display:grid}.experience-date{color:var(--text-muted);padding-top:22px;font-size:13px;font-weight:650}.experience-content h2{color:var(--text);letter-spacing:-.025em;margin:0 0 10px;font-size:20px;line-height:1.35}.experience-content h2 span{color:var(--text-soft);font-weight:500}.experience-content>p{color:var(--text-muted);margin:0 0 14px;font-size:14px}.experience-content ul{color:var(--text-soft);margin:0 0 18px;padding-left:18px}.experience-content li{margin:7px 0;font-size:14px;line-height:1.65}.tools-page{max-width:1100px}.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.tool-box{padding:24px}.tool-box-title{align-items:center;gap:10px;margin-bottom:18px;display:flex}.tool-box-title svg{width:20px;height:20px;color:var(--text-soft)}.tool-box-title h2{color:var(--text);letter-spacing:-.02em;margin:0;font-size:18px;line-height:1.3}.tool-tag{border-radius:12px;gap:7px;min-height:36px;padding:7px 10px}.tool-icon{justify-content:center;align-items:center;width:18px;height:18px;display:inline-flex}.tool-icon img,.tool-icon svg{width:18px;height:18px;display:block}.contact-socials{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.contact-social-card{align-items:flex-start;gap:16px;padding:22px;transition:transform .18s,border-color .18s,background .18s;display:flex}.contact-social-card:hover{background:var(--panel-hover);border-color:var(--border-strong);transform:translateY(-2px)}.contact-social-card>svg{width:22px;height:22px;color:var(--text-soft);flex-shrink:0;margin-top:2px}.contact-social-card h3{color:var(--text);letter-spacing:-.02em;margin:0 0 7px;font-size:18px}.contact-social-card p{color:var(--text-soft);margin:0;font-size:14px;line-height:1.6}.footer{left:var(--sidebar-width);z-index:20;min-height:62px;color:var(--text-muted);border-top:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#111318db;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 48px;display:grid;position:fixed;bottom:0;right:0}.footer-left{color:var(--text-soft);justify-self:start;font-size:13px;font-weight:600}.footer-left:hover{color:var(--text)}.footer-center{color:var(--text-muted);justify-self:center;font-size:12px}.footer-name-short{display:none}.footer-right{justify-self:end;align-items:center;gap:10px;display:flex}.footer-right a{width:34px;height:34px;color:var(--text-muted);border:1px solid #0000;border-radius:999px;place-items:center;display:grid}.footer-right a:hover{color:var(--text);border-color:var(--border);background:#ffffff0b}.footer-right svg{width:16px;height:16px}@media (width<=980px){.mobile-header{z-index:40;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#111318eb;justify-content:space-between;align-items:center;height:72px;padding:0 18px;display:flex;position:sticky;top:0}.mobile-profile .avatar{border-radius:13px;width:44px;height:44px}.mobile-menu-button,.mobile-close-button{width:42px;height:42px;color:var(--text);border:1px solid var(--border);cursor:pointer;background:#1b202b;border-radius:12px;place-items:center;display:grid}.mobile-menu-button svg,.mobile-close-button svg{width:20px;height:20px}.mobile-menu-overlay{z-index:45;background:#0000007a;display:block;position:fixed;inset:0}.sidebar{z-index:50;width:min(86vw,310px);transition:transform .22s;transform:translate(-105%);box-shadow:22px 0 55px #0000005c}.sidebar.show{transform:translate(0)}.mobile-close-button{position:absolute;top:18px;right:18px}.sidebar .profile{margin-top:50px}.main{margin-left:0;padding:42px 20px 100px}.home-main{align-items:flex-start}.footer{grid-template-columns:auto 1fr;min-height:58px;padding:0 18px;left:0}.footer-center{text-align:right;justify-self:end}.footer-right,.footer-name-full{display:none}.footer-name-short{display:inline}}@media (width<=760px){.home-content h1{font-size:clamp(40px,15vw,62px)}.home-content h2{margin-top:14px}.headline{font-size:22px}.small-text,.description,.talk-text{font-size:14px}.project-card{grid-template-columns:1fr}.project-image{min-height:92px}.about-sections,.projects-grid,.tools-grid,.contact-socials{grid-template-columns:1fr}.education-item{flex-direction:column;gap:10px}.experience-item{grid-template-columns:1fr;gap:8px}.experience-date{padding-top:0}.project-preview{height:170px}}@media (width<=480px){.mobile-header{height:68px;padding:0 14px}.main{padding:34px 16px 92px}.social-card{border-radius:16px;justify-content:space-between;width:100%}.about-education-card,.about-block,.tool-box,.contact-social-card,.experience-content,.project-showcase-body,.project-card{padding:18px}.footer{padding:0 14px}.footer-left,.footer-center{font-size:11px}}.home-role-line{flex-wrap:wrap;align-items:center;gap:9px;display:flex}.role-static,.role-divider{color:var(--text-soft)}.role-divider{color:var(--text-muted)}.role-slider{min-width:240px;height:1.45em;color:var(--text);display:inline-flex;position:relative;overflow:hidden}.role-slider span{animation:.52s cubic-bezier(.2,.8,.2,1) both roleSlideIn;display:inline-block}@keyframes roleSlideIn{0%{opacity:0;filter:blur(2px);transform:translateY(72%)}to{opacity:1;filter:blur();transform:translateY(0)}}.menu a,.connect a,.cv-button,.social-card,.project-card,.project-showcase-card,.contact-social-card,.project-actions button,.footer-right a,.mobile-menu-button,.mobile-close-button,.tool-tag,.project-tags span,.experience-tags span{will-change:transform}.menu a,.connect a{transition:transform .2s,background .2s,color .2s,border-color .2s;position:relative;overflow:hidden}.menu a:before,.connect a:before{content:"";background:var(--text-soft);opacity:0;border-radius:999px;width:2px;transition:opacity .2s,transform .2s;position:absolute;top:9px;bottom:9px;left:0;transform:scaleY(.45)}.menu a:hover,.connect a:hover{transform:translate(4px)}.menu a:hover:before,.connect a:hover:before,.menu a.active:before{opacity:.75;transform:scaleY(1)}.cv-button,.social-card,.project-card,.project-showcase-card,.contact-social-card,.project-actions button,.mobile-menu-button,.mobile-close-button{position:relative;overflow:hidden}.cv-button:before,.social-card:before,.project-actions button:before,.mobile-menu-button:before,.mobile-close-button:before{content:"";pointer-events:none;background:linear-gradient(110deg,#0000 0%,#ffffff2e 46%,#0000 58%);transition:transform .58s;position:absolute;inset:0;transform:translate(-125%)}.cv-button:hover:before,.social-card:hover:before,.project-actions button:hover:before,.mobile-menu-button:hover:before,.mobile-close-button:hover:before{transform:translate(125%)}.cv-button{transition:transform .22s,box-shadow .22s,background .22s,border-color .22s;box-shadow:0 12px 26px #0000002e}.cv-button:hover{transform:translateY(-3px);box-shadow:0 18px 34px #00000047}.cv-button:active,.social-card:active,.project-actions button:active,.mobile-menu-button:active,.mobile-close-button:active{transform:translateY(0)scale(.98)}.social-card{transition:transform .22s,box-shadow .22s,background .22s,border-color .22s;box-shadow:0 10px 28px #00000029}.social-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px #0000003d}.social-card button{transition:transform .2s,background .2s;position:relative}.social-card:hover button{background:#fff;transform:translate(2px)}.project-card,.project-showcase-card,.contact-social-card,.tool-box,.about-education-card,.about-block,.experience-content{transition:transform .24s,border-color .24s,background .24s,box-shadow .24s}.project-card:before,.project-showcase-card:before,.contact-social-card:before,.tool-box:before,.about-education-card:before,.about-block:before,.experience-content:before{content:"";opacity:0;pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff47,#0000);height:1px;transition:opacity .24s;position:absolute;top:0;left:18px;right:18px}.project-card,.project-showcase-card,.contact-social-card,.tool-box,.about-education-card,.about-block,.experience-content{position:relative;overflow:hidden}.project-card:hover,.project-showcase-card:hover,.contact-social-card:hover,.tool-box:hover,.about-education-card:hover,.about-block:hover,.experience-content:hover{transform:translateY(-4px);box-shadow:0 24px 58px #00000047}.project-card:hover:before,.project-showcase-card:hover:before,.contact-social-card:hover:before,.tool-box:hover:before,.about-education-card:hover:before,.about-block:hover:before,.experience-content:hover:before{opacity:1}.project-image,.project-preview{transition:transform .24s,border-color .24s,background .24s}.project-card:hover .project-image,.project-showcase-card:hover .project-preview{border-color:var(--border-strong);transform:scale(1.015)}.project-read-more,.project-read-more svg,.project-actions button,.footer-right a,.tool-tag,.project-tags span,.experience-tags span{transition:transform .2s,background .2s,border-color .2s,color .2s}.project-card:hover .project-read-more{transform:translate(4px)}.project-card:hover .project-read-more svg{transform:translate(3px)}.project-actions button:hover,.footer-right a:hover,.tool-tag:hover,.project-tags span:hover,.experience-tags span:hover{transform:translateY(-2px)}.mobile-menu-button,.mobile-close-button{transition:transform .2s,background .2s,border-color .2s}.mobile-menu-button:hover,.mobile-close-button:hover{border-color:var(--border-strong);background:#222936;transform:translateY(-2px)}@media (width<=760px){.home-role-line{gap:7px}.role-slider{min-width:100%}}.profile,.mobile-profile{align-items:center}.profile{background:linear-gradient(135deg,#ffffff0e,#ffffff05);border-color:#e2e8f021;gap:14px;margin-bottom:34px;padding:12px;transition:transform .22s,background .22s,border-color .22s,box-shadow .22s;box-shadow:inset 0 1px #ffffff0e,0 16px 34px #00000024}.profile:hover{border-color:var(--border-strong);background:linear-gradient(135deg,#ffffff13,#ffffff06);transform:translateY(-2px)}.profile .avatar{background:#f3f4f6;border:1px solid #ffffff38;border-radius:18px;width:62px;height:62px;box-shadow:0 10px 24px #0003}.profile-text{min-width:0}.profile h3,.mobile-profile h3{flex-direction:column;gap:3px;margin:0;line-height:1.05;display:flex}.profile-name-main{color:var(--text);letter-spacing:-.035em;text-transform:uppercase;font-size:16px;font-weight:780}.profile-name-sub{color:var(--text-muted);letter-spacing:.01em;text-transform:uppercase;font-size:13px;font-weight:600}.mobile-profile .profile-name-main{font-size:14px}.mobile-profile .profile-name-sub{font-size:12px}.home-role-line{min-height:40px}.role-typing{min-width:275px;color:var(--text);white-space:nowrap;align-items:center;display:inline-flex;position:relative}.role-cursor{background:var(--text);border-radius:999px;width:2px;height:1.05em;margin-left:5px;animation:.82s steps(2,start) infinite cursorBlink}@keyframes cursorBlink{0%,44%{opacity:1}45%,to{opacity:0}}.projects-page{max-width:940px}.projects-grid{gap:16px}.project-preview{height:165px}.project-showcase-body h2{font-size:18px}.project-showcase-body p{font-size:13.5px;line-height:1.7}.experience-timeline{gap:0}.experience-item{grid-template-columns:120px 42px 1fr;gap:0 12px;position:relative}.experience-date{padding-top:27px}.experience-marker{justify-content:center;display:flex;position:relative}.experience-marker:before{content:"";background:linear-gradient(to bottom, transparent, var(--border-strong) 18px, var(--border-strong) calc(100% - 18px), transparent);width:1px;position:absolute;top:0;bottom:0}.experience-marker span{width:13px;height:13px;box-shadow:0 0 0 1px var(--border-strong), 0 0 0 7px #ffffff09;z-index:1;background:#f3f4f6;border:3px solid #202632;border-radius:999px;margin-top:30px;position:relative}.experience-content{margin-bottom:18px}.experience-item:last-child .experience-marker:before{background:linear-gradient(to bottom, transparent, var(--border-strong) 18px, var(--border-strong) 34px, transparent 100%)}@media (width<=980px){.profile .avatar{width:58px;height:58px}}@media (width<=760px){.role-typing{min-width:100%}.experience-item{grid-template-columns:34px 1fr;gap:0 12px}.experience-date{grid-column:2;margin:0 0 8px;padding-top:0}.experience-marker{grid-area:1/1/span 2}.experience-marker span{margin-top:4px}.experience-content{grid-column:2}}@media (prefers-reduced-motion:reduce){.role-slider span,.role-cursor,.menu a,.connect a,.cv-button,.social-card,.project-card,.project-showcase-card,.contact-social-card,.project-actions button,.footer-right a,.tool-tag,.project-tags span,.experience-tags span,.mobile-menu-button,.mobile-close-button{transition:none!important;animation:none!important}}@media (width<=980px){.sidebar .mobile-close-button{z-index:5;display:grid;position:absolute;top:18px;left:auto;right:18px}}.rain-background{z-index:1;pointer-events:none;display:block;position:fixed;inset:0;overflow:hidden}.rain-background span{top:-12%;left:var(--meteor-left);width:var(--meteor-size);opacity:0;height:1px;animation:meteorFall var(--meteor-duration) linear infinite;animation-delay:var(--meteor-delay);filter:drop-shadow(0 0 6px #ffffff2e);background:linear-gradient(90deg,#0000,#ffffffb8,#0000);border-radius:999px;position:absolute;transform:rotate(-35deg)translate(0,0)}.rain-background span:after{content:"";background:#ffffffe0;border-radius:999px;width:4px;height:4px;position:absolute;top:50%;right:0;transform:translateY(-50%);box-shadow:0 0 12px #fff6}@keyframes meteorFall{0%{opacity:0;transform:translate(16vw,-18vh)rotate(-48deg)}7%{opacity:.56}48%{opacity:.38}60%,to{opacity:0;transform:translate(-34vw,128vh)rotate(-48deg)}}.project-showcase-footer{flex-wrap:wrap;align-items:center;gap:9px 10px;margin-top:auto;display:flex}.project-actions{margin-top:0;display:flex}.project-actions button{color:#111318;cursor:pointer;background:linear-gradient(135deg,#fff,#dfe4ec);border-color:#fffc;min-height:34px;padding:8px 15px;box-shadow:0 10px 22px #00000038,inset 0 1px #fffc}.project-actions button:hover{color:#111318;background:linear-gradient(135deg,#fff,#f1f5f9);border-color:#fff;box-shadow:0 16px 30px #00000047,inset 0 1px #ffffffe6}.project-tags{align-items:center}.project-link-modal-overlay{z-index:100000;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#080a0eb8;place-items:center;padding:24px;animation:.18s both profileOverlayIn;display:grid;position:fixed;inset:0}.project-link-modal{width:min(100%,430px);color:var(--text);border:1px solid var(--border-strong);background:radial-gradient(circle at 22% 8%,#ffffff1a,#0000 34%),#171c25;border-radius:24px;padding:30px;animation:.22s cubic-bezier(.16,1,.3,1) both profileModalIn;position:relative;overflow:hidden;box-shadow:0 28px 80px #0000006b}.project-link-modal-close{width:40px;height:40px;color:var(--text-soft);border:1px solid var(--border);cursor:pointer;background:#fff1;border-radius:50%;place-items:center;padding:0;transition:color .18s,background .18s,border-color .18s;display:grid;position:absolute;top:14px;right:14px}.project-link-modal-close:hover{color:var(--text);border-color:var(--border-strong);background:#ffffff1c}.project-link-modal-close svg{width:18px;height:18px}.project-link-modal-heading{padding-right:34px}.project-link-modal-heading h2{color:var(--text);letter-spacing:-.035em;margin:0;font-size:clamp(22px,5vw,28px);line-height:1.18}.project-link-modal-heading p{color:var(--text-soft);margin:10px 0 0;font-size:14px;line-height:1.6}.project-link-modal-actions{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;margin-top:24px;display:grid}.project-link-modal-action{min-height:126px;color:var(--text);text-align:center;border:1px solid var(--border);background:#ffffff0e;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:18px 14px;transition:transform .18s,background .18s,border-color .18s;display:flex}.project-link-modal-action:hover{border-color:var(--border-strong);background:#ffffff18;transform:translateY(-2px)}.project-link-modal-icon{color:#111318;background:#f3f4f6;border-radius:16px;place-items:center;width:48px;height:48px;display:grid}.project-link-modal-icon svg{width:23px;height:23px}.project-link-modal-action>span:last-child{font-size:13px;font-weight:700;line-height:1.25}@media (width<=520px){.project-link-modal-overlay{align-items:end;padding:14px}.project-link-modal{border-radius:22px;width:100%;padding:26px 18px 20px}.project-link-modal-actions{grid-template-columns:1fr}.project-link-modal-action{text-align:left;flex-direction:row;justify-content:flex-start;min-height:86px}.project-link-modal-icon{border-radius:14px;width:44px;height:44px}}.mobile-close-button,.sidebar .mobile-close-button{display:none!important}@media (width<=980px){.sidebar .profile{margin-top:0}}.cv-button{isolation:isolate;color:#0f131a;background:linear-gradient(135deg,#fff 0%,#eef1f6 38%,#fff 62%,#dbe2ec 100%) 0 0/240% 240%;border:1px solid #fffffff2;transition:transform .25s,box-shadow .25s,background-position .35s;animation:3.2s ease-in-out infinite cvSoftGlow;position:relative;overflow:hidden;box-shadow:0 12px 30px #00000047,0 0 0 1px #ffffff1a,0 0 26px #ffffff1a}.cv-button:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(115deg,#0000 0% 34%,#ffffff59 42%,#fffffff2 48%,#ffffff59 54%,#0000 64% 100%);animation:2.4s ease-in-out infinite cvLightSweep;position:absolute;inset:-40%;transform:translate(-95%)rotate(8deg)}.cv-button:after{content:"";opacity:.55;pointer-events:none;background:#fff;border-radius:999px;width:6px;height:6px;animation:1.45s ease-in-out infinite alternate cvSparkleDots;position:absolute;top:10px;right:22px;box-shadow:-115px 10px 0 -2px #fffffff2,-78px 24px 0 -3px #ffffffbf,-42px -2px 0 -3px #ffffffe6,0 0 16px #fffffff2,-115px 10px 14px #ffffff59,-42px -2px 12px #ffffff52}.cv-button svg,.cv-button span{z-index:2;position:relative}.cv-button svg{transition:transform .25s}.cv-button:hover{background-position:100%;transform:translateY(-4px)scale(1.015);box-shadow:0 18px 42px #00000061,0 0 0 1px #fff3,0 0 36px #ffffff38}.cv-button:hover svg{transform:translateY(-1px)rotate(-6deg)scale(1.08)}.cv-button:active{transform:translateY(-1px)scale(.98)}@keyframes cvLightSweep{0%{opacity:0;transform:translate(-110%)rotate(8deg)}18%{opacity:1}48%{opacity:1;transform:translate(110%)rotate(8deg)}to{opacity:0;transform:translate(110%)rotate(8deg)}}@keyframes cvSoftGlow{0%,to{background-position:0%}50%{background-position:100%}}@keyframes cvSparkleDots{0%{opacity:.25;transform:scale(.75)rotate(0)}to{opacity:.85;transform:scale(1.2)rotate(16deg)}}.profile-trigger{appearance:none;font:inherit;cursor:pointer;text-align:left;border:0}.profile-trigger.profile,.profile-trigger.mobile-profile{color:var(--text)}.profile-trigger.profile{width:100%}.profile-trigger.mobile-profile{background:0 0;padding:0}.profile-trigger:focus-visible,.profile-modal-close:focus-visible{outline-offset:4px;outline:2px solid #f8fafcb8}.profile-trigger .avatar{transition:transform .24s,border-radius .24s,box-shadow .24s}.profile-trigger:hover .avatar{transform:scale(1.04)rotate(-1deg);box-shadow:0 14px 30px #00000047,0 0 0 4px #ffffff0e}body.modal-open{overflow:hidden}.profile-modal-overlay{z-index:9999;-webkit-backdrop-filter:blur(14px);background:radial-gradient(circle,#94a3b829,#0000 42%),#020617b8;place-items:center;padding:24px;animation:.22s both profileOverlayIn;display:grid;position:fixed;inset:0}.profile-modal-card{background:linear-gradient(145deg,#191e27eb,#111318d1),#111318e6;border:1px solid #e2e8f029;border-radius:34px;flex-direction:column;justify-content:center;align-items:center;width:min(92vw,520px);min-height:520px;padding:58px 32px 34px;animation:.3s cubic-bezier(.16,1,.3,1) both profileModalIn;display:flex;position:relative;overflow:hidden;box-shadow:0 34px 90px #00000094,inset 0 1px #ffffff12}.profile-modal-card:before{content:"";border-radius:inherit;pointer-events:none;opacity:.7;background:linear-gradient(135deg,#ffffff29,#0000 34%,#ffffff0d 70%,#0000);position:absolute;inset:1px}.profile-modal-close{z-index:6;width:44px;height:44px;color:var(--text);cursor:pointer;background:#111318b8;border:1px solid #e2e8f02e;border-radius:999px;place-items:center;transition:transform .22s,background .22s,border-color .22s;display:grid;position:absolute;top:18px;right:18px}.profile-modal-close svg{width:23px;height:23px}.profile-modal-close:hover{background:#222936f5;border-color:#f8fafc57;transform:rotate(90deg)scale(1.06)}.profile-modal-blur-circle{pointer-events:none;filter:blur(24px);border-radius:999px;position:absolute}.profile-modal-blur-circle-one{opacity:.9;background:radial-gradient(circle,#ffffff2e,#0000 62%),radial-gradient(circle,#94a3b82e,#0000 70%);width:clamp(270px,48vw,440px);height:clamp(270px,48vw,440px);animation:5s ease-in-out infinite profileCircleFloat;top:50%;left:50%;transform:translate(-50%,-56%)}.profile-modal-blur-circle-two{opacity:.75;background:#ffffff17;width:180px;height:180px;animation:6s ease-in-out infinite profileCircleFloatTwo;bottom:70px;right:36px}.profile-modal-photo-frame{z-index:2;background:#f8fafc;border:8px solid #ffffffe6;border-radius:999px;width:clamp(210px,42vw,330px);height:clamp(210px,42vw,330px);animation:.38s cubic-bezier(.16,1,.3,1) both profilePhotoPop;position:relative;overflow:hidden;box-shadow:0 28px 70px #0000007a,0 0 0 1px #ffffff6b,0 0 70px #ffffff1f}.profile-modal-photo-frame img{object-fit:cover;width:100%;height:100%;display:block}.profile-modal-name{z-index:2;text-align:center;margin-top:26px;position:relative}.profile-modal-name h2{color:var(--text);letter-spacing:-.07em;margin:0;font-size:clamp(2rem,6vw,3.6rem);font-weight:900;line-height:.9}.profile-modal-name p{color:var(--text-soft);letter-spacing:-.045em;margin:10px 0 0;font-size:clamp(1.25rem,4vw,2.2rem);font-weight:760;line-height:1}.project-preview.project-preview-image{background:radial-gradient(circle at 50% 30%,#ffffff0e,#0000 42%),#10151d;place-items:center;height:clamp(220px,23vw,280px);padding:12px;display:grid;overflow:hidden}.project-preview.project-preview-image img{object-fit:contain;border-radius:12px;width:100%;height:100%;display:block}@keyframes profileOverlayIn{0%{opacity:0}to{opacity:1}}@keyframes profileModalIn{0%{opacity:0;transform:translateY(18px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes profilePhotoPop{0%{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}@keyframes profileCircleFloat{0%,to{transform:translate(-50%,-56%)scale(1)}50%{transform:translate(-50%,-60%)scale(1.06)}}@keyframes profileCircleFloatTwo{0%,to{transform:translate(0)scale(1)}50%{transform:translate(-12px,-10px)scale(1.08)}}@media (width<=760px){.profile-modal-overlay{padding:18px}.profile-modal-card{border-radius:28px;width:min(94vw,430px);min-height:460px;padding:58px 22px 30px}.profile-modal-close{width:42px;height:42px;top:14px;right:14px}.profile-modal-photo-frame{border-width:7px;width:min(68vw,270px);height:min(68vw,270px)}.profile-modal-blur-circle-one{width:330px;height:330px}.project-preview.project-preview-image{height:clamp(205px,58vw,270px);padding:10px}}@media (width<=420px){.profile-modal-card{min-height:420px;padding-top:54px}.profile-modal-photo-frame{width:min(72vw,235px);height:min(72vw,235px)}}.project-showcase-card{height:100%}.project-preview,.project-preview.project-preview-image{box-sizing:border-box;border-bottom:1px solid var(--border);background:radial-gradient(circle at 50% 30%,#ffffff0e,#0000 42%),#10151d;place-items:center;width:100%;height:clamp(220px,23vw,280px);min-height:220px;max-height:280px;padding:12px;display:grid;overflow:hidden}.project-preview:empty:before{content:"Project";width:100%;height:100%;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;place-items:center;font-size:13px;display:grid}.project-preview img,.project-preview.project-preview-image img{object-fit:contain;border-radius:12px;width:100%;height:100%;display:block}@media (width<=980px){.project-preview,.project-preview.project-preview-image{height:clamp(210px,48vw,270px);min-height:210px;max-height:270px;padding:10px}}@media (width<=520px){.project-preview,.project-preview.project-preview-image{height:clamp(190px,54vw,240px);min-height:190px;max-height:240px}}.home-content h1.hero-select-title{width:fit-content;max-width:100%;color:var(--text);letter-spacing:-.06em;isolation:isolate;margin:0 0 0 -.14em;padding:.04em .14em .08em;font-size:clamp(42px,7vw,82px);font-weight:760;line-height:.98;display:inline-block;position:relative;overflow:visible}.hero-select-text{z-index:2;white-space:nowrap;display:inline-block;position:relative}.hero-select-text span{color:var(--text)}.hero-select-text:before,.hero-select-text:after,.hero-select-title:after{display:none!important}.home-content h1.hero-select-title:before{content:"";z-index:1;transform-origin:0;pointer-events:none;background:#e2e8f029;border-radius:18px;width:100%;height:.88em;animation:1.45s cubic-bezier(.18,.86,.24,1) .25s forwards heroSelectFillClean;position:absolute;top:.12em;left:0;transform:scaleX(0)}.hero-fake-cursor{z-index:5;color:#f8fafc;pointer-events:none;filter:drop-shadow(0 8px 18px #0000008c)drop-shadow(0 0 10px #ffffff2e);place-items:center;animation:1.75s cubic-bezier(.18,.86,.24,1) .18s forwards heroCursorDragDiagonalClean,1.9s ease-in-out 2.1s infinite heroCursorIdleClean;display:inline-grid;position:absolute;top:18%;left:-28px}.hero-fake-cursor svg{stroke-width:2.2px;width:clamp(22px,2vw,32px);height:clamp(22px,2vw,32px)}@keyframes heroSelectFillClean{0%{opacity:0;transform:scaleX(0)}12%{opacity:1}to{opacity:1;transform:scaleX(1)}}@keyframes heroCursorDragDiagonalClean{0%{opacity:0;top:18%;left:-28px;transform:translateY(-50%)rotate(-12deg)scale(.92)}10%{opacity:1}to{opacity:1;top:calc(100% - 4px);left:calc(100% + 10px);transform:translateY(-50%)rotate(-8deg)scale(1)}}@keyframes heroCursorIdleClean{0%,to{transform:translateY(-50%)rotate(-8deg)scale(1)}50%{transform:translateY(calc(-50% - 4px))rotate(-8deg)scale(1.04)}}@media (width<=980px){.home-content h1.hero-select-title{letter-spacing:-.06em;font-size:clamp(44px,9.6vw,72px);line-height:.96}}@media (width<=520px){.home-content h1.hero-select-title{letter-spacing:-.048em;margin-left:0;padding:.04em 26px .08em 0;font-size:clamp(31px,9.6vw,44px);line-height:1}.hero-select-text{white-space:nowrap}.home-content h1.hero-select-title:before{border-radius:12px;height:.92em;top:.08em}.hero-fake-cursor{animation:1.65s cubic-bezier(.18,.86,.24,1) .18s forwards heroCursorDragDiagonalMobileClean,1.9s ease-in-out 2s infinite heroCursorIdleClean}.hero-fake-cursor svg{width:23px;height:23px}}@keyframes heroCursorDragDiagonalMobileClean{0%{opacity:0;top:18%;left:-18px;transform:translateY(-50%)rotate(-12deg)scale(.9)}10%{opacity:1}to{opacity:1;top:calc(100% - 2px);left:calc(100% - 21px);transform:translateY(-50%)rotate(-8deg)scale(1)}}@media (width<=360px){.home-content h1.hero-select-title{padding-right:24px;font-size:clamp(29px,9.2vw,34px)}.hero-fake-cursor svg{width:21px;height:21px}@keyframes heroCursorDragDiagonalMobileClean{0%{opacity:0;top:18%;left:-16px;transform:translateY(-50%)rotate(-12deg)scale(.9)}10%{opacity:1}to{opacity:1;top:calc(100% - 1px);left:calc(100% - 19px);transform:translateY(-50%)rotate(-8deg)scale(1)}}}.site-shell{opacity:0;filter:blur(8px);transition:opacity .85s,transform .85s cubic-bezier(.16,1,.3,1),filter .85s;transform:translateY(18px)scale(.985)}.site-shell.site-shell-ready{opacity:1;filter:none;transform:none}.loading-screen{z-index:99999;color:var(--text);background:var(--bg);opacity:1;place-items:center;transition:opacity .8s,transform .8s cubic-bezier(.16,1,.3,1),filter .8s,visibility .8s;display:grid;position:fixed;inset:0;overflow:hidden;transform:scale(1)}.loading-screen:before{content:"";pointer-events:none;opacity:.9;background:radial-gradient(circle at 50% 45%,#e2e8f014,#0000 34%),radial-gradient(circle at 20% 20%,#ffffff09,#0000 26%),radial-gradient(circle at 80% 70%,#ffffff09,#0000 28%);position:absolute;inset:0}.loading-screen.is-leaving{opacity:0;filter:blur(12px);visibility:hidden;pointer-events:none;transform:scale(1.04)}.loading-inner{z-index:2;flex-direction:column;align-items:center;gap:26px;animation:.55s both loadingContentIn;display:flex;position:relative}.loading-typing{color:var(--text);letter-spacing:-.055em;text-align:center;margin:0;font-size:clamp(34px,7vw,86px);font-weight:760;line-height:1}.loading-cursor{background:var(--text);border-radius:999px;width:3px;height:.85em;margin-left:8px;animation:.75s steps(2,start) infinite loadingCursorBlink;display:inline-block;transform:translateY(.12em)}.loading-spinner{border:3px solid #e2e8f029;border-top-color:#f3f4f6f2;border-radius:999px;width:42px;height:42px;animation:.85s linear infinite loadingSpin;box-shadow:0 0 24px #ffffff14,inset 0 0 14px #ffffff0d}.loading-meteors{z-index:1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.loading-meteors span{top:-12%;left:var(--meteor-left);width:var(--meteor-size);opacity:0;height:1px;animation:meteorFall var(--meteor-duration) linear infinite;animation-delay:var(--meteor-delay);filter:drop-shadow(0 0 6px #ffffff2e);background:linear-gradient(90deg,#0000,#ffffffb8,#0000);border-radius:999px;position:absolute;transform:rotate(-35deg)translate(0,0)}.loading-meteors span:after{content:"";background:#ffffffe0;border-radius:999px;width:4px;height:4px;position:absolute;top:50%;right:0;transform:translateY(-50%);box-shadow:0 0 12px #fff6}@keyframes loadingContentIn{0%{opacity:0;transform:translateY(14px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes loadingCursorBlink{0%,48%{opacity:1}49%,to{opacity:0}}@keyframes loadingSpin{to{transform:rotate(360deg)}}.project-showcase-card-link,.project-showcase-card-link *{cursor:none}.project-hover-cursor{z-index:99999;pointer-events:none;align-items:center;gap:8px;animation:.14s both projectCursorPop;display:flex;position:fixed;transform:translate(18px,16px)}.project-hover-arrow{background:var(--text-soft);clip-path:polygon(8% 0%,94% 45%,55% 57%,42% 100%);opacity:.92;filter:drop-shadow(0 2px #00000059)drop-shadow(0 6px 12px #00000047);width:24px;height:28px;position:absolute;top:-14px;left:-24px;transform:rotate(-12deg)}.project-hover-label{min-height:32px;color:var(--text);border:1px solid var(--border-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;letter-spacing:-.01em;background:#191e27eb;border-radius:999px;align-items:center;padding:7px 13px;font-size:13px;font-weight:650;line-height:1;display:inline-flex;box-shadow:0 10px 24px #00000040,inset 0 1px #ffffff0f}@keyframes projectCursorPop{0%{opacity:0;transform:translate(14px,12px)scale(.94)}to{opacity:1;transform:translate(18px,16px)scale(1)}}@media (pointer:coarse),(width<=760px){.project-hover-cursor{display:none}.project-showcase-card-link,.project-showcase-card-link *{cursor:auto}}@media (width<=760px){.loading-inner{gap:22px;padding:0 24px}.loading-typing{letter-spacing:-.045em;font-size:clamp(32px,10.5vw,54px)}.loading-spinner{width:36px;height:36px}}@media (width<=420px){.loading-typing{font-size:clamp(28px,9.8vw,42px)}.loading-cursor{width:2px;margin-left:6px}}.site-shell.site-shell-ready .sidebar,.site-shell.site-shell-ready .footer,.site-shell.site-shell-ready .mobile-header,.site-shell.site-shell-ready .mobile-menu-overlay{will-change:auto}@media (width>=981px){.app:after{content:"";width:var(--sidebar-width);pointer-events:none;border-right:1px solid var(--border);z-index:1;background:#12161f;position:absolute;top:0;bottom:0;left:0}}@media (width<=980px){body.sidebar-menu-open .app:after{content:"";pointer-events:none;border-right:1px solid var(--border);z-index:46;background:#12161f;width:min(86vw,330px);position:absolute;top:0;bottom:0;left:0}}@media (width<=420px){body.sidebar-menu-open .app:after{width:min(90vw,340px)}}body.sidebar-menu-open{overflow:hidden}@media (width<=980px){.mobile-menu-overlay{z-index:45;-webkit-backdrop-filter:blur(2px);touch-action:none;background:#00000094;position:fixed;inset:0}.sidebar{width:min(84vw,330px);height:100vh;max-height:100vh;padding:24px 18px max(24px, env(safe-area-inset-bottom));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:50;flex-direction:column;transition:transform .25s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;transform:translate(-105%);box-shadow:26px 0 60px #0000006b}@supports (height:100dvh){.sidebar{height:100dvh;max-height:100dvh}}.sidebar.show{transform:translate(0)}.sidebar .profile{flex:none;margin-top:0;margin-bottom:28px}.sidebar .menu,.sidebar .connect{flex:none}.sidebar .connect{margin-top:30px}.sidebar-cv{flex:none;margin-top:auto;padding-top:28px;padding-bottom:0}.sidebar-cv .cv-button{border-radius:16px;min-height:52px}}@media (width<=760px){.sidebar{width:min(84vw,320px);padding-inline:16px}.sidebar .profile{border-radius:16px;min-height:72px;padding:10px}.sidebar .profile .avatar{border-radius:16px;width:56px;height:56px}.sidebar .profile-name-main{font-size:14px}.sidebar .profile-name-sub{font-size:12px}.menu a,.connect a{min-height:44px;padding:10px 12px;font-size:13px}.connect{gap:4px}}@media (height<=720px) and (width<=980px){.sidebar{padding-top:18px}.sidebar .profile{margin-bottom:20px}.sidebar .connect{margin-top:22px}.sidebar-cv{margin-top:24px;padding-top:10px}}html,body{width:100%;overflow-x:hidden}.main,.home-content,.project-card,.project-info,.social-card,.social-left{min-width:0}.project-card{width:100%;max-width:760px}.project-info h3,.project-info p,.headline,.small-text,.description,.talk-text,.home-role-line{overflow-wrap:break-word}.social-left span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}@media (width>=761px) and (width<=980px){.mobile-header{height:82px;padding:0 26px}.main{padding:54px 28px 112px}.home-content{width:100%;max-width:780px;margin:0 auto}.home-content h1.hero-select-title{font-size:clamp(54px,7.2vw,64px);line-height:.98}.headline{max-width:780px;font-size:clamp(24px,3.2vw,30px);line-height:1.25}.small-text,.description,.talk-text{max-width:780px;font-size:15px;line-height:1.75}.project-card{grid-template-columns:132px minmax(0,1fr);align-items:stretch;gap:20px;max-width:780px;padding:18px}.project-image{min-height:132px}.project-info h3{font-size:22px;line-height:1.25}.project-info p{font-size:14.5px;line-height:1.65}}@media (width>=521px) and (width<=760px){.project-card{grid-template-columns:104px minmax(0,1fr);align-items:stretch;gap:16px;max-width:100%;padding:16px}.project-image{border-radius:16px;min-height:104px}.project-info h3{font-size:18px;line-height:1.28}.project-info p{font-size:13.5px;line-height:1.6}.project-read-more{margin-top:12px}}@media (width<=520px){.main{padding:32px 16px 96px}.home-content h1.hero-select-title{max-width:100%}.home-role-line{align-content:flex-start;align-items:flex-start;min-height:calc(2.7em + 7px)}.role-typing{white-space:nowrap;flex:0 0 100%;width:100%;min-width:100%;max-width:100%;height:1.35em;overflow:visible}.headline{font-size:clamp(20px,6vw,24px);line-height:1.28}.small-text,.description,.talk-text{font-size:14px;line-height:1.72}.project-card{grid-template-columns:1fr;gap:14px;width:100%;max-width:100%;margin-top:30px;padding:16px}.project-image{min-height:92px}.project-info h3{font-size:clamp(18px,5.6vw,21px);line-height:1.28}.project-info p{font-size:13.5px;line-height:1.62}.project-read-more{margin-top:12px}}@media (width<=980px){.project-card{gap:18px;width:100%;max-width:780px;padding:18px;grid-template-columns:1fr!important}.project-image{border-radius:18px;width:100%!important;height:clamp(160px,26vw,210px)!important;min-height:0!important}}@media (width<=760px){.project-card{gap:16px;padding:16px}.project-image{height:clamp(140px,42vw,190px)!important}}@media (width<=480px){.project-card{gap:14px;margin-top:30px;padding:16px}.project-image{border-radius:16px;height:clamp(130px,43vw,170px)!important}.project-image svg{width:34px;height:34px}}@media (width<=380px){.project-image{height:138px!important}}.main{padding:calc(var(--nav-height) + 58px) clamp(24px, 5vw, 72px) 130px!important;margin-left:0!important}.home-main{align-items:flex-start!important}.home-content{padding-top:clamp(28px,7vh,90px);max-width:920px!important}.home-content,.about-page,.projects-page,.experience-page,.tools-page,.contact-page{width:min(100%, var(--page-width))!important;margin-inline:auto!important}.footer{min-height:72px!important;width:min(calc(100% - 48px), var(--page-width))!important;border:1px solid var(--border)!important;background:#12161ec7!important;border-radius:18px!important;margin:-92px auto 20px!important;padding:0 22px!important;position:relative!important;bottom:auto!important;left:auto!important;right:auto!important}@media (width>=861px){.mobile-menu-button,.mobile-menu-overlay{display:none!important}}@media (width<=860px){.main{padding:calc(var(--nav-height) + 34px) 20px 120px!important;margin-left:0!important}.home-main{align-items:flex-start!important}.home-content{padding-top:clamp(16px,4vh,40px)}.mobile-menu-button,.mobile-close-button{display:grid!important;position:static!important}.mobile-menu-overlay{display:block!important}.footer{width:calc(100% - 28px)!important;margin:-92px auto 14px!important;padding:0 18px!important}}@media (width<=640px){.main{padding-left:16px!important;padding-right:16px!important}.footer{grid-template-columns:1fr auto!important;min-height:64px!important;padding:0 15px!important}}:root{--shell:1240px;--content:1120px;--nav-h:98px;--page-x:clamp(20px, 4.5vw, 72px);--surface:#191e28d1;--surface-hover:#1f2632eb;--blue:#9ac2ff;--violet:#b8a8ff}html,body{background:var(--bg);min-width:320px;overflow-x:hidden}.site-shell,#root{min-height:100%}.site-shell{background:var(--bg);isolation:isolate;position:relative}.rain-background{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.rain-background span{top:-18vh;left:var(--meteor-left);width:var(--meteor-size);opacity:0;filter:drop-shadow(0 0 5px #85b1ff6b);transform-origin:0;height:1px;animation:meteorFall var(--meteor-duration) linear var(--meteor-delay) infinite;will-change:transform, opacity;background:linear-gradient(90deg,#cadeffc7,#92b9ff4d 35%,#0000 100%);border-radius:999px;position:absolute;transform:translate(16vw,-18vh)rotate(-48deg)}.rain-background span:before{content:"";background:#eef5ff;border-radius:50%;width:3px;height:3px;position:absolute;top:50%;left:-2px;transform:translateY(-50%);box-shadow:0 0 8px #afcdffd9}.app{z-index:1;background:0 0;flex-direction:column;min-height:100svh;display:flex;overflow:clip}.app:after{content:none!important;display:none!important}.app:before{background:radial-gradient(circle at 14% 8%,#4c7ed514,#0000 27%),radial-gradient(circle at 86% 34%,#845bd20e,#0000 24%),linear-gradient(#ffffff05 1px,#0000 1px) 0 0/52px 52px,linear-gradient(90deg,#ffffff05 1px,#0000 1px) 0 0/52px 52px;-webkit-mask-image:linear-gradient(#000 0%,#000000bf 72%,#0000 100%);mask-image:linear-gradient(#000 0%,#000000bf 72%,#0000 100%)}.topbar{height:var(--nav-h);padding:13px var(--page-x)}.topbar-inner{width:min(100%, var(--shell));border-radius:19px;grid-template-columns:190px minmax(0,1fr) 190px;min-height:70px}.desktop-nav{justify-self:center}.topbar-brand-zone{align-items:center;gap:10px;display:flex}.desktop-nav a{min-height:46px;padding-inline:15px;font-size:13px}.code-brand-mark{color:#dce9ff;background:linear-gradient(145deg,#9ac2ff24,#b8a8ff0e);border:1px solid #9ac2ff47;border-radius:15px;flex:0 0 48px;place-items:center;width:48px;height:48px;transition:transform .25s,border-color .25s,box-shadow .25s;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff14,0 8px 22px #0000003d}.code-brand-mark:before{content:"";background:linear-gradient(90deg,#0000,#ffffff1f,#0000);transition:transform .45s;position:absolute;inset:-45% 38% -45% -25%;transform:rotate(20deg)}.code-brand-mark svg{width:22px;height:22px;position:relative}.code-brand-dot{background:#72e6a7;border:1px solid #172018;border-radius:50%;width:6px;height:6px;position:absolute;bottom:5px;right:5px;box-shadow:0 0 8px #72e6a7b3}.topbar-brand:hover .code-brand-mark,.drawer-profile:hover .code-brand-mark{border-color:#9ac2ff94;transform:rotate(-4deg)scale(1.05);box-shadow:inset 0 1px #ffffff1a,0 10px 28px #567ec533}.topbar-brand:hover .code-brand-mark:before,.drawer-profile:hover .code-brand-mark:before{transform:translate(90%)rotate(20deg)}.brand-copy strong{font-size:15px}.brand-copy small{font-size:11px}.topbar-cv{min-height:46px;padding-inline:18px;font-size:13px}.language-switcher{width:66px;height:48px;color:var(--text-soft);background:linear-gradient(145deg,#9ac2ff29,#ffffff09);border:1px solid #9ac2ff6b;border-radius:15px;align-items:center;gap:0;padding:0;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;display:flex;position:relative;box-shadow:inset 0 1px #ffffff12,0 9px 24px #3b69b429}.language-switcher:hover,.language-switcher:focus-within{background:linear-gradient(145deg,#9ac2ff3b,#ffffff12);border-color:#9ac2ffbf;box-shadow:inset 0 1px #ffffff1a,0 11px 28px #567ec540}.language-switcher:hover{transform:translateY(-2px)}.language-switcher-trigger{width:100%;height:100%;color:inherit;border-radius:inherit;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:7px;padding:0 9px;display:flex}.language-switcher-trigger>svg:last-child{flex:none;width:14px;height:14px;transition:transform .2s}.language-switcher.is-open .language-switcher-trigger>svg:last-child{transform:rotate(180deg)}.language-flag{border-radius:3px;flex:none;width:27px;height:18px;display:block;overflow:hidden;box-shadow:0 1px 5px #00000059}.language-menu{z-index:100;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#141821fa;border:1px solid #9ac2ff4d;border-radius:14px;gap:4px;width:148px;padding:6px;animation:.16s both profileModalIn;display:grid;position:absolute;top:calc(100% + 9px);right:0;box-shadow:0 18px 45px #00000075}.language-menu button{min-height:42px;color:var(--text-soft);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:9px;align-items:center;gap:10px;padding:0 10px;font-size:13px;font-weight:600;transition:color .18s,background .18s;display:flex}.language-menu button:hover{color:var(--text);background:#ffffff12}.language-menu button.active{color:#fff;background:linear-gradient(135deg,#8bb8ff33,#b49cff1f)}.language-menu button.active:after{content:"✓";color:var(--blue);margin-left:auto;font-weight:700}.language-menu .language-flag{width:25px;height:17px}.main{flex:1 0 auto;width:100%;min-height:0!important;padding:calc(var(--nav-h) + clamp(52px, 7vh, 86px)) var(--page-x) clamp(84px, 10vw, 132px)!important;margin:0!important}.home-main{display:block!important}.home-content,.about-page,.projects-page,.experience-page,.tools-page,.contact-page{width:min(100%, var(--content))!important;max-width:var(--content)!important;margin-inline:auto!important}.home-content{max-width:1120px!important;padding-top:clamp(14px,4vh,48px)!important}.hero-intro{grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);align-items:center;gap:clamp(30px,5vw,76px);min-height:560px;display:grid}.hero-copy{min-width:0}.hero-visual{isolation:isolate;min-height:430px;position:relative}.hero-visual:before{content:"";z-index:-2;filter:blur(2px);background:radial-gradient(circle at 45% 35%,#9ac2ff3b,#6252aa1c 45%,#0000 70%);border-radius:42% 58% 52% 48%/44% 40% 60% 56%;position:absolute;inset:13% 2% 5% 8%}.hero-photo-frame{aspect-ratio:.82;background:linear-gradient(160deg,#9ac2ff24,#b8a8ff0d);border:1px solid #ffffff2e;border-radius:160px 160px 28px 28px;width:min(88%,340px);position:absolute;bottom:34px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 38px 90px #00000061}.hero-photo-frame:after{content:"";background:linear-gradient(#0000,#0d1017eb);height:38%;position:absolute;inset:auto 0 0}.hero-photo-frame img{object-fit:cover;object-position:center top;filter:saturate(.86)contrast(1.04);width:100%;height:100%;display:block}.hero-orbit{z-index:-1;border:1px solid #9ac2ff2e;border-radius:50%;position:absolute;top:49%;left:50%;transform:translate(-50%,-50%)rotate(-18deg)}.hero-orbit-one{aspect-ratio:1;width:118%}.hero-orbit-two{aspect-ratio:1;border-style:dashed;width:92%;transform:translate(-50%,-50%)rotate(22deg)}.hero-floating-card{z-index:3;color:var(--text);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#12161ed1;border:1px solid #ffffff24;border-radius:13px;align-items:center;gap:9px;padding:11px 13px;animation:5s ease-in-out infinite heroFloat;display:flex;position:absolute;box-shadow:0 16px 38px #00000057}.hero-floating-card svg{width:18px;height:18px;color:var(--blue)}.hero-floating-card span{gap:2px;display:grid}.hero-floating-card strong{font-size:11px}.hero-floating-card small{color:var(--text-muted);white-space:nowrap;font-size:9px}.hero-float-code{top:72px;left:-16px}.hero-float-data{animation-delay:-2.4s;bottom:82px;right:-6px}.hero-visual-label{color:var(--text-muted);align-items:flex-start;gap:8px;display:flex;position:absolute;top:30px;right:4px}.hero-visual-label span{color:var(--blue);font-size:10px}.hero-visual-label p{letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:10px;line-height:1.35}@keyframes heroFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.hero-kicker,.page-eyebrow{width:fit-content;color:var(--text-soft);letter-spacing:.035em;text-transform:uppercase;align-items:center;gap:9px;margin-bottom:22px;font-size:12px;font-weight:650;display:flex}.hero-kicker span{background:#72e6a7;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 5px #72e6a71a,0 0 18px #72e6a773}.home-content h1{max-width:760px;font-size:clamp(54px,6.2vw,88px)!important;line-height:.93!important}html[lang=th] .home-content h1.hero-select-title-th{letter-spacing:-.035em;font-size:clamp(42px,4.65vw,66px)!important;line-height:1.08!important}.home-role-line{min-height:1.5em;margin:25px 0 27px!important;font-size:clamp(17px,2.1vw,26px)!important}.role-typing{min-width:320px}.social-card{margin-top:0}.hero-actions{flex-wrap:wrap;align-items:center;gap:10px;margin:24px 0 42px;display:flex}.hero-primary,.hero-secondary{border-radius:14px;justify-content:center;align-items:center;gap:9px;min-height:48px;padding:0 18px;font-size:13px;font-weight:700;transition:transform .22s,border-color .22s,background .22s;display:inline-flex}.hero-primary{color:#10141b;background:linear-gradient(135deg,#fff,#dce9ff)}.hero-secondary{color:var(--text);border:1px solid var(--border-strong);background:#ffffff09}.hero-primary:hover,.hero-secondary:hover{transform:translateY(-2px)}.home-story{border-top:1px solid var(--border);border-bottom:1px solid var(--border);grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:clamp(42px,7vw,96px);margin:clamp(56px,8vw,96px) 0 38px;padding:clamp(34px,5vw,58px) 0;display:grid;position:relative}.home-story:before{content:"";background:linear-gradient(90deg, var(--blue), transparent);width:min(180px,24%);height:1px;position:absolute;top:-1px;left:0;box-shadow:0 0 16px #9ac2ff59}.story-index{color:var(--blue);letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;font-size:11px;font-weight:700;display:block}.home-story .headline{max-width:650px!important;margin:0!important}.home-story-copy{align-self:end;padding-bottom:4px}.home-story-copy .small-text{margin-top:0!important}.home-story-copy .description{max-width:520px!important}.home-story-copy .talk-text{margin-bottom:0;max-width:520px!important}.headline{max-width:900px!important;font-size:clamp(25px,3.35vw,44px)!important;line-height:1.15!important}.small-text,.description,.talk-text{max-width:790px!important}.home-capabilities{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:none;margin:34px 0 8px;display:grid}.home-capabilities>div{border:1px solid var(--border);background:#ffffff06;border-radius:16px;align-items:center;gap:14px;width:100%;min-width:0;min-height:82px;padding:18px 22px;display:flex}.home-capabilities svg{width:19px;height:19px;color:var(--blue);flex:none}.home-capabilities span{gap:3px;min-width:0;display:grid}.home-capabilities strong{font-size:14px}.home-capabilities small{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.project-card{max-width:none!important;margin-top:34px!important}@media (width>=721px){.home-content{text-align:left}.hero-kicker,.social-card,.hero-actions,.headline,.small-text,.description,.talk-text,.home-capabilities,.project-card,.home-content h1{margin-left:0!important;margin-right:0!important}.home-role-line{justify-content:flex-start}.role-typing{min-width:300px}.hero-actions{justify-content:flex-start}.headline{max-width:900px!important}.small-text,.description,.talk-text{max-width:780px!important}}.project-card{min-height:390px;background:linear-gradient(135deg,#1b212cfa,#12161efa)!important;border-radius:26px!important;grid-template-columns:minmax(340px,1.08fr) minmax(320px,.92fr)!important;gap:0!important;padding:0!important}.project-collage{position:relative;overflow:hidden;background:radial-gradient(circle at 25% 25%,#77a6ff2e,#0000 46%),#121722!important;border:0!important;border-radius:0!important;height:100%!important;min-height:390px!important}.project-collage:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000 65%,#12161ee6);position:absolute;inset:0}.collage-main{border:1px solid #ffffff24;border-radius:18px;position:absolute;inset:44px 34px 48px 30px;overflow:hidden;transform:rotate(-2deg);box-shadow:0 26px 60px #0000006b}.collage-main img,.collage-float img{object-fit:cover;width:100%;height:100%;display:block}.collage-float{z-index:2;aspect-ratio:16/10;border:1px solid #fff3;border-radius:13px;width:44%;transition:transform .35s;position:absolute;overflow:hidden;box-shadow:0 18px 38px #00000080}.collage-float-top{top:25px;right:12px;transform:rotate(5deg)}.collage-float-bottom{bottom:24px;right:24px;transform:rotate(-4deg)}.project-card:hover .collage-float-top{transform:rotate(2deg)translateY(-5px)}.project-card:hover .collage-float-bottom{transform:rotate(-1deg)translateY(4px)}.collage-badge{z-index:4;color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0a0d13d1;border:1px solid #ffffff26;border-radius:999px;align-items:center;gap:7px;padding:9px 12px;font-size:11px;font-weight:700;display:inline-flex;position:absolute;bottom:22px;left:24px}.project-card .project-info{align-self:center;padding:clamp(30px,4vw,52px)}.project-card .project-info>span:first-child{color:var(--blue)}.project-card .project-info h3{max-width:460px;font-size:clamp(24px,2.6vw,35px);line-height:1.12}.project-card .project-info p{max-width:470px}.featured-skills{flex-wrap:wrap;gap:8px;margin-top:20px;display:flex}.featured-skills span{border:1px solid var(--border);background:#ffffff09;border-radius:9px;align-items:center;gap:6px;padding:7px 9px;color:var(--text-soft)!important;letter-spacing:0!important;text-transform:none!important;margin:0!important;font-size:11px!important;font-weight:600!important;display:inline-flex!important}.featured-skills svg{width:13px;height:13px;color:var(--blue)}.project-read-more{margin-top:26px!important}.about-hero,.projects-header,.experience-header,.tools-header,.contact-header{margin-bottom:clamp(30px,4vw,46px)!important}.about-hero h2,.projects-header h2,.experience-header h2,.tools-header h2,.contact-header h2{font-size:clamp(46px,6vw,72px)!important}.about-role,.projects-header p,.experience-header p,.tools-header p,.contact-header p{max-width:680px;font-size:15px}.about-education-card{margin-bottom:22px;padding:clamp(24px,3vw,34px)!important}.about-sections{grid-template-columns:repeat(12,1fr)!important;gap:18px!important}.about-block{grid-column:span 6;padding:clamp(22px,2.5vw,30px)!important}.about-block:nth-child(3),.about-block:nth-child(4){grid-column:span 6}.about-block p{font-size:14.5px}html[lang=th] .about-block h2,html[lang=th] .about-block p{letter-spacing:0;word-break:keep-all;overflow-wrap:normal;line-break:auto}html[lang=th] .about-block h2{line-height:1.4}html[lang=th] .about-block p{font-weight:400;line-height:1.8}.thai-nowrap{white-space:nowrap;display:inline-block}.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important}.project-showcase-card{border-radius:22px!important}.project-preview{aspect-ratio:16/9;overflow:hidden;height:auto!important}.project-preview img{transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .4s}.project-showcase-card:hover .project-preview img{filter:saturate(1.08);transform:scale(1.035)}.project-showcase-body{padding:24px!important}.project-showcase-footer{flex-flow:wrap;justify-content:space-between;align-items:center;gap:14px 18px;width:100%;display:flex}.project-tags{flex:220px;order:1;justify-content:flex-start}.project-actions{flex:none;order:2;margin:0 0 0 auto!important}.project-actions button{white-space:nowrap;justify-content:center;align-items:center;gap:8px;min-height:40px;padding:9px 15px;display:inline-flex}.project-actions button svg{width:11px;height:11px;transition:transform .2s}.project-actions button:hover svg{transform:translate(2px,-2px)}.experience-page{max-width:1040px!important}.experience-timeline{--timeline-progress:0;--timeline-track-height:calc(100% - 60px);position:relative}.experience-timeline:before,.experience-timeline:after{content:"";width:2px;height:var(--timeline-track-height);pointer-events:none;border-radius:999px;position:absolute;top:30px;left:218px}.experience-timeline:before{background:#9ac2ff1f}.experience-timeline:after{transform:scaleY(var(--timeline-progress));transform-origin:top;background:linear-gradient(#9ac2ff 0%,#709eff 68%,#b06cff 100%);transition:transform .12s linear;box-shadow:0 0 12px #709eff57}.experience-item{grid-template-columns:190px 24px minmax(0,1fr)!important;gap:16px!important}.experience-date{white-space:nowrap}.experience-content{padding:clamp(24px,3vw,34px)!important}.experience-content h2{font-size:clamp(19px,2vw,23px)}.experience-marker:before{display:none}.experience-marker span{z-index:2;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}.experience-item.is-reached .experience-marker span{background:#9ac2ff;border-color:#202a3a;box-shadow:0 0 0 1px #9ac2ffb8,0 0 0 7px #9ac2ff14,0 0 18px #709eff61}.experience-item.is-active .experience-marker span{background:#f5f8ff;transform:scale(1.18);box-shadow:0 0 0 2px #7faaff,0 0 0 9px #7faaff1f,0 0 24px #7faaffa6}.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}.tool-box{min-height:178px;padding:26px!important}.tool-tag{transition:transform .18s,background .18s}.tool-tag:hover{background:#ffffff17;transform:translateY(-2px)}.contact-page{max-width:1040px!important}.page-eyebrow{color:var(--blue);margin-bottom:15px}.contact-cta{background:radial-gradient(circle at 85% 20%,#9ac2ff21,#0000 32%),linear-gradient(135deg,#232a38f0,#171b24f0);border:1px solid #9ac2ff38;border-radius:24px;justify-content:space-between;align-items:center;gap:24px;margin-bottom:22px;padding:clamp(26px,4vw,42px);transition:transform .25s,border-color .25s;display:flex}.contact-cta:hover{border-color:#9ac2ff73;transform:translateY(-3px)}.contact-cta span{gap:7px;display:grid}.contact-cta small{color:var(--text-muted);font-size:13px}.contact-cta strong{letter-spacing:-.045em;font-size:clamp(24px,4vw,42px)}.contact-cta>svg{width:38px;height:38px;color:var(--blue)}.contact-social-card{min-height:116px;align-items:center!important}.contact-social-button{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer}.line-modal-overlay{z-index:100000;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#05080dc7;place-items:center;padding:20px;animation:.18s both profileOverlayIn;display:grid;position:fixed;inset:0}.line-modal{border:1px solid var(--border-strong);background:radial-gradient(circle at 12% 0,#06c75524,#0000 34%),#171c25;border-radius:26px;width:min(100%,450px);padding:28px;animation:.22s cubic-bezier(.16,1,.3,1) both profileModalIn;position:relative;box-shadow:0 30px 90px #00000080}.line-modal-close{width:40px;height:40px;color:var(--text-soft);border:1px solid var(--border);cursor:pointer;background:#ffffff0f;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:16px;right:16px}.line-modal-close svg{width:19px;height:19px}.line-modal-close:hover{color:var(--text);background:#ffffff1c}.line-modal-heading{align-items:center;gap:14px;padding-right:42px;display:flex}.line-modal-logo{color:#fff;background:#06c755;border-radius:16px;flex:none;place-items:center;width:50px;height:50px;display:grid}.line-modal-logo svg{width:27px;height:27px}.line-modal-heading h2{color:var(--text);margin:0;font-size:23px;line-height:1.25}.line-modal-heading p{color:var(--text-soft);margin:5px 0 0;font-size:13px;line-height:1.5}.line-qr-frame{background:#fff;border-radius:20px;margin:22px 0 16px;padding:12px;overflow:hidden}.line-qr-frame img{aspect-ratio:1;object-fit:contain;border-radius:12px;width:100%;display:block}.line-download-button{color:#07150c;background:#eefdf3;border:1px solid #06c75561;border-radius:15px;justify-content:center;align-items:center;gap:9px;min-height:50px;font-size:14px;font-weight:700;transition:transform .18s,background .18s;display:flex}.line-download-button:hover{background:#fff;transform:translateY(-2px)}.line-download-button svg{width:18px;height:18px}@media (width<=520px){.line-modal-overlay{align-items:end;padding:10px}.line-modal{border-radius:24px;width:100%;max-height:calc(100dvh - 20px);padding:22px 18px 18px;overflow-y:auto}.line-modal-close{top:13px;right:13px}.line-modal-logo{border-radius:14px;width:44px;height:44px}.line-modal-heading h2{font-size:20px}.line-qr-frame{border-radius:17px;width:min(100%,310px);margin:18px auto 14px;padding:9px}}.about-block,.tool-box,.contact-social-card,.experience-content,.project-showcase-card,.project-card,.about-education-card{box-shadow:0 14px 42px #00000029!important}.footer{flex:none;width:min(calc(100% - (var(--page-x) * 2)), var(--shell))!important;min-height:68px!important;margin:0 auto 20px!important;padding:0 22px!important;position:relative!important;inset:auto!important}@media (width<=1100px){.topbar-inner{grid-template-columns:52px minmax(0,1fr) 196px}.brand-copy{display:none!important}.desktop-nav a{padding-inline:10px}.projects-grid{gap:18px!important}.hero-intro{grid-template-columns:minmax(0,1.45fr) minmax(280px,.7fr);gap:30px}.hero-float-code{left:0}}@media (width<=900px){:root{--nav-h:76px;--page-x:22px}.topbar{padding-top:9px;padding-bottom:9px}.topbar-inner{grid-template-columns:1fr auto;min-height:58px}.brand-copy{display:grid!important}.desktop-nav,.topbar-cv{display:none!important}.mobile-menu-button{display:grid!important;position:static!important}.main{padding-top:calc(var(--nav-h) + 48px)!important}.home-content{padding-top:12px!important}.hero-intro{grid-template-columns:1fr;min-height:0}.hero-visual{width:min(100%,540px);min-height:350px;margin:-10px auto 10px}.hero-photo-frame{width:270px}.hero-orbit-one{width:370px}.hero-orbit-two{width:300px}.hero-float-code{left:6%}.hero-float-data{right:6%}.home-content h1{font-size:clamp(56px,11vw,82px)!important}.role-typing{min-width:260px}.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.tool-box{min-height:0}}@media (width<=720px){:root{--page-x:16px}.main{padding-top:calc(var(--nav-h) + 36px)!important;padding-bottom:76px!important}.home-content h1{font-size:clamp(48px,14.5vw,70px)!important}html[lang=th] .home-content h1.hero-select-title-th{font-size:clamp(31px,7.8vw,48px)!important}.hero-intro{gap:16px}.hero-visual{order:-1;width:100%;min-height:280px;margin:0 auto 12px}.hero-photo-frame{width:210px;bottom:14px}.hero-orbit-one{width:282px}.hero-orbit-two{width:228px}.hero-visual-label{gap:6px;display:flex;top:28px;left:calc(50% + 82px);right:auto}.hero-visual-label span{font-size:9px}.hero-visual-label p{letter-spacing:.07em;font-size:9px;line-height:1.3}.hero-fake-cursor{display:none}.home-role-line{align-items:flex-start;gap:3px!important;display:grid!important}.role-divider{display:none}.role-typing{width:100%;min-width:0;min-height:1.45em}.hero-actions>a{flex:190px}.headline{font-size:clamp(25px,8vw,34px)!important}.home-story{grid-template-columns:1fr;gap:28px;margin:48px 0 30px;padding:32px 0}.home-story-copy{padding:0}.home-capabilities{grid-template-columns:1fr}.home-capabilities small{white-space:normal}.project-card{grid-template-columns:1fr!important}.project-collage{height:260px!important;min-height:260px!important}.project-collage:after{background:linear-gradient(#0000 68%,#12161eb8)}.collage-main{inset:28px 34px 34px 24px}.project-card .project-info{padding:26px!important}.about-sections{grid-template-columns:1fr!important}.about-block,.about-block:nth-child(n){grid-column:auto!important}.projects-grid,.tools-grid,.contact-socials{grid-template-columns:1fr!important}.experience-timeline:before,.experience-timeline:after{left:13px}.experience-item{grid-template-columns:26px minmax(0,1fr)!important;gap:0 12px!important}.experience-marker{grid-area:1/1/span 2;display:flex!important}.experience-marker span{margin-top:4px}.experience-date{grid-column:2;margin-bottom:8px;padding:0 2px!important}.experience-content{grid-column:2}.contact-cta{border-radius:20px}.contact-cta>svg{width:30px;height:30px}.footer{grid-template-columns:1fr auto!important;width:calc(100% - 24px)!important}.footer-center{justify-self:end!important}.footer-right{display:none!important}}@media (width<=440px){:root{--nav-h:70px}.topbar{padding:8px}.topbar-inner{border-radius:16px;min-height:54px;padding:6px 7px}.code-brand-mark{border-radius:12px;flex-basis:40px;width:40px;height:40px}.code-brand-mark svg{width:19px;height:19px}.mobile-menu-button{border-radius:12px!important;width:40px!important;height:40px!important}.topbar-actions{gap:6px}.language-switcher{border-radius:12px;gap:0;width:58px;height:42px;padding:0}.language-switcher-trigger{gap:5px;padding:0 7px}.language-flag{width:24px;height:16px}.language-switcher-trigger>svg:last-child{width:12px;height:12px}.language-menu{width:142px;right:-48px}.brand-copy{display:grid!important}.brand-copy small{display:none!important}.main{padding:calc(var(--nav-h) + 28px) 14px 64px!important}.hero-kicker{letter-spacing:.025em;margin-bottom:16px;font-size:9px}.home-content h1{font-size:clamp(39px,11.8vw,48px)!important;line-height:.98!important}html[lang=th] .home-content h1.hero-select-title-th{font-size:clamp(28px,7.55vw,34px)!important;line-height:1.12!important}.home-role-line{margin:18px 0 20px!important;font-size:16px!important}.social-card{width:100%}.hero-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;margin:16px 0 8px;display:grid}.hero-primary,.hero-secondary{white-space:nowrap;border-radius:12px;width:100%;min-width:0;min-height:42px;padding:0 10px;font-size:11px}.hero-primary svg{width:12px;height:12px}.hero-actions>a{flex:none}.hero-intro{gap:10px}.hero-visual{min-height:226px;margin:0 auto 14px}.hero-photo-frame{border-radius:90px 90px 20px 20px;width:166px;bottom:10px}.hero-orbit-one{width:218px}.hero-orbit-two{width:178px}.hero-floating-card{border-radius:10px;gap:7px;padding:7px 8px}.hero-floating-card svg{width:15px;height:15px}.hero-floating-card strong{font-size:10px}.hero-floating-card small{font-size:8px}.hero-float-code{top:36px;left:2px}.hero-float-data{bottom:34px;right:2px}.hero-visual-label{gap:4px;top:20px;left:calc(50% + 58px);right:auto}.hero-visual-label span,.hero-visual-label p{font-size:7.5px}.home-story{gap:22px;margin:30px 0 24px;padding:28px 0}.story-index{margin-bottom:14px;font-size:10px}.home-story .headline{font-size:28px!important;line-height:1.16!important}.home-story-copy .small-text,.home-story-copy .description,.home-story-copy .talk-text{font-size:14px!important;line-height:1.68!important}.home-story-copy .description{margin-top:14px}.home-story-copy .talk-text{margin-top:18px}.home-capabilities{gap:10px;margin-top:24px}.home-capabilities>div{min-height:68px;padding:14px 16px}.home-capabilities strong{font-size:13px}.home-capabilities small{font-size:11px}.about-hero h2,.projects-header h2,.experience-header h2,.tools-header h2,.contact-header h2{font-size:44px!important}.about-education-card,.about-block,.tool-box,.experience-content,.project-showcase-body{padding:20px!important}.project-showcase-footer{align-items:stretch}.project-tags{flex-basis:100%}.project-actions{width:100%;margin-left:0!important}.project-actions button{width:100%}.project-collage{height:220px!important;min-height:220px!important}.collage-main{border-radius:13px;inset:24px 28px 30px 18px}.collage-float{width:43%}.collage-badge{bottom:14px;left:15px}.education-item{flex-direction:column;gap:10px}.contact-cta{align-items:flex-end;padding:23px}.contact-cta strong{font-size:25px}.footer{min-height:60px!important}.footer-left,.footer-center{font-size:10px!important}.mobile-drawer{border-radius:20px;width:min(88vw,330px);padding:14px;inset:7px 7px 7px auto}.drawer-header{padding-bottom:14px}.drawer-profile .code-brand-mark{flex-basis:42px;width:42px;height:42px}.drawer-nav{gap:4px;margin-top:14px}.drawer-nav a{min-height:45px;padding:0 13px;font-size:13px}.drawer-cv{min-height:44px}.rain-background span{opacity:0;filter:drop-shadow(0 0 3px #85b1ff4d)}.rain-background span:nth-child(2n){display:none}}@media (width<=340px){.hero-actions{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.rain-background{display:none}}