:root{color-scheme:dark;--ink:#f6faff;--muted:#c1d4df;--cyan:#b9f0f6;--font:'Manrope','IBM Plex Sans Thai',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#102b40;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.7}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #b9f5ff;outline-offset:6px}button{font:inherit}.atmosphere{position:fixed;inset:0;overflow:hidden;z-index:-2;background:#102b40}.color-field{position:absolute;inset:-30%;filter:blur(70px);will-change:transform,opacity}.field-one{background:radial-gradient(ellipse at 76% 30%,#499aab 0,transparent 38%),radial-gradient(ellipse at 14% 86%,#20446e 0,transparent 44%);animation:drift 28s ease-in-out infinite alternate}.field-two{background:radial-gradient(ellipse at 70% 60%,#825593 0,transparent 42%),radial-gradient(ellipse at 20% 30%,#234d80 0,transparent 42%);opacity:0;animation:colorfade 30s ease-in-out infinite}.field-three{background:radial-gradient(ellipse at 90% 30%,#987267 0,transparent 35%),radial-gradient(ellipse at 20% 70%,#277c7e 0,transparent 45%);opacity:0;animation:colorfade 30s ease-in-out -15s infinite}.grain{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.16' d='M0 0h180v180H0z'/%3E%3C/svg%3E");opacity:.18}.glass{background:linear-gradient(120deg,#e1faff20,#e1faff08 45%,#c4f9ff19);border:1px solid #e3f9ff38;box-shadow:inset 1px 1px 0 #fff5,inset -1px -1px 0 #d2faff15,0 18px 50px #00132120;backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}.topbar{position:fixed;top:30px;left:4.3vw;right:4.3vw;z-index:20;display:flex;align-items:center;justify-content:space-between}.wordmark{font-size:28px;font-weight:800;letter-spacing:-2px;display:flex;align-items:center;gap:18px}.wordmark span{font-size:12px;letter-spacing:2.4px;font-weight:600}.chapter-nav{position:fixed;left:50%;bottom:35px;transform:translateX(-50%);display:flex;padding:7px;border-radius:40px;z-index:30;white-space:nowrap}.chapter-nav a{font-size:14px;color:#d9e8ee;padding:11px 19px;border-radius:30px;transition:background .3s,color .3s}.chapter-nav a span{font-size:11px;opacity:.6;margin-right:7px}.chapter-nav a[aria-current]{background:#edfaff;color:#193b4b;box-shadow:0 3px 15px #08273833}.chapter-nav a:hover{background:#ffffff20}.chapter-nav a[aria-current]:hover{background:white}.chapter{min-height:100svh}.scene{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:105px 7vw 115px}.composition{width:min(1160px,100%);display:grid;grid-template-columns:1.12fr 1fr;gap:50px;align-items:center}.copy{position:relative;z-index:2}.eyebrow{color:var(--cyan);font-size:12px;letter-spacing:3px;font-weight:700;margin:0 0 20px}.greeting{font-size:24px;margin:0 0 6px;color:#d0e7ed}h1{font-size:clamp(65px,6.7vw,100px);line-height:1.15;letter-spacing:-2px;margin:0;font-weight:500}h1 span{color:#c9f3f8}.english-name{font-size:15px;letter-spacing:6px;margin:22px 0 30px}.intro-card{border-radius:24px;padding:22px 28px;max-width:510px}.intro-card p{color:#d4e5ec;margin:10px 0;font-size:16px}.intro-card .role{color:white;font-size:17px;font-weight:600;margin:0 0 9px}.role span{color:var(--cyan);padding:0 4px}.text-link{font-size:14px;display:inline-block;color:var(--cyan);margin-top:12px}.text-link span{margin-left:12px}.portrait-stage{height:min(620px,70vh);position:relative;display:flex;justify-content:center;align-items:end}.portrait-halo{position:absolute;inset:14% 3% 3%;border:1px solid #e7faff38;border-radius:49% 49% 30% 30%;background:linear-gradient(140deg,#d1faff25,#b8dfff05 50%,#d3ffff15);box-shadow:inset 2px 2px 2px #dfffff20,0 0 90px #bde7ff12;transform:rotate(-9deg)}.portrait{height:100%;width:100%;object-fit:contain;object-position:bottom;position:relative;filter:drop-shadow(12px 18px 20px #071d3833);mask-image:linear-gradient(#000 87%,transparent 100%)}.portrait.temporary{border-radius:48% 48% 24px 24px;object-fit:cover;opacity:.9}.screen-footer{position:fixed;bottom:43px;left:4.3vw;right:4.3vw;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:10;font-size:12px;letter-spacing:1px;color:#c4d8e2}.scroll-cue{position:fixed;bottom:116px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.5px}.scroll-cue span{margin-left:10px}.page-counter{font-size:20px;color:white}.page-counter span{font-size:12px;color:#b8ccd7;margin-left:8px}.skip-link{position:fixed;left:20px;top:-100px;z-index:100;background:#fff;color:#123;padding:12px 20px}.skip-link:focus{top:15px}@keyframes drift{to{transform:translate(-5%,5%) scale(1.1)}}@keyframes colorfade{0%,100%{opacity:0}50%{opacity:.8}}@media(max-width:850px){.wordmark span{display:none}.scene{padding:110px 6vw 140px}.composition{gap:20px}.chapter-nav a{padding:10px 12px}.chapter-nav a span{display:none}.section-label{display:none}.screen-footer{justify-content:flex-end}.intro-card{padding:18px}.english-name{font-size:12px;letter-spacing:3px}h1{font-size:60px}.intro-card .role{font-size:15px}}@media(max-width:600px){.topbar{top:18px;left:6vw;right:6vw}.composition{display:flex;flex-direction:column;align-items:stretch;gap:22px}.scene{padding:110px 7vw 155px}.eyebrow{margin-bottom:14px;font-size:11px}.greeting{font-size:20px}h1{font-size:58px}h1 br{display:none}h1 span{margin-left:12px}.english-name{margin:12px 0 23px}.portrait-stage{height:360px;width:85%;align-self:center}.chapter-nav{bottom:22px;width:calc(100% - 24px);justify-content:space-between;padding:5px}.chapter-nav a{font-size:12px;padding:10px 9px}.page-counter{display:none}.scroll-cue{bottom:87px}.intro-card p br{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.color-field{animation:none!important}.field-two,.field-three{opacity:.15}}
:root{--scene-height:100svh}h2{font-weight:500;font-size:clamp(38px,4vw,58px);letter-spacing:-1.5px;line-height:1.28;margin:0 0 24px}h2 span{color:#c9f3f8}h3{font-weight:600;font-size:18px;line-height:1.5;margin:0 0 6px}p{margin-top:0}.overline{font-size:14px;color:var(--cyan);margin-bottom:9px}.education-card,.contact-card{border-radius:24px;padding:25px 28px}.education-card .career-item:first-child h3{font-size:22px;margin-top:0}.education-card h3 span{font-weight:400;font-size:16px}.education-card .career-item:first-child>p:not(.overline){color:#d1e3eb;font-size:16px;margin-bottom:12px}.degree-stats{display:flex;gap:42px;border-bottom:1px solid #fff2;padding:7px 0 17px;margin-bottom:16px}.degree-stats div{display:flex;flex-direction:column}.degree-stats strong{font-weight:500;font-size:38px;line-height:1.2;letter-spacing:-1px}.degree-stats span{color:#c1d6e2;font-size:12px;margin-top:7px}.card-bottom{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:12px;color:#cedfe8}.card-bottom a{color:#d0f7ff;white-space:nowrap}.student-stage{height:min(530px,60vh)}.student-stage .portrait{width:155%;max-width:none;object-fit:cover;object-position:53% 60%;height:100%;mask-image:linear-gradient(#000 70%,transparent)}.student-stage .portrait-halo{inset:8% -4% 5%}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:28px}.section-heading h2{margin-bottom:0}.section-heading .eyebrow{margin-bottom:13px}.section-intro{font-size:16px;color:#c9dfe9;margin:0 0 8px}.work-layout,.stack-layout{width:min(1160px,100%)}.work-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:26px}.career{padding:23px 27px;border-radius:25px}.career-item{position:relative;margin-left:6px;padding:0 0 19px 22px;border-left:1px solid #d2f4ff40}.career-item:last-child{padding-bottom:0}.career-item::before{content:'';position:absolute;width:7px;height:7px;background:#c6f3ff;border-radius:50%;left:-4px;top:10px;box-shadow:0 0 12px #b8eeff66}.career-item .year{font-size:12px;letter-spacing:1px;color:#aee7f5}.career-item h3{font-size:16px;margin-top:5px}.career-item p{font-size:14px;color:#d1e1e9;margin:0}.career-item .career-detail{font-size:14px;margin:9px 0 0;color:#bcd3df;line-height:1.7}.project{display:flex;align-items:start;gap:16px;padding:20px 23px;border-radius:22px;margin-bottom:13px}.project-number{font-size:12px;color:#b7d3df;margin-top:5px}.project h3{font-size:18px;margin-bottom:1px}.project p{font-size:14px;color:#d2e2ea;margin:0 0 3px}.project-tech{font-size:12px;letter-spacing:.2px;color:#b5dae9}.project-mark{margin-left:auto;font-size:24px;color:#bce8f6;line-height:1}.other-work{font-size:12px;color:#c3d7e2;margin:16px 0 0;text-align:center}.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.stack-card{border-radius:24px;padding:22px 25px;min-height:170px;transition:background .3s,transform .3s}.stack-card:hover{background-color:#d8faff0c;transform:translateY(-4px)}.stack-icon{display:block;font-size:25px;font-weight:500;color:#b7eaf7;line-height:1.2;margin-bottom:14px}.stack-card h3{font-size:17px}.stack-card p{font-size:14px;line-height:1.8;color:#cddfe8;margin:0}.seated-stage{height:min(550px,66vh)}.seated-stage .portrait{width:135%;max-width:none;object-fit:contain}.interest-intro{font-size:16px;color:#d2e4ec;margin:0 0 20px}.interest-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.interest-tags span{padding:6px 14px;border-radius:30px;font-size:13px}.contact-card{padding:21px 26px}.contact-card .overline{font-size:11px;letter-spacing:2px}.contact-card h3{font-size:23px;margin:0 0 7px}.contact-card p:not(.overline){font-size:14px;color:#c6dce7;margin:0 0 13px}.contact-email{font-size:17px;color:#d4f8ff;display:inline-block}.contact-links{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;color:#c0dce9;margin-top:15px}.contact-links a:hover,.text-link:hover,.card-bottom a:hover{text-decoration:underline;text-underline-offset:4px}.journey-progress{position:fixed;top:0;left:0;right:0;height:2px;background:#c6f5ff0a;z-index:50}.journey-progress span{display:block;height:100%;background:#bceef3;transform:scaleX(0);transform-origin:left}.depth-mode .chapter{height:175vh;min-height:0}.depth-mode .scene{position:fixed;inset:0;min-height:0;will-change:transform,opacity;transform-origin:50% 50%;backface-visibility:hidden}.depth-mode .scene .copy{transition:translate .25s ease-out}.depth-mode main{isolation:isolate}.reduce-motion .color-field{animation:none!important}.reduce-motion .field-two,.reduce-motion .field-three{opacity:.12}.reduce-motion .stack-card{transition:none}.reduce-motion .stack-card:hover{transform:none}.reduce-motion .scroll-cue{display:none}.chapter{scroll-margin-top:0}@media(min-width:1000px) and (max-height:850px){.scene{padding-top:115px;padding-bottom:130px}.portrait-stage{height:540px;max-height:67vh}h1{font-size:74px}.greeting{font-size:20px}.english-name{margin:15px 0 20px}.intro-card{padding:18px 24px}h2{font-size:44px;margin-bottom:20px}.section-heading{margin-bottom:22px}.project{padding:16px 20px;margin-bottom:11px}.career{padding:20px 24px}.career-item{padding-bottom:14px}.stack-card{min-height:150px;padding:18px 23px}.stack-icon{margin-bottom:8px}.education-card{padding:21px 25px}.degree-stats strong{font-size:34px}.interest-tags{margin-bottom:18px}.interests-layout .eyebrow{margin-bottom:14px}.contact-card{padding:17px 22px}.student-stage{max-height:53vh}.seated-stage{max-height:58vh}}@media(max-width:999px),(max-height:739px){.scene{padding-top:135px;padding-bottom:130px}.section-heading{align-items:start}.work-grid{grid-template-columns:1fr 1fr}.stack-card{padding:20px}.screen-footer{display:none}.chapter-nav{bottom:22px}.chapter{min-height:100svh}.education-layout .portrait-stage,.interests-layout .portrait-stage{height:410px}.education-card{padding:20px}.degree-stats{gap:24px}.contact-email{font-size:15px}}@media(max-width:700px){.section-heading{display:block}.section-intro{margin-top:20px}.section-heading>.text-link{margin-top:12px}.work-grid{grid-template-columns:1fr}.stack-grid{grid-template-columns:1fr 1fr;gap:12px}.stack-card{padding:20px 17px;min-height:180px}.stack-card h3{font-size:16px}.stack-card p{font-size:14px}.work-layout h2,.stack-layout h2{font-size:42px}.section-heading{margin-bottom:25px}.student-stage{overflow:hidden}.education-layout,.interests-layout{flex-direction:column-reverse}.education-layout .portrait-stage{height:330px;width:100%;margin-top:20px}.interests-layout .portrait-stage{height:370px;width:85%;margin-top:20px}.student-stage .portrait{width:125%;object-fit:contain}.scene{padding:125px 7vw 125px}.contact-card{padding:22px}.contact-links{gap:20px}.card-bottom{font-size:12px}.portrait-stage{margin-top:12px}.interest-intro br{display:none}h2{font-size:40px;letter-spacing:-1px}.stack-layout .eyebrow,.work-layout .eyebrow{margin-bottom:17px}}@media(max-width:380px){h1{font-size:49px}.chapter-nav a{font-size:11px;padding:10px 7px}.stack-grid{grid-template-columns:1fr}.degree-stats strong{font-size:30px}.intro-card .role{font-size:14px}.contact-email{font-size:14px}}@media(prefers-reduced-motion:reduce){.stack-card{transition:none}.stack-card:hover{transform:none}}


@media(max-width:600px){h1 span{display:block;margin-left:0}.project p,.stack-card p,.career-item p,.career-item .career-detail,.contact-card p:not(.overline){font-size:16px}.project{padding:20px 16px}.project-number{display:none}.stack-grid{grid-template-columns:1fr}.stack-card{min-height:0}.stack-icon{float:right;margin:0}.contact-links{font-size:14px}}

/* The document is a scroll timeline; the visible stage never follows it vertically. */
html.fixed-journey { scrollbar-width: none; }
html.fixed-journey::-webkit-scrollbar { display: none; }
.depth-mode { overflow-x: clip; }
.depth-mode .chapter { height: 0; min-height: 0; }
.depth-mode .scene { height: 100svh; padding: 110px 6vw 100px; overflow: clip; }
.depth-mode .scene > * { flex-shrink: 0; }
.depth-mode .portrait-stage { max-height: calc(100svh - 220px); }
@media (min-width:701px) and (max-height:800px) {
  .depth-mode h2 { font-size: 36px; margin-bottom: 16px; }
  .depth-mode h1 { font-size: 62px; }
  .depth-mode .eyebrow { margin-bottom: 12px; }
  .depth-mode .greeting { font-size: 19px; }
  .depth-mode .english-name { margin: 12px 0 18px; }
  .depth-mode .intro-card, .depth-mode .education-card, .depth-mode .contact-card { padding: 16px 21px; }
  .depth-mode .section-heading { margin-bottom: 18px; }
  .depth-mode .project { padding: 12px 18px; margin-bottom: 10px; }
  .depth-mode .career { padding: 16px 20px; }
  .depth-mode .career-item { padding-bottom: 12px; }
  .depth-mode .stack-card { min-height: 0; padding: 16px 20px; }
  .depth-mode .stack-icon { float: right; margin: 0; font-size: 22px; }
  .depth-mode .stack-grid { gap: 14px; }
  .depth-mode .interest-tags { margin-bottom: 16px; }
  .depth-mode .interest-intro { margin-bottom: 14px; }
}
@media (max-width:700px) {
  .depth-mode .scene { padding: 116px 6vw 86px; align-items: center; }
  .depth-mode .composition { display: block; position: relative; }
  .depth-mode .copy { position: relative; }
  .depth-mode h1 { font-size: 49px; line-height: 1.13; }
  .depth-mode h2, .depth-mode .work-layout h2, .depth-mode .stack-layout h2 { font-size: 32px; line-height: 1.25; margin-bottom: 18px; }
  .depth-mode .eyebrow { font-size: 10px; letter-spacing: 1.8px; margin-bottom: 13px; }
  .depth-mode .greeting { font-size: 18px; }
  .depth-mode .english-name { font-size: 11px; letter-spacing: 2px; margin: 14px 0 24px; }
  .depth-mode .portrait-stage { position: absolute; right: -4%; top: 12px; width: 45%; height: 225px; max-height: none; margin: 0; z-index: -1; }
  .depth-mode .portrait-halo { inset: 4% 0 2%; }
  .depth-mode .intro-card { margin-top: 28px; padding: 18px; }
  .depth-mode .intro-card .role { font-size: 15px; }
  .depth-mode .education-layout .portrait-stage { top: -12px; right: -2%; width: 35%; height: 155px; }
  .depth-mode .education-layout .portrait { width: 140%; object-fit: cover; }
  .depth-mode .education-card { padding: 20px; }
  .depth-mode .education-card .career-item:first-child h3 { font-size: 20px; }
  .depth-mode .degree-stats { gap: 28px; padding: 6px 0 15px; }
  .depth-mode .degree-stats strong { font-size: 30px; }
  .depth-mode .education-card .career-item { padding-bottom: 12px; }
  .depth-mode .education-card .career-item + .career-item h3 { font-size: 15px; margin: 0; }
  .depth-mode .education-card .career-item + .career-item p { font-size: 13px; line-height: 1.5; }
  .depth-mode .section-heading { margin-bottom: 16px; }
  .depth-mode .section-intro { display: none; }
  .depth-mode .section-heading .text-link { margin: 0; }
  .depth-mode .work-grid, .depth-mode .stack-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .depth-mode .career { padding: 21px; }
  .depth-mode .project { padding: 16px; margin-bottom: 12px; }
  .depth-mode .other-work { margin-top: 8px; }
  .depth-mode .stack-card { padding: 15px 19px; min-height: 0; }
  .depth-mode .stack-icon { float: right; margin: 0; }
  .depth-mode .stack-card p { font-size: 16px; line-height: 1.65; }
  .compact-stage #experience [data-page="0"] .projects,
  .compact-stage #experience [data-page="1"] .career,
  .compact-stage #stack [data-page="0"] .stack-card:nth-child(n+4),
  .compact-stage #stack [data-page="1"] .stack-card:nth-child(-n+3) { display: none; }
  .depth-mode .interests-layout .portrait-stage { top: 7px; right: -5%; width: 37%; height: 145px; }
  .depth-mode .interests-layout h2 { max-width: 74%; font-size: 30px; }
  .depth-mode .interest-intro { font-size: 15px; margin: 20px 0 16px; }
  .depth-mode .interest-tags { gap: 6px; margin-bottom: 18px; }
  .depth-mode .interest-tags span { font-size: 12px; padding: 5px 11px; }
  .depth-mode .contact-card { padding: 18px; }
  .depth-mode .contact-card p:not(.overline) { font-size: 14px; }
  .depth-mode .contact-links { gap: 14px; font-size: 12px; }
}
@media (max-height:620px) {
  .depth-mode .scene { padding-top: 85px; padding-bottom: 78px; }
  .depth-mode .scene > * { max-height: calc(100svh - 163px); overflow-y: auto; scrollbar-width: thin; }
}


.card-note{margin:14px 0 0;padding-top:12px;border-top:1px solid #fff2;font-size:12px;line-height:1.5;color:#cfe2ea}.card-note span{font-size:18px;color:#c3f3ff;margin-right:10px;vertical-align:-2px}.card-note strong{color:#fff;font-weight:500}
.particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media (max-width:700px) { .depth-mode .card-note { display: none; } }
@media (min-width:701px) and (max-height:800px) { .depth-mode .card-note { margin-top: 10px; padding-top: 8px; } }
.tint{position:absolute;inset:0;mix-blend-mode:color;opacity:.75;transition:background-color .6s ease-out}
.cv-link{display:flex;align-items:center;gap:8px;border-radius:30px;padding:9px 18px;font-size:14px;font-weight:600}.cv-link:hover{background-color:#ffffff1a}
.certificate-dialog{padding:14px;border-radius:22px;max-width:min(92vw,900px);max-height:90svh;color:var(--ink);overflow:hidden}.certificate-dialog::backdrop{background:#04121dcc;backdrop-filter:blur(6px)}.certificate-dialog img{display:block;max-width:100%;max-height:calc(90svh - 28px);border-radius:12px;object-fit:contain}.dialog-close{position:absolute;top:22px;right:22px;width:38px;height:38px;border-radius:50%;border:1px solid #fff5;background:#0b2233cc;color:#fff;font-size:16px;cursor:pointer}
html:has(.certificate-dialog[open]){overflow:hidden}
@media(max-width:600px){.cv-link{padding:7px 13px;font-size:13px}}