.tr-pwhead{padding-top:clamp(30px,4vw,56px)}.tr-pwhead .work-head{padding-bottom:clamp(14px,1.8vw,22px)}@media (max-width:1080px){.tr-demo{grid-template-columns:minmax(0,1fr);gap:22px}.tr-demo .demo-stage{order:0}.tr-demo .demo-list{order:-1;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;border-top:0;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding:2px var(--pad) 6px;scrollbar-width:none}.tr-demo .demo-list::-webkit-scrollbar{display:none}.tr-demo .demo-list label{flex:none;display:block;padding:9px 16px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:100px;white-space:nowrap}.tr-demo .demo-list label:hover{padding-left:16px;background:0 0}.tr-demo .demo-list label em,.tr-demo .demo-list label span span{display:none}.tr-demo .demo-list label b{font-size:15px}.tr-demo #dm1:checked~.demo-list label[for=dm1],.tr-demo #dm2:checked~.demo-list label[for=dm2],.tr-demo #dm3:checked~.demo-list label[for=dm3]{background:var(--ink);border-color:var(--ink)}.tr-demo #dm1:checked~.demo-list label[for=dm1] b,.tr-demo #dm2:checked~.demo-list label[for=dm2] b,.tr-demo #dm3:checked~.demo-list label[for=dm3] b{color:#fff}}@media (prefers-reduced-motion:reduce){.tr-demo .ph-state{transition:none}}