:root{--primary:#55c57a;--primary-light:#dcffdb;--primary-dark:#3fa864;--secondary:#2c3e50;--text:#333;--text-light:#666;--bg:#f8f9fa;--card:#fff;--border:#eaeaea;--shadow:#00000014;--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:#aaa;--bg:#121212;--card:#1e1e1e;--border:#333;--shadow:#00000080}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--bg);color:var(--text);transition:background-color var(--transition-normal), color var(--transition-normal);min-height:100vh;line-height:1.6;overflow-x:hidden}a{color:var(--primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--primary-dark)}img{max-width:100%;height:auto;display:block}button{font-family:var(--font-body);cursor:pointer;background:0 0;border:none}.section-rail{z-index:90;pointer-events:none;flex-direction:column;align-items:stretch;gap:4px;display:flex;position:fixed;top:50%;right:18px;transform:translateY(-50%)}.section-rail:before{content:"";background:color-mix(in srgb, var(--text-light) 18%, transparent);width:1px;position:absolute;top:15px;bottom:15px;right:10px}.section-rail-link{min-width:118px;min-height:30px;color:var(--text-light);pointer-events:auto;border-radius:var(--radius-md);transition:background-color var(--transition-fast), color var(--transition-fast);background:0 0;padding:5px 34px 5px 8px;display:block;position:relative}.section-rail-link:before{content:"";opacity:.45;width:16px;height:1px;transition:width var(--transition-fast), opacity var(--transition-fast);background:currentColor;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.section-rail-link:after{content:"";border-radius:var(--radius-round);background:var(--bg);opacity:.85;width:9px;height:9px;transition:transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);border:1px solid;position:absolute;top:50%;right:6px;transform:translateY(-50%)}.section-rail-link span{text-align:right;color:inherit;white-space:nowrap;opacity:.82;transition:opacity var(--transition-fast), color var(--transition-fast);font-size:.78rem;font-weight:600;display:block}.section-rail-link:hover,.section-rail-link:focus-visible{color:#2b2f36;backdrop-filter:blur(6px);background:#2b2f361f}.section-rail-link.active{color:var(--primary);background:color-mix(in srgb, var(--primary-light) 44%, transparent);backdrop-filter:blur(6px)}.section-rail-link:hover:before,.section-rail-link:focus-visible:before,.section-rail-link.active:before{opacity:1;width:22px}.section-rail-link:hover:after,.section-rail-link:focus-visible:after{background:#2b2f36;border-color:#2b2f36;transform:translateY(-50%)scale(1.12)}.section-rail-link.active:after{background:var(--primary);border-color:var(--primary);transform:translateY(-50%)scale(1.12)}.section-rail-link.active:hover:after,.section-rail-link.active:focus-visible:after{background:#2b2f36;border-color:#2b2f36}[data-theme=dark] .section-rail-link:hover,[data-theme=dark] .section-rail-link:focus-visible{color:#fff;background:#ffffff24}[data-theme=dark] .section-rail-link:hover:after,[data-theme=dark] .section-rail-link:focus-visible:after,[data-theme=dark] .section-rail-link.active:hover:after,[data-theme=dark] .section-rail-link.active:focus-visible:after{background:#fff;border-color:#fff}.section-rail-link:hover span,.section-rail-link.active span,.section-rail-link:focus-visible span{opacity:1}.app-container{max-width:1200px;padding:var(--space-lg);gap:var(--space-2xl);flex-direction:column;min-height:100vh;margin:0 auto;display:flex}.app-header{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);margin-bottom:var(--space-xl);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.logo{align-items:center;gap:var(--space-md);display:flex}.logo-img{border:3px solid var(--primary);object-fit:cover;border-radius:50%;width:48px;height:48px}.logo-text{color:var(--text);font-size:1.5rem;font-weight:700}.header-controls{align-items:center;gap:var(--space-md);display:flex}.header-link{border-radius:var(--radius-md);border:1px solid var(--border);background-color:var(--bg);color:var(--text);transition:all var(--transition-fast);align-items:center;padding:6px 12px;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-flex}.header-link:hover{background-color:var(--primary);border-color:var(--primary);color:#fff}.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{border-radius:var(--radius-round);background-color:var(--border);cursor:pointer;width:48px;height:24px;transition:background-color var(--transition-fast);border:none;position:relative}.theme-toggle:after{content:"";background-color:var(--card);width:20px;height:20px;transition:transform var(--transition-fast);border-radius:50%;position:absolute;top:2px;left:2px}[data-theme=dark] .theme-toggle:after{transform:translate(24px)}.hero{text-align:center;padding:var(--space-2xl) 0}.hero-avatar{border:4px solid var(--primary);width:150px;height:150px;margin:0 auto var(--space-lg);object-fit:cover;border-radius:50%}.hero-title{margin-bottom:var(--space-sm);background:linear-gradient(135deg, var(--primary), var(--primary-dark));-webkit-text-fill-color:transparent;background-clip:text;font-size:3rem;font-weight:800}.hero-subtitle{color:var(--text-light);margin-bottom:var(--space-xl);font-size:1.2rem}.hero-badges{justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-xl);flex-wrap:wrap;display:flex}.badge{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-round);background-color:var(--primary-light);color:var(--primary);font-size:.85rem;font-weight:500}.hero-description{max-width:800px;margin:0 auto;font-size:1.1rem}.section{margin-bottom:var(--space-2xl)}.section-header{align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl);display:flex}.section-icon{background-color:var(--primary-light);width:48px;height:48px;color:var(--primary);border-radius:var(--radius-md);justify-content:center;align-items:center;font-size:1.2rem;display:flex}.section-title{color:var(--text);font-size:1.8rem;font-weight:700}.skills-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));display:grid}.skill-category{background-color:var(--card);border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--border)}.skill-category-title{margin-bottom:var(--space-md);color:var(--text);align-items:center;gap:var(--space-sm);font-size:1.2rem;font-weight:600;display:flex}.skill-tags{gap:var(--space-sm);flex-wrap:wrap;display:flex}.skill-tag{padding:var(--space-xs) var(--space-sm);background-color:var(--bg);color:var(--text);border-radius:var(--radius-round);border:1px solid var(--border);font-size:.9rem}.projects-filter{gap:var(--space-sm);margin-bottom:var(--space-xl);flex-wrap:wrap;display:flex}.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{gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(320px,1fr));display:grid}.project-card{background-color:var(--card);border-radius:var(--radius-lg);border:1px solid var(--border);transition:all var(--transition-normal);flex-direction:column;display:flex;overflow:hidden}.project-card:hover{box-shadow:0 12px 24px var(--shadow);border-color:var(--primary);transform:translateY(-8px)}.project-image{object-fit:cover;width:100%;height:180px}.project-content{padding:var(--space-lg);flex-direction:column;flex:1;display:flex}.project-header{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);display:flex}.project-icon{border-radius:var(--radius-sm);object-fit:cover;width:32px;height:32px}.project-title{color:var(--text);flex:1;font-size:1.2rem;font-weight:600}.project-status{border-radius:var(--radius-round);text-transform:uppercase;padding:2px 8px;font-size:.75rem;font-weight:600}.status-developing{color:var(--success);background-color:#2ecc7133}.status-onhold{color:var(--warning);background-color:#f39c1233}.project-description{color:var(--text-light);margin-bottom:var(--space-md);flex:1}.project-footer{align-items:flex-start;gap:var(--space-sm);flex-direction:column;margin-top:auto;display:flex}.project-tags{gap:var(--space-xs);flex-wrap:wrap;display:flex}.project-tag{background-color:var(--bg);color:var(--text-light);border-radius:var(--radius-round);padding:2px 8px;font-size:.8rem}.project-links{gap:var(--space-sm);flex-wrap:wrap;display:flex}.project-link{background-color:var(--bg);width:36px;height:36px;color:var(--text);border-radius:var(--radius-round);transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.project-link:hover{background-color:var(--primary);color:#fff;transform:scale(1.1)}.connect-groups{gap:var(--space-xl);flex-direction:column;display:flex}.connect-group{gap:var(--space-md);flex-direction:column;display:flex}.connect-group-title{color:var(--text-light);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.85rem;font-weight:700}.links-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(250px,1fr));display:grid}.link-card{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);display:flex}.link-card:hover{background-color:var(--primary-light);border-color:var(--primary);color:var(--text);transform:translate(8px)}.link-icon{background-color:var(--bg);width:40px;height:40px;color:var(--primary);border-radius:var(--radius-round);flex-shrink:0;justify-content:center;align-items:center;font-size:1.2rem;display:flex}.local-svg-icon{width:1.25rem;height:1.25rem;mask:var(--icon-url) center / contain no-repeat;-webkit-mask:var(--icon-url) center / contain no-repeat;background-color:currentColor;display:block}.link-content{flex:1}.link-title{color:var(--text);font-weight:500}.link-description{color:var(--text-light);font-size:.85rem}.maven-container{gap:var(--space-2xl);grid-template-columns:380px 1fr;align-items:stretch;display:grid}.maven-selectors,.maven-info-panel{gap:var(--space-md);padding:var(--space-lg);background:var(--card);border-radius:var(--radius-lg);border:1px solid var(--border);flex-direction:column;display:flex}.repo-card{padding:var(--space-md);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg);color:var(--text);transition:all var(--transition-fast);flex-direction:column;gap:8px;text-decoration:none;display:flex}.repo-card:hover{border-color:var(--primary);transform:translateY(-1px)}.repo-card-label{color:var(--primary);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;font-weight:700}.repo-card strong{overflow-wrap:anywhere}.repo-card span:last-child{color:var(--text-light);font-size:.9rem;line-height:1.5}.maven-select{border-radius:var(--radius-md);border:1px solid var(--border);background-color:var(--bg);width:100%;color:var(--text);font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast);padding:10px 14px;font-size:.95rem}.maven-select:hover{border-color:var(--primary)}.maven-select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px #6496ff33}.maven-code-area{gap:var(--space-lg);flex-direction:column;display:flex}.code-block{border-radius:var(--radius-lg);padding:60px var(--space-xl) var(--space-xl);font-family:var(--font-code);transition:border var(--transition-fast);background:linear-gradient(150deg,#1f2026,#181a1f);border:1px solid #ffffff0d;position:relative;overflow-x:auto;box-shadow:0 10px 30px #00000059}.code-block:hover{border-color:#ffffff14}.code-block-tabbed{padding-top:58px}.code-label{letter-spacing:.08em;text-transform:uppercase;opacity:.6;color:#f8f8f2;font-size:.75rem;font-weight:500;position:absolute;top:14px;left:18px}.code-heading{align-items:center;gap:10px;display:flex;position:absolute;top:12px;left:18px;right:92px;overflow-x:auto}.code-heading .code-label{flex-shrink:0;position:static}.code-tabs{align-items:center;gap:4px;min-width:0;display:inline-flex}.code-tab{border-radius:var(--radius-sm);color:#f8f8f28f;cursor:pointer;font-family:var(--font-body);transition:all var(--transition-fast);background:0 0;border:1px solid #0000;padding:3px 8px;font-size:.72rem;font-weight:600}.code-tab:hover{color:#f8f8f2e6;border-color:#ffffff14}.code-tab.active{color:#f8f8f2;background:#ffffff0f;border-color:#ffffff24}.code-block pre{white-space:pre-wrap;color:#f8f8f2;margin:0;font-size:.9rem;line-height:1.6}.hljs-keyword,.hljs-built_in,.hljs-name{color:#8be9fd;font-weight:700}.hljs-string,.hljs-quote{color:#f1fa8c}.hljs-attr,.hljs-attribute,.hljs-variable{color:#50fa7b}.hljs-symbol,.hljs-meta,.hljs-section{color:#ffb86c}.hljs-literal,.hljs-number,.hljs-selector-tag{color:#bd93f9}.hljs-tag,.hljs-template-tag{color:#ff79c6}.hljs-comment{color:#8892a6;font-style:italic}.copy-btn{color:#fff;border-radius:var(--radius-sm);cursor:pointer;backdrop-filter:blur(4px);transition:all var(--transition-fast);font-size:.8rem;font-family:var(--font-body);background:#ffffff0f;border:1px solid #ffffff14;padding:6px 14px;position:absolute;top:12px;right:12px}.copy-btn:hover{background:#ffffff2e;transform:translateY(-1px)}.copy-btn.copied{background:#4caf50;border-color:#4caf50}.news-sidebar{background-color:var(--card);border-left:1px solid var(--border);width:350px;height:100vh;padding:var(--space-lg);transition:transform var(--transition-normal);z-index:1000;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%)}.news-sidebar.active{transform:translate(0)}.news-toggle-btn{bottom:var(--space-xl);right:var(--space-xl);background-color:var(--primary);color:#fff;z-index:999;width:56px;height:56px;transition:all var(--transition-fast);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;display:flex;position:fixed;box-shadow:0 4px 12px #0003}.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{color:var(--text-light);margin-bottom:var(--space-xs);font-size:.85rem}.news-category{border-radius:var(--radius-sm);text-transform:uppercase;margin-bottom:var(--space-sm);padding:2px 8px;font-size:.75rem;font-weight:600;display:inline-block}.category-announcement{color:var(--info);background-color:#3498db33}.category-release{color:var(--success);background-color:#2ecc7133}.category-update{color:var(--warning);background-color:#f39c1233}.news-content{color:var(--text-light);margin-bottom:var(--space-sm);overflow-wrap:anywhere;font-size:.9rem;line-height:1.7}.news-content p,.news-content ol,.news-content ul{margin:0 0 var(--space-md)}.news-content ol,.news-content ul{padding-left:1.25rem}.news-content li{margin-bottom:var(--space-sm)}.news-content strong{color:var(--text)}.news-content code{font-family:var(--font-code);background-color:color-mix(in srgb, var(--primary) 10%, transparent);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1px 5px;font-size:.82rem}.news-toggle,.news-toggle-item{color:var(--primary);cursor:pointer;font-size:.85rem;font-family:var(--font-body);background:0 0;border:none;padding:0;font-weight:600}.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{justify-content:center;gap:var(--space-md);margin-top:var(--space-lg);flex-wrap:wrap;display:flex}.hero-btn{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);transition:all var(--transition-fast);cursor:pointer;font-size:.95rem;font-weight:600;display:inline-flex}.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);gap:var(--space-sm);flex-direction:column;display:flex}.project-downloads-header{justify-content:space-between;align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.dl-grid{gap:var(--space-xs);flex-wrap:wrap;display:flex}.dl-select-row{align-items:center;gap:var(--space-xs);flex-wrap:wrap;display:flex}.dl-select{border-radius:var(--radius-md);border:1px solid var(--border);background-color:var(--card);min-width:180px;color:var(--text);font-family:var(--font-body);flex:1;padding:6px 10px;font-size:.82rem}.dl-open-link{white-space:nowrap}.dl-pill{border-radius:var(--radius-round);border:1px solid var(--border);color:var(--text);background-color:var(--card);transition:all var(--transition-fast);align-items:center;padding:3px 10px;font-size:.8rem;font-weight:600;display:inline-flex}.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{border-radius:var(--radius-md);border:1px solid var(--border);color:var(--text-light);background-color:var(--bg);transition:all var(--transition-fast);align-items:center;padding:3px 10px;font-size:.8rem;font-weight:500;display:inline-flex}.project-link-pill:hover{background-color:var(--primary);border-color:var(--primary);color:#fff}.hidden{display:none!important}@media (width<=1100px){.maven-container{grid-template-columns:320px 1fr}}@media (width<=900px){.maven-container{grid-template-columns:1fr}.section-rail{display:none}}@media (width<=768px){.app-container{padding:var(--space-md)}.app-header{align-items:stretch;gap:var(--space-md);padding:var(--space-md);flex-direction:column}.logo{justify-content:center}.header-controls{justify-content:center;gap:var(--space-sm);flex-wrap:wrap;width:100%}.header-link{text-align:center;flex:140px;justify-content:center}.theme-toggle{margin-inline:auto}.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 (prefers-reduced-motion:reduce){.section-rail-link,.section-rail-link:before,.section-rail-link:after,.section-rail-link span{transition:none}}@media (width<=480px){.header-link{flex-basis:120px;padding:6px 10px;font-size:.85rem}.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)}}