@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{font-family:IBM Plex Sans Thai,Space Grotesk,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--color-text-primary);background-color:var(--color-background-base);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-background-base: #f5f9ff;--color-text-primary: #0f172a;--color-text-muted: rgba(15, 23, 42, .6);--color-text-soft: rgba(15, 23, 42, .72);--color-text-subtle: rgba(15, 23, 42, .64);--grid-line-color: rgba(148, 163, 184, .2);--accent-spot-top: rgba(191, 219, 254, .8);--accent-spot-bottom: rgba(165, 243, 252, .7);--accent-glow-one: rgba(191, 219, 254, .55);--accent-glow-two: rgba(165, 243, 252, .45);--accent-primary: rgba(96, 165, 250, .8);--accent-primary-strong: rgba(96, 165, 250, .9);--surface-primary: rgba(255, 255, 255, .95);--border-soft: rgba(148, 163, 184, .22);--shadow-medium: rgba(148, 163, 184, .25);--badge-border: rgba(148, 163, 184, .4);--badge-background: rgba(219, 234, 254, .7);--avatar-border: rgba(148, 163, 184, .35);--avatar-shadow: rgba(148, 163, 184, .35);--avatar-surface: rgba(241, 245, 249, .9);--card-gradient-start: rgba(219, 234, 254, .9);--card-gradient-end: rgba(241, 245, 249, .85);--card-border: rgba(148, 163, 184, .3);--card-shadow-hover: rgba(148, 163, 184, .18);--list-gradient-start: rgba(236, 244, 255, .92);--list-gradient-end: rgba(255, 255, 255, .96);--list-border: rgba(148, 163, 184, .22);--list-shadow: rgba(148, 163, 184, .18);--list-shadow-hover: rgba(148, 163, 184, .22);--contact-gradient-start: rgba(239, 246, 255, .95);--contact-gradient-end: rgba(255, 255, 255, .92);--contact-border: rgba(148, 163, 184, .26);--contact-shadow: rgba(148, 163, 184, .18);--contact-shadow-hover: rgba(148, 163, 184, .24);--history-overlay: rgba(191, 219, 254, .32);--history-item-background: rgba(255, 255, 255, .92);--history-item-border: rgba(148, 163, 184, .22);--history-item-shadow: rgba(148, 163, 184, .2);--history-item-gradient-start: rgba(191, 219, 254, .24);--history-item-gradient-end: rgba(165, 243, 252, .18);--history-item-shadow-hover: rgba(148, 163, 184, .24);--body-gradient-top: rgba(191, 219, 254, .5);--body-gradient-bottom: rgba(165, 243, 252, .4)}*,*:before,*:after{box-sizing:border-box}html,body{min-height:100%}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at top right,var(--body-gradient-top),transparent 55%),radial-gradient(circle at bottom left,var(--body-gradient-bottom),transparent 55%),var(--color-background-base);color:var(--color-text-primary)}a{color:inherit;text-decoration:none}a:hover{text-decoration:none}button{font-family:inherit}#root{width:100%}.page{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:8vh 5vw;color:var(--color-text-primary);overflow:hidden}.background-grid{position:fixed;inset:0;background-image:linear-gradient(var(--grid-line-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line-color) 1px,transparent 1px);background-size:120px 120px;-webkit-mask-image:radial-gradient(circle at center,rgba(0,0,0,.6),transparent 70%);mask-image:radial-gradient(circle at center,rgba(0,0,0,.6),transparent 70%);z-index:0}.background-spot{position:absolute;width:60vw;height:60vw;filter:blur(160px);opacity:.65;pointer-events:none;z-index:0}.spot-top{top:-35vw;right:-20vw;background:radial-gradient(circle,var(--accent-spot-top),transparent 70%)}.spot-bottom{bottom:-30vw;left:-15vw;background:radial-gradient(circle,var(--accent-spot-bottom),transparent 70%)}.layout{position:relative;z-index:2;width:100%;max-width:1100px;display:grid;gap:clamp(2.8rem,5vw,4rem)}@media (min-width: 960px){.layout{grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:start}}.profile-card,.history-card{position:relative;background:var(--surface-primary);border-radius:34px;border:1px solid var(--border-soft);box-shadow:0 32px 70px var(--shadow-medium);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:clamp(2.6rem,6vw,3.6rem)}.profile-card{display:flex;flex-direction:column;gap:clamp(2rem,4vw,2.8rem);text-align:center;overflow:hidden}.profile-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 20%,var(--accent-glow-one),transparent 55%),radial-gradient(circle at 80% 70%,var(--accent-glow-two),transparent 60%);opacity:.85;pointer-events:none}.profile-card>*{position:relative;z-index:1}@media (min-width: 960px){.profile-card{position:sticky;top:2.4rem}}.profile-header{display:flex;flex-direction:column;gap:1.4rem;align-items:center}.badge-bar{display:flex;align-items:center;gap:1rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}.badge{display:inline-flex;align-items:center;padding:.45rem 1.1rem;border-radius:999px;border:1px solid var(--badge-border);background:var(--badge-background);color:var(--color-text-primary);font-weight:600}.location{font-weight:500;color:var(--color-text-soft)}.avatar{width:clamp(104px,16vw,140px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid var(--avatar-border);box-shadow:0 24px 55px var(--avatar-shadow);background:var(--avatar-surface)}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.profile-header h1{margin:0;font-size:clamp(3rem,6vw,4rem);font-weight:600;color:var(--color-text-primary)}.roles{margin:0;font-size:.92rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted)}.intro{max-width:620px;margin:0 auto;line-height:1.8;font-size:1.08rem;color:var(--color-text-soft)}.profile-cards{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem}.card{padding:1.6rem;border-radius:22px;background:linear-gradient(160deg,var(--card-gradient-start),var(--card-gradient-end));border:1px solid var(--card-border);text-align:left;display:flex;flex-direction:column;gap:.8rem;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);border-color:var(--accent-primary);box-shadow:0 20px 40px var(--card-shadow-hover)}.card-label{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted)}.card-value{margin:0;font-size:1rem;color:var(--color-text-primary)}.list-sections{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem}.list-card{padding:1.6rem;border-radius:24px;background:linear-gradient(160deg,var(--list-gradient-start),var(--list-gradient-end));border:1px solid var(--list-border);text-align:left;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 18px 36px var(--list-shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.list-card h2{margin:0;font-size:1.1rem;color:var(--color-text-primary)}.list-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.6rem;color:var(--color-text-soft);font-size:.95rem}.list-card li{display:inline-flex;align-items:center;gap:.45rem}.list-card li:before{content:"•";font-size:1.1em;color:var(--accent-primary-strong)}.list-card:hover{transform:translateY(-4px);border-color:var(--accent-primary);box-shadow:0 26px 48px var(--list-shadow-hover)}.contact{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.contact-link{padding:1.2rem 1.4rem;border-radius:18px;background:linear-gradient(155deg,var(--contact-gradient-start),var(--contact-gradient-end));border:1px solid var(--contact-border);display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;color:var(--color-text-soft);box-shadow:0 16px 36px var(--contact-shadow);transition:transform .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}.contact-link:hover{transform:translateY(-3px);border-color:var(--accent-primary);box-shadow:0 24px 46px var(--contact-shadow-hover);color:var(--color-text-primary)}.contact-label{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted)}.contact-value{font-size:1.04rem;font-weight:500}.history-card{display:flex;flex-direction:column;gap:2.8rem;overflow:hidden}.history-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--history-overlay),transparent 55%);pointer-events:none}.history-card h2{margin:0;font-size:clamp(2.1rem,4vw,2.7rem)}.history-intro{margin:.6rem 0 0;max-width:640px;font-size:1.02rem;line-height:1.75;color:var(--color-text-subtle)}.history-list{list-style:none;padding:0;margin:0;display:grid;gap:1.6rem}.history-item{position:relative;display:grid;gap:.8rem 1.6rem;grid-template-columns:minmax(130px,.38fr) 1fr;align-items:start;padding:1.45rem 1.65rem;border-radius:26px;background:var(--history-item-background);border:1px solid var(--history-item-border);box-shadow:0 24px 44px var(--history-item-shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.history-item:after{content:"";position:absolute;inset:0;border-radius:24px;background:linear-gradient(120deg,var(--history-item-gradient-start),var(--history-item-gradient-end));opacity:0;pointer-events:none;transition:opacity .25s ease}.history-item>*{position:relative;z-index:1}.history-item:hover{transform:translateY(-4px);border-color:var(--accent-primary);box-shadow:0 30px 54px var(--history-item-shadow-hover)}.history-item:hover:after{opacity:1}.history-period{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-muted)}.history-body h3{margin:0;font-size:1.22rem;color:var(--color-text-primary)}.history-body p{margin:.45rem 0 0;font-size:1rem;line-height:1.72;color:var(--color-text-subtle)}@media (max-width: 900px){.history-item{grid-template-columns:1fr;gap:.6rem;padding:1.3rem 1.4rem}.history-period{letter-spacing:.12em}}@media (max-width: 640px){.page{padding:5rem 1.4rem}.profile-card,.history-card{padding:2.2rem 1.5rem}.profile-cards,.list-sections,.contact{grid-template-columns:1fr}}