:root{--cur-arrow:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16.5' height='25.5' shape-rendering='crispEdges'><rect x='0.0' y='0.0' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='1.5' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='1.5' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='3.0' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='3.0' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='3.0' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='4.5' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='4.5' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='4.5' width='1.5' height='1.5' fill='%23fff'/><rect x='4.5' y='4.5' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='6.0' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='6.0' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='6.0' width='1.5' height='1.5' fill='%23fff'/><rect x='4.5' y='6.0' width='1.5' height='1.5' fill='%23fff'/><rect x='6.0' y='6.0' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='7.5' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='7.5' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='7.5' width='1.5' height='1.5' fill='%23fff'/><rect x='4.5' y='7.5' width='1.5' height='1.5' fill='%23fff'/><rect x='6.0' y='7.5' width='1.5' height='1.5' fill='%23fff'/><rect x='7.5' y='7.5' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='9.0' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='9.0' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='9.0' width='1.5' height='1.5' fill='%23fff'/><rect x='4.5' y='9.0' width='1.5' height='1.5' fill='%23fff'/><rect x='6.0' y='9.0' width='1.5' height='1.5' fill='%23fff'/><rect x='7.5' y='9.0' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='9.0' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='10.5' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='10.5' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='10.5' width='1.5' height='1.5' fill='%23fff'/><rect x='4.5' y='10.5' width='1.5' height='1.5' fill='%23fff'/><rect x='6.0' y='10.5' width='1.5' height='1.5' fill='%23fff'/><rect x='7.5' y='10.5' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='10.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='10.5' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='12.0' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='4.5' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='6.0' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='7.5' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='12.0' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='13.5' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='4.5' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='6.0' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='7.5' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='13.5' y='13.5' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='15.0' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='4.5' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='6.0' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='7.5' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='15.0' width='1.5' height='1.5' fill='%23000'/><rect x='10.5' y='15.0' width='1.5' height='1.5' fill='%23000'/><rect x='12.0' y='15.0' width='1.5' height='1.5' fill='%23000'/><rect x='13.5' y='15.0' width='1.5' height='1.5' fill='%23000'/><rect x='15.0' y='15.0' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='16.5' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='4.5' y='16.5' width='1.5' height='1.5' fill='%23000'/><rect x='6.0' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='7.5' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='16.5' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='18.0' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='18.0' width='1.5' height='1.5' fill='%23000'/><rect x='6.0' y='18.0' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='18.0' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='19.5' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='19.5' width='1.5' height='1.5' fill='%23000'/><rect x='6.0' y='19.5' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='19.5' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='21.0' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='21.0' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='21.0' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='22.5' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='22.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='22.5' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='22.5' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='24.0' width='1.5' height='1.5' fill='%23000'/><rect x='10.5' y='24.0' width='1.5' height='1.5' fill='%23000'/></svg>") 1 1;--cur-hand:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25.5' height='28.5' shape-rendering='crispEdges'><rect x='9.0' y='0.0' width='1.5' height='1.5' fill='%23000'/><rect x='10.5' y='0.0' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='1.5' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='1.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='1.5' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='1.5' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='3.0' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='3.0' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='3.0' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='3.0' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='4.5' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='4.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='4.5' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='4.5' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='6.0' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='6.0' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='6.0' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='6.0' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='7.5' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='7.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='7.5' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='7.5' width='1.5' height='1.5' fill='%23000'/><rect x='13.5' y='7.5' width='1.5' height='1.5' fill='%23000'/><rect x='15.0' y='7.5' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='9.0' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='9.0' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='9.0' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='9.0' width='1.5' height='1.5' fill='%23000'/><rect x='13.5' y='9.0' width='1.5' height='1.5' fill='%23fff'/><rect x='15.0' y='9.0' width='1.5' height='1.5' fill='%23fff'/><rect x='16.5' y='9.0' width='1.5' height='1.5' fill='%23000'/><rect x='18.0' y='9.0' width='1.5' height='1.5' fill='%23000'/><rect x='19.5' y='9.0' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='10.5' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='10.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='10.5' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='10.5' width='1.5' height='1.5' fill='%23000'/><rect x='13.5' y='10.5' width='1.5' height='1.5' fill='%23fff'/><rect x='15.0' y='10.5' width='1.5' height='1.5' fill='%23fff'/><rect x='16.5' y='10.5' width='1.5' height='1.5' fill='%23000'/><rect x='18.0' y='10.5' width='1.5' height='1.5' fill='%23fff'/><rect x='19.5' y='10.5' width='1.5' height='1.5' fill='%23fff'/><rect x='21.0' y='10.5' width='1.5' height='1.5' fill='%23000'/><rect x='22.5' y='10.5' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='12.0' width='1.5' height='1.5' fill='%23000'/><rect x='3.0' y='12.0' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='12.0' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='12.0' width='1.5' height='1.5' fill='%23000'/><rect x='13.5' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='15.0' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='16.5' y='12.0' width='1.5' height='1.5' fill='%23000'/><rect x='18.0' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='19.5' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='21.0' y='12.0' width='1.5' height='1.5' fill='%23000'/><rect x='22.5' y='12.0' width='1.5' height='1.5' fill='%23fff'/><rect x='24.0' y='12.0' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='13.5' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='4.5' y='13.5' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='13.5' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='13.5' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='15.0' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='16.5' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='18.0' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='19.5' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='21.0' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='22.5' y='13.5' width='1.5' height='1.5' fill='%23fff'/><rect x='24.0' y='13.5' width='1.5' height='1.5' fill='%23000'/><rect x='0.0' y='15.0' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='3.0' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='4.5' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='6.0' y='15.0' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='15.0' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='13.5' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='15.0' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='16.5' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='18.0' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='19.5' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='21.0' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='22.5' y='15.0' width='1.5' height='1.5' fill='%23fff'/><rect x='24.0' y='15.0' width='1.5' height='1.5' fill='%23000'/><rect x='1.5' y='16.5' width='1.5' height='1.5' fill='%23000'/><rect x='3.0' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='4.5' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='6.0' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='7.5' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='13.5' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='15.0' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='16.5' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='18.0' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='19.5' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='21.0' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='22.5' y='16.5' width='1.5' height='1.5' fill='%23fff'/><rect x='24.0' y='16.5' width='1.5' height='1.5' fill='%23000'/><rect x='3.0' y='18.0' width='1.5' height='1.5' fill='%23000'/><rect x='4.5' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='6.0' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='7.5' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='13.5' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='15.0' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='16.5' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='18.0' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='19.5' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='21.0' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='22.5' y='18.0' width='1.5' height='1.5' fill='%23fff'/><rect x='24.0' y='18.0' width='1.5' height='1.5' fill='%23000'/><rect x='3.0' y='19.5' width='1.5' height='1.5' fill='%23000'/><rect x='4.5' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='6.0' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='7.5' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='13.5' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='15.0' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='16.5' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='18.0' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='19.5' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='21.0' y='19.5' width='1.5' height='1.5' fill='%23fff'/><rect x='22.5' y='19.5' width='1.5' height='1.5' fill='%23000'/><rect x='4.5' y='21.0' width='1.5' height='1.5' fill='%23000'/><rect x='6.0' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='7.5' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='13.5' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='15.0' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='16.5' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='18.0' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='19.5' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='21.0' y='21.0' width='1.5' height='1.5' fill='%23fff'/><rect x='22.5' y='21.0' width='1.5' height='1.5' fill='%23000'/><rect x='4.5' y='22.5' width='1.5' height='1.5' fill='%23000'/><rect x='6.0' y='22.5' width='1.5' height='1.5' fill='%23fff'/><rect x='7.5' y='22.5' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='22.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='22.5' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='22.5' width='1.5' height='1.5' fill='%23fff'/><rect x='13.5' y='22.5' width='1.5' height='1.5' fill='%23fff'/><rect x='15.0' y='22.5' width='1.5' height='1.5' fill='%23fff'/><rect x='16.5' y='22.5' width='1.5' height='1.5' fill='%23fff'/><rect x='18.0' y='22.5' width='1.5' height='1.5' fill='%23fff'/><rect x='19.5' y='22.5' width='1.5' height='1.5' fill='%23fff'/><rect x='21.0' y='22.5' width='1.5' height='1.5' fill='%23000'/><rect x='6.0' y='24.0' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='24.0' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='24.0' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='24.0' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='24.0' width='1.5' height='1.5' fill='%23fff'/><rect x='13.5' y='24.0' width='1.5' height='1.5' fill='%23fff'/><rect x='15.0' y='24.0' width='1.5' height='1.5' fill='%23fff'/><rect x='16.5' y='24.0' width='1.5' height='1.5' fill='%23fff'/><rect x='18.0' y='24.0' width='1.5' height='1.5' fill='%23fff'/><rect x='19.5' y='24.0' width='1.5' height='1.5' fill='%23fff'/><rect x='21.0' y='24.0' width='1.5' height='1.5' fill='%23000'/><rect x='6.0' y='25.5' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='25.5' width='1.5' height='1.5' fill='%23fff'/><rect x='9.0' y='25.5' width='1.5' height='1.5' fill='%23fff'/><rect x='10.5' y='25.5' width='1.5' height='1.5' fill='%23fff'/><rect x='12.0' y='25.5' width='1.5' height='1.5' fill='%23fff'/><rect x='13.5' y='25.5' width='1.5' height='1.5' fill='%23fff'/><rect x='15.0' y='25.5' width='1.5' height='1.5' fill='%23fff'/><rect x='16.5' y='25.5' width='1.5' height='1.5' fill='%23fff'/><rect x='18.0' y='25.5' width='1.5' height='1.5' fill='%23fff'/><rect x='19.5' y='25.5' width='1.5' height='1.5' fill='%23fff'/><rect x='21.0' y='25.5' width='1.5' height='1.5' fill='%23000'/><rect x='6.0' y='27.0' width='1.5' height='1.5' fill='%23000'/><rect x='7.5' y='27.0' width='1.5' height='1.5' fill='%23000'/><rect x='9.0' y='27.0' width='1.5' height='1.5' fill='%23000'/><rect x='10.5' y='27.0' width='1.5' height='1.5' fill='%23000'/><rect x='12.0' y='27.0' width='1.5' height='1.5' fill='%23000'/><rect x='13.5' y='27.0' width='1.5' height='1.5' fill='%23000'/><rect x='15.0' y='27.0' width='1.5' height='1.5' fill='%23000'/><rect x='16.5' y='27.0' width='1.5' height='1.5' fill='%23000'/><rect x='18.0' y='27.0' width='1.5' height='1.5' fill='%23000'/><rect x='19.5' y='27.0' width='1.5' height='1.5' fill='%23000'/><rect x='21.0' y='27.0' width='1.5' height='1.5' fill='%23000'/></svg>") 10 1}
/* Paulo Coimbra — site v4, pixel direction.
   Two themes on <html data-theme>: "blue" (default: blue page, white and black elements) and "white".
   Pixel canvases read --px-* from their container. */
:root{
  --f-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --blue:#2b4bff;--black:#0b0b0f;--orange:#ff6a2b;
  --max:1200px;--r-lg:22px;--r-md:14px;--ease:cubic-bezier(.2,0,.38,.9);--ease-x:cubic-bezier(.4,.14,.3,1);
  /* blue theme (default) */
  --bg:var(--blue);--ink:#fff;--muted:rgba(255,255,255,.76);--line:rgba(255,255,255,.26);--hdr:rgba(43,75,255,.84);
  --card:#fff;--card-ink:#0b0b0f;--card-muted:#5b5e66;--card-line:#e6e7ea;--field:#f3f4f6;
  --btn:#0b0b0f;--btn-ink:#fff;--ghost:rgba(255,255,255,.55);--em:#0b0b0f;--link:#fff;
  --band:#0b0b0f;--band-ink:#fff;
  --px-bg:transparent;--px-fg:#fff;--px-alt:#9aabff;--px-tint:#4561ff;--px-hot:#0b0b0f;
  --sel:#0b0b0f;color-scheme:dark;
}
:root[data-theme="white"]{
  --bg:#fff;--ink:#141518;--muted:#62656b;--line:#e6e6ea;--hdr:rgba(255,255,255,.84);
  --card:#f5f5f7;--card-ink:#141518;--card-muted:#62656b;--card-line:#e2e2e7;--field:#fff;
  --btn:var(--blue);--btn-ink:#fff;--ghost:#d9d9df;--em:var(--blue);--link:var(--blue);
  --band:var(--blue);--band-ink:#fff;
  --px-bg:transparent;--px-fg:var(--blue);--px-alt:#9fb0ff;--px-tint:#e8ecff;--px-hot:var(--orange);
  --sel:var(--blue);color-scheme:light;
}
/* pixel colors inside white surfaces */
.on-card{--px-bg:#fff;--px-fg:#0b0b0f;--px-alt:#8b8f98;--px-tint:#e9eaee;--px-hot:var(--blue)}
:root[data-theme="white"] .on-card{--px-bg:#fff;--px-fg:var(--blue);--px-alt:#9fb0ff;--px-tint:#e8ecff;--px-hot:var(--orange)}
.on-band{--px-bg:transparent;--px-fg:#fff;--px-alt:#9aabff;--px-tint:#333;--px-hot:var(--blue)}
:root[data-theme="white"] .on-band{--px-tint:#4561ff;--px-hot:var(--orange)}

@view-transition{navigation:auto}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-ui);-webkit-font-smoothing:antialiased;transition:background .3s,color .3s;
  cursor:var(--cur-arrow),auto}
a,button,summary,label,[data-style],select{cursor:var(--cur-hand),pointer}
input,textarea{cursor:text}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
canvas{display:block;max-width:100%}
::selection{background:var(--sel);color:#fff}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.label{font:500 12px/1.4 var(--f-mono);letter-spacing:.03em;color:var(--muted);text-transform:lowercase}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px;top:8px;background:var(--black);color:#fff;padding:8px 12px;border-radius:8px;z-index:100}.skip:focus{left:12px}
.todo{text-decoration:underline dashed;text-underline-offset:3px;background:none;color:inherit}
section{scroll-margin-top:72px}
.link{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.link:hover{text-decoration-thickness:2px}

/* reveal */
.js .rv{transition:opacity .6s var(--ease-x),transform .6s var(--ease-x)}
.js .rv.pre{opacity:0;transform:translateY(16px)}

/* header */
.hdr{position:sticky;top:0;z-index:40;background:var(--hdr);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background .3s}
.hdr.on{border-bottom-color:var(--line)}
.hdr .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:650;letter-spacing:-.02em;font-size:17px}
.brand svg{width:26px;height:26px;display:block;border-radius:6px}
.brand .pc-bg{fill:var(--ink)}.brand .pc-fg{fill:var(--bg)}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);font-size:15px}
.nav a{text-decoration:none;color:var(--muted);transition:color .15s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav .cta{color:var(--btn-ink);background:var(--btn);padding:9px 16px;border-radius:999px}
.nav .cta:hover{color:var(--btn-ink);filter:brightness(1.15)}
.themes{display:flex;gap:4px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.themes button{width:22px;height:22px;border-radius:999px;border:0;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.themes button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:1px}
.themes [data-theme-set="blue"]{background:var(--blue)}.themes [data-theme-set="white"]{background:#fff}
@media (max-width:640px){.nav .hide-s{display:none}}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--f-ui);padding:15px 22px;border-radius:999px;text-decoration:none;background:var(--btn);color:var(--btn-ink);border:0;transition:transform .12s var(--ease),filter .15s}
.btn:hover{filter:brightness(1.2)}.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ghost)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);filter:none}
.btn.light{background:#fff;color:var(--black)}
.btn canvas{width:18px;height:18px}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(40px,6vw,88px) clamp(40px,6vw,72px)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}
.hero .txt{display:grid;gap:26px}
.hero h1{font-size:clamp(48px,6.4vw,92px);line-height:.94;letter-spacing:-.055em;font-weight:700}
.hero h1 em{font-style:normal;color:var(--em);display:block}
.hero .lede{font-size:clamp(18px,1.8vw,22px);color:var(--muted);max-width:38ch;line-height:1.5}
.stage{position:relative;aspect-ratio:1}
.stage canvas{width:100%;height:100%;image-rendering:pixelated}
.stage .cap{position:absolute;left:0;bottom:8%;font:500 12px var(--f-mono);color:var(--muted)}

/* facts */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.facts .wrap>div{padding:26px clamp(14px,2.4vw,32px);border-left:1px solid var(--line);display:grid;gap:4px;align-content:start}
.facts .wrap>div:first-child{border-left:0;padding-left:0}
.facts b{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.025em;line-height:1.15}
.facts span:last-child{font-size:15px;color:var(--muted)}
@media (max-width:760px){.facts .wrap{grid-template-columns:1fr}.facts .wrap>div{border-left:0;border-top:1px solid var(--line);padding-left:0}.facts .wrap>div:first-child{border-top:0}}

/* sections */
.sec{padding-block:clamp(64px,8vw,108px)}
.sec.tight{padding-top:0}
.sec-h{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,52px);max-width:760px}
.sec-h h2{font-size:clamp(34px,4.8vw,60px);line-height:1.02;letter-spacing:-.045em}
.sec-h p{font-size:18px;color:var(--muted);max-width:56ch}
.more{margin-top:28px}

/* case cards */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.cases.one{grid-template-columns:1fr}
@media (max-width:760px){.cases{grid-template-columns:1fr}}
.case{display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--card-ink);background:var(--card);border-radius:var(--r-lg);overflow:hidden;transition:transform .35s var(--ease-x)}
.case:hover{transform:translateY(-4px)}
.case .img{aspect-ratio:4/3;position:relative;background:var(--card-line)}
.case .img canvas{position:absolute;inset:0;width:100%;height:100%}
.chip{position:absolute;right:12px;top:12px;font:500 11px var(--f-mono);color:var(--black);background:rgba(255,255,255,.9);padding:5px 9px;border-radius:999px;transition:opacity .3s}
.case:hover .chip{opacity:0}
.chip.ph{left:12px;right:auto;background:var(--black);color:#fff}
.case:hover .chip.ph{opacity:1}
.case .body{padding:22px 26px 26px;display:grid;gap:8px;align-content:start}
.case .body .label{color:var(--card-muted)}
.case h3{font-size:clamp(21px,2.1vw,26px);line-height:1.18;letter-spacing:-.025em}
.case p{color:var(--card-muted);font-size:15.5px;line-height:1.5}
.case .res{color:var(--card-ink);font-weight:600;font-size:15px}
.case .go{font-weight:600;font-size:15px;color:var(--card-ink);display:inline-flex;gap:6px}
.case:hover .go span{transform:translateX(3px)}.case .go span{transition:transform .2s}

/* process loop */
.loop{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.loop{grid-template-columns:1fr}}
.loop .cv{position:relative;aspect-ratio:1;max-width:520px;width:100%}
.loop .cv canvas{width:100%;height:100%}
.loop .cv .label{position:absolute;left:0;top:-26px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;counter-reset:s}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{padding:14px 0 14px 0;border-top:1px solid var(--line);display:grid;gap:4px;transition:opacity .3s}
.steps li b{font-size:18px;letter-spacing:-.02em;display:flex;gap:10px;align-items:baseline}
.steps li b::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:500 12px var(--f-mono);color:var(--muted)}
.steps li span{color:var(--muted);font-size:15px;line-height:1.45}
.steps li.on b{color:var(--ink)}
.steps li.on b::after{content:"";width:9px;height:9px;background:var(--px-hot);display:inline-block;margin-left:2px;align-self:center}
.js .steps:has(li.on) li:not(.on){opacity:.55}

/* world band */
.world{background:var(--band);color:var(--band-ink);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
@media (max-width:860px){.world{grid-template-columns:1fr}}
.world .txt{padding:clamp(32px,5vw,72px);display:grid;gap:18px}
.world .label{color:rgba(255,255,255,.7)}
.world h2{font-size:clamp(34px,4.6vw,60px);line-height:1;letter-spacing:-.045em}
.world p{font-size:18px;opacity:.85;max-width:38ch}
.world ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font:13px var(--f-mono)}
.world li{display:flex;gap:10px;align-items:center}
.world li i{width:10px;height:10px;background:var(--blue)}:root[data-theme="white"] .world li i{background:var(--orange)}
.world .g{padding:clamp(12px,3vw,32px)}
.world .g canvas{width:100%;height:auto;aspect-ratio:1}
.world .link{color:#fff}

/* quotes */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.track{display:flex;gap:16px;width:max-content;animation:marq 90s linear infinite}
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(calc(-50% - 8px))}}
.q{width:min(420px,80vw);background:var(--card);color:var(--card-ink);border-radius:20px;padding:26px;display:grid;gap:18px;align-content:space-between;margin:0}
.q blockquote{margin:0;font-size:17px;line-height:1.5}
.q figcaption b{display:block;font-size:15px}
.q figcaption span{font:400 12px var(--f-mono);color:var(--card-muted)}

/* contact */
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;padding-block:clamp(72px,10vw,120px)}
@media (max-width:900px){.contact .wrap{grid-template-columns:1fr}}
.contact .intro{display:grid;gap:22px;align-content:start}
.contact h2{font-size:clamp(40px,5.2vw,68px);line-height:.98;letter-spacing:-.05em;max-width:12ch}
.contact .intro>p{font-size:18px;color:var(--muted);max-width:44ch}
.ways{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:2px}
.ways a,.ways button{all:unset;cursor:var(--cur-hand),pointer;display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:16px;width:100%}
.ways li:last-child a{border-bottom:1px solid var(--line)}
.ways canvas{width:22px;height:22px;flex:none}
.ways small{margin-left:auto;font:500 12px var(--f-mono);color:var(--muted)}
.ways a:hover small{color:var(--ink)}
.form{background:var(--card);color:var(--card-ink);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);display:grid;gap:18px;position:relative}
.form h3{font-size:24px;letter-spacing:-.025em}
.form .sub{color:var(--card-muted);font-size:15px;margin-top:-10px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.form .row2{grid-template-columns:1fr}}
.field{display:grid;gap:6px}
.field span{font:500 12px var(--f-mono);color:var(--card-muted)}
.field input,.field textarea{font:400 16px/1.4 var(--f-ui);color:var(--card-ink);background:var(--field);border:1px solid var(--card-line);border-radius:12px;padding:13px 14px;width:100%;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--card-ink);box-shadow:0 0 0 3px rgba(43,75,255,.18)}
.form .send{width:100%;justify-content:center;background:var(--black);color:#fff;padding:17px}
:root[data-theme="white"] .form .send{background:var(--blue)}
.form .alt{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--card-line);font-size:15px;color:var(--card-muted)}
.form .alt .btn{background:transparent;color:var(--card-ink);box-shadow:inset 0 0 0 1px var(--card-line);padding:12px 16px}
.form .alt .btn:hover{box-shadow:inset 0 0 0 1.5px var(--card-ink);filter:none}
.form [data-status]{font-size:15px;min-height:1.4em;color:var(--card-ink)}
.form [data-status] a{color:inherit}
.form.sending .send{opacity:.6}
.hp{position:absolute;left:-9999px}
.pigeon-layer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:90;image-rendering:pixelated}

/* strip + footer */
.strip{width:100%;height:42px;display:block}
.ftr{border-top:1px solid var(--line)}
.ftr .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-block:26px calc(26px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--muted)}
.ftr nav{display:flex;gap:18px;flex-wrap:wrap}.ftr a{text-decoration:none}.ftr a:hover{color:var(--ink)}

/* page heads */
.p-head .wrap{padding-block:clamp(48px,7vw,96px) clamp(32px,4vw,56px);display:grid;gap:18px}
.p-head h1{font-size:clamp(46px,7vw,96px);line-height:.96;letter-spacing:-.05em}
.p-head .lede{font-size:clamp(18px,1.8vw,22px);color:var(--muted);max-width:52ch;line-height:1.5}

/* work by company */
.chapter{padding-block:clamp(48px,6vw,80px);border-top:1px solid var(--line)}
.ch-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 40px;margin-bottom:clamp(24px,3vw,40px)}
@media (max-width:760px){.ch-h{grid-template-columns:1fr}}
.ch-h h2{font-size:clamp(32px,4vw,48px);letter-spacing:-.04em;line-height:1}
.ch-h .label{grid-column:1}.ch-h p{grid-column:2;grid-row:1/span 2;color:var(--muted);font-size:17px}
@media (max-width:760px){.ch-h p{grid-column:1;grid-row:auto}}
.lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 32px;margin-top:clamp(24px,3vw,40px)}
.lines>div{padding:18px 0;border-top:1px solid var(--line);display:grid;gap:4px}
.lines b{font-size:17px;letter-spacing:-.015em}.lines p{color:var(--muted);font-size:15.5px}
.beyond{margin-top:28px;padding:20px 22px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:6px}
.beyond p{color:var(--muted)}

/* case page */
.c-head .wrap{padding-block:clamp(40px,6vw,80px) 0;display:grid;gap:20px}
.c-head h1{font-size:clamp(38px,5.6vw,76px);line-height:1;letter-spacing:-.045em;max-width:18ch}
.c-head .lede{font-size:clamp(18px,1.8vw,21px);color:var(--muted);max-width:60ch}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px 28px;padding-block:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:8px}
.meta>div{display:grid;gap:4px;font-size:15px}
.cover{border-radius:var(--r-lg);overflow:hidden;position:relative;aspect-ratio:16/9;background:var(--card);margin-top:clamp(24px,3vw,40px)}
.cover canvas{position:absolute;inset:0;width:100%;height:100%}
.tldr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.tldr{grid-template-columns:1fr}}
.tldr>div{background:var(--card);color:var(--card-ink);border-radius:var(--r-md);padding:22px;display:grid;gap:8px;align-content:start}
.tldr .label{color:var(--card-muted)}.tldr p{font-size:16px}
.prose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:12px 48px;padding-block:clamp(36px,5vw,60px);border-top:1px solid var(--line)}
@media (max-width:860px){.prose{grid-template-columns:1fr}}
.prose h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;line-height:1.1}
.prose .body{display:grid;gap:16px;font-size:18px;line-height:1.65;max-width:68ch}
.prose .body>p{color:var(--ink)}
.proc{display:grid;gap:28px}
.proc>div{display:grid;gap:8px}
.proc h3{font-size:19px;letter-spacing:-.02em}
.proc p,.proc li{color:var(--muted);font-size:17px}
.proc ul{margin:0;padding-left:20px;display:grid;gap:8px}
.proc li b{color:var(--ink)}
.dec{display:grid;gap:12px}
.dec>div{padding:18px 20px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:4px}
.dec p{color:var(--muted);font-size:16px}
.shot{border-radius:var(--r-md);overflow:hidden;background:var(--card);color:var(--card-muted);aspect-ratio:16/9;display:grid;place-items:center;position:relative;margin-top:6px}
.shot canvas{position:absolute;inset:0;width:100%;height:100%}
.shot span{position:relative;font:500 12px var(--f-mono);background:var(--card);padding:6px 10px;border-radius:999px}
.next{border-top:1px solid var(--line)}
.next .wrap{padding-block:clamp(40px,5vw,64px);display:grid;gap:10px}
.next a{font-size:clamp(28px,4vw,48px);letter-spacing:-.04em;line-height:1.05;text-decoration:none;font-weight:700;display:inline-flex;gap:14px;flex-wrap:wrap}
.next a span{transition:transform .25s var(--ease-x)}.next a:hover span{transform:translateX(6px)}

/* about */
.ab-hero .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,88px)}
@media (max-width:860px){.ab-hero .wrap{grid-template-columns:1fr}}
.ab-hero .txt{display:grid;gap:22px}
.ab-hero h1{font-size:clamp(44px,5.4vw,76px);line-height:.96;letter-spacing:-.05em}
.ab-hero h1 em{font-style:normal;color:var(--em)}
.ab-hero .lede{font-size:clamp(18px,1.7vw,21px);color:var(--muted);max-width:46ch}
.portrait{background:#fff;border-radius:var(--r-lg);overflow:hidden;position:relative}
.portrait canvas{width:100%;height:auto;aspect-ratio:200/233;image-rendering:pixelated}
.portrait .sw{position:absolute;left:12px;top:12px;display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.92);border-radius:999px;box-shadow:0 0 0 1px #e6e7ea}
.portrait .sw button{all:unset;cursor:var(--cur-hand),pointer;font:500 12px var(--f-mono);color:#5b5e66;padding:6px 10px;border-radius:999px}
.portrait .sw button[aria-pressed="true"]{background:var(--black);color:#fff}
.socials{display:flex;flex-wrap:wrap;gap:8px}
.socials a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;padding:9px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ghost)}
.socials a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.socials canvas{width:16px;height:16px}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:12px 48px}
@media (max-width:860px){.story{grid-template-columns:1fr}}
.story .body{display:grid;gap:18px;font-size:clamp(18px,1.6vw,21px);line-height:1.6;max-width:62ch}
.tl{list-style:none;margin:0;padding:0;position:relative;display:grid}
.tl li{display:grid;grid-template-columns:150px 22px minmax(0,1fr);gap:0 20px;padding-bottom:34px;position:relative}
@media (max-width:640px){.tl li{grid-template-columns:22px minmax(0,1fr)}.tl .yr{grid-column:2}.tl .dot{grid-row:1/span 2;grid-column:1}.tl .tx{grid-column:2}}
.tl .yr{font:500 13px var(--f-mono);color:var(--muted);padding-top:3px}
.tl .dot{position:relative;display:flex;justify-content:center}
.tl .dot i{width:12px;height:12px;background:var(--ink);margin-top:6px;position:relative;z-index:1}
.tl li.now .dot i{background:var(--px-hot);box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--ink)}
.tl .dot::after{content:"";position:absolute;top:18px;bottom:-40px;left:50%;width:0;border-left:2px dotted var(--line)}
.tl li:last-child .dot::after{display:none}
.tl .tx{display:grid;gap:4px}
.tl h3{font-size:20px;letter-spacing:-.02em;line-height:1.25}
.tl .where{font:500 12px var(--f-mono);color:var(--muted)}
.tl p{color:var(--muted);font-size:16px;max-width:60ch}
.decisions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.decisions>div{background:var(--card);color:var(--card-ink);border-radius:var(--r-md);padding:22px;display:grid;gap:8px;align-content:start}
.decisions .label{color:var(--card-muted)}
.decisions s{font-weight:600;font-size:18px;text-decoration-thickness:2px;color:var(--card-muted)}
.decisions p{font-size:16px}
.beyond-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px}
.beyond-g>div{display:grid;gap:8px;align-content:start;padding-top:18px;border-top:1px solid var(--ink)}
.beyond-g h3{font-size:20px;letter-spacing:-.02em}.beyond-g p{color:var(--muted);font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:14px;padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ghost)}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 18px var(--f-mono)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin-top:8px}
.two-col{display:grid;gap:clamp(40px,6vw,72px);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

/* cv */
.cv-bar{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;padding-block:clamp(36px,5vw,64px) 24px}
.sheet{background:#fff;color:#141518;border-radius:var(--r-lg);padding:clamp(24px,5vw,64px);display:grid;gap:28px;margin-bottom:clamp(48px,6vw,96px);font-size:15.5px;line-height:1.55}
.sheet h1{font-size:32px;letter-spacing:-.03em}
.sheet h2{font:500 12px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:#62656b;margin-bottom:10px}
.sheet h3{font-size:16px;margin-bottom:6px}
.sheet .sub{color:#62656b}.sheet a{color:inherit}
.sheet ul{margin:0;padding-left:18px;display:grid;gap:5px}
.sheet .job{margin-bottom:18px}
.sheet section{border-top:1px solid #e6e6ea;padding-top:18px}
@media print{.hdr,.ftr,.cv-bar,.strip,.skip{display:none!important}html,body{background:#fff!important}.sheet{border-radius:0;padding:0;margin:0}.wrap{max-width:none;padding:0}@page{margin:16mm}}

/* 404 */
.nf .wrap{padding-block:clamp(64px,10vw,140px);display:grid;gap:22px;justify-items:start}
.nf h1{font-size:clamp(48px,8vw,110px);letter-spacing:-.05em;line-height:.95}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.track{flex-wrap:wrap;width:auto}.js .rv.pre{opacity:1;transform:none}}

/* skills band: gothic pixel type, pixel stars as separators */
.band{background:var(--black);color:#fff;overflow:hidden;border-block:1px solid rgba(255,255,255,.12);--f-band:var(--f-ui)}
:root[data-theme="white"] .band{background:var(--blue)}
.band-track{display:flex;width:max-content;animation:marq-b 60s linear infinite}
.band-track>div{flex:none;display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);padding-right:clamp(18px,2.4vw,32px)}
.band span{flex:none;font:600 clamp(30px,4.4vw,56px)/1.25 var(--f-band);letter-spacing:-.035em;white-space:nowrap;padding-block:clamp(10px,1.6vw,18px) clamp(14px,2vw,22px)}
.band .star{width:clamp(18px,2.2vw,26px);height:auto;fill:currentColor;flex:none}
.band:hover .band-track{animation-play-state:paused}
@keyframes marq-b{to{transform:translateX(-50%)}}
.case .img img,.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-x)}
.case:hover .img img{transform:scale(1.03)}
.form .send canvas{width:30px;height:22px;margin-block:-4px;image-rendering:pixelated;--px-fg:#fff}
.loop .cv canvas{image-rendering:pixelated}
@media (prefers-reduced-motion:reduce){.band-track{animation:none}}

/* pixel icons (inline svg) */
.pxi{display:block;flex:none}
.ways .pxi{width:22px;height:22px}
.socials .pxi{width:16px;height:16px}

/* mobile menu */
.menu-btn{display:none;width:44px;height:44px;border-radius:999px;border:0;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ghost);place-items:center;padding:0}
.menu-btn .x{display:none}.menu-btn[aria-expanded="true"] .o{display:none}.menu-btn[aria-expanded="true"] .x{display:block}
.mnav{position:fixed;left:0;right:0;top:64px;bottom:0;background:var(--bg);z-index:39;overflow:auto;border-top:1px solid var(--line)}
.mnav[hidden]{display:none}
.mnav nav{display:grid;padding-top:12px}
.mnav nav a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;font-size:40px;font-weight:700;letter-spacing:-.04em;padding:14px 0;border-bottom:1px solid var(--line)}
.mnav nav a[aria-current="page"]{color:var(--em)}
.mnav nav a span{font-size:24px;font-weight:500}
.mnav-foot{display:flex;align-items:center;justify-content:space-between;padding-block:24px}
.menu-open{overflow:hidden}
@media (max-width:640px){.nav>a:not(.cta),.nav>.themes{display:none}.menu-btn{display:grid}.nav{gap:10px}.nav .cta{padding:9px 14px}}
@media (min-width:641px){.mnav{display:none!important}}

/* timeline: company logo appears on hover and turns */
.tl li{outline-offset:6px}
.tl .logo{position:absolute;right:0;top:-10px;width:clamp(96px,11vw,132px);display:grid;justify-items:center;gap:8px;color:#fff;opacity:0;transform:translateX(12px);transition:opacity .35s var(--ease-x),transform .35s var(--ease-x);perspective:400px;pointer-events:none}
:root[data-theme="white"] .tl .logo{color:var(--blue)}
.tl .logo .spin{display:block;width:100%;aspect-ratio:1}
.tl .logo svg{width:100%;height:100%;display:block}
.tl .logo small{font:500 10px var(--f-mono);color:var(--muted);white-space:nowrap}
.tl li:hover .logo,.tl li:focus-within .logo,.tl li:focus .logo{opacity:1;transform:none}
.tl li:hover .spin,.tl li:focus .spin{animation:spinY 2.6s linear infinite}
@keyframes spinY{to{transform:rotateY(360deg)}}
@media (min-width:641px){.tl .tx{padding-right:clamp(120px,14vw,170px)}}
@media (hover:none),(max-width:640px){.tl .logo{opacity:.95;transform:none;width:44px;top:0}.tl .logo small{display:none}.tl .tx{padding-right:56px}}
@media (prefers-reduced-motion:reduce){.tl li .spin{animation:none!important}}

/* ================= v5 ================= */
@font-face{font-family:"Geist Pixel";src:url(../assets/fonts/GeistPixel-Square.woff2) format("woff2");font-display:swap}
.themes{display:none!important}
/* skills band: big pixel type on white */
.band{background:#fff;color:#0b0b0f;border:0}
.band span{font:400 clamp(52px,8.6vw,128px)/1.08 "Geist Pixel",var(--f-mono);letter-spacing:-.01em;padding-block:clamp(14px,2vw,26px)}
.band .star{width:clamp(14px,1.4vw,22px)}
.band-track{animation-duration:48s}

/* selected work: name | visual | role & tools */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.row>*{padding:clamp(28px,4vw,56px) clamp(16px,2.6vw,40px)}
.w-l,.w-r{display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.w-l{padding-left:0}.w-r{padding-right:0}
.w-l>div:first-child{display:grid;gap:12px}
.w-l h3{font-size:clamp(24px,2.4vw,32px);line-height:1.12;letter-spacing:-.03em}
.w-l h3 a{text-decoration:none}
.w-l p{color:var(--muted);font-size:16.5px;line-height:1.55;max-width:36ch}
.w-meta{display:grid;gap:6px}
.w-r>div:first-child{display:grid;gap:6px}
.w-r>div:first-child span:last-child{font-size:18px}
.tools{display:flex;gap:8px;flex-wrap:wrap}
.tools span{font:500 12px var(--f-mono);padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.14)}
.w-vis{position:relative;border-inline:1px solid var(--line);display:grid;place-items:center;text-decoration:none;color:#fff}
.slides{position:relative;width:100%;max-width:460px;aspect-ratio:4/5;background:#0b0b0f;overflow:hidden;border-radius:6px;transition:transform .5s var(--ease-x)}
.slides::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 55% 35%,rgba(255,255,255,.22),transparent 70%)}
.w-vis:hover .slides{transform:scale(.985)}
.s{position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;padding:32px;opacity:0;filter:blur(14px);transform:scale(1.05) rotate(-1deg);transition:opacity .8s var(--ease-x),filter .8s var(--ease-x),transform 1s var(--ease-x)}
.s.on{opacity:1;filter:none;transform:none}
.s.img{padding:0}.s img{width:100%;height:100%;object-fit:cover}
.s b{font:700 clamp(40px,4.6vw,68px)/1 var(--f-ui);letter-spacing:-.045em}
.s b.q{font-size:clamp(28px,3vw,42px);line-height:1.08;max-width:12ch}
.s span{font-size:16px;opacity:.75}
.w-vis .chip.ph{left:auto;right:12px;top:12px}
@media (max-width:900px){.row{grid-template-columns:1fr}.row>*{padding:24px 0}.w-vis{border-inline:0;padding-top:0}.w-l{padding-bottom:16px}.w-r{flex-direction:row;flex-wrap:wrap;padding-top:0}}

/* scroll progress (desktop) */
.progress{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:30;display:none;justify-items:end;gap:10px;font:500 11px var(--f-mono);color:var(--ink);pointer-events:none}
@media (min-width:1000px){.progress{display:grid}}
.progress i{width:2px;height:150px;background:var(--line);position:relative}
.progress b{position:absolute;left:0;top:0;width:2px;height:100%;background:#fff;transform:scaleY(var(--p,0));transform-origin:top}

/* cursor follower: a pixel that trails the pointer; becomes "hold to open" on work */
.cur{position:fixed;left:0;top:0;pointer-events:none;z-index:95;display:none;will-change:transform}
@media (hover:hover) and (pointer:fine){.cur{display:block}}
.cur .sq{position:absolute;width:10px;height:10px;background:#fff;transform:translate(-50%,-50%);transition:width .25s var(--ease-x),height .25s var(--ease-x),opacity .2s,background .2s;box-shadow:0 0 0 1px rgba(11,11,15,.25)}
.cur.link .sq{width:26px;height:26px;background:transparent;box-shadow:inset 0 0 0 2px #fff}
.cur .pill{position:absolute;transform:translate(-50%,-50%) scale(.5);opacity:0;background:#0b0b0f;color:#fff;font:500 12px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;padding:13px 18px;border-radius:999px;white-space:nowrap;overflow:hidden;transition:opacity .2s,transform .3s var(--ease-x)}
.cur .pill .fill{position:absolute;inset:0;background:#fff;transform:scaleX(var(--h,0));transform-origin:left}
.cur .pill .t{position:relative;mix-blend-mode:difference}
.cur.hold .pill{opacity:1;transform:translate(-50%,-50%) scale(1)}.cur.hold .sq{opacity:0}
.cur.nudge .pill{animation:nudge .35s}
@keyframes nudge{25%{transform:translate(-56%,-50%)}75%{transform:translate(-44%,-50%)}}
.has-cur [data-hold],.has-cur [data-hold] *{cursor:none!important}
.wipe{position:fixed;inset:0;width:100vw;height:100vh;z-index:120;pointer-events:none}

/* case page */
.c-nav{display:flex;justify-content:space-between;gap:16px;padding-top:22px;font-size:15px}
.c-nav a{text-decoration:none;color:var(--muted)}.c-nav a:hover{color:var(--ink)}
.c-hero .wrap{padding-block:clamp(36px,5vw,72px) 0;display:grid;gap:22px}
.c-hero h1{font-size:clamp(40px,6vw,84px);line-height:.98;letter-spacing:-.05em;max-width:15ch}
.c-hero .lede{font-size:clamp(18px,1.8vw,21px);color:var(--muted);max-width:62ch}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));border-block:1px solid var(--line)}
.stats>div{padding:22px 24px;display:grid;gap:6px;border-left:1px solid var(--line)}
.stats>div:first-child{border-left:0;padding-left:0}
.stats b{font-size:clamp(32px,4vw,54px);letter-spacing:-.045em;line-height:1}
.stats span{color:var(--muted);font-size:15px}
@media (max-width:640px){.stats>div{border-left:0;border-top:1px solid var(--line);padding-left:0}.stats>div:first-child{border-top:0}}
.c-hero .cover{aspect-ratio:16/10;border-radius:8px;margin-top:8px}
.c-hero .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(32px,5vw,80px);padding-block:clamp(48px,6vw,88px)}
.toc{position:sticky;top:96px;align-self:start;display:grid;gap:12px}
.toc ol{list-style:none;padding:0;margin:0;display:grid}
.toc a{display:flex;gap:10px;padding:7px 0;text-decoration:none;color:var(--muted);font-size:15px;transition:color .2s}
.toc a span{font:500 12px var(--f-mono);padding-top:2px}
.toc a.on,.toc a:hover{color:var(--ink)}
.toc a.on span::after{content:"";display:inline-block;width:6px;height:6px;background:#fff;margin-left:6px;vertical-align:middle}
@media (max-width:900px){.c-body{grid-template-columns:1fr}.toc{position:static}}
.c-main{display:grid}
.c-main .tldr{margin-bottom:clamp(24px,3vw,40px)}
.c-sec{padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--line);display:grid;gap:14px;scroll-margin-top:80px}
.c-sec .num{font:500 12px var(--f-mono);color:var(--muted)}
.c-sec h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.04em;line-height:1.05}
.c-sec .body{display:grid;gap:18px;font-size:18px;line-height:1.65}
.c-sec .body>p{max-width:68ch}
.c-sec .proc{counter-reset:pc;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.c-sec .proc>div{counter-increment:pc;background:#fff;color:#0b0b0f;border-radius:14px;padding:22px;display:grid;gap:8px;align-content:start}
.c-sec .proc>div::before{content:counter(pc,decimal-leading-zero);font:500 12px var(--f-mono);color:#5b5e66}
.c-sec .proc h3{font-size:20px}.c-sec .proc p,.c-sec .proc li{color:#5b5e66;font-size:16px}.c-sec .proc li b{color:#0b0b0f}
.c-sec .proc .shot{background:#f1f2f4;color:#5b5e66}.c-sec .proc .shot span{background:#fff}
.c-sec .dec{counter-reset:dc;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.c-sec .dec>div{counter-increment:dc;background:#0b0b0f;color:#fff;border-radius:14px;padding:22px;box-shadow:none;align-content:start}
.c-sec .dec>div::before{content:counter(dc,decimal-leading-zero);font:500 12px var(--f-mono);opacity:.6}
.c-sec .dec p{color:rgba(255,255,255,.72)}
.next a{font-size:clamp(32px,5vw,64px)}

/* ================= horizontal timeline: a metro line ================= */
.tlh{position:relative;height:calc(100vh * (var(--n) * .55 + .6))}
.tlh-pin{position:sticky;top:64px;height:calc(100vh - 64px);min-height:560px;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.tlh-head{display:flex;align-items:baseline;gap:18px;padding-top:clamp(18px,3vh,36px);width:100%}
.tlh-head h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.04em}
.tlh-hint{margin-left:auto}
.tlh-date{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:.9}
.tlh-track{position:relative;align-self:center;height:min(470px,62vh)}
.tlc{position:absolute;left:50%;top:0;width:min(600px,84vw);transform:translateX(-50%);display:grid;gap:12px;align-content:start;font-family:"Geist Pixel",var(--f-mono);color:#fff;transition:opacity .25s;will-change:transform,opacity}
.tlc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;opacity:.75}
.tlc-top .br{padding:2px 8px;box-shadow:inset 0 0 0 1.5px #fff}
.tlc h3{font:400 clamp(40px,5.4vw,72px)/1 "Geist Pixel",var(--f-mono);letter-spacing:-.02em;margin-top:4px}
.tlc-logo{position:absolute;right:0;top:34px;width:56px;height:56px;perspective:300px;color:#fff;opacity:.9}
.tlc-logo .spin{display:block;width:100%;height:100%}.tlc-logo svg{width:100%;height:100%}
.tlc:hover .tlc-logo .spin{animation:spinY 2.4s linear infinite}
.tlc .meta{font-size:clamp(12px,1.1vw,15px);text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.tlc .tx{font-size:clamp(15px,1.3vw,18px);line-height:1.6;max-width:56ch}
.tlc ul{list-style:none;margin:4px 0 0;padding:0}
.tlc li{font-size:14px;padding:9px 0;border-top:1px solid rgba(255,255,255,.22)}
.tlc li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.tlc li::before{content:"– "}
.tlc .tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:13px}
.tlc .tags span{padding:6px 10px;box-shadow:inset 0 0 0 1.5px #fff}
.tlc .tags b{font-weight:400;background:#fff;color:var(--blue);padding:6px 10px;margin-left:8px}
.tlc .tags em{font-style:normal;opacity:.85}
.tlh-metro{padding-bottom:clamp(14px,3vh,32px);width:100%}
.metro{width:100%;height:auto;display:block;overflow:visible}
.metro .trk{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2.5}
.metro .trk.on{stroke:#fff;stroke-dasharray:var(--len,1) 1;stroke-dashoffset:calc(1 - var(--prog,0))}
.metro .nd{cursor:var(--cur-hand),pointer}
.metro .nd rect{fill:var(--blue);stroke:#fff;stroke-width:2.5;transition:transform .3s var(--ease-x)}
.metro .nd .ring{fill:none;stroke-width:2;opacity:0;transform:scale(.5)}
.metro .nd.past rect:first-child{fill:#fff}
.metro .nd.on .ring{opacity:1;transform:none}
.metro .ln{fill:rgba(255,255,255,.75);font:500 11px var(--f-mono)}
.metro .dt{fill:#fff}
@media (max-width:700px){.tlh-pin{min-height:620px}.tlc-logo{width:40px;height:40px;top:30px}.tlc ul li:nth-child(3){display:none}.metro .ln{font-size:16px}.tlh-track{height:min(520px,66vh)}}
@media (prefers-reduced-motion:reduce){.tlh{height:auto}.tlh-pin{position:static;height:auto}.tlh-track{height:auto;display:grid;gap:56px;padding:32px 20px}.tlc{position:static;transform:none!important;opacity:1!important;width:auto}.tlh-date{display:none}}
.tlh-pin{touch-action:pan-y;user-select:none}.tlh-pin.drag{cursor:grabbing}
@media (max-width:700px){.tlh-hint{display:none}.tlh-head{flex-direction:column;gap:4px}.metro{min-height:70px}}

/* about portrait: dither on the page, photo on hover */
.portrait{background:transparent;border-radius:0;overflow:visible;--px-bg:transparent;--px-fg:#0b0b0f;position:relative}
.portrait canvas{cursor:none}
.portrait .hint{display:block;margin-top:10px}
@media (hover:none){.portrait .hint{display:none}}
.socials{gap:10px}
.socials a{width:52px;height:52px;padding:0;justify-content:center;border-radius:999px}
.socials .pxi{width:22px;height:22px}

/* places on the globe */
.places{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:2px}
.places button{all:unset;cursor:var(--cur-hand),pointer;display:flex;align-items:center;gap:10px;font:13px var(--f-mono);color:rgba(255,255,255,.85);padding:6px 0}
.places button span{opacity:.6}
.places button i{width:10px;height:10px;background:var(--blue);flex:none;transition:transform .2s}
.places button:hover,.places button[aria-pressed="true"]{color:#fff}
.places button[aria-pressed="true"] i{background:#fff;transform:scale(1.3)}
.places button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.world .g{position:relative}
.world .g canvas{cursor:var(--cur-hand),pointer}
.place{position:absolute;right:clamp(8px,2vw,24px);bottom:clamp(8px,2vw,24px);width:min(300px,62%);margin:0;background:#fff;color:#0b0b0f;border-radius:12px;padding:8px 8px 12px;display:grid;gap:8px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);animation:pop .35s var(--ease-x)}
.place[hidden]{display:none}
.place img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block;background:#e9eaee}
.place.nophoto img{visibility:hidden}
.place.nophoto::before{content:"";position:absolute;left:8px;right:8px;top:8px;aspect-ratio:4/3;border-radius:6px;background:repeating-conic-gradient(#e9eaee 0 25%,#f4f5f7 0 50%) 0 0/16px 16px}
.place figcaption{font:12px var(--f-mono);padding:0 4px;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.place figcaption b{font:600 14px var(--f-ui)}
.place figcaption em{display:none;font-style:normal;color:#5b5e66;width:100%}
.place.nophoto figcaption em{display:block}
.place .x{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:999px;border:0;background:#0b0b0f;color:#fff;font-size:16px;line-height:1;cursor:var(--cur-hand),pointer}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}}

/* hero: text, then a wide pixel stage (devices in the middle, the hands span it) */
.hero .wrap{grid-template-columns:1fr;padding-bottom:0}
.hero .txt{max-width:900px}
.hero h1 em{display:inline}
.stage{aspect-ratio:1540/640;width:100%;max-width:1600px;margin:clamp(8px,2vw,24px) auto 0;position:relative}
.stage .cap{position:absolute;left:0;right:0;bottom:-28px;display:block}
.hero{padding-bottom:clamp(48px,6vw,80px)}
.hero .wrap{padding-top:clamp(28px,4vw,56px)}
.hero .txt{max-width:none;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);row-gap:20px;align-items:end}
.hero .txt h1{grid-row:1/span 2;font-size:clamp(44px,6vw,92px)}
.hero .txt .lede{font-size:clamp(17px,1.5vw,20px)}
@media (max-width:860px){.hero .txt{grid-template-columns:1fr}.hero .txt h1{grid-row:auto}}
.stage{margin-top:clamp(0px,1vw,12px)}

/* hero v3: text left, pixel stage right */
.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;padding-block:clamp(32px,5vw,72px)}
.hero .txt{display:grid;grid-template-columns:1fr;gap:24px}
.hero .txt h1{grid-row:auto;font-size:clamp(46px,6.2vw,96px)}
.stage{aspect-ratio:920/640;max-width:none;margin:0}
.stage .cap{left:0;right:auto;bottom:-22px}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}
.hero .txt h1{font-size:clamp(44px,5vw,80px)}

/* v6 */
.hero .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.stage{aspect-ratio:920/640}
.band span{font-size:clamp(28px,3.8vw,56px);padding-block:clamp(8px,1.2vw,14px)}
.band .star{width:clamp(10px,1vw,16px)}
.steps{grid-template-columns:1fr}
.steps li b{font-size:22px}
.brand-i{display:block}

/* first-visit pixel intro */
.intro-ov{display:none}
.intro .intro-ov{display:block;position:fixed;inset:0;z-index:200;background:var(--blue);animation:intro-failsafe 0s linear 3.5s forwards}
.intro-ov canvas{position:absolute;inset:0;width:100%;height:100%;background:transparent}
.intro .intro-ov::before{content:"";position:absolute;inset:0;background:var(--blue);z-index:-1}
.intro-ov.out::before{display:none}
.intro-meta{position:absolute;left:max(20px,4vw);right:max(20px,4vw);bottom:max(20px,4vh);display:flex;justify-content:space-between;font:500 13px var(--f-mono);color:#fff;transition:opacity .2s}
.intro-ov.out .intro-meta{opacity:0}
.intro body{overflow:hidden}
@keyframes intro-failsafe{to{opacity:0;visibility:hidden}}
/* mobile: text first, animation below (must come last to win over the desktop columns) */
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:8px;padding-bottom:24px}.hero .txt h1{font-size:clamp(44px,12vw,64px)}.stage{width:100%;margin:0}}
/* mobile header: menu left, logo centred, contact right */
@media (max-width:640px){
  .hdr .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
  .hdr .nav{display:contents}
  .hdr .menu-btn{grid-column:1;grid-row:1;justify-self:start}
  .hdr .brand{grid-column:2;grid-row:1;justify-self:center;font-size:16px}
  .hdr .nav .cta{grid-column:3;grid-row:1;justify-self:end;padding:9px 14px;font-size:14px}
}
@media (max-width:400px){.hdr .brand svg{display:none}}

/* 404: drag the loose pixel home */
.nf .wrap.nf-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(40px,7vw,96px)}
.nf-txt{display:grid;gap:18px;justify-items:start}
.nf h1{font-size:clamp(44px,6vw,88px)}
.nf-hint{color:#fff}
.nf-cv{width:100%;aspect-ratio:16/10;touch-action:none;display:block}
.nf [data-nf-fix][hidden]{display:none}
@media (max-width:860px){.nf .wrap.nf-grid{grid-template-columns:1fr}.nf-cv{aspect-ratio:4/3}}
.form .privacy{font-size:13px;color:var(--card-muted);margin-top:-8px}
.cv-bar .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.show-s{display:none}
@media (max-width:640px){.c-nav .hide-s{display:none}.c-nav .show-s{display:inline}}
@media (max-width:900px){.toc{display:none}}

/* hero v7: text up top, pixel stage sits on the band below */
.hero{padding-bottom:0}
.hero .wrap{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:stretch;padding-top:clamp(28px,4.5vw,64px);padding-bottom:0;gap:clamp(16px,3vw,48px)}
.hero .txt{align-self:start;padding-top:clamp(8px,2vw,32px)}
.stage{align-self:end;margin:0;margin-top:clamp(-40px,-2vw,0px)}
.stage canvas{display:block}
@media (max-width:860px){.hero .wrap{padding-bottom:0}.stage{margin-top:8px}}
.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.hero .txt h1{font-size:clamp(44px,4.9vw,80px)}
.hero .txt .lede{max-width:34ch}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:4px}.hero .txt h1{font-size:clamp(40px,11vw,60px)}.hero .txt .lede{max-width:none}.stage{width:100%}}
@media (min-width:861px){
  .hero .wrap{min-height:min(860px,calc(100svh - 64px - clamp(56px,6vw,90px)))}
  .stage{width:128%;justify-self:end;margin-left:-28%;pointer-events:none}
  .hero .txt{position:relative;z-index:1}
}
@media (min-width:861px){.hero{overflow-x:clip}.stage{margin-left:-6%;margin-right:-22%;width:128%}}
/* v8 copy fixes */
.ab-hero h1 em{display:block}
.hero .txt .lede{max-width:none;text-wrap:balance}
@media (min-width:861px){.hero .txt .lede{width:min(100%,32em);font-size:clamp(17px,1.35vw,20px)}}
@media (max-width:860px){.hero .txt .lede{font-size:16px;line-height:1.5}}
.sec-h h2.big{font-size:clamp(48px,7vw,104px);line-height:.95;letter-spacing:-.05em}
.tools{gap:10px;align-items:center}
.tools .ti{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.14);padding:0;color:#fff}
.story .body .quote{display:block;margin-top:14px;font-style:normal;font-weight:650;color:#fff;font-size:1.15em;letter-spacing:-.02em}
.tlc h3{text-wrap:balance}
.tlc[data-i="0"] h3,.tlc[data-i="1"] h3{font-size:clamp(28px,3.4vw,46px)}
/* mobile timeline: a simple vertical list, no pinning */
@media (max-width:700px){
  .tlh{height:auto}.tlh-pin{position:static;height:auto;min-height:0;overflow:visible;display:block}
  .tlh-date,.tlh-metro,.tlh-hint{display:none}
  .tlh-track{height:auto;display:grid;gap:0;padding:8px 20px 24px}
  .tlc{position:static;transform:none!important;opacity:1!important;width:auto;pointer-events:auto!important;padding:22px 0;border-top:1px solid var(--line);gap:10px}
  .tlc h3{font-size:28px!important}.tlc-logo{width:36px;height:36px;top:22px}
  .tlc ul li:nth-child(3){display:list-item}.tlc .tx{font-size:15px}
}
.mau{margin:8px 0 0;display:grid;gap:8px}.mau svg{width:100%;height:clamp(120px,18vw,200px)}.mau figcaption{display:flex;justify-content:space-between;font:500 12px var(--f-mono);color:var(--muted)}
@media (max-width:860px){.hero .txt .lede{font-size:15.5px;letter-spacing:-.012em;text-wrap:pretty}}
@media (max-width:374px){.hero .txt .lede{font-size:14.5px}}
.contact h1{font-size:clamp(40px,5.2vw,68px);line-height:.98;letter-spacing:-.05em;max-width:13ch;margin:0}

/* work slides v2: white card, blue pixel numbers (variant .alt-blue = deeper blue card, white text) */
.slides{background:#fff;color:var(--blue)}
.slides::before{display:none}
.s b{font:400 clamp(56px,6.4vw,104px)/.9 "Geist Pixel",var(--f-mono);letter-spacing:-.02em}
.s span{font:500 13px var(--f-mono);letter-spacing:.02em;opacity:1;color:var(--blue);text-transform:lowercase}
.s b.ql{font:700 clamp(28px,2.8vw,40px)/1.05 var(--f-ui);letter-spacing:-.04em;max-width:11ch;background:none;padding:0;border-radius:0;color:var(--blue)}
.rows.alt-blue .slides{background:#1f3be6}
.rows.alt-blue .s b,.rows.alt-blue .s span,.rows.alt-blue .s b.ql{color:#fff}

/* intro v2: pixel line, bar and %; exits through white blocks */
.intro .intro-ov{animation:intro-failsafe 0s linear 4.5s forwards}
.intro-meta{display:none}
.intro-c{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:18px;width:min(88vw,720px);text-align:center;color:#fff;transition:opacity .15s}
.intro-line{margin:0;font:400 clamp(26px,4.2vw,52px)/1.1 "Geist Pixel",var(--f-mono);letter-spacing:-.01em;text-wrap:balance}
.intro-bar{width:min(320px,70vw);height:6px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.intro-bar i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.intro-pct{font:500 13px var(--f-mono);letter-spacing:.06em}
.intro-ov.out::before{display:none}
.intro-ov.out .intro-c{opacity:0}
.intro-ov.out{background:transparent!important}
.tlc-logo img{width:100%;height:100%;object-fit:contain;display:block}
.tlc-logo{top:-18px;width:132px;height:76px;right:0;opacity:1}.tlc-logo img{object-position:right center}.tlc h3{margin-top:14px}@media (max-width:700px){.tlc-logo{width:84px;height:48px;top:16px}}
/* v9: static logos, year labels, quote */
.tlc:hover .tlc-logo .spin,.tlc-logo .spin{animation:none!important}
.metro .ln{fill:rgba(255,255,255,.55);font:500 12px var(--f-mono);letter-spacing:.04em;transition:fill .3s}
.story .body blockquote.quote{margin:26px 0 0;padding:0;font-weight:400;font-size:1em;letter-spacing:0}
.story .body blockquote.quote p{margin:0;font-family:"Geist Pixel",var(--f-mono);font-size:clamp(22px,2.4vw,32px);line-height:1.2;color:#fff;letter-spacing:0}
.story .body blockquote.quote cite{display:block;margin-top:10px;font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:rgba(255,255,255,.7)}
.story .body blockquote.quote cite::before{content:"— "}
@media (max-width:700px){.tlc-logo{display:none!important}.metro .ln{font-size:18px}}
/* v10: place names build from pixels (no background name) */
.tlh-date{display:none}
.tlc h3{position:relative}
.tlc h3.pxing{color:transparent}
.tlc h3.pxing.pxdone{color:#fff;transition:color .25s}
.tlc h3 .pxt{position:absolute;pointer-events:none;z-index:1}
/* v11: the mark blinks every few seconds */
.pc-lid{opacity:0;animation:pcblink 5.2s steps(1) infinite}
.brand .pc-lid{fill:var(--bg)}
@keyframes pcblink{0%,93%,100%{opacity:0}94%,96.5%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pc-lid{animation:none}}
/* v11: design system page */
.ds-head .wrap{padding-bottom:clamp(24px,3vw,40px)}
.ds-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ds-toc a{font:500 13px var(--f-mono);text-decoration:none;padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ghost);transition:background .15s,color .15s}
.ds-toc a:hover,.ds-toc a:focus-visible{background:var(--ink);color:var(--bg)}
.ds-sec{border-top:1px solid var(--line);scroll-margin-top:64px}
.ds-sec>.wrap{padding-block:clamp(56px,8vw,112px);display:grid;gap:28px}
.ds-h{display:grid;gap:12px;max-width:760px}
.ds-h h2{font-size:clamp(32px,4.4vw,56px);line-height:1.02;letter-spacing:-.045em}
.ds-h p{color:var(--muted);font-size:18px}
.ds-sub{font:500 13px var(--f-mono);color:var(--muted);text-transform:lowercase;letter-spacing:.03em;margin-top:12px}
.ds-note{color:var(--muted);font-size:15px;line-height:1.55;max-width:62ch}
.ds-note code,.ds-als code{font:500 13px var(--f-mono);color:var(--ink)}
.ds-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.ds-px{font:400 22px "Geist Pixel",var(--f-mono)}
.ds-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.ds-cards>div{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;gap:10px;align-content:start}
.ds-cards h3{font-size:26px;letter-spacing:-.03em}.ds-cards p{color:var(--muted)}
/* mark */
.ds-mark{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.ds-mark-big{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r-lg);display:grid;place-items:center;max-width:100%}
.ds-mark-svg{width:64%;height:64%;overflow:visible}
.ds-grid line{stroke:rgba(255,255,255,.28);stroke-width:.03}
.ds-mark-svg .pc-lid{fill:#fff}
.ds-mark-txt{display:grid;gap:16px}.ds-mark-txt p{font-size:18px;max-width:52ch}.ds-mark-txt p b{font-weight:650}
.ds-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:6px 0 0}
.ds-dl div{background:var(--bg);padding:14px 16px;display:grid;gap:4px}
.ds-dl dt{font:500 12px var(--f-mono);color:var(--muted)}.ds-dl dd{margin:0;font-size:15px}
.ds-sz{display:grid;gap:8px;justify-items:center}.ds-sz small,.ds-ic small{font:500 11px var(--f-mono);color:var(--muted)}
.ds-tile svg{width:100%;height:100%;display:block}.ds-tile .pc-bg{fill:#fff}.ds-tile .pc-fg{fill:var(--blue)}
.ds-lock{display:inline-flex;align-items:center;gap:12px;padding:16px 22px;border-radius:var(--r-md);font-weight:650;font-size:20px;letter-spacing:-.02em}
.ds-lock svg{width:30px;height:30px;border-radius:7px}
.ds-lock.on-blue{box-shadow:inset 0 0 0 1px var(--line)}.ds-lock.on-blue .pc-bg{fill:#fff}.ds-lock.on-blue .pc-fg{fill:var(--blue)}
.ds-lock.on-white{background:#fff;color:var(--black)}.ds-lock.on-white .pc-bg{fill:var(--blue)}.ds-lock.on-white .pc-fg{fill:#fff}
.ds-lock.on-black{background:var(--black);color:#fff}.ds-lock.on-black .pc-bg{fill:#fff}.ds-lock.on-black .pc-fg{fill:var(--black)}
.ds-donts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.ds-dont{display:grid;gap:10px}.ds-dont-v{aspect-ratio:16/10;border:1px dashed var(--line);border-radius:var(--r-md);display:grid;place-items:center;position:relative;overflow:hidden}
.ds-dont-v::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1px),rgba(255,255,255,.6) 50%,transparent calc(50% + 1px))}
.ds-dont-v svg{width:100%;height:100%}.ds-dont p{font-size:14px;color:var(--muted)}.ds-dont b{color:var(--ink)}
/* color */
.ds-sws{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px}
.ds-sw{display:grid;gap:10px;align-content:start}
.ds-chip{aspect-ratio:4/3;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);padding:14px;display:flex;align-items:flex-end;font-weight:650}
.ds-sw dl{margin:0;display:grid;gap:2px}.ds-sw dl div{display:flex;gap:8px;font:500 12px var(--f-mono)}.ds-sw dt{color:var(--muted);width:44px}.ds-sw dd{margin:0}
.ds-sw p{font-size:14px}.ds-sw small{font:500 11px var(--f-mono);color:var(--muted)}
.ds-als{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.ds-al{display:grid;grid-template-columns:40px 1fr;gap:2px 12px;align-items:center}.ds-al i{grid-row:span 2;width:40px;height:40px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.ds-al span{font-size:14px}.ds-al code{font-size:11px!important;color:var(--muted)!important}
/* type */
.ds-tys{display:grid;border-top:1px solid var(--line)}
.ds-ty{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:24px;padding-block:26px;border-bottom:1px solid var(--line);align-items:center}
.ds-ty-m{display:grid;gap:4px}.ds-ty-m b{font-weight:650}.ds-ty-m span{font-size:14px}.ds-ty-m small{font:500 11px/1.5 var(--f-mono);color:var(--muted)}
.ds-ty-s{min-width:0;overflow-wrap:anywhere}
/* pixels */
.ds-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}.ds-2>div{display:grid;gap:12px;align-content:start}
.ds-dith{width:100%;max-width:420px;height:auto;margin-top:8px}
.ds-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}.ds-list li{font-size:15px;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line)}.ds-list b{color:var(--ink);font-weight:600;margin-right:6px}
.ds-ic{display:grid;gap:8px;justify-items:center;min-width:64px}
.ds-ic>span{width:56px;height:56px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center}.ds-ic svg{width:24px;height:24px}
/* components */
.ds-comp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ds-demo{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;gap:16px;align-content:start;min-width:0}
.ds-card{background:var(--card);color:var(--card-ink);border-color:transparent}.ds-card .label{color:var(--card-muted)}
.ds-demo .stats>div{padding:14px 16px}.ds-demo .stats b{font-size:clamp(28px,3vw,40px)}
.ds-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:"Geist Pixel",var(--f-mono)}
.ds-tags span{font-size:13px;padding:5px 9px;border:1px solid #fff}.ds-tags b{font-weight:400;background:#fff;color:var(--blue);padding:5px 10px;margin-left:8px}.ds-tags em{font-style:normal;font-size:13px}
/* motion, layout, voice, access */
.ds-mo,.ds-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ds-mo>div,.ds-specs>div{background:var(--bg);padding:22px;display:grid;gap:8px;align-content:start}
.ds-mo b,.ds-ac b{font-weight:650}.ds-mo p,.ds-ac p{font-size:15px;color:var(--muted)}.ds-mo small{font:500 12px var(--f-mono)}
.ds-specs b{font-size:20px;letter-spacing:-.02em;font-weight:600}.ds-ac b{font-size:17px}
.ds-vos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ds-vo{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:grid;gap:12px}.ds-vo>b{font-weight:650}
.ds-vo p{display:grid;grid-template-columns:52px 1fr;gap:10px;font-size:15px}.ds-vo p span{font:500 12px/1.9 var(--f-mono);color:var(--muted)}
.ds-vo .no{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.5)}.ds-vo .no span{text-decoration:none}
@media (max-width:800px){.ds-mark,.ds-2,.ds-comp,.ds-vos{grid-template-columns:1fr}.ds-ty{grid-template-columns:1fr;gap:10px}.ds-mark-big{max-width:360px}}
@media (max-width:480px){.ds-dl{grid-template-columns:1fr}}
.ds-mo,.ds-specs{background:none;gap:0}
.ds-mo>div,.ds-specs>div{box-shadow:1px 1px 0 var(--line);margin:0 -1px -1px 0}
/* v12: header uses the bare white mark, no tile */
.brand svg{width:22px;height:22px;border-radius:0;color:var(--ink)}
.ds-lock svg{width:26px;height:26px;border-radius:0}
.ds-lock.on-blue,.ds-lock.on-black{color:#fff}.ds-lock.on-white svg{color:var(--blue)}
/* v13: before / after slider (Playfull case) */
.ba-sec>.wrap{padding-block:clamp(40px,6vw,80px);display:grid;gap:24px;justify-items:center}
.ba-h{display:grid;gap:10px;text-align:center;justify-items:center;max-width:620px}
.ba-h h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.04em;line-height:1.02}.ba-h p{color:var(--muted)}
.ba{position:relative;width:min(100%,1100px);aspect-ratio:1600/949;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-line{position:absolute;top:4%;bottom:4%;left:var(--p);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.ba-knob i{width:0;height:0;border-block:6px solid transparent}.ba-knob i:first-child{border-right:7px solid var(--blue)}.ba-knob i:last-child{border-left:7px solid var(--blue)}
.ba-tag{position:absolute;top:8px;font:500 12px var(--f-mono);background:var(--black);color:#fff;padding:5px 9px;border-radius:999px;pointer-events:none;transition:opacity .2s}
.ba-tag.l{left:12px}.ba-tag.r{right:12px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;pointer-events:none}
.ba-range:focus-visible+*{outline:none}
.ba:has(.ba-range:focus-visible) .ba-knob{outline:3px solid var(--black);outline-offset:3px}
@media (max-width:700px){.ba-knob{width:36px;height:36px;margin:-18px 0 0 -18px}.ba-tag{font-size:10px;top:2px}}
.ba-knob{color:var(--blue)}.ba-knob svg{display:block}
/* v14: process as running text, full-width media */
.c-sec .proc{display:grid;grid-template-columns:1fr;gap:clamp(56px,7vw,96px);counter-reset:none}
.c-sec .proc>div.step{background:none;color:inherit;padding:0;border-radius:0;display:grid;gap:14px;counter-increment:none}
.c-sec .proc>div.step::before{content:none}
.step .n{font:500 12px var(--f-mono);color:var(--muted)}
.c-sec .proc .step h3{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.035em;line-height:1.08;color:var(--ink)}
.c-sec .proc .step .tx p,.c-sec .proc .step .tx li{color:var(--muted);font-size:18px;line-height:1.65}
.c-sec .proc .step .tx li b{color:var(--ink)}
.c-sec .proc .step .media p,.c-sec .proc .step .media li{font-size:inherit;color:inherit}
.step .tx{max-width:66ch;display:grid;gap:12px}
.step .media{margin-top:12px;display:grid;gap:12px}
.step .media .shot{margin:0;background:var(--card);color:var(--card-muted)}.step .media .shot span{background:#fff}
.step .media .shot.wide{aspect-ratio:16/9}
.step .cap{font:500 12px/1.5 var(--f-mono);color:var(--muted);max-width:70ch}
.step .ba{width:100%}
/* OHAKRs */
.oh{background:var(--card);color:var(--card-ink);border-radius:var(--r-lg);padding:clamp(18px,3vw,32px);display:grid;gap:20px}
.oh .label{color:var(--card-muted)}
.oh-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.oh-tog{display:inline-flex;background:var(--field);border-radius:999px;padding:4px;box-shadow:inset 0 0 0 1px var(--card-line)}
.oh-tog button{font:600 13px var(--f-ui);border:0;background:none;color:var(--card-muted);padding:8px 14px;border-radius:999px}
.oh-tog button[aria-pressed="true"]{background:var(--blue);color:#fff}
.oh-tog button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.oh-grid{position:relative;display:grid;grid-template-columns:28px 1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:12px}
.oh-ax{font:500 11px var(--f-mono);color:var(--card-muted);text-transform:lowercase}
.oh-ax.top{grid-row:1;padding-bottom:2px}.oh-ax.top.l{grid-column:2}.oh-ax.top.r{grid-column:3}
.oh-ax.side{grid-column:1;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;align-self:center}.oh-ax.side.t{grid-row:2}.oh-ax.side.b{grid-row:3}
.oh-c{position:relative;z-index:1;border-radius:var(--r-md);padding:18px;display:grid;gap:4px;align-content:start;min-height:150px;background:#fff;box-shadow:inset 0 0 0 1px var(--card-line);transition:transform .35s var(--ease)}
.oh-c.o{grid-column:2;grid-row:2}.oh-c.h{grid-column:3;grid-row:2}.oh-c.k{grid-column:2;grid-row:3}.oh-c.a{grid-column:3;grid-row:3}
.oh-c.o,.oh-c.k{background:var(--blue);color:#fff;box-shadow:none}.oh-c.o small,.oh-c.k small{color:rgba(255,255,255,.75)}.oh-c.o p,.oh-c.k p{color:#fff}
.oh-c h4{font-size:clamp(18px,2vw,22px);letter-spacing:-.02em}
.oh-c small{font:500 11px var(--f-mono);color:var(--card-muted)}
.oh-c p{font-size:15px;line-height:1.45;margin-top:8px;color:var(--card-ink)}
.oh-n{position:absolute;right:14px;top:12px;font:400 26px/1 "Geist Pixel",var(--f-mono)}
.oh-n b{font-weight:400;transition:opacity .25s}.oh-n .nw{position:absolute;right:0;top:0;opacity:0}
.oh[data-mode="write"] .oh-n .nd{opacity:0}.oh[data-mode="write"] .oh-n .nw{opacity:1}
.oh-path{position:absolute;left:40px;right:0;top:30px;bottom:0;width:calc(100% - 40px);height:calc(100% - 30px);pointer-events:none;z-index:2;overflow:visible}
.oh-path path{fill:none;stroke:var(--black);stroke-width:.6;stroke-dasharray:2 1.6;vector-effect:none;opacity:0;transition:opacity .3s}
.oh[data-mode="doc"] .pd,.oh[data-mode="write"] .pw{opacity:.0}
.oh-note{font-size:15px;color:var(--card-muted);max-width:62ch}
@media (max-width:600px){.oh-grid{grid-template-columns:20px 1fr 1fr;gap:8px}.oh-c{min-height:0;padding:14px}.oh-c p{font-size:13px}.oh-n{font-size:20px;right:10px}}
/* Leaving Figma: two paths */
.flow{display:grid;gap:14px}
.flow-l{border-radius:var(--r-lg);padding:20px;display:grid;gap:16px}
.flow-l.old{box-shadow:inset 0 0 0 1px var(--line)}.flow-l.new{background:var(--card);color:var(--card-ink)}
.flow-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.flow-h small{font:500 12px var(--f-mono);color:var(--muted)}
.flow-l.new .label,.flow-l.new .flow-h small{color:var(--card-muted)}
.flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;position:relative}
.flow li{display:grid;gap:10px;align-content:start;font-size:14px;line-height:1.35;position:relative}
.flow li i{display:block;height:12px;background:currentColor;opacity:.25;position:relative}
.flow-l.old li span{color:var(--muted)}
.flow-l.old li:nth-child(3) i,.flow-l.old li:nth-child(4) i{background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 10px);opacity:.35}
.flow-l.new li i{background:var(--blue);opacity:.18}
.flow-l.new li i::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left;animation:flowfill 6s steps(12) infinite;animation-delay:calc(var(--k) * .9s)}
.flow-l.new li:nth-child(1){--k:0}.flow-l.new li:nth-child(2){--k:1}.flow-l.new li:nth-child(3){--k:2}.flow-l.new li:nth-child(4){--k:3}.flow-l.new li:nth-child(5){--k:4}
@keyframes flowfill{0%{transform:scaleX(0)}15%,85%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@media (max-width:640px){.flow ol{grid-template-columns:1fr;gap:10px}.flow li{grid-template-columns:40px 1fr;align-items:center}.flow li i{height:10px}}
.oh-path{z-index:0}.oh-path path{stroke:var(--blue);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:6 5}
.oh[data-mode="doc"] .oh-path .pd,.oh[data-mode="write"] .oh-path .pw{opacity:1}
.c-sec .proc .step .media .cap{font:500 12px/1.5 var(--f-mono);color:var(--muted)}
.c-sec .proc .step .oh-c p{font-size:15px;line-height:1.45;color:var(--card-ink)}
.c-sec .proc .step .oh-c.o p,.c-sec .proc .step .oh-c.k p{color:#fff}
.c-sec .proc .step .oh-note{font-size:15px;color:var(--card-muted)}
.c-sec .proc .step .flow li{font-size:14px}
.c-sec .proc .step .flow-l.new li span{color:var(--card-ink)}
@media (max-width:600px){.c-sec .proc .step .oh-c p{font-size:13px}}
.c-sec .proc .step p.oh-note{font-size:15px;color:var(--card-muted);line-height:1.5}
/* v15: section icons */
.c-sec h2{display:flex;align-items:center;gap:14px}
.sec-ico{width:clamp(26px,2.6vw,34px);height:auto;flex:none;color:var(--ink);overflow:visible}
.sec-ico rect{transform-box:fill-box;transform-origin:center}
.ic-context g{animation:ic-bob 1.6s steps(2) infinite}.ic-context .p-s{animation:ic-shadow 1.6s steps(2) infinite;transform-origin:center}
@keyframes ic-bob{50%{transform:translateY(-1px)}}@keyframes ic-shadow{50%{opacity:.35}}
.ic-problem .p-d{animation:ic-blink 1s steps(1) infinite}@keyframes ic-blink{50%{opacity:0}}
.ic-process .p-x,.ic-process .p-y,.ic-process .p-z{opacity:.25;animation:ic-seq 1.5s steps(1) infinite}
.ic-process .p-y{animation-delay:.5s}.ic-process .p-z{animation-delay:1s}
@keyframes ic-seq{0%,33%{opacity:1}34%,100%{opacity:.25}}
.ic-decisions .p-l{animation:ic-seq2 2.4s steps(1) infinite}.ic-decisions .p-r{animation:ic-seq2 2.4s steps(1) infinite reverse;opacity:.25}
@keyframes ic-seq2{0%,49%{opacity:1}50%,100%{opacity:.25}}
.ic-outcome .p-x,.ic-outcome .p-y,.ic-outcome .p-z{transform-box:view-box;transform-origin:0 7px;animation:ic-grow 2.4s steps(4) infinite}
.ic-outcome .p-y{animation-delay:.2s}.ic-outcome .p-z{animation-delay:.4s}
@keyframes ic-grow{0%{transform:scaleY(.2)}40%,100%{transform:scaleY(1)}}
.ic-takeaway g{transform-box:view-box;transform-origin:4px 4px;animation:ic-turn 4s steps(4) infinite}
@keyframes ic-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sec-ico *{animation:none!important}}
/* before/after legend below the image */
.ba-legend{display:flex;justify-content:space-between;gap:12px;font:500 12px var(--f-mono);color:var(--muted)}
.ba-legend span:nth-child(2){opacity:.7}
@media (max-width:600px){.ba-legend span:nth-child(2){display:none}}
/* OHAKRs: four steps, two groups */
.okr{background:var(--card);color:var(--card-ink);border-radius:var(--r-lg);padding:clamp(18px,3vw,32px);display:grid;gap:18px}
.okr .label{color:var(--card-muted)}
.okr-h{display:flex;justify-content:space-between;gap:12px}
.ok-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ok-s{position:relative;border-radius:var(--r-md);padding:18px 16px;display:grid;gap:6px;align-content:start;min-width:0}
.ok-s.perf{background:var(--blue);color:#fff}.ok-s.act{background:#fff;box-shadow:inset 0 0 0 1px var(--card-line)}
.ok-s:not(:last-child)::after{content:"";position:absolute;right:-9px;top:34px;width:8px;height:8px;background:var(--black);clip-path:polygon(0 0,100% 50%,0 100%);z-index:1}
.ok-n{font:500 11px var(--f-mono);opacity:.7}
.ok-l{font:400 clamp(30px,3.4vw,44px)/1 "Geist Pixel",var(--f-mono);font-weight:400}
.ok-s h4{font-size:17px;letter-spacing:-.02em;margin-top:6px}
.c-sec .proc .step .ok-s p{font-size:14px;line-height:1.45;color:inherit}
.c-sec .proc .step .ok-s .ok-q{font-weight:600}
.c-sec .proc .step .ok-s .ok-d{opacity:.78}
.ok-groups{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ok-groups>div{border-top:3px solid var(--blue);padding-top:10px;display:grid;gap:2px;font-size:14px}
.ok-groups .act{border-color:var(--card-line)}.ok-groups b{font-weight:650}.ok-groups span{color:var(--card-muted)}
@media (max-width:700px){.ok-steps{grid-template-columns:1fr 1fr}.ok-s:nth-child(2)::after{display:none}}
@media (max-width:420px){.ok-steps{grid-template-columns:1fr}.ok-s::after{display:none}.ok-groups{grid-template-columns:1fr}}
/* where the time goes */
.tf{background:var(--card);color:var(--card-ink);border-radius:var(--r-lg);padding:clamp(18px,3vw,32px);display:grid;gap:22px}
.tf .label{color:var(--card-muted)}
.tf-r{display:grid;gap:8px}.tf-h{display:flex;justify-content:space-between;align-items:baseline}.tf-h b{font:400 22px "Geist Pixel",var(--f-mono)}
.tf-bar{display:flex;gap:3px;height:56px;position:relative}
.seg{flex:0 0 calc(var(--w) * 1% - 3px);background:#e9ebf0;border-radius:6px;position:relative;overflow:hidden;transform-origin:left;transform:scaleX(0);transition:transform .7s var(--ease-x)}
.tf.on .seg{transform:none}
.tf-r .seg:nth-child(2){transition-delay:.1s}.tf-r .seg:nth-child(3){transition-delay:.2s}.tf-r .seg:nth-child(4){transition-delay:.3s}.tf-r .seg:nth-child(5){transition-delay:.4s}
.seg em{position:absolute;left:8px;right:6px;bottom:6px;font:500 11px/1.25 var(--f-mono);font-style:normal;color:var(--card-ink)}
.seg.fig,.seg.hand,.seg.fix{background:repeating-linear-gradient(135deg,#e9ebf0 0 6px,#dfe2e8 6px 12px)}
.tf-r.now .seg{background:var(--blue)}.tf-r.now .seg em{color:#fff}.tf-r.now .seg.spec{background:var(--black)}
.tf-saved{flex:1;border:1.5px dashed var(--card-line);border-radius:6px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s .8s}
.tf.on .tf-saved{opacity:1}.tf-saved em{font:400 clamp(14px,1.8vw,20px) "Geist Pixel",var(--f-mono);font-style:normal;color:var(--blue)}
.tf-loop{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;border-top:1px solid var(--card-line);padding-top:14px}
.c-sec .proc .step .tf-loop p{font-size:15px;color:var(--card-ink)}
@media (max-width:600px){.tf-bar{height:auto;flex-direction:column;gap:4px}.seg,.tf-saved{flex:none;height:30px;width:calc(var(--w,75) * 1%);min-width:120px}.tf-saved{width:auto}.seg em{bottom:auto;top:8px}}
.tf-r.now .seg em{display:none}
.tf-key{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 12px var(--f-mono);color:var(--card-ink)}
.tf-key span{display:inline-flex;align-items:center;gap:7px}.tf-key i{width:10px;height:10px;background:var(--blue)}.tf-key .spec i{background:var(--black)}
@media (max-width:600px){.tf-r:not(.now) .seg{height:auto;min-height:30px;padding:7px 8px}.tf-r:not(.now) .seg em{position:static}.tf-r.now .seg{height:18px;min-width:0}.tf-saved{height:34px}}
.tf-key.old-k{display:none}.tf-key.old-k i{background:#dfe2e8}
@media (max-width:600px){
  .tf-bar{flex-direction:row;height:28px;gap:2px}
  .tf-r .seg,.tf-r:not(.now) .seg,.tf-r.now .seg{flex:0 0 calc(var(--w) * 1% - 2px);height:28px;min-height:0;min-width:0;width:auto;padding:0}
  .tf-r .seg em{display:none}.tf-key.old-k{display:flex}
  .tf-saved{flex:1;height:28px}.tf-saved em{font-size:12px}
}
.c-sec .proc .step li.ok-s.perf{color:#fff}.c-sec .proc .step li.ok-s.act{color:var(--card-ink)}
/* v16: Playfull animated cover: phone in front, pixel game covers drifting behind */
.pfc{position:absolute;inset:0;overflow:hidden;background:radial-gradient(70% 60% at 50% 45%,#3d5bff,var(--blue) 70%);container-type:size}
.pfc-rows{position:absolute;inset:-6% -10%;display:grid;grid-template-rows:repeat(4,1fr);gap:3cqh;transform:rotate(-8deg)}
.pfc-row{overflow:visible;display:flex;align-items:center}
.pfc-track{display:flex;gap:3cqh;width:max-content;animation:pfc-move var(--sp,48s) linear infinite}
.pfc-row.r1 .pfc-track{--sp:62s;animation-direction:reverse}.pfc-row.r2 .pfc-track{--sp:40s}.pfc-row.r3 .pfc-track{--sp:56s;animation-direction:reverse}
.pfc-track i{display:block;height:19cqh;aspect-ratio:1;border-radius:22%;background-size:cover;image-rendering:pixelated;box-shadow:0 1.5cqh 3cqh rgba(5,10,60,.35)}
.pfc-row.r0 i,.pfc-row.r3 i{opacity:.55;filter:saturate(.8)}
@keyframes pfc-move{to{transform:translateX(-50%)}}
.pfc-phone{position:absolute;left:50%;top:50%;height:86%;width:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 3cqh 5cqh rgba(5,10,60,.5));z-index:1}
.c-hero .cover .pfc-phone{position:absolute;inset:auto;left:50%;top:50%;width:auto;height:88%;object-fit:contain}
.slides .s.img .pfc{border-radius:inherit}
@media (prefers-reduced-motion:reduce){.pfc-track{animation:none}}
.s.img .pfc-phone{width:auto;height:80%;object-fit:contain}.s.img .pfc{position:absolute;inset:0}
.pfc-track i{image-rendering:auto;height:15cqh}
.pfc-row.r0 i,.pfc-row.r3 i{opacity:.7;filter:none}
/* v17: smaller, sharper game covers, more of them */
.pfc-rows{grid-template-rows:repeat(6,1fr);gap:2.2cqh;inset:-8% -12%}
.pfc-track{gap:2.2cqh}
.pfc-track i{height:12cqh;border-radius:24%;image-rendering:auto;box-shadow:0 1cqh 2.2cqh rgba(5,10,60,.3)}
.pfc-row.r1 .pfc-track{--sp:70s}.pfc-row.r4 .pfc-track{--sp:52s;animation-direction:reverse}.pfc-row.r5 .pfc-track{--sp:64s}
.pfc-row i{opacity:1}.pfc-row.r0 i,.pfc-row.r5 i{opacity:.6}
.pfc-row.r3 i{opacity:1}
.pfc-track i{background-position:center 30%;background-color:#2a3fd8}
/* v18: soft fade on the left and right edges of the Playfull cover */
.pfc-rows{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.pfc-rows{-webkit-mask-image:none;mask-image:none}
.pfc::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--blue) 0,rgba(43,75,255,0) 22%,rgba(43,75,255,0) 78%,var(--blue) 100%)}
.pfc-phone{z-index:2}
/* v19: The pages — a 3D phone that turns with scroll */
.p3{position:relative;height:420vh}
.p3-pin{position:sticky;top:64px;height:calc(100vh - 64px);min-height:520px;display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;gap:18px;padding-block:20px 28px}
.p3-scene{perspective:1600px;height:100%;display:grid;place-items:center;width:100%}
.p3-phone{--w:min(280px,58vw,calc((100vh - 260px) * .478));--d:calc(var(--w) * .11);position:relative;width:var(--w);aspect-ratio:71.5/149.6;transform-style:preserve-3d;transform:rotateX(var(--rx,6deg)) rotateY(var(--ry,0deg));will-change:transform}
.p3-sl,.p3-face{position:absolute;inset:0;border-radius:calc(var(--w) * .165)}
.p3-sl{background:linear-gradient(90deg,#8d9198,#d9dbdf 30%,#a7abb2 60%,#e7e8ea);transform:translateZ(calc(var(--d) / 12 * var(--z)))}
.p3-front{transform:translateZ(calc(var(--d) / 2 + .5px));background:#0b0b0f;padding:calc(var(--w) * .035);box-shadow:inset 0 0 0 1.5px #c9ccd1;backface-visibility:hidden}
.p3-back{transform:rotateY(180deg) translateZ(calc(var(--d) / 2 + .5px));background:linear-gradient(160deg,#dfe3ea,#b9bfc9 55%,#d5d9e0);box-shadow:inset 0 0 0 1.5px #c9ccd1;backface-visibility:hidden}
.p3-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--w) * .135);overflow:hidden;background:#0d1117}
.p3-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0}
.p3-screen img.on{opacity:1}
.p3-island{position:absolute;top:2.2%;left:50%;width:31%;height:4.1%;transform:translateX(-50%);background:#000;border-radius:999px;opacity:0}
.p3-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,var(--gl,0)) 48%,transparent 62%)}
.p3-cam{position:absolute;left:7%;top:4%;width:24%;height:22%;border-radius:calc(var(--w) * .07);background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.15)}
.p3-cam i{position:absolute;left:50%;width:62%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 40% 40%,#3b4a6b,#0b0b0f 55%);box-shadow:0 0 0 3px #c4c9d1}
.p3-cam i:first-child{top:10%}.p3-cam i:nth-child(2){bottom:10%}
.p3-cam b{position:absolute;right:-40%;top:44%;width:16%;aspect-ratio:1;border-radius:50%;background:#f4efe0}
.p3-cap{text-align:center;display:grid;gap:12px;justify-items:center;min-height:86px}
.p3-cap ol{list-style:none;margin:0;padding:0;display:grid}
.p3-cap li{grid-area:1/1;display:grid;gap:4px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.p3-cap li.on{opacity:1;transform:none}
.p3-cap b{font:400 clamp(24px,2.6vw,32px)/1 "Geist Pixel",var(--f-mono);font-weight:400}
.c-sec .proc .step .p3-cap span{font-size:15px;color:var(--muted);max-width:40ch}
.p3-dots{display:flex;gap:6px}.p3-dots i{width:18px;height:4px;background:var(--line);transition:background .3s}.p3-dots i.on{background:var(--ink)}
@media (prefers-reduced-motion:reduce){.p3{height:auto}.p3-pin{position:static;height:auto}}
.p3-sl{transform:translateZ(calc(var(--d) / 24 * var(--z)))}
.c-sec .proc .step .p3-cap b{color:var(--ink)}
/* v20: The pages — four screens, static and centred */
.pg4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,20px);max-width:880px;margin-inline:auto;width:100%}
.pg4 figure{margin:0;display:grid;gap:10px;justify-items:center}
.pg4 img{width:100%;height:auto;border-radius:clamp(14px,2vw,24px);box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(5,10,60,.3)}
.pg4 figcaption{font:400 clamp(16px,1.6vw,20px)/1 "Geist Pixel",var(--f-mono)}
@media (max-width:640px){.pg4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v21: Ally Pass case */
.ap-img{display:block;width:100%;height:auto;border-radius:var(--r-md);background:var(--card)}
.ap-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media (max-width:700px){.ap-2{grid-template-columns:1fr}}
.ap-final{border-radius:var(--r-lg);overflow:hidden;background:#13121c;box-shadow:0 0 0 1px var(--line),0 24px 50px rgba(5,10,60,.35)}
.ap-bar{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#1d1c29}
.ap-dots{display:flex;gap:6px}.ap-dots i{width:10px;height:10px;border-radius:50%;background:#3a3950}
.ap-url{flex:1;font:500 12px var(--f-mono);color:#9c9bb4;background:#13121c;border-radius:999px;padding:6px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-claim{font:600 13px var(--f-ui);border:0;border-radius:999px;padding:8px 14px;background:#f5a623;color:#1a1300;cursor:pointer;white-space:nowrap}
.ap-claim[aria-pressed="true"]{background:#fff;color:#13121c}
.ap-claim:focus-visible,.ap-scroll:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ap-view{position:relative;height:min(640px,70vh)}
.ap-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.ap-scroll .ap-img{border-radius:0}
.ap-modal{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,9,18,.55);padding:12px;animation:apin .35s var(--ease-x)}
.ap-modal .ap-img{max-height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
@keyframes apin{from{opacity:0;transform:scale(.96)}}
/* personas */
.pp3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pp{border-radius:var(--r-md);padding:18px;display:grid;gap:8px;align-content:start;box-shadow:inset 0 0 0 1px var(--line)}
.pp.on{background:var(--card);color:var(--card-ink);box-shadow:none}.pp.on .label{color:var(--blue)}
.pp h4{font-size:19px;letter-spacing:-.02em}
.c-sec .proc .step .pp p{font-size:14px;line-height:1.45;color:inherit;opacity:.85}
.pp dl{margin:4px 0 0;display:grid;gap:6px}.pp dt{font:500 11px var(--f-mono);opacity:.65}.pp dd{margin:0;font-size:14px}
.pb{background:var(--card);color:var(--card-ink);border-radius:var(--r-lg);padding:clamp(16px,2.5vw,26px);display:grid;gap:16px;margin-top:10px}
.pb-h{display:flex;align-items:baseline;gap:12px}.pb-h h4{font-size:20px;letter-spacing:-.02em}.pb .label{color:var(--card-muted)}
.pb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pb-g{display:grid;gap:8px;align-content:start}
.pb-g b{font:500 12px var(--f-mono);color:var(--card-muted);text-transform:lowercase}
.pb-g ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.c-sec .proc .step .pb-g li{font-size:13px;line-height:1.3;color:var(--card-ink);background:#e8ecff;padding:8px 10px;border-radius:4px;box-shadow:0 1px 0 rgba(43,75,255,.18);transform:rotate(var(--r,0deg));transition:transform .2s}
.pb-g:nth-child(2) li{background:#dff3ff}.pb-g:nth-child(3) li{background:#e7ffef}.pb-g:nth-child(4) li{background:#fff4dc}.pb-g:nth-child(5) li{background:#f1e9ff}.pb-g:nth-child(6) li{background:#ffe9e4}
.pb-g li:nth-child(odd){--r:-.6deg}.pb-g li:nth-child(3n){--r:.8deg}.pb-g li:hover{transform:rotate(0) scale(1.04)}
@media (max-width:760px){.pp3{grid-template-columns:1fr}.pb-grid{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.pb-grid{grid-template-columns:1fr}}
/* launch video */
.ap-video{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:929/561;position:relative;background:#000}
.ap-play{all:unset;display:block;position:absolute;inset:0;cursor:pointer}
.ap-play .ap-img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .5s var(--ease-x)}
.ap-play:hover .ap-img{transform:scale(1.02)}
.ap-pbtn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;background:var(--black);color:#fff;font:600 14px var(--f-ui);padding:12px 18px;border-radius:999px;white-space:nowrap}
.ap-play:focus-visible .ap-pbtn{outline:3px solid #fff;outline-offset:3px}
.ap-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* the muffin that follows the story */
.mpk{all:unset;position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));width:clamp(84px,9vw,120px);aspect-ratio:1;z-index:40;cursor:pointer;transform:translateY(140%);transition:transform .5s var(--ease-x);filter:drop-shadow(0 10px 18px rgba(5,10,60,.35))}
.mpk.in{transform:none}
.mpk img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;opacity:0;transition:opacity .2s}
.mpk img.on{opacity:1}
.mpk.hop{animation:mhop .6s var(--ease-x)}
@keyframes mhop{40%{transform:translateY(-28%) rotate(-6deg)}70%{transform:translateY(0) rotate(3deg)}}
.mpk:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:12px}
@media (prefers-reduced-motion:reduce){.mpk{transition:none}.mpk.hop{animation:none}}
.pp h4,.pb h4,.ok-s h4,.oh-c h4{margin:0}.pp p,.pp dl{margin:0}
.c-sec .body .cap{font:500 12px/1.5 var(--f-mono);color:var(--muted);max-width:70ch}
.ap-modal{background:rgba(10,9,18,.72)}
.ap-modal .ap-img{width:min(560px,92%);max-height:92%;height:auto}
@media (max-width:700px){.mpk{width:64px}}
/* v22: F&M case */
.fm-proc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.fm-proc>li{border-radius:var(--r-md);padding:16px;display:grid;gap:8px;align-content:start;box-shadow:inset 0 0 0 1px var(--line)}
.fm-proc>li:nth-child(odd){background:var(--card);color:var(--card-ink);box-shadow:none}
.fm-n{font:400 22px/1 "Geist Pixel",var(--f-mono)}.fm-proc b{font-size:16px;letter-spacing:-.01em;line-height:1.2}
.fm-proc ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.c-sec .proc .step .fm-proc ul li{font-size:13px;line-height:1.35;color:inherit;opacity:.8}
@media (max-width:860px){.fm-proc{grid-template-columns:1fr 1fr}}
.fmp4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fmp{background:var(--card);color:var(--card-ink);border-radius:var(--r-md);padding:18px;display:grid;gap:14px;align-content:start}
.fmp header{display:flex;gap:12px;align-items:center}.fmp h4{margin:0;font-size:18px;letter-spacing:-.02em}.fmp small{font:500 12px var(--f-mono);color:var(--card-muted)}
.fm-av{flex:none;width:40px;height:40px;display:grid;place-items:center;background:#2e3a4d;color:#e5d8b6;font:400 20px "Geist Pixel",var(--f-mono)}
.fmp dl{margin:0;display:grid;gap:10px}.fmp dt{font:500 11px var(--f-mono);color:#9a7f4c}.fmp dd{margin:2px 0 0;font-size:14px;line-height:1.45}
@media (max-width:640px){.fmp4{grid-template-columns:1fr}}
.fmj{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fmj-c{display:grid;gap:12px;justify-items:center;align-content:start}
.fmj ol{list-style:none;margin:0;padding:0;display:grid;gap:18px;width:100%}
.c-sec .proc .step .fmj li{position:relative;font-size:13px;line-height:1.35;color:var(--ink);padding:10px 12px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line)}
.fmj li:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-13px;width:8px;height:8px;margin-left:-4px;background:#cdb98f;clip-path:polygon(0 0,100% 0,50% 100%)}
.c-sec .proc .step .fmj li.end{background:var(--card);color:var(--card-ink);font-weight:600;box-shadow:none}
@media (max-width:760px){.fmj{grid-template-columns:1fr 1fr;row-gap:28px}}
.fm-fig{margin:0;background:#fff;border-radius:var(--r-md);padding:clamp(10px,2vw,22px);overflow-x:auto}
.fm-fig img{display:block;width:100%;min-width:560px;height:auto}
.fm-fig .ap-img{min-width:0;border-radius:0}
.fds{background:var(--card);color:var(--card-ink);border-radius:var(--r-lg);padding:clamp(18px,3vw,30px);display:grid;grid-template-columns:1fr 1fr;gap:28px}
.fds .label{color:var(--card-muted)}
.fds-col{display:grid;gap:14px;align-content:start}
.fds-row{display:grid;grid-template-columns:80px 1fr auto;gap:12px;align-items:center}
.fds-row code{font:500 12px var(--f-mono)}
.fds-sw{display:flex;gap:6px}.fds-sw i{flex:1;aspect-ratio:1;max-width:44px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.fds-brand{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fds-brand div{aspect-ratio:4/3;border-radius:10px;display:flex;align-items:flex-end;padding:12px;color:#fff}
.fds-t{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--card-line);padding-bottom:6px}
.fds-t span{font-family:var(--f-ui);font-weight:700;letter-spacing:-.02em;color:#2e3a4d;line-height:1.1}.fds-t small{font:500 12px var(--f-mono);color:var(--card-muted)}
.c-sec .proc .step p.fds-body{font-family:"Open Sans",var(--f-ui);font-size:15px;color:var(--card-muted)}
.fds-grid{grid-column:1/-1;display:grid;gap:10px}
.fds-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(4px,1.4vw,14px);height:90px;padding:0 6%;background:#f3f5f9;border-radius:10px}
.fds-cols i{background:rgba(182,158,110,.35)}
@media (max-width:760px){.fds{grid-template-columns:1fr}.fds-row{grid-template-columns:64px 1fr}.fds-row code{display:none}}
.c-sec .proc .step .fm-proc>li{color:var(--ink)}
.c-sec .proc .step .fm-proc>li:nth-child(odd){color:var(--card-ink)}
.c-sec .proc .step .fm-proc>li *{color:inherit}
.fm-proc>li:nth-child(odd) .fm-n{color:#2e3a4d}
/* v23: step icons, F&M arrow cover, muffins row */
.c-sec .proc .step h3{display:flex;align-items:center;gap:12px}
.step-ico{width:clamp(22px,2.2vw,28px)}
.fmc{position:absolute;inset:0;overflow:hidden;background:radial-gradient(80% 70% at 50% 40%,#344257,#232c3b 75%)}
.fmc canvas{position:absolute;inset:0;width:100%;height:100%}
.fmc-img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));pointer-events:none}
.fmc-img.cover-devices{width:84%}
.fmc-img.cover-phone{width:auto;height:84%}
.c-hero .cover .fmc-img{position:absolute;inset:auto;left:50%;top:50%;object-fit:contain}
.c-hero .cover .fmc-img.cover-devices{width:84%;height:auto}
.s.img .fmc-img.cover-phone{width:auto;height:82%;object-fit:contain}
.s.img .fmc{position:absolute;inset:0}
.ap-mf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2vw,24px);align-items:end;padding:clamp(16px,3vw,32px);border-radius:var(--r-lg);background:radial-gradient(90% 80% at 50% 100%,rgba(255,255,255,.18),transparent 70%)}
.ap-m{all:unset;cursor:pointer;display:block;transition:transform .25s var(--ease-x)}
.ap-m img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 16px rgba(5,10,60,.35))}
.ap-m:hover{transform:translateY(-6px) rotate(-2deg)}
.ap-m.hop{animation:mhop .6s var(--ease-x)}
.ap-m:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:12px}
@media (max-width:560px){.ap-mf{grid-template-columns:1fr 1fr}}
.ap-hifi{margin:0;background:#f4f4f6;border-radius:var(--r-md);padding:clamp(10px,2vw,22px);display:grid;place-items:center}
.ap-hifi .ap-img{max-width:620px;border-radius:0;background:none}

.ap-flow{margin:0 0 14px}.ap-flow .label{display:block;margin-bottom:8px}.ap-flow .ap-img{border:1px solid var(--line,rgba(0,0,0,.1))}

.nx-fig{margin:0 0 12px}.nx-fig .ap-img{border:1px solid var(--line,rgba(0,0,0,.1));background:#fff}.nx-sm .ap-img{max-width:640px}
/* v24: stat slides fit their card; tool tooltips */
.slides{container-type:inline-size}
.s.t b[style*="--n"]{font-size:min(clamp(56px,6.4vw,104px),calc(140cqw / var(--n)))}
.tools .ti{position:relative;cursor:default}
.tools .ti::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);background:#0b0b0f;color:#fff;font:500 11px/1 var(--f-mono);padding:7px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}
.tools .ti:hover::after,.tools .ti:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.tools .ti:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* v25: the header mark winks on hover (one eye, no tilt) */
.brand:hover .pc-lid,.brand:focus-visible .pc-lid{animation:none;opacity:0}
.brand:hover .pc-lid.l1,.brand:focus-visible .pc-lid.l1{animation:pcwink .7s steps(1) 1}
@keyframes pcwink{0%{opacity:0}10%,70%{opacity:1}80%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.brand:hover .pc-lid.l1{animation:none}}
.sheet h3{text-wrap:wrap}

/* v26: globe labels: a lighter blue that reads on the dark band */
.on-band{--px-lab:#8a9dff}
:root[data-theme="white"] .on-band{--px-lab:var(--px-hot)}