:root{--ink:#373738;--teal:#59595a;--pale:#e7e7e8;--line:#c9c9ca}body{background:#eeeeef}header{background:#f0f0f1ed;backdrop-filter:blur(20px);border-color:#cfcfd0}header nav a{position:relative}nav a[aria-current]{color:#585859}nav a[aria-current]:after{content:'';position:absolute;bottom:-5px;left:10%;width:80%;height:2px;background:#848485;box-shadow:0 1px 5px #989899}.hero{min-height:clamp(500px,40vw,650px);grid-template-columns:1fr 1fr;gap:3%;padding:40px 6% 44px;background:radial-gradient(ellipse at 77% 42%,#dadadb 0,transparent 44%),radial-gradient(ellipse at 9% 0,#f7f7f8,transparent 65%),#e6e6e7}.hero h1{font-size:clamp(40px,4.5vw,78px);line-height:1.24;letter-spacing:-.055em;color:#363637;text-shadow:0 1px white}.hero h1 em{color:#686869}.hero p{color:#59595a;font-size:clamp(15px,1.15vw,19px);line-height:1.9;max-width:570px}.hero .tag{background:#f3f3f4a6;color:#606061;border-color:#c4c4c5}.hero .tag:before{background:#8d8d8e}.hero .hero-copy{animation:none}.hero-copy:after{display:block;content:'THAILAND　 /　 MARKET DEVELOPMENT';margin-top:33px;color:#757576;font:10px monospace;letter-spacing:.17em}.ico{display:inline-block;width:1.16em;height:1.16em;vertical-align:-.19em;flex:none}.ey{color:#6d6d6e}.strip{background:#dbdbdc;color:#49494a;border-block:1px solid #bbbbbc}.strip .ico{margin-right:8px}.instrument{isolation:isolate;position:relative;max-width:545px;margin:auto;border-radius:30px;background:linear-gradient(135deg,#f5f5f6aa,#cececfaa 48%,#e5e5e6a8);border:1px solid #ffffffe6;box-shadow:inset 0 0 0 4px #ffffff25,inset 0 -3px 9px #9f9fa04d,10px 16px 32px #59595a26,-7px -7px 25px #ffffff99;display:grid;place-items:center;padding:15px 15px 20px}.orbtop{width:100%;display:flex;justify-content:space-between;padding:0 9px;color:#5e5e5f}.orbtop small,.orbtop span{font:600 9px/2 monospace;letter-spacing:.16em}.orbtop span{color:#656566}.dial{width:min(100%,390px);position:relative;aspect-ratio:1;transform:translate(var(--dx,0px),var(--dy,0px));transition:transform .35s}.road{width:100%;display:block;cursor:pointer}.center{position:absolute;inset:32% 14%;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#585859}.center span:nth-child(2){font:italic clamp(14px,1.3vw,21px) Georgia,serif}.center strong{font:normal clamp(34px,3.7vw,59px)/1.1 Georgia,serif;letter-spacing:-.045em;color:#383839}.compass{color:#848485;font-size:26px}.switches{display:flex;border-radius:25px;padding:4px;background:#c4c4c563;box-shadow:inset 0 2px 4px #6b6b6c20,0 1px #ffffff99}.switches button{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;color:#5f5f60;font:600 10px monospace;letter-spacing:.065em;padding:10px 14px;border-radius:18px;box-shadow:none}.switches button[aria-pressed=true]{background:linear-gradient(#f6f6f7,#dcdcdd);box-shadow:0 2px 5px #58585933;color:#444445}.token{opacity:0;transition:opacity .65s}#orbit[data-stage="0"] .truck,#orbit[data-stage="1"] .bag,#orbit[data-stage="2"] .leaf{opacity:1}#lit{transition:stroke 1.2s}.wash{background:linear-gradient(115deg,#e4e4e5,#ededee)}h2{color:#3e3e3f}button,.btn,.card,.route,.tabbody,.routebody,dialog,fieldset,input,textarea{border-radius:14px}.primary,#toolbtn,.cta button{background:linear-gradient(165deg,#727273,#4c4c4d 72%,#5e5e5f);border:1px solid #939394;box-shadow:inset 0 1.5px #ffffff80,0 5px 12px #5757582b;color:white}.primary,#toolbtn{border-radius:28px}.btn,button{transition:transform .22s,box-shadow .3s,background-color .3s;position:relative;overflow:hidden}.btn:after,button:not(.magnify):after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(115deg,transparent 26%,#ffffff52 50%,transparent 72%);transform:translateX(-140%);transition:transform .65s}.btn:hover:after,button:hover:after{transform:translateX(140%)}button:hover,.btn:hover{transform:translateY(-2px) scale(1.012)}button:active,.btn:active{transform:scale(.985)}.card,.route,.tabbody,.routebody,dialog,fieldset,.ctrl button,.steps button,.menu a,.menu button{background:linear-gradient(145deg,#fbfbfcd9,#e5e5e6d9);border:1px solid #ffffff99;box-shadow:inset 0 1px 1px white,0 5px 14px #5a5a5b13;color:#414142}.route.on,.route:hover{outline:1px solid #8e8e8f}.card{transition:transform .3s,box-shadow .3s}.card:hover{transform:translateY(-4px);box-shadow:0 9px 25px #5a5a5b24}.route{grid-template-columns:1fr 1fr}.wrap{padding-block:58px}.wrap h2{max-width:1000px}.wash,.wrap{scroll-margin-top:15px}.wrap p{transition:color .3s}.wrap p:hover{color:#4e4e4f}.cards .num,.route .ey .ico{font-size:20px}.steps .ico,.ctrl button .ico{margin-right:6px}.steps button.on,.ctrl button.on{background:#646465;color:white}.routebody ol{list-style:none;padding:0}.routebody li:before{content:'◇';color:#8e8e8f;margin-right:6px}.cta{background:radial-gradient(at right,#bebebf,transparent 65%),#d6d6d7;color:#3e3e3f}.cta .ey{color:#69696a}.formbrand{width:125px;height:auto;display:block;margin-bottom:8px}.formfoot{border-top:1px solid var(--line);padding-top:14px;font-size:12px;text-align:center}.formgrid label{font-size:14px}.formgrid input,.formgrid textarea{margin-top:5px;background:#f7f7f8;border:1px solid #c7c7c8;box-shadow:inset 0 2px 5px #65656613}.formgrid input:focus,.formgrid textarea:focus{outline:2px solid #919192;box-shadow:0 0 0 4px #9191921c}dialog{background:#eaeaeb;backdrop-filter:blur(18px)}dialog::backdrop{background:#363637a8;backdrop-filter:blur(6px)}.magnify{padding:0;display:block;width:100%;border-radius:0;line-height:0}.exp-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5%}.exp-grid figure{margin:0}.exp-grid figcaption{font-size:12px;color:#6a6a6b;margin-top:8px}.network{position:relative;padding:35px 9%}.network img{border-radius:48%;box-shadow:0 8px 20px #55555626}.network button{position:absolute;background:#f5f5f6e8;color:#4a4a4b;border:1px solid #ffffff;padding:8px 12px;font-size:12px;box-shadow:0 4px 12px #5c5c5d30}.network button .ico{margin-right:5px}.network button:nth-child(2){left:0;top:15%}.network button:nth-child(3){right:0;top:15%}.network button:nth-child(4){left:0;bottom:15%}.network button:nth-child(5){right:0;bottom:15%}.hero-copy .primary{padding:14px 25px}footer{background:#ececed}footer img{background:white}.close{border-radius:50%}
@media(max-width:700px){.hero{padding:28px 5% 35px;gap:22px}.hero h1{font-size:clamp(36px,9vw,52px);margin:13px 0}.hero-copy:after{display:none}.hero p{margin-bottom:16px}.instrument{width:100%;padding:10px 12px 12px;border-radius:22px}.dial{width:min(78vw,290px)}.switches button{font-size:9px;padding:8px 11px}.exp-grid{grid-template-columns:1fr}.wrap{padding-block:38px}.strip{gap:9px}.strip b{width:100%}.center strong{font-size:38px}nav a[aria-current]{background:#dfdfe0;border-radius:6px}.hero-copy .primary{padding:11px 18px}}
@media(prefers-reduced-motion:reduce){.dial{transform:none}button:hover,.card:hover,.btn:hover{transform:none}}
#zoom .feature{aspect-ratio:auto;max-height:72vh;object-fit:contain;background:transparent}#zoom>.close{margin-bottom:7px}.center strong{font-size:clamp(34px,3.2vw,52px)}#casepic:after{transform:none;background:#424243d9}.instrument:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 2px 2px 3px #ffffffcc,inset -2px -2px 6px #9c9c9d50}.instrument:hover{box-shadow:inset 0 0 0 4px #ffffff30,10px 16px 32px #59595a32,-7px -7px 25px #ffffff99}.steps button{z-index:1}.steps:before{content:'';position:absolute;top:50%;left:6%;right:6%;height:2px;background:linear-gradient(90deg,#b3b3b4,#fcfcfd,#b3b3b4);background-size:180%;animation:stream 5s ease-in-out infinite}@keyframes stream{50%{background-position:100%}}.token.leaf{filter:drop-shadow(0 0 4px #d5d5d6)}.center strong{transition:opacity .25s}
