@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--paper:#eee9df;--ink:#302d27;--red:#83362e;--line:#ccc5b8;--mono:'IBM Plex Mono',monospace;--body:'Noto Sans Thai',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b65c38;outline-offset:4px}button:disabled{cursor:wait;opacity:.6}[hidden]{display:none!important}.skip-link{position:fixed;left:20px;top:-100px;z-index:100;background:white;padding:16px}.skip-link:focus{top:10px}.site-header{height:110px;margin:0 5%;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:48px}.wordmark{font-size:31px;font-weight:700;letter-spacing:-1.6px}.wordmark span{font:13px var(--mono);vertical-align:top;display:inline-block;margin:5px 0 0 5px}.header-note{font:9px/1.7 var(--mono);letter-spacing:1px;color:#6c675e}.header-contact{margin-left:auto;font:11px var(--mono);border-bottom:1px solid var(--ink);padding-bottom:7px}.header-contact span{margin-left:20px}.studio{position:relative;height:calc(100svh - 183px);min-height:620px;max-height:1100px;overflow:hidden}.studio-heading{position:absolute;z-index:2;left:7%;top:8%;pointer-events:none}.eyebrow{font:10px/1.6 var(--mono);letter-spacing:1.8px;color:var(--red)}.studio-heading h1{font:clamp(46px,5.4vw,83px)/1.03 Georgia,serif;letter-spacing:-3px;margin:24px 0}.studio-heading h1 em{color:var(--red);font-weight:400}.thai-intro{color:#787064;font-size:13px;line-height:1.9}.scene-wrap{position:absolute;inset:0}.scene-wrap canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity 1s}.scene-ready canvas{opacity:1}.scene-ready .scene-fallback{display:none}.studio-caption{position:absolute;bottom:34px;left:7%;right:7%;display:flex;justify-content:space-between;align-items:end;z-index:2;pointer-events:none}.edition,.desk-coordinate{font:9px/1.8 var(--mono);letter-spacing:1px;color:#7e7668}.desk-coordinate{text-align:right}.enter-group{display:flex;align-items:center;flex-direction:column;gap:12px;pointer-events:auto}.enter-button{border:0;background:var(--red);color:#fff7e9;border-radius:3px;padding:15px 27px;min-width:200px;box-shadow:0 4px 0 #592a25;font-size:14px;transition:transform .2s,background .2s}.enter-button:hover{transform:translateY(-3px);background:#6c2c26}.enter-button span{margin-left:25px}.enter-group>span{font-size:10px;color:#736b5f}.site-footer{margin:0 5%;border-top:1px solid var(--line);min-height:73px;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;color:#6f675c}.site-footer i{display:inline-block;width:6px;height:6px;background:#687b5b;border-radius:50%;margin-right:8px}.site-footer button{background:none;border:0;font-size:11px;text-decoration:underline;text-underline-offset:4px}.site-footer>span:last-child{font:9px var(--mono)}.scene-fallback{position:absolute;width:350px;right:18%;top:26%}.fallback-monitor{height:245px;background:#668a82;border:28px solid #c5bdac;border-radius:23px;outline:1px solid #a99d85;box-shadow:18px 24px 0 #afa594,25px 38px 60px #6d625444;display:flex;flex-direction:column;justify-content:center;padding:20px;color:#f3edda}.fallback-monitor>span,.fallback-monitor small{font:8px var(--mono)}.fallback-monitor strong{font:36px Georgia;margin:18px 0}.fallback-monitor strong span{color:#e2b566}.fallback-stand{height:45px;width:125px;background:#b6ad9d;margin:20px auto 0;transform:skew(-10deg)}.fallback-keyboard{height:65px;background:repeating-linear-gradient(90deg,#ccc4b3 0 15px,#b3a995 16px 18px);transform:perspective(300px) rotateX(45deg);box-shadow:0 10px 0 #a99d85;margin-top:10px}
/* The portfolio remains complete and readable before JavaScript starts. */
.desktop{position:relative;min-height:100svh;background:#7d9185}.os-topbar{height:45px;padding:0 22px;background:#eae6da;border-bottom:1px solid #a5a08f;display:flex;align-items:center;gap:20px;font:11px var(--mono)}.os-brand{font-weight:600}.os-brand small{font-size:9px;color:#807a6a;margin-left:8px}.os-caption{color:#7f7869;font-size:9px}.os-topbar>button{margin-left:auto;background:none;border:0;font-size:11px}.desktop-icons{display:flex;flex-wrap:wrap;gap:15px;padding:20px}.desktop-icon{display:flex;align-items:center;flex-direction:column;gap:8px;width:85px;font:10px var(--mono);text-align:center;color:#fffbed;padding:8px 3px;border:1px solid transparent;border-radius:3px}.desktop-icon:hover,.desktop-icon[aria-current=page]{background:#f5f0da20;border-color:#eee9ce50}.pixel-icon{font:30px/42px var(--mono);height:42px;width:49px;color:#eee4c8;text-shadow:2px 2px #444d43;filter:drop-shadow(2px 3px 0 #3d514840)}.icon-projects,.icon-experience{color:#ebc576}.icon-contact{color:#fff2d9}.desktop-watermark{display:none}.os-window{background:#f7f4eb;border:1px solid #4d5146;box-shadow:5px 6px 0 #34483e40;width:min(840px,88%);margin:0 auto 75px}.window-titlebar{height:35px;display:flex;align-items:center;gap:10px;background:#e0ddce;border-bottom:1px solid #9b9786;padding:4px 6px 4px 12px;font:11px var(--mono);touch-action:none;user-select:none}.window-dot{width:9px;height:9px;border:1px solid #675941;background:#b88757}.window-actions{margin-left:auto;display:flex;gap:4px}.window-actions button{border:1px solid #898373;background:#efecdf;box-shadow:inset 1px 1px #fff;width:24px;height:23px;font:17px/17px var(--mono);padding:0}.window-actions button:hover{background:#c8c0a9}.window-toolbar{padding:10px 18px;background:#eeebdf;border-bottom:1px solid #d9d3c3;font:9px var(--mono);display:flex;justify-content:space-between;gap:10px;color:#797360}.window-toolbar>span:last-child{font-size:8px;color:#6b7b5e}.portfolio-section{padding:34px 42px 42px}.portfolio-section+.portfolio-section{border-top:1px solid var(--line)}.portfolio-section h2{font-size:29px;line-height:1.5;font-weight:500;letter-spacing:-.8px;margin:22px 0}.portfolio-section h2>span{color:#8a7865;font-size:.65em;letter-spacing:0}.portfolio-section h3{font-size:16px;font-weight:600}.portfolio-section p{line-height:1.9;color:#6b665a;font-size:13px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.panel-index{font:9px var(--mono);color:#a09580}.welcome h2{font:clamp(44px,6vw,78px)/1.15 Georgia,serif;letter-spacing:-3px;margin:20px 0 12px}.welcome h2>span{font-size:1em;color:var(--red)}.welcome .welcome-role{font:11px/1.7 var(--mono);color:#817965}.welcome-rule{height:1px;background:var(--line);margin:28px 0}.welcome h3{font-size:21px;font-weight:500}.welcome-actions{display:flex;align-items:center;gap:22px;margin-top:28px}.btn{display:inline-block;padding:12px 17px;font-size:12px;border:1px solid #6b2a25}.btn-accent{background:var(--red);color:white;box-shadow:2px 2px 0 #d7cbbb}.text-link{font-size:12px;color:var(--red);display:inline-block;margin:12px 0}.welcome-foot{display:flex;justify-content:space-between;font:8px var(--mono);letter-spacing:1.3px;color:#9b927e;margin-top:48px}.window-status{border-top:1px solid #d0cbb9;padding:7px 12px;display:flex;justify-content:space-between;font:8px var(--mono);color:#827b69;background:#ebe7d9}.taskbar{position:fixed;bottom:0;left:0;right:0;height:44px;background:#e2dfd2;border-top:2px solid #f8f5e9;display:flex;align-items:center;gap:7px;padding:5px 10px;z-index:20;font:10px var(--mono)}.taskbar button,.start-button{background:#e9e5d8;border:1px solid #aaa38f;box-shadow:inset 1px 1px white;padding:7px 14px;font:10px var(--mono)}.start-button{font-weight:600}.taskbar-right{margin-left:auto;display:flex;gap:15px;align-items:center}.taskbar-right button{border:0;box-shadow:none;background:none;font-family:var(--body);padding:4px}.taskbar time{border-left:1px solid #bab39f;padding-left:15px;min-width:72px}.profile-introduction{display:flex;gap:22px;align-items:start;margin:24px 0}.about-portrait{width:90px;height:100px;object-fit:cover;filter:saturate(.6);border:5px solid white;box-shadow:1px 2px 4px #0002}.profile-introduction h3{margin-top:0}.strength-grid,.care-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.garden-content-block,.skill-branch,.service-card,.faq-item{padding:18px;background:#ede8dc;border:1px solid #dad3c3}.garden-content-block h3{margin-top:0}.garden-content-block p{margin-bottom:0}.project-grid{display:grid;gap:13px}.project-card{border:1px solid #d6cdbc;background:#f0ebdf}.project-card summary{cursor:pointer;list-style:none;padding:21px;display:grid;gap:10px}.project-card summary::-webkit-details-marker{display:none}.project-card summary:hover{background:#e9e1d0}.project-meta{font-size:10px;color:#9e8e73}.project-title{font-size:16px;font-weight:600}.project-open{font-size:10px;color:var(--red)}.project-detail{border-top:1px solid #d9d1c0;padding:0 21px 20px}.tech-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0}.tech-list li{font-size:10px;padding:5px 8px;background:#e1d9c7;border:1px solid #d2c8b2}.skill-tree,.service-list,.faq-list{display:grid;gap:15px}.skill-branch{display:flex;gap:20px}.skill-node{font:19px var(--mono);color:#91724e;padding-top:12px}.skill-branch h3{margin-top:5px}.service-card header{display:flex;justify-content:space-between;align-items:center;gap:10px}.service-card header h3{margin:0}.service-price{color:var(--red)!important;white-space:nowrap}.service-features{padding-left:20px;font-size:12px;line-height:2}.section-next{display:flex;align-items:center;gap:20px;margin-top:20px}.career-timeline{list-style:none;padding:0}.career-mission{border-top:1px solid var(--line);padding:20px 0 10px 42px;position:relative}.mission-step{position:absolute;left:0;top:35px;font:14px var(--mono);color:var(--red)}.faq-item dt{font-weight:600;font-size:13px}.faq-item dd{margin:10px 0 0;font-size:12px;line-height:1.9;color:#726a5a}.contact-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}.contact-links a{padding:15px;border:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;font-size:12px;overflow-wrap:anywhere}.contact-links small{display:block;font:8px var(--mono);color:#9a886c;margin-bottom:8px}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-group label{display:block;font-size:11px;margin-bottom:6px}.form-group input,.form-group textarea{width:100%;padding:11px;border:1px solid #beb59f;border-radius:0;background:#fffcf4;font-size:13px}.form-wide,.contact-feedback{grid-column:1/-1}.contact-form button{justify-self:start}.subsection-heading{margin-top:30px}.contact-feedback{margin:0}.noscript-note{text-align:center;padding:20px}
.js .desktop{display:none}.js.os-open{overflow:hidden}.js.os-open .desktop{display:block;position:fixed;inset:0;z-index:30;background:radial-gradient(ellipse at 75% 50%,#a0ad99 0,#849587 45%,#6e857a 100%);min-height:0}.js.os-open .os-topbar{position:absolute;top:0;left:0;right:0}.js.os-open .desktop-icons{position:absolute;top:65px;left:24px;bottom:60px;display:flex;flex-direction:column;flex-wrap:wrap;align-content:start;gap:9px;padding:0}.js.os-open .desktop-icon{width:95px}.js.os-open .desktop-watermark{display:block;position:absolute;right:5%;top:24%;font:italic 120px/.9 Georgia,serif;letter-spacing:-5px;color:#dce2c950;pointer-events:none}.desktop-watermark small{display:block;font:8px var(--mono);letter-spacing:2px;margin-top:25px;color:#ecedde60}.js.os-open .os-window{position:absolute;left:50%;top:50%;transform:translate(-44%,-50%);width:min(760px,calc(100% - 190px));height:min(680px,calc(100svh - 155px));margin:0;display:flex;flex-direction:column}.js.os-open #portfolio-content{overflow:auto;overscroll-behavior:contain;flex:1;scrollbar-color:#b8b09c #eee9dc;scrollbar-width:thin}.js.os-open .window-titlebar{flex-shrink:0;cursor:grab}.js.os-open .window-toolbar,.js.os-open .window-status{flex-shrink:0}.js.os-open .os-window.maximized{inset:56px 12px 56px!important;transform:none;width:auto;height:auto}.js.os-open .portfolio-section+.portfolio-section{border-top:0}.reading .studio,.reading .site-header,.reading .site-footer{display:none}.js.os-open.reading{overflow:auto}.js.os-open.reading .desktop{position:relative;min-height:100svh;padding:65px 0 60px}.js.os-open.reading .desktop-icons{position:relative;top:auto;left:auto;bottom:auto;flex-direction:row;justify-content:center;gap:4px;margin-bottom:20px}.js.os-open.reading .os-window{position:relative;left:auto;top:auto;transform:none!important;width:min(900px,94%);height:auto;margin:auto}.js.os-open.reading #portfolio-content{overflow:visible}.reading .window-actions,.reading .desktop-watermark{display:none!important}.reading .portfolio-section+.portfolio-section{border-top:1px solid var(--line)!important}.reading .taskbar{position:fixed}
@media(min-width:1600px){.studio-heading{left:10%;top:13%}}@media(max-width:1000px){.studio-heading h1{font-size:52px}.studio-heading{top:6%}.header-note{display:none}.scene-fallback{right:12%;top:40%;transform:scale(.8);transform-origin:top right}.js.os-open .os-window{transform:translate(-42%,-50%);width:calc(100% - 160px)}.js.os-open .desktop-icons{left:12px}.portfolio-section{padding:25px 28px}}@media(max-width:640px){.site-header{height:80px;margin:0 6%}.wordmark{font-size:27px}.header-contact{font-size:9px}.studio{min-height:660px;height:calc(100svh - 165px)}.studio-heading{left:8%;top:4%}.studio-heading h1{font-size:49px;letter-spacing:-2px;margin:18px 0}.studio-heading .eyebrow{font-size:8px}.thai-intro{font-size:12px}.studio-caption{bottom:25px;left:8%;right:8%;justify-content:center}.edition,.desk-coordinate{display:none}.site-footer{min-height:85px;flex-wrap:wrap;justify-content:center;padding:14px 0;gap:8px 20px;text-align:center}.site-footer>span:first-child{width:100%}.site-footer>span:last-child{font-size:8px}.scene-fallback{right:50%;top:42%;transform:translateX(50%) scale(.68);transform-origin:top center}.os-caption{display:none}.os-topbar{padding:0 12px;font-size:10px}.os-topbar>button{font-size:10px}.js.os-open .desktop-icons{top:54px;left:8px;right:8px;bottom:auto;height:84px;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:4px}.js.os-open .desktop-icon{min-width:66px;width:66px;font-size:8px;gap:2px;padding:3px}.pixel-icon{font-size:24px;height:38px;line-height:38px}.js.os-open .os-window{left:8px;right:8px;top:149px;bottom:56px;transform:none;width:auto;height:auto}.js.os-open .os-window.maximized{top:49px!important}.portfolio-section{padding:22px}.portfolio-section h2{font-size:25px}.welcome h2{font-size:53px}.welcome h3{font-size:18px}.welcome-actions{flex-direction:column;align-items:start;gap:5px}.welcome-foot{font-size:7px;letter-spacing:.5px}.strength-grid,.care-grid,.contact-links,.contact-form{grid-template-columns:1fr}.profile-introduction{flex-direction:column}.window-toolbar{font-size:8px;padding:9px 12px}.window-toolbar>span:last-child{font-size:7px}.taskbar{padding:5px;gap:4px}.taskbar button,.start-button{padding:7px 9px;font-size:9px}.taskbar-right{gap:5px}.taskbar time{padding-left:7px;min-width:58px;font-size:9px}.service-card header,.section-next{display:block}.js.os-open.reading .desktop-icons{height:auto;flex-wrap:wrap;overflow:visible;left:auto;right:auto}.js.os-open.reading .os-window{inset:auto;width:94%}.welcome .welcome-role{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}