:root{--primary: #55c57a;--primary-light: #dcffdb;--primary-dark: #3fa864;--secondary: #2c3e50;--text: #333333;--text-light: #666666;--bg: #f8f9fa;--card: #ffffff;--border: #eaeaea;--shadow: rgba(0, 0, 0, .08);--success: #2ecc71;--warning: #f39c12;--danger: #e74c3c;--info: #3498db;--font-heading: "Kanit", sans-serif;--font-body: "Kanit", sans-serif;--font-code: "Fira Code", monospace;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-round: 999px;--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}[data-theme=dark]{--primary: #8be9fd;--primary-light: #263c41;--primary-dark: #63b3d3;--secondary: #e0e0e0;--text: #f0f0f0;--text-light: #aaaaaa;--bg: #121212;--card: #1e1e1e;--border: #333333;--shadow: rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--bg);color:var(--text);line-height:1.6;transition:background-color var(--transition-normal),color var(--transition-normal);min-height:100vh;overflow-x:hidden}a{color:var(--primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary-dark)}img{max-width:100%;height:auto;display:block}button{font-family:var(--font-body);cursor:pointer;border:none;background:none}.app-container{max-width:1200px;margin:0 auto;padding:var(--space-lg);display:flex;flex-direction:column;min-height:100vh;gap:var(--space-2xl)}.app-header{position:sticky;top:0;z-index:100;background-color:var(--card);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);box-shadow:0 4px 12px var(--shadow);border:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl)}.logo{display:flex;align-items:center;gap:var(--space-md)}.logo-img{width:48px;height:48px;border-radius:50%;border:3px solid var(--primary);object-fit:cover}.logo-text{font-size:1.5rem;font-weight:700;color:var(--text)}.header-controls{display:flex;align-items:center;gap:var(--space-md)}.lang-select{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:1px solid var(--border);background-color:var(--bg);color:var(--text);font-family:var(--font-body);cursor:pointer}.theme-toggle{width:48px;height:24px;border-radius:var(--radius-round);background-color:var(--border);position:relative;border:none;cursor:pointer;transition:background-color var(--transition-fast)}.theme-toggle:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background-color:var(--card);transition:transform var(--transition-fast)}[data-theme=dark] .theme-toggle:after{transform:translate(24px)}.hero{text-align:center;padding:var(--space-2xl) 0}.hero-avatar{width:150px;height:150px;border-radius:50%;border:4px solid var(--primary);margin:0 auto var(--space-lg);object-fit:cover}.hero-title{font-size:3rem;font-weight:800;margin-bottom:var(--space-sm);background:linear-gradient(135deg,var(--primary),var(--primary-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.2rem;color:var(--text-light);margin-bottom:var(--space-xl)}.hero-badges{display:flex;justify-content:center;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-xl)}.badge{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-round);font-size:.85rem;font-weight:500;background-color:var(--primary-light);color:var(--primary)}.hero-description{max-width:800px;margin:0 auto;font-size:1.1rem}.section{margin-bottom:var(--space-2xl)}.section-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl)}.section-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background-color:var(--primary-light);color:var(--primary);border-radius:var(--radius-md);font-size:1.2rem}.section-title{font-size:1.8rem;font-weight:700;color:var(--text)}.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-lg)}.skill-category{background-color:var(--card);border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--border)}.skill-category-title{font-size:1.2rem;font-weight:600;margin-bottom:var(--space-md);color:var(--text);display:flex;align-items:center;gap:var(--space-sm)}.skill-tags{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.skill-tag{padding:var(--space-xs) var(--space-sm);background-color:var(--bg);color:var(--text);border-radius:var(--radius-round);font-size:.9rem;border:1px solid var(--border)}.projects-filter{display:flex;gap:var(--space-sm);margin-bottom:var(--space-xl);flex-wrap:wrap}.filter-btn{padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-round);background-color:var(--bg);color:var(--text);border:1px solid var(--border);transition:all var(--transition-fast);font-family:var(--font-body);cursor:pointer}.filter-btn.active{background-color:var(--primary);color:#fff;border-color:var(--primary)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-lg)}.project-card{background-color:var(--card);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);transition:all var(--transition-normal);display:flex;flex-direction:column}.project-card:hover{transform:translateY(-8px);box-shadow:0 12px 24px var(--shadow);border-color:var(--primary)}.project-image{width:100%;height:180px;object-fit:cover}.project-content{padding:var(--space-lg);flex:1;display:flex;flex-direction:column}.project-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}.project-icon{width:32px;height:32px;border-radius:var(--radius-sm);object-fit:cover}.project-title{font-size:1.2rem;font-weight:600;color:var(--text);flex:1}.project-status{padding:2px 8px;border-radius:var(--radius-round);font-size:.75rem;font-weight:600;text-transform:uppercase}.status-developing{background-color:#2ecc7133;color:var(--success)}.status-onhold{background-color:#f39c1233;color:var(--warning)}.project-description{color:var(--text-light);margin-bottom:var(--space-md);flex:1}.project-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.project-tags{display:flex;gap:var(--space-xs);flex-wrap:wrap}.project-tag{padding:2px 8px;background-color:var(--bg);color:var(--text-light);border-radius:var(--radius-round);font-size:.8rem}.project-links{display:flex;gap:var(--space-sm)}.project-link{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background-color:var(--bg);color:var(--text);border-radius:var(--radius-round);transition:all var(--transition-fast)}.project-link:hover{background-color:var(--primary);color:#fff;transform:scale(1.1)}.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-md)}.link-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background-color:var(--card);border-radius:var(--radius-lg);border:1px solid var(--border);transition:all var(--transition-fast);color:var(--text)}.link-card:hover{background-color:var(--primary-light);border-color:var(--primary);transform:translate(8px);color:var(--text)}.link-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:var(--bg);color:var(--primary);border-radius:var(--radius-round);font-size:1.2rem;flex-shrink:0}.link-content{flex:1}.link-title{font-weight:500;color:var(--text)}.link-description{font-size:.85rem;color:var(--text-light)}.maven-container{display:grid;grid-template-columns:380px 1fr;gap:var(--space-2xl);align-items:stretch}.maven-selectors{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg);background:var(--card);border-radius:var(--radius-lg);border:1px solid var(--border)}.maven-select{width:100%;padding:10px 14px;border-radius:var(--radius-md);border:1px solid var(--border);background-color:var(--bg);color:var(--text);font-family:var(--font-body);font-size:.95rem;cursor:pointer;transition:all var(--transition-fast)}.maven-select:hover{border-color:var(--primary)}.maven-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #6496ff33}.maven-code-area{display:flex;flex-direction:column;gap:var(--space-lg)}.code-block{position:relative;background:linear-gradient(150deg,#1f2026,#181a1f);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.05);padding:60px var(--space-xl) var(--space-xl);font-family:var(--font-code);overflow-x:auto;box-shadow:0 10px 30px #00000059;transition:border var(--transition-fast)}.code-block:hover{border-color:#ffffff14}.code-label{position:absolute;top:14px;left:18px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6;font-weight:500;color:#f8f8f2}.code-block pre{margin:0;white-space:pre-wrap;line-height:1.6;font-size:.9rem;color:#f8f8f2}.copy-btn{position:absolute;top:12px;right:12px;padding:6px 14px;font-size:.8rem;background:#ffffff0f;color:#fff;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08);cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all var(--transition-fast);font-family:var(--font-body)}.copy-btn:hover{background:#ffffff2e;transform:translateY(-1px)}.copy-btn.copied{background:#4caf50;border-color:#4caf50}.news-sidebar{position:fixed;top:0;right:0;width:350px;height:100vh;background-color:var(--card);border-left:1px solid var(--border);padding:var(--space-lg);overflow-y:auto;transform:translate(100%);transition:transform var(--transition-normal);z-index:1000}.news-sidebar.active{transform:translate(0)}.news-toggle-btn{position:fixed;bottom:var(--space-xl);right:var(--space-xl);width:56px;height:56px;border-radius:50%;background-color:var(--primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:0 4px 12px #0003;z-index:999;transition:all var(--transition-fast);cursor:pointer}.news-toggle-btn:hover{background-color:var(--primary-dark);transform:scale(1.1)}.news-item{padding:var(--space-md) 0;border-bottom:1px solid var(--border)}.news-item:last-child{border-bottom:none}.news-date{font-size:.85rem;color:var(--text-light);margin-bottom:var(--space-xs)}.news-category{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;text-transform:uppercase;margin-bottom:var(--space-sm)}.category-announcement{background-color:#3498db33;color:var(--info)}.category-release{background-color:#2ecc7133;color:var(--success)}.category-update{background-color:#f39c1233;color:var(--warning)}.news-content{color:var(--text-light);margin-bottom:var(--space-sm);font-size:.9rem}.news-toggle{font-size:.85rem;color:var(--primary);cursor:pointer;font-family:var(--font-body);padding:0;background:none;border:none}.footer{text-align:center;padding:var(--space-xl) 0;border-top:1px solid var(--border);margin-top:auto}.footer-text{color:var(--text-light);margin-bottom:var(--space-sm)}.hero-actions{display:flex;justify-content:center;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-lg)}.hero-btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-round);border:1px solid var(--border);background-color:var(--card);color:var(--text);font-family:var(--font-body);font-weight:600;font-size:.95rem;transition:all var(--transition-fast);cursor:pointer}.hero-btn:hover{background-color:var(--primary-light);border-color:var(--primary);color:var(--text)}.hero-btn-primary{background-color:var(--primary);border-color:var(--primary);color:#082112}.hero-btn-primary:hover{background-color:var(--primary-dark);border-color:var(--primary-dark);color:#082112}.project-downloads{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);background:color-mix(in srgb,var(--bg) 60%,var(--card));margin-bottom:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}.project-downloads-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap}.dl-grid{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.dl-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-round);border:1px solid var(--border);font-size:.8rem;font-weight:600;color:var(--text);background-color:var(--card);transition:all var(--transition-fast)}.dl-pill:hover{background-color:var(--primary-light);border-color:var(--primary);color:var(--text)}.dl-win{border-color:color-mix(in srgb,#2d7ff9 45%,var(--border))}.dl-linux{border-color:color-mix(in srgb,#f39c12 45%,var(--border))}.dl-mac{border-color:color-mix(in srgb,#a5b1c2 55%,var(--border))}.project-link-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-md);border:1px solid var(--border);font-size:.8rem;font-weight:500;color:var(--text-light);background-color:var(--bg);transition:all var(--transition-fast)}.project-link-pill:hover{background-color:var(--primary);border-color:var(--primary);color:#fff}.hidden{display:none!important}@media(max-width:1100px){.maven-container{grid-template-columns:320px 1fr}}@media(max-width:900px){.maven-container{grid-template-columns:1fr}}@media(max-width:768px){.app-container{padding:var(--space-md)}.app-header{flex-direction:column;gap:var(--space-md);padding:var(--space-md)}.hero-title{font-size:2rem}.section-title{font-size:1.5rem}.skills-grid,.projects-grid,.links-grid,.maven-container{grid-template-columns:1fr}.news-sidebar{width:100%}}@media(max-width:480px){.hero-title{font-size:1.5rem}.hero-subtitle{font-size:1rem}.section-title{font-size:1.3rem}.code-block{padding:55px var(--space-lg) var(--space-lg)}}