:root{color-scheme:dark;--ink:#f0f6fc;--muted:#c2d3e0;--blue:#8cdeff;--navy:#060c16;--line:rgba(196,225,244,.25)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0}body{margin:0;background:var(--navy);color:var(--ink);font-family:'Noto Sans Thai',sans-serif;font-size:15px}a{color:inherit;text-decoration:none}button{font:inherit}::selection{background:#86dfff;color:#07111f}:focus-visible{outline:2px solid var(--blue);outline-offset:6px}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#416075}::-webkit-scrollbar-track{background:#060c16}.skip{position:fixed;top:-100px;left:20px;z-index:100;padding:14px;background:#07111f}.skip:focus{top:20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.stage{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#060c16}.scene{position:absolute;inset:0;opacity:0;transition:opacity 1s cubic-bezier(.16,1,.3,1);will-change:opacity}.scene.active{opacity:1}.scene img,.scene video{width:100%;height:100%;object-fit:cover;transform:scale(var(--scene-scale,1.02));object-position:center}.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,9,18,.65),transparent 26%,rgba(3,9,18,.12) 50%,rgba(3,9,18,.85));transition:background 1s}body[data-chapter="1"] .shade,body[data-chapter="3"] .shade{background:linear-gradient(90deg,rgba(2,7,15,.93),rgba(2,7,15,.76) 31%,rgba(2,7,15,.08) 73%),linear-gradient(0deg,rgba(2,7,15,.72),transparent 35%)}body[data-chapter="2"] .shade{background:linear-gradient(90deg,rgba(2,7,15,.88),rgba(2,7,15,.4)),linear-gradient(0deg,rgba(2,7,15,.85),transparent)}body[data-chapter="4"] .shade{background:linear-gradient(180deg,rgba(2,7,15,.8),rgba(2,7,15,.22) 60%,rgba(2,7,15,.85))}.site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:28px 4.5%;background:linear-gradient(#060c16a6,transparent)}.wordmark{display:inline-flex;align-items:center;font-family:Rajdhani,sans-serif;font-size:24px;font-weight:700;letter-spacing:.035em;white-space:nowrap}.wordmark span{color:var(--blue)}.wordmark svg{height:25px;width:25px;margin-left:12px;fill:none;stroke:var(--blue);stroke-width:1.1}.site-header nav{display:flex;gap:38px;align-items:center;font-family:Rajdhani,sans-serif;font-size:16px;font-weight:500}.site-header nav a{transition:color .2s}.site-header nav a:hover,.text-link:hover{color:var(--blue)}.nav-end{border-bottom:1px solid #ffffff60;padding:9px 0}.nav-end span{padding-left:20px}.chapters{position:fixed;z-index:15;right:30px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px}.chapters a{display:flex;align-items:center;gap:12px;padding:6px;color:#d4e7f4;font-family:Rajdhani;font-size:13px}.chapters span{opacity:0;transition:opacity .3s}.chapters a:hover span,.chapters a.current span{opacity:1}.chapters i{height:4px;width:4px;background:#b4c8d9;border-radius:50%;transition:background .3s}.chapters .current i{height:27px;border-radius:2px;background:var(--blue)}.chapter{position:relative;min-height:125svh;padding:180px 10% 150px;display:flex;align-items:center}.hero{min-height:160svh;align-items:flex-start;padding:0}.hero-center{position:relative;height:100svh;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:70px 8% 40px;text-align:center}.hero h1{margin:0;width:min(100%,1050px);line-height:0}.hero h1 img{width:100%;height:auto;filter:drop-shadow(0 7px 13px #0008)}.hero-center>p{font-size:15px;letter-spacing:.04em;margin:5px 0 25px;text-shadow:0 2px 12px #000}.button{display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:14px 23px;font-family:Rajdhani,'Noto Sans Thai',sans-serif;font-size:17px;font-weight:600;transition:background .25s,transform .25s}.primary{background:#e7f5fc;color:#07121e;box-shadow:0 8px 24px #0004}.primary:hover{background:#9de1ff;transform:translateY(-2px)}.button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}.hero-bottom{position:absolute;top:calc(100svh - 78px);left:4.5%;right:4.5%;display:flex;align-items:center;justify-content:space-between;font-family:Rajdhani;font-size:11px;letter-spacing:.16em;color:#d3e4ef}.signal{display:flex;align-items:center;gap:10px}.signal i{width:5px;height:5px;border-radius:50%;background:var(--blue)}.scroll-hint{display:flex;align-items:center;gap:13px}.mouse{height:24px;width:15px;border:1px solid #c9e3f3;border-radius:9px;position:relative}.mouse:after{content:'';position:absolute;width:2px;height:5px;background:var(--blue);top:5px;left:5px}.copy{max-width:475px}.copy h2,.work-heading h2,.finale h2{font-family:Rajdhani,sans-serif;font-size:clamp(52px,6.7vw,96px);line-height:.96;font-weight:500;letter-spacing:-.025em;margin:0 0 30px;text-wrap:balance}.copy p{max-width:40ch;color:#d2dfeb;font-size:15px;line-height:1.95}.copy .lead{color:#fff;font-size:23px;line-height:1.65;margin:0 0 24px}.text-link{display:inline-flex;align-items:center;gap:35px;border-bottom:1px solid #a9c6d66b;padding:13px 0;margin-top:20px;font-size:14px}.text-link span{color:var(--blue);font-size:24px}.scene-caption{position:absolute;bottom:100px;left:10%;right:10%;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:15px;font:12px Rajdhani;letter-spacing:.15em;color:#c0d8e8}.work-chapter{min-height:145svh;display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;align-content:center}.work-heading p{line-height:1.9;color:#d4e2ed;max-width:28ch}.demo-label{display:block;font-family:Rajdhani,'Noto Sans Thai';font-size:11px;color:var(--blue);letter-spacing:.1em;margin-top:28px}.project-list{width:100%;border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);background:#06101e80;backdrop-filter:blur(14px)}summary{display:flex;align-items:center;gap:22px;cursor:pointer;padding:29px 24px;list-style:none}summary::-webkit-details-marker{display:none}.project-no{font-family:Rajdhani;font-size:13px;color:var(--blue)}.project-name{font:500 clamp(24px,2.5vw,35px)/1.1 Rajdhani}.project-name small{display:block;font:11px/1.8 'Noto Sans Thai';color:#c3d5e4;margin-top:10px}.project-arrow{margin-left:auto;color:var(--blue);font-size:25px;transition:transform .3s}details[open] .project-arrow{transform:rotate(90deg)}summary:hover{background:#18334a66}.project-detail{padding:0 24px 26px 62px}.project-detail p{font-size:13px;line-height:1.9;color:#d9e5ef}.project-detail>span{font:11px Rajdhani;letter-spacing:.07em;color:var(--blue)}.core-chapter{min-height:140svh}.finale{min-height:110svh;padding-bottom:170px;justify-content:center;text-align:center;align-items:flex-start;padding-top:22svh}.finale h2{font-size:clamp(48px,6vw,86px);text-shadow:0 5px 25px #0006}.finale-copy>p{color:#dce8f1;font-size:16px;margin-bottom:30px}.back-top{display:block;font-size:12px;margin:24px auto;color:#d4e4ef;width:max-content;border-bottom:1px solid transparent}.back-top:hover{border-color:var(--blue)}footer{position:absolute;bottom:95px;left:4.5%;right:4.5%;border-top:1px solid var(--line);padding-top:25px;display:flex;justify-content:space-between;align-items:center;gap:20px}footer p{font-size:11px;color:#c6d9e7}footer>span{font:11px Rajdhani;letter-spacing:.15em}.journey-status{position:fixed;bottom:21px;left:4.5%;display:flex;gap:23px;z-index:20;font:11px Rajdhani;letter-spacing:.12em;color:#d6e7f2}#scene-count{color:var(--blue)}#motion-toggle{position:fixed;bottom:13px;right:4.5%;z-index:20;display:flex;align-items:center;gap:8px;border:1px solid #b4d5eb3b;background:#07111fc9;backdrop-filter:blur(12px);color:#d7e9f5;padding:8px 12px;font-size:11px;cursor:pointer}#motion-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}.progress{position:fixed;bottom:0;left:0;right:0;height:2px;background:#ffffff15;z-index:30}.progress div{height:100%;width:0;background:var(--blue)}body.paused .scene img,body.paused .scene video{transform:none}body.paused .scene{transition:none}@media(min-width:1800px){.hero h1{width:1250px}.copy{max-width:520px}.copy p{font-size:17px}}@media(max-width:800px){.site-header{padding:23px 6%}.wordmark{font-size:21px}.site-header nav{gap:0;font-size:14px}.site-header nav a:not(.nav-end){display:none}.nav-end span{padding-left:10px}.chapters{right:10px;gap:13px}.chapters a{gap:6px}.chapters span{display:none}.chapter{padding:140px 8% 120px;min-height:125svh}.hero{padding:0;min-height:145svh}.hero-center{padding:60px 5%}.hero h1{width:100%;margin-bottom:14px}.hero-center>p{font-size:12px;letter-spacing:0;max-width:25ch;line-height:1.9;margin:0 0 25px}.hero .scene{object-position:center}.hero-bottom{left:8%;right:8%;top:calc(100svh - 105px);justify-content:center}.hero-bottom .signal,.coordinate{display:none}.copy h2,.work-heading h2{font-size:62px}.copy .lead{font-size:20px}.copy p{font-size:14px;max-width:30ch}.scene-caption{left:8%;right:8%;font-size:11px;gap:20px;bottom:80px}.scene-caption span:last-child{text-align:right}.work-chapter{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:30px;min-height:160svh}.work-heading h2{margin-bottom:18px}.work-heading p{max-width:none;font-size:13px}.demo-label{margin-top:15px}.project-name{font-size:28px}summary{padding:23px 16px;gap:15px}.project-detail{padding-left:44px;padding-right:16px}.project-detail p{font-size:12px}.finale{min-height:120svh;padding-top:25svh}.finale h2{font-size:49px}.finale-copy>p{font-size:13px;line-height:1.9}footer{left:8%;right:8%;bottom:100px;flex-wrap:wrap;justify-content:center;gap:10px}footer .wordmark{font-size:21px}footer p{width:100%;margin:0}footer>span{font-size:11px}.journey-status{left:6%;font-size:11px;gap:12px}#motion-toggle{right:6%;padding:7px}#motion-toggle span{font-size:11px}.scene img,.scene video{object-position:50% center}body[data-chapter="1"] .shade,body[data-chapter="3"] .shade{background:linear-gradient(90deg,#02070ff0,#02070fa3 65%,#02070f50),linear-gradient(0deg,#02070fa0,transparent)}body[data-chapter="2"] .shade{background:#02070fb5}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene{transition:none}.scene img,.scene video{transform:none}.button{transition:none}}

#orbit-idle{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .18s linear;transform:none}#orbit-idle.visible{opacity:1}@media(prefers-reduced-motion:reduce){#orbit-idle{transition:none}}