/* fonts.css */
@font-face { font-family: "Inria Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/fC14PYxPY3rXxEndZJAzN3wQUjjMjl2daw.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inria Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/fC14PYxPY3rXxEndZJAzN3wQUjjCjl0.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fAZJhiI2B.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fAZthiI2B.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fAZNhiI2B.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fAZxhiI2B.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fAZBhiI2B.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fAZFhiI2B.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fAZ9hiA.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2") format("woff2"); unicode-range: U+302-303, U+305, U+307-308, U+310, U+312, U+315, U+31A, U+326-327, U+32C, U+32F-330, U+332-333, U+338, U+33A, U+346, U+34D, U+391-3A1, U+3A3-3A9, U+3B1-3C9, U+3D1, U+3D5-3D6, U+3F0-3F1, U+3F4-3F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2") format("woff2"); unicode-range: U+1-C, U+E-1F, U+7F-9F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2") format("woff2"); unicode-range: U+302-303, U+305, U+307-308, U+310, U+312, U+315, U+31A, U+326-327, U+32C, U+32F-330, U+332-333, U+338, U+33A, U+346, U+34D, U+391-3A1, U+3A3-3A9, U+3B1-3C9, U+3D1, U+3D5-3D6, U+3F0-3F1, U+3F4-3F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2") format("woff2"); unicode-range: U+1-C, U+E-1F, U+7F-9F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tiro Bangla"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/IFSgHe1Tm95E3O8b5i2V8PGo80Luuw.woff2") format("woff2"); unicode-range: U+951-952, U+964-965, U+980-9FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; }
@font-face { font-family: "Tiro Bangla"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/IFSgHe1Tm95E3O8b5i2V8PG080Luuw.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Tiro Bangla"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/IFSgHe1Tm95E3O8b5i2V8PG680I.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alex Brush"; font-style: normal; font-weight: 400; src: url("/assets/fonts/SZc83FzrJKuqFbwMKk6EhUrz7QtO.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Alex Brush"; font-style: normal; font-weight: 400; src: url("/assets/fonts/SZc83FzrJKuqFbwMKk6EhUvz7QtO.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alex Brush"; font-style: normal; font-weight: 400; src: url("/assets/fonts/SZc83FzrJKuqFbwMKk6EhUXz7Q.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Share Tech Mono"; font-style: normal; font-weight: 400; src: url("/assets/fonts/J7aHnp1uDWRBEqV98dVQztYldFcLowEF.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "SF Pro Display Medium"; src: url("/assets/fonts/dTVfXNKgID7VXkl9c6QSFxH4c.woff2"); font-display: swap; font-style: normal; font-weight: 500; }
@font-face { font-family: "SF Pro Display Medium"; src: url("/assets/fonts/dTVfXNKgID7VXkl9c6QSFxH4c.woff2"); font-display: swap; }
@font-face { font-family: "SF Pro Display Bold"; src: url("/assets/fonts/e2xSj9IcJ8dsIvELAZDx3LfWno.woff2"); font-display: swap; }
@font-face { font-family: "SF Pro Display Regular"; src: url("/assets/fonts/JlbZvh2zfRZAGLbtHVY830OtpU.woff2"); font-display: swap; }
@font-face { font-family: "SF Pro Display Regular"; src: url("/assets/fonts/JlbZvh2zfRZAGLbtHVY830OtpU.woff2"); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: "Seitu Medium"; src: url("/assets/fonts/3yAocrDZ7uIQz3wWVGcOqnNHs.woff2"); font-display: swap; }
@font-face { font-family: "Seitu Extra Bold"; src: url("/assets/fonts/JXnRAhwVkBnchHYQ1jbtLNTYhY.woff2"); font-display: swap; }
@font-face { font-family: Inter; src: url("/assets/fonts/5vvr9Vy74if2I6bQbJvbw7SY1pQ.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+460-52F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Inter; src: url("/assets/fonts/EOr0mi4hNtlgWNn9if640EZzXCo.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; }
@font-face { font-family: Inter; src: url("/assets/fonts/Y9k9QrlZAqio88Klkmbd8VoMQc.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+1F00-1FFF; }
@font-face { font-family: Inter; src: url("/assets/fonts/OYrD2tBIBPvoJXiIHnLoOXnY9M.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+370-3FF; }
@font-face { font-family: Inter; src: url("/assets/fonts/JeYwfuaPfZHQhEG8U5gtPDZ7WQ.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+100-24F, U+259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; src: url("/assets/fonts/vQyevYAyHtARFwPqUzQGpnDs.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; src: url("/assets/fonts/b6Y37FthZeALduNqHicBT6FutY.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Inter; src: url("/assets/fonts/GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Variable"; src: url("/assets/fonts/mYcqTSergLb16PdbJJQMl9ebYm4.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+460-52F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter Variable"; src: url("/assets/fonts/ZRl8AlxwsX1m7xS1eJCiSPbztg.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; }
@font-face { font-family: "Inter Variable"; src: url("/assets/fonts/nhSQpBRqFmXNUBY2p5SENQ8NplQ.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Inter Variable"; src: url("/assets/fonts/DYHjxG0qXjopUuruoacfl5SA.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+370-3FF; }
@font-face { font-family: "Inter Variable"; src: url("/assets/fonts/s7NH6sl7w4NU984r5hcmo1tPSYo.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+100-24F, U+259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Variable"; src: url("/assets/fonts/7lw0VWkeXrGYJT05oB3DsFy8BaY.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Variable"; src: url("/assets/fonts/wx5nfqEgOXnxuFaxB0Mn9OhmcZA.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Inter; src: url("/assets/fonts/hyOgCu0Xnghbimh0pE8QTvtt2AU.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+460-52F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Inter; src: url("/assets/fonts/NeGmSOXrPBfEFIy5YZeHq17LEDA.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; }
@font-face { font-family: Inter; src: url("/assets/fonts/oYaAX5himiTPYuN8vLWnqBbfD2s.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+1F00-1FFF; }
@font-face { font-family: Inter; src: url("/assets/fonts/lEJLP4R0yuCaMCjSXYHtJw72M.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+370-3FF; }
@font-face { font-family: Inter; src: url("/assets/fonts/cRJyLNuTJR5jbyKzGi33wU9cqIQ.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+100-24F, U+259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; src: url("/assets/fonts/1ZFS7N918ojhhd0nQWdj3jz4w.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; src: url("/assets/fonts/A0Wcc7NgXMjUuFdquHDrIZpzZw0.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Inter; src: url("/assets/fonts/yDtI2UI8XcEg1W2je9XPN3Noo.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; src: url("/assets/fonts/BkDpl4ghaqvMi1btKFyG2tdbec.woff2"); font-display: swap; font-style: normal; font-weight: 300; unicode-range: U+460-52F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Inter; src: url("/assets/fonts/zAMK70AQRFSShJgUiaR5IiIhgzk.woff2"); font-display: swap; font-style: normal; font-weight: 300; unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; }
@font-face { font-family: Inter; src: url("/assets/fonts/IETjvc5qzUaRoaruDpPSwCUM8.woff2"); font-display: swap; font-style: normal; font-weight: 300; unicode-range: U+1F00-1FFF; }
@font-face { font-family: Inter; src: url("/assets/fonts/oLCoaT3ioA0fHdJnWR9W6k7NY.woff2"); font-display: swap; font-style: normal; font-weight: 300; unicode-range: U+370-3FF; }
@font-face { font-family: Inter; src: url("/assets/fonts/Sj0PCHQSBjFmEp6NBWg6FNaKc.woff2"); font-display: swap; font-style: normal; font-weight: 300; unicode-range: U+100-24F, U+259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; src: url("/assets/fonts/v2q8JTTTs7McDMSEhnxAIBqd0.woff2"); font-display: swap; font-style: normal; font-weight: 300; unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; src: url("/assets/fonts/H4TfENUY1rh8R9UaSD6vngjJP3M.woff2"); font-display: swap; font-style: normal; font-weight: 300; unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Inter Placeholder"; src: local("Arial"); ascent-override: 89.79%; descent-override: 22.36%; line-gap-override: 0%; size-adjust: 107.89%; }
@font-face { font-family: "Tiro Bangla Placeholder"; src: local("Times New Roman"); ascent-override: 67.63%; descent-override: 21.95%; line-gap-override: 29.56%; size-adjust: 111.64%; }
@font-face { font-family: "Inria Serif Placeholder"; src: local("Times New Roman"); ascent-override: 85.76%; descent-override: 19.59%; line-gap-override: 0%; size-adjust: 113.81%; }
@font-face { font-family: "Roboto Placeholder"; src: local("Arial"); ascent-override: 92.43%; descent-override: 24.32%; line-gap-override: 0%; size-adjust: 100.37%; }
@font-face { font-family: "SF Pro Display Medium Placeholder"; src: local("Arial"); ascent-override: 98.25%; descent-override: 24.89%; line-gap-override: 0%; size-adjust: 96.91%; }
@font-face { font-family: "SF Pro Display Bold Placeholder"; src: local("Arial"); ascent-override: 92.91%; descent-override: 23.54%; line-gap-override: 0%; size-adjust: 102.48%; }
@font-face { font-family: "SF Pro Display Regular Placeholder"; src: local("Arial"); ascent-override: 101.52%; descent-override: 25.72%; line-gap-override: 0%; size-adjust: 93.79%; }
@font-face { font-family: "Seitu Medium Placeholder"; src: local("Arial"); ascent-override: 76.68%; descent-override: 23.96%; line-gap-override: 1.99%; size-adjust: 105.38%; }
@font-face { font-family: "Seitu Extra Bold Placeholder"; src: local("Arial"); ascent-override: 76.61%; descent-override: 23.93%; line-gap-override: 1.99%; size-adjust: 105.48%; }
@font-face { font-family: "Inter Variable Placeholder"; src: local("Arial"); ascent-override: 89.79%; descent-override: 22.36%; line-gap-override: 0%; size-adjust: 107.89%; }

/* reset.css */
/* Minimal reset: every element starts from plain inheritance, so component rules state everything they need. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, li, dl, dd, pre, hr, fieldset, legend { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, strong, b, em, i, small, code, pre, kbd, samp, sub, sup, address, cite, th { font: inherit; }
a { color: inherit; text-decoration: none; }

/* site.css */
body { overscroll-behavior-x: none; overscroll-behavior-y: none; }
body.body--jlnfb { background-image: radial-gradient(65% 13% at 50% 4.7%, rgb(64, 64, 64) 0%, rgb(13, 13, 13) 100%); }
body.body--jekn9 { background-image: radial-gradient(65% 13% at 50% 4.7%, rgb(38, 38, 38) 0%, rgb(13, 13, 13) 100%); }
body.body--11hl2 { background-color: rgb(13, 13, 13); }
body.body--108kk { background-color: rgb(8, 8, 8); }
.home { display: flex; position: relative; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 0px; height: min-content; min-height: 100vh; padding-bottom: 100px; background-image: radial-gradient(65% 13% at 50% 4.7%, rgb(64, 64, 64) 0%, rgb(13, 13, 13) 100%); }
.home-noise { position: fixed; inset: 0px; z-index: 1; flex-shrink: 0; opacity: 0.04; }
.home-noise-div { position: absolute; inset: 0px; background-image: url("/assets/images/6mcf62RlDfRfU61Yg5vb2pefpi4.avif"); background-size: 128px auto; }
.home-transition-top { position: fixed; top: 0px; right: 0px; left: 0px; z-index: 3; flex-shrink: 0; height: 10vh; overflow: hidden; background-image: linear-gradient(rgba(206, 161, 115, 0) 0%, rgba(13, 13, 13, 0.8) 60%, rgb(13, 13, 13) 100%); transform: rotate(180deg); }
.home-header-wrap { position: fixed; top: 36px; right: 36px; left: 36px; z-index: 5; flex-shrink: 0; }
.header { display: flex; position: relative; justify-content: space-between; align-items: flex-start; align-content: flex-start; width: 100%; height: min-content; }
.header-logo { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 12px; width: min-content; height: min-content; overflow: hidden; cursor: pointer; }
.header-logo-avatar { display: flex; position: sticky; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 40px; height: 100%; overflow: hidden; border-radius: 8px; filter: grayscale(1); }
.header-logo-avatar-inner { position: absolute; inset: 0px; border-radius: 8px; }
.header-logo-img { display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.header-text { display: flex; position: sticky; top: 36px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 3px; width: min-content; height: min-content; }
.header-text-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.header-text-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Bold", "SF Pro Display Bold Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 17.6px; white-space: pre; }
.header-text-br--1dpwg { display: inline; }
.header-text-span { font-size: 17px; line-height: 18.7px; }
.header-text-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.header-text-p2 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.4); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 16.8px; white-space: pre; }
.header-toggle-wrap { position: absolute; top: 0px; left: 50%; z-index: 3; flex-shrink: 0; transform: translateX(-50%); }
.toggle { display: flex; position: relative; justify-content: center; align-items: center; align-content: center; gap: 9px; width: min-content; height: min-content; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); border-radius: 100px; scrollbar-width: none; }
.toggle-indicator { position: absolute; top: -2px; z-index: 1; flex-shrink: 0; width: 34px; height: 2px; overflow: hidden; background-color: rgb(255, 255, 255); border-top-left-radius: 100px; border-top-right-radius: 100px; box-shadow: rgba(255, 255, 255, 0.04) 0.398096px 0.398096px 1.46378px 0px, rgba(255, 255, 255, 0.12) 1.20725px 1.20725px 4.43902px 0px, rgba(255, 255, 255, 0.32) 3.19133px 3.19133px 11.7344px 0px, rgb(255, 255, 255) 10px 10px 36.7696px 0px, rgba(255, 255, 255, 0.04) -0.398096px -0.398096px 1.46378px 0px, rgba(255, 255, 255, 0.12) -1.20725px -1.20725px 4.43902px 0px, rgba(255, 255, 255, 0.32) -3.19133px -3.19133px 11.7344px 0px, rgb(255, 255, 255) -10px -10px 36.7696px 0px; }
.toggle-indicator--ye1o0 { left: calc(24.4444% - 17px); }
.toggle-indicator--rhqob { left: calc(74.6667% - 17px); }
.toggle-pill { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 12px; width: 225px; height: min-content; padding: 4px; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); background-color: rgba(255, 255, 255, 0.08); border-radius: 100px; scrollbar-width: none; }
.toggle-pill::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 100px; pointer-events: none; }
.toggle-work--oa4c6 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 1px; height: min-content; padding: 12px 15px; background-color: rgba(255, 255, 255, 0.08); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%); border-radius: 100px; }
.toggle-work--j9293 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 1px; height: min-content; padding: 12px 15px; background-color: rgba(255, 255, 255, 0.08); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%); border-radius: 100px; }
.toggle-work--t7okg { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 1px; height: min-content; padding: 11px 14px 9px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%); border-radius: 100px; cursor: pointer; }
.toggle-work-label--qsum8 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.toggle-work-label--um6r2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.toggle-work-label--vwtub { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.toggle-work-text--1gub2 { display: block; -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 21.6px; white-space: pre; }
.toggle-work-text--1mb25 { display: block; -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 23px; line-height: 27.6px; white-space: pre; }
.toggle-work-text--13yws { display: block; -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 21.6px; white-space: pre; }
.toggle-info--19jfv { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 1px; height: min-content; padding: 12px 15px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%); border-radius: 100px; cursor: pointer; }
.toggle-info--1tsgp { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 1px; height: min-content; padding: 12px 15px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%); border-radius: 100px; cursor: pointer; }
.toggle-info--gchx6 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 1px; height: min-content; padding: 11px 14px; background-color: rgba(255, 255, 255, 0.08); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%); border-radius: 100px; }
.toggle-info-label--qsum8 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.toggle-info-label--um6r2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.toggle-info-label--vwtub { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.toggle-info-text--1gub2 { display: block; -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 21.6px; white-space: pre; }
.toggle-info-text--1mb25 { display: block; -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 23px; line-height: 27.6px; white-space: pre; }
.toggle-info-text--13yws { display: block; -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 21.6px; white-space: pre; }
.header-socials-wrap { position: relative; z-index: 1; flex-shrink: 0; }
.socials { display: flex; position: relative; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 12px; width: 100%; height: min-content; cursor: auto; }
.socials-links { display: flex; position: relative; flex-shrink: 0; align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-end; align-content: flex-end; gap: 12px; height: min-content; }
.socials-links::after { content: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.05); border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; border-top-left-radius: 24px; pointer-events: none; }
.socials-social-wrap { position: relative; flex-shrink: 0; }
.social--133w4 { display: flex; position: relative; justify-content: center; align-items: center; align-content: center; gap: 9px; width: min-content; height: min-content; padding: 9px 15px; overflow: hidden; border-radius: 50px; cursor: pointer; }
.social--8hxdk { display: flex; position: relative; justify-content: center; align-items: center; align-content: center; gap: 6px; width: min-content; height: min-content; padding: 6px 12px; overflow: hidden; border-radius: 50px; }
.social--15kp8 { display: flex; position: relative; justify-content: center; align-items: center; align-content: center; gap: 9px; width: min-content; height: min-content; padding: 9px 15px; overflow: hidden; border-radius: 50px; cursor: pointer; }
.social--1016v { display: flex; position: relative; justify-content: center; align-items: center; align-content: center; gap: 9px; width: min-content; height: min-content; padding: 9px 15px; overflow: hidden; border-radius: 50px; cursor: pointer; }
.social-label--qsum8 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.social-label--1nwfh { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.social-label--2s6mi { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.social-text--1gub2 { display: block; -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 21.6px; white-space: pre; }
.social-text--1k0n4 { display: block; -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 21.6px; white-space: pre; }
.social-text--11zmf { display: block; -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 21.6px; white-space: pre; }
.social-icon-wrap--c0qdq { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: min-content; height: min-content; }
.social-icon-wrap--1q0u8 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: min-content; height: min-content; }
.social-icon-wrap--14tc3 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: min-content; height: min-content; }
.social-icon--nemxy { display: block; position: relative; flex-shrink: 0; width: 18px; height: 18px; background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 0 18 18%22><path d=%22M 15.75 2.813 C 15.75 2.502 15.498 2.25 15.188 2.25 L 8.438 2.25 C 8.127 2.25 7.875 2.502 7.875 2.813 C 7.875 3.123 8.127 3.375 8.438 3.375 L 13.83 3.375 L 2.414 14.789 C 2.194 15.009 2.194 15.366 2.414 15.586 C 2.634 15.806 2.991 15.806 3.211 15.586 L 14.625 4.17 L 14.625 9.563 C 14.625 9.873 14.877 10.125 15.188 10.125 C 15.498 10.125 15.75 9.873 15.75 9.563 Z%22 fill=%22rgb(255, 255, 255)%22 stroke-width=%220.28125%22 stroke=%22rgb(255, 255, 255)%22 stroke-miterlimit=%222.8125%22></path></svg>"); background-size: 100% 100%; image-rendering: pixelated; }
.social-icon--qe6v1 { display: block; position: relative; flex-shrink: 0; width: 14px; height: 14px; background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 0 14 14%22><path d=%22M 12.25 2.188 C 12.25 1.946 12.054 1.75 11.813 1.75 L 6.563 1.75 C 6.321 1.75 6.125 1.946 6.125 2.188 C 6.125 2.429 6.321 2.625 6.563 2.625 L 10.756 2.625 L 1.878 11.503 C 1.707 11.674 1.707 11.951 1.878 12.122 C 2.049 12.293 2.326 12.293 2.497 12.122 L 11.375 3.244 L 11.375 7.438 C 11.375 7.679 11.571 7.875 11.813 7.875 C 12.054 7.875 12.25 7.679 12.25 7.438 Z%22 fill=%22rgb(255, 255, 255)%22 stroke-width=%220.22%22 stroke=%22rgb(255, 255, 255)%22 stroke-miterlimit=%222.8125%22></path></svg>"); background-size: 100% 100%; image-rendering: pixelated; }
.social-icon--1p707 { display: block; position: relative; flex-shrink: 0; width: 18px; height: 18px; background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 0 18 18%22><path d=%22M 15.75 2.813 C 15.75 2.502 15.498 2.25 15.188 2.25 L 8.438 2.25 C 8.127 2.25 7.875 2.502 7.875 2.813 C 7.875 3.123 8.127 3.375 8.438 3.375 L 13.83 3.375 L 2.414 14.789 C 2.194 15.009 2.194 15.366 2.414 15.586 C 2.634 15.806 2.991 15.806 3.211 15.586 L 14.625 4.17 L 14.625 9.563 C 14.625 9.873 14.877 10.125 15.188 10.125 C 15.498 10.125 15.75 9.873 15.75 9.563 Z%22 fill=%22rgb(255, 255, 255)%22 stroke-width=%220.28125%22 stroke=%22rgb(255, 255, 255)%22 stroke-miterlimit=%222.8125%22></path></svg>"); background-size: 100% 100%; image-rendering: pixelated; }
.social-icon--1nmde { display: block; position: relative; flex-shrink: 0; width: 18px; height: 18px; background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 0 18 18%22><path d=%22M 15.75 2.813 C 15.75 2.502 15.498 2.25 15.188 2.25 L 8.438 2.25 C 8.127 2.25 7.875 2.502 7.875 2.813 C 7.875 3.123 8.127 3.375 8.438 3.375 L 13.83 3.375 L 2.414 14.789 C 2.194 15.009 2.194 15.366 2.414 15.586 C 2.634 15.806 2.991 15.806 3.211 15.586 L 14.625 4.17 L 14.625 9.563 C 14.625 9.873 14.877 10.125 15.188 10.125 C 15.498 10.125 15.75 9.873 15.75 9.563 Z%22 fill=%22rgb(255, 255, 255)%22 stroke-width=%220.28125%22 stroke=%22rgb(255, 255, 255)%22 stroke-miterlimit=%222.8125%22></path></svg>"); background-size: 100% 100%; image-rendering: pixelated; }
.socials-social-wrap-2 { position: relative; flex-shrink: 0; }
.socials-social-wrap-3 { position: relative; flex-shrink: 0; }
.socials-social-wrap-4 { position: relative; flex-shrink: 0; }
.socials-button { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 52px; aspect-ratio: 1 / 1; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); background-color: rgba(255, 255, 255, 0.08); border-radius: 100px; }
.socials-button::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 100px; pointer-events: none; }
.socials-at { position: absolute; inset: 10px; z-index: 1; flex-shrink: 0; width: 32px; height: 32px; -webkit-mask-image: url("/assets/images/vY2URHEYOy5MsomFmlvuWj7tjA.avif"); -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; background-color: rgb(242, 242, 242); mask-image: url("/assets/images/vY2URHEYOy5MsomFmlvuWj7tjA.avif"); mask-mode: alpha; mask-position: 50% 50%; mask-repeat: no-repeat; mask-size: cover; }
.socials-x { position: absolute; inset: 25px; z-index: 1; flex-shrink: 0; width: 2px; height: 2px; -webkit-mask-image: url("/assets/images/qCCGnesXVKXVz38Lx21vMeu9Ic.avif"); -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; background-color: rgb(242, 242, 242); mask-image: url("/assets/images/qCCGnesXVKXVz38Lx21vMeu9Ic.avif"); mask-mode: alpha; mask-position: 50% 50%; mask-repeat: no-repeat; mask-size: cover; opacity: 0; }
.home-center { display: flex; position: relative; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 96px; width: 1px; height: min-content; }
.home-center-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.home-hero { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: flex-end; align-content: flex-end; gap: 10px; width: 100%; height: 100vh; overflow: hidden; }
.home-hero-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 80%; padding-top: 9px; padding-right: 9px; padding-left: 9px; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%); background-image: radial-gradient(73% 95% at 50% 1.7%, rgba(77, 77, 77, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%); border-top-left-radius: 33px; border-top-right-radius: 33px; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%); }
.home-hero-div::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-left-color: rgb(77, 77, 77); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(77, 77, 77); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(77, 77, 77); border-top-left-radius: 33px; border-top-right-radius: 33px; border-top-style: solid; border-top-width: 1px; pointer-events: none; }
.home-upper-shadow { position: absolute; top: 0px; left: 15.0036%; z-index: 1; flex-shrink: 0; width: 70%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(77, 77, 77) 0%, rgb(230, 230, 230) 50%, rgb(77, 77, 77) 100%); }
.home-browser { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 1px; overflow: hidden; border-top-left-radius: 24px; border-top-right-radius: 24px; }
.home-browser::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-left-color: rgb(128, 128, 128); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(128, 128, 128); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(128, 128, 128); border-top-left-radius: 24px; border-top-right-radius: 24px; border-top-style: solid; border-top-width: 1px; pointer-events: none; }
.home-browser-div { display: flex; position: relative; order: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 12px; width: 100%; height: min-content; overflow: hidden; }
.home-browser-div2 { position: relative; z-index: 1; flex-shrink: 0; width: 100%; height: 1px; overflow: hidden; background-color: rgb(33, 33, 33); border-radius: 50px; }
.home-selected-work-wrap { position: relative; top: 0px; left: 0px; z-index: 3; flex-shrink: 0; width: 100%; }
.selected-work--19fdw { display: flex; position: relative; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 10px; width: 100%; height: min-content; overflow: hidden; }
.selected-work--1cbez { display: flex; position: relative; justify-content: center; align-items: flex-end; align-content: flex-end; gap: 10px; width: min-content; height: 84px; overflow: hidden; }
.selected-work-arrow--g3cu2 { display: block; position: relative; flex-shrink: 0; width: 30px; aspect-ratio: 1 / 1; overflow: hidden; -webkit-mask-image: url("/assets/images/edS1G8mejP0cAj3L69ztwHVJHWQ.avif"); -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background-color: rgb(128, 128, 128); mask-image: url("/assets/images/edS1G8mejP0cAj3L69ztwHVJHWQ.avif"); mask-mode: alpha; mask-position: 50% 50%; mask-repeat: no-repeat; mask-size: contain; transform: rotate(90deg); }
.selected-work-arrow--n17bd { display: block; position: relative; flex-shrink: 0; width: 60px; aspect-ratio: 1 / 1; overflow: hidden; -webkit-mask-image: url("/assets/images/edS1G8mejP0cAj3L69ztwHVJHWQ.avif"); -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background-color: rgb(242, 242, 242); mask-image: url("/assets/images/edS1G8mejP0cAj3L69ztwHVJHWQ.avif"); mask-mode: alpha; mask-position: 50% 50%; mask-repeat: no-repeat; mask-size: contain; transform: rotate(90deg); transform-origin: 50% 50% 0px; }
.selected-work-label { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.selected-work-text { -webkit-font-smoothing: antialiased; color: rgb(128, 128, 128); font-family: "Alex Brush", sans-serif; font-size: 30px; line-height: 30px; text-align: center; white-space: pre; }
.home-macos-bar { display: flex; position: relative; flex-shrink: 0; justify-content: space-between; align-items: center; align-content: center; width: 100%; height: min-content; padding: 12px 36px; background-image: radial-gradient(50% 150% at 50% 0px, rgb(209, 209, 209) 0%, rgb(57, 57, 57) 100%); border-top-left-radius: 24px; border-top-right-radius: 24px; }
.home-bottom-shadow { position: absolute; top: 0px; left: 4.93768%; z-index: 4; flex-shrink: 0; width: 90%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(128, 128, 128) 0%, rgb(230, 230, 230) 50%, rgb(128, 128, 128) 100%); }
.home-menu { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 12px; width: min-content; height: min-content; }
.home-menu-div { position: relative; flex-shrink: 0; width: 9px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(244, 108, 93); border-radius: 50px; box-shadow: rgba(244, 108, 93, 0.4) 0px 0px 10px 5px; filter: blur(0.5px); }
.home-menu-div2 { position: relative; flex-shrink: 0; width: 9px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(248, 189, 78); border-radius: 50px; box-shadow: rgba(248, 189, 78, 0.4) 0px 0px 10px 5px; filter: blur(0.5px); }
.home-menu-div3 { position: relative; flex-shrink: 0; width: 9px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(87, 195, 83); border-radius: 50px; box-shadow: rgba(87, 196, 83, 0.4) 0px 0px 10px 5px; filter: blur(0.5px); }
.home-plus { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 18px; height: 18px; overflow: hidden; }
.home-plus-div { position: absolute; top: calc(50% - 1px); left: 0px; z-index: 1; flex-shrink: 0; width: 18px; height: 2px; overflow: hidden; background-color: rgb(107, 107, 107); }
.home-plus-div2 { position: absolute; top: 0px; right: 8px; bottom: 0px; z-index: 1; flex-shrink: 0; width: 2px; overflow: hidden; background-color: rgb(107, 107, 107); }
.home-website { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 75px; width: 100%; height: 1px; padding-top: 50px; padding-right: 50px; padding-left: 50px; background-color: rgb(26, 26, 26); }
.home-header { display: flex; position: relative; z-index: 3; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 6px; width: 100%; height: min-content; }
.home-header-div { display: flex; position: relative; order: 1; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.home-header-h1 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.4); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 16px; text-align: left; white-space: pre; }
.home-header-div2 { position: relative; z-index: 2; flex-shrink: 0; width: 7px; height: 7px; background-color: rgb(102, 255, 110); border-radius: 24px; box-shadow: rgba(102, 255, 110, 0.23) 0px 0px 0px -0.375px, rgba(102, 255, 110, 0.85) 0px 0px 0px -0.75px; }
.home-text { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 0px; width: 100%; height: min-content; }
.home-main-text { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.home-main-text-h1 { -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 89px; line-height: 89px; overflow-wrap: break-word; text-shadow: rgba(207, 204, 255, 0.9) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.home-main-text-br--1dpwg { display: inline; }
.home-main-text-span--w1ltx { display: inline; font-family: "Alex Brush", sans-serif; }
.home-main-text-span--187y0 { display: inline; font-size: 59px; line-height: 59px; }
.home-main-text-span--zj2l0 { display: inline; font-family: "Alex Brush", sans-serif; font-size: 59px; line-height: 59px; }
.home-website-div { display: flex; position: relative; flex-shrink: 0; justify-content: flex-end; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; }
.home-website-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 6px; width: min-content; height: min-content; }
.home-website-div3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.home-website-p { -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 32px; line-height: 32px; white-space: pre; }
.home-selected-work-wrap-2 { position: absolute; bottom: 12px; left: 50%; z-index: 3; flex-shrink: 0; transform: translate(-50%); }
.home-work { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; }
.home-thailotus { position: relative; flex-shrink: 0; width: 100%; height: 100vh; }
.card { display: flex; position: relative; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 100%; height: 100%; overflow: hidden; cursor: pointer; }
.card-link { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 80%; padding: 6px; overflow: hidden; background-color: rgb(20, 20, 20); border-radius: 33px; cursor: pointer; }
.card-container { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: space-between; align-items: center; align-content: center; width: 100%; height: 1px; padding-top: 48px; padding-right: 48px; padding-left: 48px; overflow: hidden; border-radius: 23px; }
.card-container--guart { background-color: rgb(38, 38, 38); }
.card-container--velvetgrowth { background-color: rgb(38, 38, 38); }
.card-container--marketingembodied { background-color: rgb(38, 38, 38); }
.card-container--ifa { background-color: rgb(38, 38, 38); }
.card-container--toma { background-color: rgb(38, 38, 38); }
.card-container--thailotus { background-color: rgb(38, 38, 38); }
.card-color-helper { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; gap: 10px; background-image: radial-gradient(110% 110% at 50% 0%, rgba(31, 31, 31, 0) 0%, rgb(20, 20, 20) 100%); }
.card-top { display: flex; position: relative; z-index: 3; flex-shrink: 0; justify-content: space-between; align-items: flex-start; align-content: flex-start; width: 100%; height: min-content; }
.card-text { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 12px; width: min-content; height: min-content; }
.card-text-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.card-text-h2 { -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 26px; line-height: 26px; text-shadow: rgb(207, 204, 255) 0px 0px 3px; white-space: pre; }
.card-text-div2 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: flex-end; align-content: flex-end; gap: 10px; width: min-content; height: min-content; }
.card-text-div3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.card-text-h3 { -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 19px; line-height: 19px; white-space: pre; }
.card-text-div4 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.card-text-p { -webkit-font-smoothing: antialiased; color: rgb(128, 128, 128); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 19px; line-height: 19px; overflow-wrap: normal; white-space: pre; word-break: normal; }
.card-arrow { display: flex; position: absolute; top: 0px; right: 0px; z-index: 3; flex-shrink: 0; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 10px; width: min-content; height: min-content; overflow: hidden; }
.card-arrow-icon { position: relative; flex-shrink: 0; width: 45px; aspect-ratio: 1 / 1; overflow: hidden; -webkit-mask-image: url("/assets/images/edS1G8mejP0cAj3L69ztwHVJHWQ.avif"); -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background-color: rgb(242, 242, 242); mask-image: url("/assets/images/edS1G8mejP0cAj3L69ztwHVJHWQ.avif"); mask-mode: alpha; mask-position: 50% 50%; mask-repeat: no-repeat; mask-size: contain; }
.card-bottom { display: flex; position: absolute; bottom: -35px; left: 11.5023%; z-index: 3; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 0px; width: 77%; height: 70%; overflow: hidden; }
.card-macos-bar { display: flex; position: relative; flex-shrink: 0; justify-content: space-between; align-items: center; align-content: center; width: 100%; height: min-content; padding: 12px 24px; background-image: radial-gradient(50% 150% at 50% 0%, rgb(102, 102, 102) 0%, rgb(57, 57, 57) 100%); border-top-left-radius: 14px; border-top-right-radius: 14px; }
.card-menu { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 8px; width: min-content; height: min-content; }
.card-menu-div { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(244, 108, 93); border-radius: 50px; }
.card-menu-div2 { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(248, 189, 78); border-radius: 50px; }
.card-menu-div3 { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(87, 195, 83); border-radius: 50px; }
.card-plus { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 15px; height: 15px; overflow: hidden; }
.card-plus-div { position: absolute; inset: 7px 0px; z-index: 1; flex-shrink: 0; overflow: hidden; background-color: rgb(107, 107, 107); }
.card-plus-div2 { position: absolute; inset: 0px 7px; z-index: 1; flex-shrink: 0; overflow: hidden; background-color: rgb(107, 107, 107); }
.card-bottom-div { position: relative; flex: 1 0 0px; width: 100%; height: 1px; overflow: hidden; }
.card-bottom-div2 { position: absolute; inset: 0px; }
.card-bottom-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.card-inner-borders { position: absolute; inset: 0px; z-index: 4; flex-shrink: 0; border-radius: 23px; }
.card-inactive-border { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; border-radius: 23px; }
.card-inactive-border::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(64, 64, 64); border-radius: 23px; pointer-events: none; }
.card-active-border { position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; overflow: hidden; -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%); border-radius: 23px; mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%); }
.card-active-border::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(128, 128, 128); border-radius: 23px; pointer-events: none; }
.card-upper-glitz { position: absolute; top: 0px; left: 4.98826%; z-index: 3; flex-shrink: 0; width: 90%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(128, 128, 128) 0%, rgb(230, 230, 230) 50%, rgb(128, 128, 128) 100%); }
.card-noise { position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; opacity: 0.04; }
.card-noise-div { position: absolute; inset: 0px; background-image: url("/assets/images/6mcf62RlDfRfU61Yg5vb2pefpi4.avif"); background-size: 128px auto; }
.card-outer-borders { position: absolute; inset: 0px; z-index: 4; flex-shrink: 0; border-radius: 33px; }
.card-inactive-border-2 { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; border-radius: 33px; }
.card-inactive-border-2::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(38, 38, 38); border-radius: 33px; pointer-events: none; }
.card-active-border-2 { position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; overflow: hidden; -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%); border-radius: 33px; mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%); }
.card-active-border-2::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(77, 77, 77); border-radius: 33px; pointer-events: none; }
.card-upper-glitz-2 { position: absolute; top: 0px; left: 15%; z-index: 3; flex-shrink: 0; width: 70%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(77, 77, 77) 0%, rgb(179, 179, 179) 50%, rgb(77, 77, 77) 100%); }
.home-divider { position: relative; flex-shrink: 0; width: 100%; height: 1px; overflow: hidden; background-color: rgba(255, 255, 255, 0.4); }
.home-transition-bottom { position: fixed; right: 0px; bottom: 0px; left: 0px; z-index: 3; flex-shrink: 0; height: 10vh; overflow: hidden; background-image: linear-gradient(rgba(206, 161, 115, 0) 0%, rgba(13, 13, 13, 0.8) 60%, rgb(13, 13, 13) 100%); transform: rotate(360deg); }
.home-div { position: relative; flex-shrink: 0; opacity: 0; }
.svg-templates { position: absolute; bottom: 0px; left: 0px; z-index: 0; width: 0px; height: 0px; overflow: hidden; contain: strict; }
.info { display: flex; position: relative; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 0px; height: min-content; min-height: 100vh; padding-bottom: 100px; background-image: radial-gradient(65% 13% at 50% 4.7%, rgb(38, 38, 38) 0%, rgb(13, 13, 13) 100%); }
.info-transition-top { position: fixed; top: 0px; right: 0px; left: 0px; z-index: 2; flex-shrink: 0; height: 10vh; overflow: hidden; background-image: linear-gradient(rgba(206, 161, 115, 0) 0%, rgba(13, 13, 13, 0.8) 60%, rgb(13, 13, 13) 100%); transform: rotate(180deg); }
.info-header-wrap { position: fixed; top: 36px; right: 36px; left: 36px; z-index: 3; flex-shrink: 0; }
.info-center { display: flex; position: relative; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 48px; width: 1px; height: min-content; }
.info-about-me { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 48px; width: 100%; height: min-content; }
.info-hero { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-end; align-content: flex-end; gap: 0px; width: 100%; height: min-content; }
.info-top-padding { position: relative; flex-shrink: 0; width: 100%; height: 20vh; overflow: hidden; }
.info-hero-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 24px; width: 100%; height: min-content; }
.info-header { display: flex; position: relative; z-index: 3; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 12px; width: 100%; height: min-content; }
.info-header-div { position: relative; z-index: 2; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; background-color: rgb(102, 255, 110); border-radius: 24px; box-shadow: rgba(102, 255, 110, 0.18) 0.398096px 0.398096px 1.91418px -0.1875px, rgba(102, 255, 110, 0.23) 1.20725px 1.20725px 5.80487px -0.375px, rgba(102, 255, 110, 0.37) 3.19133px 3.19133px 15.3449px -0.5625px, rgba(102, 255, 110, 0.85) 10px 10px 48.0833px -0.75px, rgba(102, 255, 110, 0.18) -0.398096px -0.398096px 1.91418px -0.1875px, rgba(102, 255, 110, 0.23) -1.20725px -1.20725px 5.80487px -0.375px, rgba(102, 255, 110, 0.37) -3.19133px -3.19133px 15.3449px -0.5625px, rgba(102, 255, 110, 0.85) -10px -10px 48.0833px -0.75px; }
.info-header-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.info-header-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.6); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; letter-spacing: 1.28px; line-height: 16px; text-align: left; white-space: pre; }
/* Headline always fills the column width ("fit text"): --fit = column width / natural text width (--w) at font-size --f. */
.info-hero-title { position: relative; flex-shrink: 0; width: 100%; container-type: inline-size; }
.info-hero-h1 { --w: 1007; --h: 82; --f: 82; --fit: calc(100cqw / var(--w)); height: calc(var(--h) * var(--fit)); -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: calc(var(--f) * var(--fit)); line-height: 1; text-shadow: rgb(207, 204, 255) 0px 0px calc(7 * var(--fit)); white-space: pre; }
.info-content { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 36px; width: 100%; height: min-content; overflow: hidden; }
.info-left { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 12px; width: 1px; height: min-content; overflow: hidden; }
.info-card-1 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 600px; padding: 3px; overflow: hidden; background-image: radial-gradient(73% 95% at 50% 1.7%, rgba(77, 77, 77, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%); border-radius: 33px; }
.info-card-1::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(91, 91, 91); border-radius: 33px; pointer-events: none; }
.info-upper-shadow { position: absolute; top: 0px; left: 10%; z-index: 1; flex-shrink: 0; width: 80%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(91, 91, 91) 0%, rgb(230, 230, 230) 50%, rgb(91, 91, 91) 100%); }
.info-image { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 1px; overflow: hidden; border-radius: 30px; }
.info-image::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(128, 128, 128); border-radius: 30px; pointer-events: none; }
.info-image-div { position: absolute; inset: 0px; border-radius: 30px; }
.info-image-img { display: block; width: 100%; height: 100%; border-radius: 30px; object-fit: cover; object-position: 50.5% 11.1%; }
.info-text-1 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 24px; width: 100%; height: min-content; padding: 24px; overflow: hidden; }
.info-text-1-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.info-text-1-h3 { -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 26px; line-height: 31.2px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-text-1-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.info-text-1-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.6); font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 22px; letter-spacing: 0.44px; line-height: 24.2px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-text-1-p--17ye2 { margin-top: 24px; }
.info-card-1-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 350px; padding: 3px; overflow: hidden; background-image: radial-gradient(73% 95% at 50% 1.7%, rgba(77, 77, 77, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%); border-radius: 33px; }
.info-card-1-2::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(91, 91, 91); border-radius: 33px; pointer-events: none; }
.info-upper-shadow-2 { position: absolute; top: 0px; left: 10%; z-index: 1; flex-shrink: 0; width: 80%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(91, 91, 91) 0%, rgb(230, 230, 230) 50%, rgb(91, 91, 91) 100%); }
.info-image-2 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 1px; overflow: hidden; border-radius: 30px; }
.info-image-2::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(128, 128, 128); border-radius: 30px; pointer-events: none; }
.info-image-2-div { position: absolute; inset: 0px; border-radius: 30px; }
.info-image-2-img--plcxf { display: block; width: 100%; height: 100%; border-radius: 30px; object-fit: cover; object-position: 49.6% 39%; }
.info-image-2-img--7u9cw { display: block; width: 100%; height: 100%; border-radius: 30px; object-fit: cover; }
.info-text-1-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 24px; width: 100%; height: min-content; padding: 24px; overflow: hidden; }
.info-text-1-2-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.info-text-1-2-h3 { -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 30px; line-height: 30px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-text-1-2-p { -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 21px; line-height: 21px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-text-1-2-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.info-text-1-2-p2 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.6); font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; letter-spacing: 0.48px; line-height: 26.4px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-text-1-2-p2--17ye2 { margin-top: 24px; }
.info-right { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 12px; width: 1px; height: min-content; overflow: hidden; }
.info-text-1-3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 24px; width: 100%; height: min-content; padding: 24px; overflow: hidden; }
.info-text-1-3-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.info-text-1-3-p { -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 26px; line-height: 39px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-text-1-3-p--37pc3 { text-align: start; }
.info-text-1-3-p--189ay { text-align: right; }
.info-text-1-3-h2 { -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 30px; line-height: 45px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-text-1-3-h2--189ay { text-align: right; }
.info-card-1-3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 700px; padding: 3px; overflow: hidden; background-image: radial-gradient(73% 95% at 50% 1.7%, rgba(77, 77, 77, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%); border-radius: 33px; }
.info-card-1-3::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(91, 91, 91); border-radius: 33px; pointer-events: none; }
.info-upper-shadow-3 { position: absolute; top: 0px; left: 10%; z-index: 1; flex-shrink: 0; width: 80%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(91, 91, 91) 0%, rgb(230, 230, 230) 50%, rgb(91, 91, 91) 100%); }
.info-image-3 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 1px; overflow: hidden; border-radius: 30px; }
.info-image-3::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(128, 128, 128); border-radius: 30px; pointer-events: none; }
.info-image-3-div { position: absolute; inset: 0px; border-radius: 30px; }
.info-image-3-img--1s9uk { display: block; width: 100%; height: 100%; border-radius: 30px; object-fit: cover; }
.info-image-3-img--7iuvi { display: block; width: 100%; height: 100%; border-radius: 30px; object-fit: cover; object-position: 49.3% 78.1%; }
.info-text-1-4 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 24px; width: 100%; height: min-content; padding: 24px; overflow: hidden; }
.info-text-1-4-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.info-text-1-4-h3 { -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 26px; line-height: 31.2px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-text-1-4-p { -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 21px; line-height: 25.2px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-text-1-4-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.info-text-1-4-p2 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.6); font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 22px; letter-spacing: 0.44px; line-height: 24.2px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-text-1-4-p2--17ye2 { margin-top: 24px; }
.info-card-1-4 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; aspect-ratio: 1 / 1; padding: 3px; overflow: hidden; background-image: radial-gradient(73% 95% at 50% 1.7%, rgba(77, 77, 77, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%); border-radius: 33px; }
.info-card-1-4::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(91, 91, 91); border-radius: 33px; pointer-events: none; }
.info-upper-shadow-4 { position: absolute; top: 0px; left: 10%; z-index: 1; flex-shrink: 0; width: 80%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(91, 91, 91) 0%, rgb(230, 230, 230) 50%, rgb(91, 91, 91) 100%); }
.info-image-4 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 1px; overflow: hidden; border-radius: 30px; filter: contrast(1.15); }
.info-image-4::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(128, 128, 128); border-radius: 30px; pointer-events: none; }
.info-image-4-div { position: absolute; inset: 0px; border-radius: 30px; }
.info-image-4-img--26auo { display: block; width: 100%; height: 100%; border-radius: 30px; object-fit: cover; object-position: 50% 0%; }
.info-image-4-img--qety9 { display: block; width: 100%; height: 100%; border-radius: 30px; object-fit: cover; object-position: 50% 100%; }
.info-text-1-5 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 24px; width: 100%; height: min-content; padding: 24px; overflow: hidden; }
.info-text-1-5-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.info-text-1-5-h3 { -webkit-font-smoothing: antialiased; color: rgb(242, 242, 242); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 30px; line-height: 30px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-text-1-5-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.info-text-1-5-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.6); font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; letter-spacing: 0.48px; line-height: 26.4px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-text-1-5-p--17ye2 { margin-top: 24px; }
.info-divider { position: relative; flex-shrink: 0; width: 100%; height: 1px; overflow: hidden; background-color: rgba(255, 255, 255, 0.4); }
.info-experience { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 48px; width: 100%; height: min-content; }
.info-header-2 { display: flex; position: relative; z-index: 3; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 12px; width: 100%; height: min-content; }
.info-header-2-div { position: relative; z-index: 2; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; background-color: rgb(102, 255, 110); border-radius: 24px; box-shadow: rgba(102, 255, 110, 0.18) 0.398096px 0.398096px 1.91418px -0.1875px, rgba(102, 255, 110, 0.23) 1.20725px 1.20725px 5.80487px -0.375px, rgba(102, 255, 110, 0.37) 3.19133px 3.19133px 15.3449px -0.5625px, rgba(102, 255, 110, 0.85) 10px 10px 48.0833px -0.75px, rgba(102, 255, 110, 0.18) -0.398096px -0.398096px 1.91418px -0.1875px, rgba(102, 255, 110, 0.23) -1.20725px -1.20725px 5.80487px -0.375px, rgba(102, 255, 110, 0.37) -3.19133px -3.19133px 15.3449px -0.5625px, rgba(102, 255, 110, 0.85) -10px -10px 48.0833px -0.75px; }
.info-header-2-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.info-header-2-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.6); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; letter-spacing: 1.28px; line-height: 16px; text-align: left; white-space: pre; }
.info-content-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 48px; width: 100%; height: min-content; overflow: hidden; }
.info-experience-wrap { position: relative; flex-shrink: 0; width: 100%; }
.experience { display: flex; position: relative; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.experience-left { display: flex; position: relative; flex: 1 0 0px; justify-content: center; align-items: center; align-content: center; gap: 12px; width: 1px; height: min-content; }
.experience-left-div { position: relative; flex-shrink: 0; width: 50px; aspect-ratio: 1 / 1; }
.experience-left-div2 { position: absolute; inset: 0px; }
.experience-left-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.experience-left-div3 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.experience-left-h2 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 42px; line-height: 50.4px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.experience-right { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 24px; width: 1px; height: min-content; overflow: hidden; }
.experience-top { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 3px; width: 100%; height: min-content; overflow: hidden; }
.experience-top-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.experience-top-h3 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 30px; line-height: 36px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.experience-top-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.experience-top-h4 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.4); font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 22px; line-height: 33px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.experience-description { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.experience-description-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.6); font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; letter-spacing: 0.48px; line-height: 26.4px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.info-experience-wrap-2 { position: relative; flex-shrink: 0; width: 100%; }
.info-experience-wrap-3 { position: relative; flex-shrink: 0; width: 100%; }
.info-divider-2 { position: relative; flex-shrink: 0; width: 100%; height: 1px; overflow: hidden; background-color: rgba(255, 255, 255, 0.4); }
.info-transition-bottom { position: fixed; right: 0px; bottom: 0px; left: 0px; z-index: 2; flex-shrink: 0; height: 10vh; overflow: hidden; background-image: linear-gradient(rgba(206, 161, 115, 0) 0%, rgba(13, 13, 13, 0.8) 60%, rgb(13, 13, 13) 100%); transform: rotate(360deg); }
.info-div { position: relative; flex-shrink: 0; opacity: 0; }
.project { display: flex; position: relative; flex-direction: column; justify-content: flex-start; align-items: center; align-content: center; gap: 200px; height: min-content; min-height: 100vh; padding-bottom: 200px; overflow: hidden; background-color: rgb(13, 13, 13); }
.project-hero { display: flex; position: relative; z-index: 3; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: center; align-content: center; gap: 60px; width: 100%; height: min-content; padding-top: 150px; padding-right: 248px; padding-left: 248px; overflow: hidden; }
.project-post { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: center; align-content: center; gap: 12px; width: 100%; height: min-content; }
.project-title { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.project-title-2 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.project-title-2-h1 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 80px; letter-spacing: -1.44px; line-height: 96px; overflow-wrap: break-word; text-align: center; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.project-post-div { display: flex; position: relative; flex-shrink: 0; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: 6px; width: 100%; height: min-content; overflow: hidden; }
.project-content { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-content-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; letter-spacing: -0.17px; line-height: 27.55px; text-align: left; white-space: pre; }
.project-content-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-content-2-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 19px; letter-spacing: -0.19px; line-height: 27.55px; text-align: left; white-space: pre; }
.project-content-3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-content-3-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; letter-spacing: -0.17px; line-height: 27.55px; overflow-wrap: normal; text-align: left; white-space: pre; word-break: normal; }
.project-image { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: center; align-content: center; gap: 0px; width: 100%; aspect-ratio: 1.54465 / 1; padding-top: 15px; padding-right: 15px; padding-left: 15px; overflow: hidden; }
.project-mac { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; padding: 100px; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%); -webkit-user-select: none; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%); user-select: none; }
.project-mac-div { position: absolute; inset: 0px; }
.project-mac-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-menubar { display: flex; position: relative; z-index: 2; flex-shrink: 0; justify-content: space-between; align-items: center; align-content: center; width: 100%; height: 19px; padding-right: 16px; padding-left: 16px; overflow: clip; -webkit-user-select: none; user-select: none; }
.project-menus { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 11px; width: min-content; height: min-content; }
.project-menus-div { position: relative; flex-shrink: 0; height: 12px; aspect-ratio: 0.875 / 1; -webkit-mask-image: url("data:image/svg+xml,<svg display=\"block\" role=\"presentation\" viewBox=\"0 0 14 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 6.204 4.31 C 5.612 4.31 4.695 3.636 3.729 3.66 C 2.454 3.677 1.286 4.399 0.629 5.544 C -0.694 7.841 0.288 11.233 1.578 13.1 C 2.211 14.009 2.958 15.031 3.948 14.999 C 4.898 14.959 5.254 14.382 6.407 14.382 C 7.552 14.382 7.876 14.999 8.882 14.975 C 9.906 14.959 10.555 14.05 11.18 13.132 C 11.902 12.077 12.202 11.054 12.219 10.998 C 12.194 10.99 10.23 10.235 10.206 7.962 C 10.19 6.062 11.756 5.154 11.829 5.113 C 10.936 3.807 9.565 3.661 9.086 3.628 C 7.836 3.531 6.789 4.309 6.204 4.309 Z M 8.316 2.394 C 8.842 1.761 9.191 0.877 9.094 0 C 8.339 0.032 7.43 0.503 6.886 1.136 C 6.399 1.696 5.977 2.597 6.091 3.457 C 6.927 3.522 7.787 3.027 8.315 2.394\" fill=\"var(--t829wi, rgb(0,0,0))\" height=\"15.00000014500371px\" id=\"a2i6ubXcs\" transform=\"translate(0.75 0)\" width=\"12.21867510794063px\"/></svg>"), none; -webkit-mask-position: 50% 50%, 0% 0%; -webkit-mask-repeat: no-repeat, repeat; -webkit-mask-size: auto, auto; background-color: rgba(255, 255, 255, 0.72); mask-composite: add, add; mask-image: url("data:image/svg+xml,<svg display=\"block\" role=\"presentation\" viewBox=\"0 0 14 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 6.204 4.31 C 5.612 4.31 4.695 3.636 3.729 3.66 C 2.454 3.677 1.286 4.399 0.629 5.544 C -0.694 7.841 0.288 11.233 1.578 13.1 C 2.211 14.009 2.958 15.031 3.948 14.999 C 4.898 14.959 5.254 14.382 6.407 14.382 C 7.552 14.382 7.876 14.999 8.882 14.975 C 9.906 14.959 10.555 14.05 11.18 13.132 C 11.902 12.077 12.202 11.054 12.219 10.998 C 12.194 10.99 10.23 10.235 10.206 7.962 C 10.19 6.062 11.756 5.154 11.829 5.113 C 10.936 3.807 9.565 3.661 9.086 3.628 C 7.836 3.531 6.789 4.309 6.204 4.309 Z M 8.316 2.394 C 8.842 1.761 9.191 0.877 9.094 0 C 8.339 0.032 7.43 0.503 6.886 1.136 C 6.399 1.696 5.977 2.597 6.091 3.457 C 6.927 3.522 7.787 3.027 8.315 2.394\" fill=\"var(--t829wi, rgb(0,0,0))\" height=\"15.00000014500371px\" id=\"a2i6ubXcs\" transform=\"translate(0.75 0)\" width=\"12.21867510794063px\"/></svg>"), none; mask-mode: alpha, match-source; mask-position: 50% 50%, 0% 0%; mask-repeat: no-repeat, repeat; mask-size: auto, auto; }
.project-menus-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-menus-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.88); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 7px; font-weight: 600; line-height: 8.4px; white-space: pre; }
.project-menus-div3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-menus-p2 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.7); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 7px; line-height: 8.4px; white-space: pre; }
.project-menus-div4 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-menus-p3 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.7); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 7px; line-height: 8.4px; white-space: pre; }
.project-menus-div5 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-menus-p4 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.7); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 7px; line-height: 8.4px; white-space: pre; }
.project-menus-div6 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-menus-p5 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.7); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 7px; line-height: 8.4px; white-space: pre; }
.project-menus-div7 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-menus-p6 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.7); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 7px; line-height: 8.4px; white-space: pre; }
.project-menus-div8 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-menus-p7 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.7); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 7px; line-height: 8.4px; white-space: pre; }
.project-menus-div9 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-menus-p8 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.7); font-family: Inter, "Inter Placeholder", sans-serif; font-size: 7px; line-height: 8.4px; white-space: pre; }
.project-status { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 14px; width: min-content; height: min-content; }
.project-status-svg { display: block; position: relative; flex-shrink: 0; height: 12px; aspect-ratio: 1 / 1; }
.project-status-svg2 { display: block; position: relative; flex-shrink: 0; height: 12px; aspect-ratio: 1 / 1; }
.project-status-svg3 { display: block; position: relative; flex-shrink: 0; height: 12px; aspect-ratio: 1 / 1; }
/* the status icons are line drawings defined once at the end of the page (#svg-templates) and coloured from here */
.project-status-svg, .project-status-svg2, .project-status-svg3 { --icon-color: rgba(255, 255, 255, 0.72); --icon-stroke-width: 1.5; }
.project-control-center { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 1px; width: min-content; height: 10px; }
.project-toggle { position: relative; flex-shrink: 0; width: 11px; height: 4px; border-radius: 3px; }
.project-toggle::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 3px; pointer-events: none; }
.project-toggle-2 { position: relative; flex-shrink: 0; width: 11px; height: 4px; border-radius: 3px; }
.project-toggle-2::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 3px; pointer-events: none; }
.project-status-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-status-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.78); font-family: Inter, "Inter Placeholder", sans-serif; font-feature-settings: "tnum"; font-size: 9px; line-height: 10.8px; white-space: pre; }
.project-image-div { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 1px; overflow: clip; }
.project-macos-bar { display: flex; position: relative; z-index: 2; flex-shrink: 0; justify-content: space-between; align-items: center; align-content: center; width: 100%; height: min-content; padding: 12px 24px; background-color: rgb(46, 46, 46); border-top-left-radius: 10px; border-top-right-radius: 10px; }
.project-menu { display: flex; position: relative; z-index: 1; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 12px; width: min-content; height: min-content; }
.project-menu-div { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(244, 108, 93); border-radius: 50px; box-shadow: rgba(244, 108, 93, 0.4) 0px 0px 10px 5px; filter: blur(0.5px); }
.project-menu-div2 { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(248, 189, 78); border-radius: 50px; box-shadow: rgba(248, 189, 78, 0.4) 0px 0px 10px 5px; filter: blur(0.5px); }
.project-menu-div3 { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(87, 195, 83); border-radius: 50px; box-shadow: rgba(87, 196, 83, 0.4) 0px 0px 10px 5px; filter: blur(0.5px); }
.project-plus { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 15px; height: 15px; overflow: hidden; }
.project-plus-div { position: absolute; inset: 7px 0px; z-index: 1; flex-shrink: 0; overflow: hidden; background-color: rgb(107, 107, 107); border-radius: 100px; }
.project-plus-div2 { position: absolute; inset: 0px 7px; z-index: 1; flex-shrink: 0; overflow: hidden; background-color: rgb(107, 107, 107); border-radius: 100px; }
.project-image-2 { display: flex; position: relative; z-index: 2; flex: 1 0 0px; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 100%; height: 1px; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0) 100%); }
.project-image-2-div { position: absolute; inset: 0px; }
.project-image-2-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.project-overview { display: flex; position: relative; z-index: 3; flex-shrink: 0; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 48px; width: 800px; height: min-content; scroll-margin-top: 48px; }
.project-left { display: flex; position: relative; z-index: 2; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 48px; width: 1px; height: min-content; }
.project-post-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 12px; width: 100%; height: min-content; }
.project-title-3 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.project-title-4 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-title-4-h2 { -webkit-font-smoothing: antialiased; color: rgb(230, 230, 230); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space: pre; }
.project-post-2-div { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 6px; width: 100%; height: min-content; overflow: hidden; }
.project-content-4 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.project-content-4-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; letter-spacing: -0.17px; line-height: 27.55px; overflow-wrap: break-word; text-align: left; white-space-collapse: preserve; word-break: break-word; }
.project-post-3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 12px; width: 100%; height: min-content; }
.project-title-5 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.project-title-6 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-title-6-h2 { -webkit-font-smoothing: antialiased; color: rgb(230, 230, 230); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space: pre; }
.project-post-3-div { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 6px; width: 100%; height: min-content; overflow: hidden; }
.project-content-5 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.project-content-5-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; letter-spacing: -0.17px; line-height: 27.55px; overflow-wrap: break-word; text-align: left; white-space-collapse: preserve; word-break: break-word; }
.project-post-4 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 12px; width: 100%; height: min-content; }
.project-title-7 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.project-title-8 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-title-8-h2 { -webkit-font-smoothing: antialiased; color: rgb(230, 230, 230); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space: pre; }
.project-post-4-div { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 6px; width: 100%; height: min-content; overflow: hidden; }
.project-content-6 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.project-content-6-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; letter-spacing: -0.17px; line-height: 27.55px; overflow-wrap: break-word; text-align: left; white-space-collapse: preserve; word-break: break-word; }
.project-left-2 { display: flex; position: relative; z-index: 2; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 48px; width: 1px; height: min-content; overflow: hidden; }
.project-post-5 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 12px; width: 100%; height: min-content; }
.project-title-9 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: min-content; height: min-content; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.project-title-10 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-title-10-h2 { -webkit-font-smoothing: antialiased; color: rgb(230, 230, 230); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space: pre; }
.project-post-5-div { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 6px; width: 100%; height: min-content; overflow: hidden; }
.project-content-7 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.project-content-7-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; letter-spacing: -0.17px; line-height: 27.55px; overflow-wrap: break-word; text-align: left; white-space-collapse: preserve; word-break: break-word; }
.project-content-7-p--pdzfi { margin-top: 24px; }
.project-content-7-strong { font-weight: 700; }
.project-highlights { display: flex; position: relative; z-index: 3; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 800px; height: min-content; scroll-margin-top: 48px; }
.project-highlights-div { display: flex; position: relative; z-index: 3; flex: 1 0 0px; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 1px; height: min-content; padding: 48px; background-color: rgba(255, 255, 255, 0.15); border-radius: 30px; }
.project-top-outline { position: absolute; top: 0px; left: 7.46271%; z-index: 1; flex-shrink: 0; width: 85%; height: 2px; overflow: hidden; -webkit-mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); background-color: rgb(196, 196, 196); mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.project-post-6 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; align-items: center; align-content: center; gap: 60px; width: 1px; height: min-content; }
.project-top { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 30px; width: 100%; height: min-content; overflow: hidden; }
.project-top-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 12px; width: 100%; height: min-content; overflow: hidden; }
.project-content-8 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.project-content-8-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.65); font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 21px; white-space: pre; }
.project-title-11 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.project-title-12 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.project-title-12-h4 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 36px; letter-spacing: -0.72px; line-height: 43.2px; overflow-wrap: break-word; text-align: center; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.project-bottom { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 64px; width: 100%; height: min-content; overflow: hidden; }
.project-image-1 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 5%; padding: 8px; overflow: hidden; background-color: rgb(20, 20, 20); border-radius: 16px; }
.project-container { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; background-color: rgb(38, 38, 38); border-radius: 12px; }
.project-color-helper { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; gap: 10px; background-image: radial-gradient(110% 110% at 50% 0%, rgba(31, 31, 31, 0) 0%, rgb(20, 20, 20) 100%); }
.project-bottom-2 { display: flex; position: absolute; bottom: -35px; left: 11.5023%; z-index: 3; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 0px; width: 77%; height: 36px; overflow: hidden; }
.project-macos-bar-2 { display: flex; position: relative; flex-shrink: 0; justify-content: space-between; align-items: center; align-content: center; width: 100%; height: min-content; padding: 12px 24px; background-image: radial-gradient(50% 150% at 50% 0%, rgb(102, 102, 102) 0%, rgb(57, 57, 57) 100%); border-top-left-radius: 15px; border-top-right-radius: 15px; }
.project-menu-2 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 12px; width: min-content; height: min-content; }
.project-menu-2-div { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(244, 108, 93); border-radius: 50px; }
.project-menu-2-div2 { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(248, 189, 78); border-radius: 50px; }
.project-menu-2-div3 { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(87, 195, 83); border-radius: 50px; }
.project-plus-2 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 15px; height: 15px; overflow: hidden; }
.project-plus-2-div { position: absolute; inset: 7px 0px; z-index: 1; flex-shrink: 0; overflow: hidden; background-color: rgb(107, 107, 107); }
.project-plus-2-div2 { position: absolute; inset: 0px 7px; z-index: 1; flex-shrink: 0; overflow: hidden; background-color: rgb(107, 107, 107); }
.project-bottom-2-div { position: relative; flex: 1 0 0px; width: 100%; height: 1px; overflow: hidden; }
.project-bottom-2-div2 { position: absolute; inset: 0px; }
.project-bottom-2-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.project-inner-borders { position: absolute; inset: 0px; z-index: 4; flex-shrink: 0; border-radius: 12px; }
.project-inactive-border { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; border-radius: 12px; }
.project-inactive-border::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(64, 64, 64); border-radius: 12px; pointer-events: none; }
.project-active-border { position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); border-radius: 12px; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); }
.project-active-border::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(128, 128, 128); border-radius: 12px; pointer-events: none; }
.project-upper-glitz { position: absolute; top: 0px; left: 4.98826%; z-index: 3; flex-shrink: 0; width: 90%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(128, 128, 128) 0%, rgb(230, 230, 230) 50%, rgb(128, 128, 128) 100%); }
.project-image-3 { position: relative; z-index: 2; flex-shrink: 0; width: 100%; aspect-ratio: 1.89974 / 1; }
.project-image-3-div { position: absolute; inset: 0px; }
.project-image-3-div--ho0un { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22126%22 height=%22126%22><path id=%22a%22 d=%22M126 0v21.584L21.584 126H0v-17.585L108.415 0H126Zm0 108.414V126h-17.586L126 108.414Zm0-84v39.171L63.585 126H24.414L126 24.414Zm0 42v39.17L105.584 126h-39.17L126 66.414ZM105.586 0 0 105.586V66.415L66.415 0h39.171Zm-42 0L0 63.586V24.415L24.415 0h39.171Zm-42 0L0 21.586V0h21.586Z%22 fill=%22rgb(136, 136, 136, 0.2)%22 fill-rule=%22evenodd%22/></svg>"); background-size: 64px auto; }
.project-image-3-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.project-outer-borders { position: absolute; inset: 0px; z-index: 4; flex-shrink: 0; border-radius: 16px; }
.project-inactive-border-2 { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; border-radius: 16px; }
.project-inactive-border-2::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(38, 38, 38); border-radius: 16px; pointer-events: none; }
.project-active-border-2 { position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); border-radius: 16px; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); }
.project-active-border-2::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(77, 77, 77); border-radius: 16px; pointer-events: none; }
.project-upper-glitz-2 { position: absolute; top: 0px; left: 15%; z-index: 3; flex-shrink: 0; width: 70%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(77, 77, 77) 0%, rgb(179, 179, 179) 50%, rgb(77, 77, 77) 100%); border-radius: 16px; }
.project-image-2-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 5%; padding: 8px; overflow: hidden; background-color: rgb(20, 20, 20); border-radius: 16px; }
.project-container-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; background-color: rgb(38, 38, 38); border-radius: 12px; }
.project-color-helper-2 { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; gap: 10px; background-image: radial-gradient(110% 110% at 50% 0%, rgba(31, 31, 31, 0) 0%, rgb(20, 20, 20) 100%); }
.project-bottom-3 { display: flex; position: absolute; bottom: -35px; left: 11.5023%; z-index: 3; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 0px; width: 77%; height: 36px; overflow: hidden; }
.project-macos-bar-3 { display: flex; position: relative; flex-shrink: 0; justify-content: space-between; align-items: center; align-content: center; width: 100%; height: min-content; padding: 12px 24px; background-image: radial-gradient(50% 150% at 50% 0%, rgb(102, 102, 102) 0%, rgb(57, 57, 57) 100%); border-top-left-radius: 15px; border-top-right-radius: 15px; }
.project-menu-3 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 12px; width: min-content; height: min-content; }
.project-menu-3-div { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(244, 108, 93); border-radius: 50px; }
.project-menu-3-div2 { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(248, 189, 78); border-radius: 50px; }
.project-menu-3-div3 { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(87, 195, 83); border-radius: 50px; }
.project-plus-3 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 15px; height: 15px; overflow: hidden; }
.project-plus-3-div { position: absolute; inset: 7px 0px; z-index: 1; flex-shrink: 0; overflow: hidden; background-color: rgb(107, 107, 107); }
.project-plus-3-div2 { position: absolute; inset: 0px 7px; z-index: 1; flex-shrink: 0; overflow: hidden; background-color: rgb(107, 107, 107); }
.project-bottom-3-div { position: relative; flex: 1 0 0px; width: 100%; height: 1px; overflow: hidden; }
.project-bottom-3-div2 { position: absolute; inset: 0px; }
.project-bottom-3-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.project-inner-borders-2 { position: absolute; inset: 0px; z-index: 4; flex-shrink: 0; border-radius: 12px; }
.project-inactive-border-3 { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; border-radius: 12px; }
.project-inactive-border-3::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(64, 64, 64); border-radius: 12px; pointer-events: none; }
.project-active-border-3 { position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); border-radius: 12px; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); }
.project-active-border-3::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(128, 128, 128); border-radius: 12px; pointer-events: none; }
.project-upper-glitz-3 { position: absolute; top: 0px; left: 4.98826%; z-index: 3; flex-shrink: 0; width: 90%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(128, 128, 128) 0%, rgb(230, 230, 230) 50%, rgb(128, 128, 128) 100%); }
.project-image-4 { position: relative; z-index: 2; flex-shrink: 0; width: 100%; aspect-ratio: 1.89974 / 1; }
.project-image-4-div { position: absolute; inset: 0px; }
.project-image-4-div--ho0un { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22126%22 height=%22126%22><path id=%22a%22 d=%22M126 0v21.584L21.584 126H0v-17.585L108.415 0H126Zm0 108.414V126h-17.586L126 108.414Zm0-84v39.171L63.585 126H24.414L126 24.414Zm0 42v39.17L105.584 126h-39.17L126 66.414ZM105.586 0 0 105.586V66.415L66.415 0h39.171Zm-42 0L0 63.586V24.415L24.415 0h39.171Zm-42 0L0 21.586V0h21.586Z%22 fill=%22rgb(136, 136, 136, 0.2)%22 fill-rule=%22evenodd%22/></svg>"); background-size: 64px auto; }
.project-image-4-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.project-outer-borders-2 { position: absolute; inset: 0px; z-index: 4; flex-shrink: 0; border-radius: 16px; }
.project-inactive-border-4 { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; border-radius: 16px; }
.project-inactive-border-4::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(38, 38, 38); border-radius: 16px; pointer-events: none; }
.project-active-border-4 { position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); border-radius: 16px; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); }
.project-active-border-4::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(77, 77, 77); border-radius: 16px; pointer-events: none; }
.project-upper-glitz-4 { position: absolute; top: 0px; left: 15%; z-index: 3; flex-shrink: 0; width: 70%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(77, 77, 77) 0%, rgb(179, 179, 179) 50%, rgb(77, 77, 77) 100%); border-radius: 16px; }
.project-image-3-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: 5%; padding: 8px; overflow: hidden; background-color: rgb(20, 20, 20); border-radius: 16px; }
.project-container-3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; background-color: rgb(38, 38, 38); border-radius: 12px; }
.project-color-helper-3 { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; gap: 10px; background-image: radial-gradient(110% 110% at 50% 0%, rgba(31, 31, 31, 0) 0%, rgb(20, 20, 20) 100%); }
.project-bottom-4 { display: flex; position: absolute; bottom: -35px; left: 11.5023%; z-index: 3; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 0px; width: 77%; height: 36px; overflow: hidden; }
.project-macos-bar-4 { display: flex; position: relative; flex-shrink: 0; justify-content: space-between; align-items: center; align-content: center; width: 100%; height: min-content; padding: 12px 24px; background-image: radial-gradient(50% 150% at 50% 0%, rgb(102, 102, 102) 0%, rgb(57, 57, 57) 100%); border-top-left-radius: 15px; border-top-right-radius: 15px; }
.project-menu-4 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 12px; width: min-content; height: min-content; }
.project-menu-4-div { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(244, 108, 93); border-radius: 50px; }
.project-menu-4-div2 { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(248, 189, 78); border-radius: 50px; }
.project-menu-4-div3 { position: relative; flex-shrink: 0; width: 10px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(87, 195, 83); border-radius: 50px; }
.project-plus-4 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 15px; height: 15px; overflow: hidden; }
.project-plus-4-div { position: absolute; inset: 7px 0px; z-index: 1; flex-shrink: 0; overflow: hidden; background-color: rgb(107, 107, 107); }
.project-plus-4-div2 { position: absolute; inset: 0px 7px; z-index: 1; flex-shrink: 0; overflow: hidden; background-color: rgb(107, 107, 107); }
.project-bottom-4-div { position: relative; flex: 1 0 0px; width: 100%; height: 1px; overflow: hidden; }
.project-bottom-4-div2 { position: absolute; inset: 0px; }
.project-bottom-4-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.project-inner-borders-3 { position: absolute; inset: 0px; z-index: 4; flex-shrink: 0; border-radius: 12px; }
.project-inactive-border-5 { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; border-radius: 12px; }
.project-inactive-border-5::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(64, 64, 64); border-radius: 12px; pointer-events: none; }
.project-active-border-5 { position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); border-radius: 12px; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); }
.project-active-border-5::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(128, 128, 128); border-radius: 12px; pointer-events: none; }
.project-upper-glitz-5 { position: absolute; top: 0px; left: 4.98826%; z-index: 3; flex-shrink: 0; width: 90%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(128, 128, 128) 0%, rgb(230, 230, 230) 50%, rgb(128, 128, 128) 100%); }
.project-image-5 { position: relative; z-index: 2; flex-shrink: 0; width: 100%; aspect-ratio: 1.89974 / 1; }
.project-image-5-div { position: absolute; inset: 0px; }
.project-image-5-div--ho0un { background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22126%22 height=%22126%22><path id=%22a%22 d=%22M126 0v21.584L21.584 126H0v-17.585L108.415 0H126Zm0 108.414V126h-17.586L126 108.414Zm0-84v39.171L63.585 126H24.414L126 24.414Zm0 42v39.17L105.584 126h-39.17L126 66.414ZM105.586 0 0 105.586V66.415L66.415 0h39.171Zm-42 0L0 63.586V24.415L24.415 0h39.171Zm-42 0L0 21.586V0h21.586Z%22 fill=%22rgb(136, 136, 136, 0.2)%22 fill-rule=%22evenodd%22/></svg>"); background-size: 64px auto; }
.project-image-5-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.project-outer-borders-3 { position: absolute; inset: 0px; z-index: 4; flex-shrink: 0; border-radius: 16px; }
.project-inactive-border-6 { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; border-radius: 16px; }
.project-inactive-border-6::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(38, 38, 38); border-radius: 16px; pointer-events: none; }
.project-active-border-6 { position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; overflow: hidden; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); border-radius: 16px; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%); }
.project-active-border-6::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(77, 77, 77); border-radius: 16px; pointer-events: none; }
.project-upper-glitz-6 { position: absolute; top: 0px; left: 15%; z-index: 3; flex-shrink: 0; width: 70%; height: 1px; overflow: hidden; background-image: linear-gradient(90deg, rgb(77, 77, 77) 0%, rgb(179, 179, 179) 50%, rgb(77, 77, 77) 100%); border-radius: 16px; }
.project-background { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; }
.project-main { display: flex; position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; mix-blend-mode: overlay; }
.project-main-color { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; }
.project-main-color--1j4lg { background-color: rgb(199, 168, 107); }
.project-main-color--8rrv0 { background-color: rgb(71, 1, 1); }
.project-main-color--1ujdc { background-color: rgb(0, 47, 135); }
.project-main-color--13r3v { background-color: rgb(70, 122, 216); }
.project-main-color--1v8og { background-color: rgb(95, 255, 89); }
.project-main-color--a6lxk { background-color: rgb(87, 56, 10); }
.project-radial-overlay { display: flex; position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-image: radial-gradient(250% 150% at 50% 9.7%, rgba(13, 13, 13, 0) 0%, rgba(5, 5, 5, 0.9) 70%, rgb(0, 0, 0) 100%); }
.project-accent { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; }
.project-accent-color { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; }
.project-accent-color--1p9zb { background-color: rgb(49, 71, 60); }
.project-accent-color--ebub1 { background-color: rgb(252, 174, 174); }
.project-accent-color--nmovs { background-color: rgb(0, 195, 255); }
.project-accent-color--9josf { background-color: rgb(255, 255, 255); }
.project-accent-color--1dhsr { background-color: rgb(81, 87, 37); }
.project-accent-color--1lsbi { background-color: rgb(219, 170, 96); }
.project-radial-overlay-2 { display: flex; position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-image: radial-gradient(250% 150% at 50% 9.6%, rgba(13, 13, 13, 0) 0%, rgba(5, 5, 5, 0.9) 70%, rgb(0, 0, 0) 100%); }
.project-noise { position: fixed; inset: 0px; z-index: 2; flex-shrink: 0; opacity: 0.1; }
.project-noise-div { position: absolute; inset: 0px; background-image: url("/assets/images/6mcf62RlDfRfU61Yg5vb2pefpi4.avif"); background-size: 182px auto; }
.project-left-3 { display: flex; position: fixed; top: 24px; left: 24px; z-index: 4; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 10px; width: 200px; height: min-content; }
.project-back-wrap { position: relative; flex-shrink: 0; }
.back { display: flex; position: relative; flex-direction: column; justify-content: center; align-items: flex-end; align-content: flex-end; gap: 10px; width: min-content; height: min-content; }
.back--ijnpf { cursor: pointer; }
.back--14mah { cursor: pointer; }
.back-social-button { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 6px; width: min-content; height: min-content; padding: 9px 15px; overflow: hidden; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); background-color: rgba(255, 255, 255, 0.3); border-radius: 50px; }
.back-social-button::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; pointer-events: none; }
.back-social-button-div { position: relative; flex-shrink: 0; width: 24px; aspect-ratio: 1 / 1; overflow: hidden; -webkit-mask-image: url("/assets/images/edS1G8mejP0cAj3L69ztwHVJHWQ.avif"); -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; background-color: rgb(255, 255, 255); mask-image: url("/assets/images/edS1G8mejP0cAj3L69ztwHVJHWQ.avif"); mask-mode: alpha; mask-position: 50% 50%; mask-repeat: no-repeat; mask-size: cover; transform: rotate(180deg); }
.back-social-button-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.back-social-button-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 21.6px; white-space: pre; }
.project-right { display: flex; position: fixed; top: 24px; right: 24px; z-index: 4; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 24px; width: min-content; height: min-content; }
.project-socials-top { display: flex; position: relative; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-end; align-content: flex-end; gap: 12px; width: 181px; height: min-content; cursor: auto; }
.project-back-wrap-2 { position: relative; flex-shrink: 0; }
.back-social-button-div3 { position: relative; flex-shrink: 0; width: 24px; aspect-ratio: 1 / 1; overflow: hidden; -webkit-mask-image: url("/assets/images/edS1G8mejP0cAj3L69ztwHVJHWQ.avif"); -webkit-mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; background-color: rgb(255, 255, 255); mask-image: url("/assets/images/edS1G8mejP0cAj3L69ztwHVJHWQ.avif"); mask-mode: alpha; mask-position: 50% 50%; mask-repeat: no-repeat; mask-size: cover; }
.project-contents-wrap { position: relative; z-index: 1; flex-shrink: 0; }
.contents { display: flex; position: relative; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 12px; width: min-content; height: min-content; cursor: auto; }
.contents::after { content: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 24px; pointer-events: none; }
.contents-nav { display: flex; position: relative; flex-shrink: 0; align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 24px; height: min-content; }
.contents-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.contents-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.95); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 21.6px; white-space: pre; }
.contents-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 10px; width: 100%; height: min-content; }
.contents-contents-link-wrap { position: relative; flex-shrink: 0; }
.contents-link { display: flex; position: relative; justify-content: center; align-items: center; align-content: center; gap: 10px; width: min-content; height: min-content; overflow: hidden; cursor: pointer; }
.contents-link-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.contents-link-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.7); font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; line-height: 22.5px; white-space: pre; }
.contents-contents-link-wrap-2 { position: relative; flex-shrink: 0; }
.project-div { position: absolute; bottom: 0px; left: 50%; z-index: 1; flex-shrink: 0; opacity: 0; transform: translate(-50%); }
.body-svg { display: block; }
.project-divider { position: relative; z-index: 1; flex-shrink: 0; width: 90%; height: 2px; overflow: hidden; -webkit-mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); background-color: rgba(209, 209, 209, 0.6); mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.project-beforeafter { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; overflow: hidden; border-radius: 24px; }
.project-beforeafter-div { position: relative; flex: 1 0 0px; width: 1px; aspect-ratio: 1.77778 / 1; }
.project-beforeafter-div2 { position: relative; width: 100%; height: 100%; overflow: hidden; }
.project-beforeafter-div3 { position: absolute; }
.project-beforeafter-div3--jurwa { top: 0px; left: 0px; width: 100%; height: 100%; clip-path: inset(0px 50% 0px 0px); }
.project-beforeafter-div3--1mmbk { top: 0px; right: 0px; width: 100%; height: 100%; clip-path: inset(0px 0px 0px 50%); }
.project-beforeafter-div3--1xnxx { top: 0px; left: 50%; z-index: 1; width: 2px; height: 100%; background-color: rgba(255, 255, 255, 0.5); pointer-events: none; transform: translateX(-50%); }
.project-beforeafter-div3--1avz2 { top: 50%; left: 50%; width: 100%; height: 130px; transform: translate(-50%, -50%); }
.project-beforeafter-img { display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
.project-beforeafter-div4 { position: absolute; top: 50%; left: 50%; width: 130px; height: 130px; background-image: url("/assets/images/JSTtLZyNWQ2foNRbBen17AbrDg.avif"); background-position: 50% 50%; background-size: cover; cursor: pointer; transform: translate(-50%, -50%); }
.project-video { position: relative; flex-shrink: 0; width: 100%; aspect-ratio: 1.77778 / 1; }
.project-video-video { display: block; width: 100%; height: 100%; border-radius: 24px; object-fit: cover; }
.quest { display: flex; position: relative; flex-direction: column; justify-content: flex-start; align-items: center; align-content: center; gap: 192px; height: min-content; min-height: 100vh; padding: 100px 24px; background-color: rgb(13, 13, 13); }
.quest-form { display: flex; position: relative; z-index: 3; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 60px; width: min-content; height: min-content; }
.quest-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 6px; width: min-content; height: min-content; }
.quest-title { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: min-content; height: min-content; padding-right: 6px; padding-left: 6px; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.quest-title-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.quest-title-2-h3 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 48px; letter-spacing: -0.96px; line-height: 57.6px; overflow-wrap: normal; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space: pre; word-break: normal; }
.quest-div2 { display: flex; position: relative; flex-shrink: 0; align-self: stretch; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; height: min-content; padding-right: 6px; padding-left: 6px; }
.quest-title-3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.quest-title-3-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; letter-spacing: -0.17px; line-height: 27.55px; overflow-wrap: break-word; text-align: left; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.quest-questions { display: flex; position: relative; flex-shrink: 0; align-self: stretch; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 30px; height: min-content; }
.quest-question-wrap { position: relative; flex-shrink: 0; width: 100%; }
.question { display: flex; position: relative; flex-direction: column; justify-content: center; align-items: center; align-content: center; width: 100%; height: min-content; }
.question--pcnyv { gap: 18px; }
.question--c3o4u { gap: 18px; }
.question-question { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 6px; width: 100%; height: min-content; opacity: 0.9; }
.question-title { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; }
.question-title--p4ox3 { padding-right: 6px; padding-left: 6px; -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%); mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%); }
.question-title--1fg9e { padding-right: 6px; padding-left: 6px; -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%); mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%); }
.question-title-2 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.question-title-2-h5 { -webkit-font-smoothing: antialiased; color: rgb(230, 230, 230); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; overflow-wrap: break-word; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.question-description { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; }
.question-description--k5fhw { padding-right: 6px; padding-left: 6px; }
.question-description--bjjvb { padding-right: 6px; padding-left: 6px; }
.question-title-3 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.question-title-3-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.16px; line-height: 24px; overflow-wrap: break-word; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.question-label { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 10px; width: 100%; height: min-content; cursor: default; }
.question-label--k5fhw { padding-right: 6px; padding-left: 6px; }
.question-label--bjjvb { padding-right: 6px; padding-left: 6px; }
.question-div { display: flex; position: relative; flex-shrink: 0; align-items: center; width: 100%; overflow: hidden; }
.question-div::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-bottom-color: rgba(255, 255, 255, 0.5); border-bottom-style: solid; border-bottom-width: 1px; pointer-events: none; }
.question-div--nj3yh { min-height: 72px; }
.question-div--17oo3 { min-height: 72px; }
.question-textarea { display: flex; flex: 1 1 0%; width: 100%; height: auto; min-width: 0px; max-height: none; margin: 0px; padding: 12px; overflow-x: hidden; overflow-y: auto; -webkit-backdrop-filter: none; -webkit-box-orient: horizontal; -webkit-font-smoothing: antialiased; -webkit-line-clamp: none; -webkit-mask-image: none; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; -webkit-text-stroke-width: 0px; accent-color: auto; appearance: auto; backdrop-filter: none; backface-visibility: visible; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(0, 0, 0); border-radius: 0px; box-shadow: none; clip-path: none; color: rgb(242, 242, 242); cursor: text; direction: ltr; filter: none; font-family: "SF Pro Display Regular"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: 100%; font-style: normal; font-synthesis-weight: auto; font-variant-numeric: normal; font-variation-settings: normal; font-weight: 400; hyphens: manual; image-rendering: auto; isolation: auto; letter-spacing: normal; line-height: 19.2px; list-style-position: outside; list-style-type: disc; mask-composite: add; mask-image: none; mask-mode: match-source; mask-position: 0% 0%; mask-repeat: repeat; mask-size: auto; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; opacity: 1; outline: 3px none rgb(0, 0, 0); outline-offset: 0px; overflow-wrap: break-word; resize: vertical; tab-size: 8; text-align: start; text-decoration-color: rgb(0, 0, 0); text-decoration-line: none; text-decoration-style: solid; text-decoration-thickness: auto; text-indent: 0px; text-overflow: ellipsis; text-rendering: auto; text-shadow: none; text-transform: none; text-underline-offset: auto; text-wrap-mode: wrap; text-wrap-style: auto; touch-action: auto; transform-style: flat; vertical-align: baseline; white-space-collapse: break-spaces; word-break: normal; word-spacing: 0px; }
.question-textarea::placeholder { -webkit-text-fill-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4); font-style: normal; font-weight: 400; opacity: 1; }
.question-textarea--nj3yh { min-height: 72px; }
.question-textarea--17oo3 { min-height: 72px; }
.quest-questions-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 18px; width: 100%; height: min-content; }
.quest-question { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 6px; width: 100%; height: min-content; opacity: 0.9; }
.quest-title-4 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.quest-title-5 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.quest-title-5-h5 { -webkit-font-smoothing: antialiased; color: rgb(230, 230, 230); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; overflow-wrap: break-word; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.quest-questions-label { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; cursor: default; }
.quest-questions-div2 { position: relative; flex-shrink: 0; width: 100%; padding-right: 12px; overflow: hidden; -webkit-font-smoothing: antialiased; font-family: sans-serif; font-size: 12px; }
.quest-questions-div2::before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; width: 16px; padding: 12px 12px 12px 10px; -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"><path d=\"M 3.5 6 L 8 10.5 L 12.5 6\" fill=\"transparent\" stroke-width=\"1.5\" stroke=\"rgb(153, 153, 153)\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>"); -webkit-mask-position: 10px 50%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 16px auto; background-color: rgba(255, 255, 255, 0.4); background-position: 10px 50%; background-repeat: no-repeat; background-size: 16px auto; mask-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"><path d=\"M 3.5 6 L 8 10.5 L 12.5 6\" fill=\"transparent\" stroke-width=\"1.5\" stroke=\"rgb(153, 153, 153)\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>"); mask-position: 10px 50%; mask-repeat: no-repeat; mask-size: 16px auto; pointer-events: none; }
.quest-questions-div2::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-bottom-color: rgba(255, 255, 255, 0.4); border-bottom-style: solid; border-bottom-width: 1px; pointer-events: none; }
.quest-questions-select { display: inline-block; width: 100%; height: auto; margin: 0px; padding: 12px; overflow: hidden; -webkit-backdrop-filter: none; -webkit-box-orient: horizontal; -webkit-font-smoothing: antialiased; -webkit-line-clamp: none; -webkit-mask-image: none; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; -webkit-text-stroke-width: 0px; accent-color: auto; appearance: none; backdrop-filter: none; backface-visibility: visible; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(0, 0, 0); border-radius: 0px; box-shadow: none; clip-path: none; color: rgba(255, 255, 255, 0.4); direction: ltr; filter: none; font-family: "SF Pro Display Regular"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 16px; font-stretch: 100%; font-style: normal; font-synthesis-weight: auto; font-variant-numeric: normal; font-variation-settings: normal; font-weight: 400; hyphens: manual; image-rendering: auto; isolation: auto; letter-spacing: normal; line-height: 19.2px; list-style-position: outside; list-style-type: disc; mask-composite: add; mask-image: none; mask-mode: match-source; mask-position: 0% 0%; mask-repeat: repeat; mask-size: auto; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; opacity: 1; outline: 3px none rgb(0, 0, 0); outline-offset: 0px; overflow-wrap: normal; resize: none; tab-size: 8; text-align: start; text-decoration-color: rgb(0, 0, 0); text-decoration-line: none; text-decoration-style: solid; text-decoration-thickness: auto; text-indent: 0px; text-overflow: ellipsis; text-rendering: auto; text-shadow: none; text-transform: none; text-underline-offset: auto; text-wrap-style: auto; touch-action: auto; transform-style: flat; vertical-align: baseline; white-space: nowrap; word-break: normal; word-spacing: 0px; }
.quest-question-wrap-2 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-3 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-4 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-5 { position: relative; flex-shrink: 0; width: 100%; }
.quest-questions-div3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 18px; width: 100%; height: min-content; }
.quest-question-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 6px; width: 100%; height: min-content; opacity: 0.9; }
.quest-title-6 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.quest-title-7 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.quest-title-7-h5 { -webkit-font-smoothing: antialiased; color: rgb(230, 230, 230); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; overflow-wrap: break-word; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.quest-description { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; overflow: hidden; }
.quest-title-8 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.quest-title-8-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.16px; line-height: 24px; overflow-wrap: normal; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space: pre; word-break: normal; }
.quest-questions-label2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; cursor: default; }
.quest-question-wrap-6 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-7 { position: relative; flex-shrink: 0; width: 100%; }
.quest-submit-wrap { position: relative; flex-shrink: 0; align-self: stretch; }
.submit { display: flex; position: relative; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; margin: 0px; padding: 10px 40px; overflow: hidden; -webkit-backdrop-filter: none; -webkit-box-orient: horizontal; -webkit-font-smoothing: antialiased; -webkit-line-clamp: none; -webkit-mask-image: none; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; -webkit-text-stroke-width: 0px; accent-color: auto; appearance: auto; backdrop-filter: none; backface-visibility: visible; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(0, 0, 0); border-radius: 0px; box-shadow: none; clip-path: none; color: rgb(0, 0, 0); direction: ltr; filter: none; font-family: sans-serif; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 12px; font-stretch: 100%; font-style: normal; font-synthesis-weight: auto; font-variant-numeric: normal; font-variation-settings: normal; font-weight: 400; hyphens: manual; image-rendering: auto; isolation: auto; letter-spacing: normal; line-height: normal; list-style-position: outside; list-style-type: disc; mask-composite: add; mask-image: none; mask-mode: match-source; mask-position: 0% 0%; mask-repeat: repeat; mask-size: auto; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; opacity: 0.5; outline: 3px none rgb(0, 0, 0); outline-offset: 0px; overflow-wrap: normal; resize: none; tab-size: 8; text-align: center; text-decoration-color: rgb(0, 0, 0); text-decoration-line: none; text-decoration-style: solid; text-decoration-thickness: auto; text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-transform: none; text-underline-offset: auto; text-wrap-style: auto; touch-action: auto; transform-style: flat; vertical-align: baseline; white-space: normal; word-break: normal; word-spacing: 0px; }
.submit-div { display: flex; position: relative; z-index: 3; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.submit-p { color: rgb(242, 242, 242); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; letter-spacing: -0.17px; line-height: 27.55px; text-align: left; white-space: pre; }
.submit-div2 { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; }
.submit-fg { position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; -webkit-mask-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); mask-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); }
.submit-fg--9josf { background-color: rgb(255, 255, 255); }
.submit-fg--7utmy { background-color: rgb(86, 46, 1); }
.submit-fg--16fkr { background-color: rgb(168, 141, 205); }
.submit-bg { position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; }
.submit-bg--9josf { background-color: rgb(255, 255, 255); }
.submit-bg--8t3iv { background-color: rgb(161, 115, 72); }
.submit-bg--1ocw2 { background-color: rgb(106, 78, 148); }
.quest-input { display: block; position: absolute; margin: 0px; padding: 1px 2px; -webkit-backdrop-filter: none; -webkit-box-orient: horizontal; -webkit-font-smoothing: antialiased; -webkit-line-clamp: none; -webkit-mask-image: none; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; -webkit-text-stroke-width: 0px; accent-color: auto; appearance: auto; backdrop-filter: none; backface-visibility: visible; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 2px inset rgb(118, 118, 118); border-radius: 0px; box-shadow: none; clip-path: none; color: rgb(0, 0, 0); cursor: text; direction: ltr; filter: none; font-family: sans-serif; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 12px; font-stretch: 100%; font-style: normal; font-synthesis-weight: auto; font-variant-numeric: normal; font-variation-settings: normal; font-weight: 400; hyphens: manual; image-rendering: auto; isolation: auto; letter-spacing: normal; line-height: normal; list-style-position: outside; list-style-type: disc; mask-composite: add; mask-image: none; mask-mode: match-source; mask-position: 0% 0%; mask-repeat: repeat; mask-size: auto; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; opacity: 1; outline: 3px none rgb(0, 0, 0); outline-offset: 0px; overflow-wrap: normal; resize: none; tab-size: 8; text-align: start; text-decoration-color: rgb(0, 0, 0); text-decoration-line: none; text-decoration-style: solid; text-decoration-thickness: auto; text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-transform: none; text-underline-offset: auto; text-wrap-style: auto; touch-action: auto; transform: scale(0); transform-style: flat; vertical-align: baseline; white-space: normal; word-break: normal; word-spacing: 0px; }
.quest-input::placeholder { -webkit-text-fill-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-style: normal; font-weight: 400; opacity: 1; }
.quest-background { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; }
.quest-main { display: flex; position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; mix-blend-mode: overlay; }
.quest-main-color { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-color: rgb(207, 158, 0); }
.quest-radial-overlay { display: flex; position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-image: radial-gradient(250% 150% at 50% 9.7%, rgba(13, 13, 13, 0) 0%, rgba(5, 5, 5, 0.9) 70%, rgb(0, 0, 0) 100%); }
.quest-accent { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; }
.quest-accent-color { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-color: rgb(247, 255, 0); opacity: 0.3; }
.quest-radial-overlay-2 { display: flex; position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-image: radial-gradient(250% 150% at 50% 9.6%, rgba(13, 13, 13, 0) 0%, rgba(5, 5, 5, 0.9) 70%, rgb(0, 0, 0) 100%); }
.quest-noise { position: fixed; inset: 0px; z-index: 2; flex-shrink: 0; opacity: 0.1; }
.quest-noise-div { position: absolute; inset: 0px; background-image: url("/assets/images/6mcf62RlDfRfU61Yg5vb2pefpi4.avif"); background-size: 182px auto; }
.quest-div3 { position: absolute; bottom: 0px; left: 50%; z-index: 1; flex-shrink: 0; opacity: 0; transform: translate(-50%); }
.quest-2 { display: flex; position: relative; flex-direction: column; justify-content: flex-start; align-items: center; align-content: center; gap: 192px; height: min-content; min-height: 100vh; padding: 100px 24px; background-color: rgb(13, 13, 13); }
.quest-2-form { display: flex; position: relative; z-index: 3; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 60px; width: 100%; height: min-content; max-width: 800px; }
.quest-2-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 6px; width: min-content; height: min-content; }
.quest-title-9 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: min-content; height: min-content; padding-right: 6px; padding-left: 6px; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.quest-title-10 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.quest-title-10-h3 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 48px; letter-spacing: -0.96px; line-height: 57.6px; overflow-wrap: normal; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space: pre; word-break: normal; }
.quest-2-div2 { display: flex; position: relative; flex-shrink: 0; align-self: stretch; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; height: min-content; padding-right: 6px; padding-left: 6px; }
.quest-title-11 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.quest-title-11-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; letter-spacing: -0.17px; line-height: 27.55px; overflow-wrap: break-word; text-align: left; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.quest-questions-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 30px; width: 100%; height: min-content; }
.quest-question-wrap-8 { position: relative; flex-shrink: 0; width: 100%; }
.quest-questions-2-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 18px; width: 100%; height: min-content; }
.quest-question-3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 6px; width: 100%; height: min-content; opacity: 0.9; }
.quest-title-12 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.quest-title-13 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.quest-title-13-h5 { -webkit-font-smoothing: antialiased; color: rgb(230, 230, 230); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; overflow-wrap: break-word; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.quest-questions-2-label { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; cursor: default; }
.quest-question-wrap-9 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-10 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-11 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-12 { position: relative; flex-shrink: 0; width: 100%; }
.quest-questions-2-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 18px; width: 100%; height: min-content; }
.quest-question-4 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 6px; width: 100%; height: min-content; opacity: 0.9; }
.quest-title-14 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.quest-title-15 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.quest-title-15-h5 { -webkit-font-smoothing: antialiased; color: rgb(230, 230, 230); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; overflow-wrap: break-word; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.quest-description-2 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; overflow: hidden; }
.quest-title-16 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.quest-title-16-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.16px; line-height: 24px; overflow-wrap: normal; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space: pre; word-break: normal; }
.quest-questions-2-label2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; cursor: default; }
.quest-question-wrap-13 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-14 { position: relative; flex-shrink: 0; width: 100%; }
.quest-submit-wrap-2 { position: relative; flex-shrink: 0; width: 100%; }
.quest-2-input { display: block; position: absolute; margin: 0px; padding: 1px 2px; -webkit-backdrop-filter: none; -webkit-box-orient: horizontal; -webkit-font-smoothing: antialiased; -webkit-line-clamp: none; -webkit-mask-image: none; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; -webkit-text-stroke-width: 0px; accent-color: auto; appearance: auto; backdrop-filter: none; backface-visibility: visible; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 2px inset rgb(118, 118, 118); border-radius: 0px; box-shadow: none; clip-path: none; color: rgb(0, 0, 0); cursor: text; direction: ltr; filter: none; font-family: sans-serif; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 12px; font-stretch: 100%; font-style: normal; font-synthesis-weight: auto; font-variant-numeric: normal; font-variation-settings: normal; font-weight: 400; hyphens: manual; image-rendering: auto; isolation: auto; letter-spacing: normal; line-height: normal; list-style-position: outside; list-style-type: disc; mask-composite: add; mask-image: none; mask-mode: match-source; mask-position: 0% 0%; mask-repeat: repeat; mask-size: auto; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; opacity: 1; outline: 3px none rgb(0, 0, 0); outline-offset: 0px; overflow-wrap: normal; resize: none; tab-size: 8; text-align: start; text-decoration-color: rgb(0, 0, 0); text-decoration-line: none; text-decoration-style: solid; text-decoration-thickness: auto; text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-transform: none; text-underline-offset: auto; text-wrap-style: auto; touch-action: auto; transform: scale(0); transform-style: flat; vertical-align: baseline; white-space: normal; word-break: normal; word-spacing: 0px; }
.quest-2-input::placeholder { -webkit-text-fill-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-style: normal; font-weight: 400; opacity: 1; }
.quest-background-2 { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; }
.quest-main-2 { display: flex; position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; mix-blend-mode: overlay; }
.quest-main-color-2 { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-color: rgb(115, 84, 52); }
.quest-radial-overlay-3 { display: flex; position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-image: radial-gradient(250% 150% at 50% 9.7%, rgba(13, 13, 13, 0) 0%, rgba(5, 5, 5, 0.9) 70%, rgb(0, 0, 0) 100%); }
.quest-accent-2 { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; }
.quest-accent-color-2 { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-color: rgb(171, 126, 63); opacity: 0.3; }
.quest-radial-overlay-4 { display: flex; position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-image: radial-gradient(250% 150% at 50% 9.6%, rgba(13, 13, 13, 0) 0%, rgba(5, 5, 5, 0.9) 70%, rgb(0, 0, 0) 100%); }
.quest-noise-2 { position: fixed; inset: 0px; z-index: 2; flex-shrink: 0; opacity: 0.1; }
.quest-noise-2-div { position: absolute; inset: 0px; background-image: url("/assets/images/6mcf62RlDfRfU61Yg5vb2pefpi4.avif"); background-size: 182px auto; }
.quest-2-div3 { position: absolute; bottom: 0px; left: 50%; z-index: 1; flex-shrink: 0; opacity: 0; transform: translate(-50%); }
.quest-3 { display: flex; position: relative; flex-direction: column; justify-content: flex-start; align-items: center; align-content: center; gap: 192px; height: min-content; min-height: 100vh; padding: 100px 24px; overflow: clip; background-color: rgb(13, 13, 13); }
.quest-3-form { display: flex; position: relative; z-index: 3; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 60px; width: min-content; height: min-content; }
.quest-3-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 6px; width: min-content; height: min-content; }
.quest-title-17 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: min-content; height: min-content; padding-right: 6px; padding-left: 6px; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.quest-title-18 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.quest-title-18-h3 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 48px; letter-spacing: -0.96px; line-height: 57.6px; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space: pre; }
.quest-3-div2 { display: flex; position: relative; flex-shrink: 0; align-self: stretch; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; height: min-content; padding-right: 6px; padding-left: 6px; }
.quest-title-19 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.quest-title-19-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; letter-spacing: -0.17px; line-height: 27.55px; overflow-wrap: break-word; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.quest-questions-3 { display: flex; position: relative; flex-shrink: 0; align-self: stretch; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 30px; height: min-content; }
.quest-question-wrap-15 { position: relative; flex-shrink: 0; width: 100%; }
.quest-questions-3-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 18px; width: 100%; height: min-content; }
.quest-question-5 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 6px; width: 100%; height: min-content; opacity: 0.9; }
.quest-title-20 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.quest-title-21 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.quest-title-21-h5 { -webkit-font-smoothing: antialiased; color: rgb(230, 230, 230); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; overflow-wrap: break-word; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.quest-questions-3-label { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; cursor: default; }
.quest-question-wrap-16 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-17 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-18 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-19 { position: relative; flex-shrink: 0; width: 100%; }
.quest-questions-3-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 18px; width: 100%; height: min-content; }
.quest-question-6 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 6px; width: 100%; height: min-content; opacity: 0.9; }
.quest-title-22 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); }
.quest-title-23 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.quest-title-23-h5 { -webkit-font-smoothing: antialiased; color: rgb(230, 230, 230); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; overflow-wrap: break-word; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space-collapse: preserve; word-break: break-word; }
.quest-description-3 { display: flex; position: relative; flex-shrink: 0; justify-content: flex-start; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; overflow: hidden; }
.quest-title-24 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; }
.quest-title-24-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.16px; line-height: 24px; text-shadow: rgb(51, 51, 51) 0px 0px 10px; white-space: pre; }
.quest-questions-3-label2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 10px; width: 100%; height: min-content; padding-right: 6px; padding-left: 6px; cursor: default; }
.quest-question-wrap-20 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-21 { position: relative; flex-shrink: 0; width: 100%; }
.quest-question-wrap-22 { position: relative; flex-shrink: 0; width: 100%; }
.quest-submit-wrap-3 { position: relative; flex-shrink: 0; align-self: stretch; }
.quest-3-input { display: block; position: absolute; margin: 0px; padding: 1px 2px; -webkit-backdrop-filter: none; -webkit-box-orient: horizontal; -webkit-font-smoothing: antialiased; -webkit-line-clamp: none; -webkit-mask-image: none; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; -webkit-text-stroke-width: 0px; accent-color: auto; appearance: auto; backdrop-filter: none; backface-visibility: visible; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 2px inset rgb(118, 118, 118); border-radius: 0px; box-shadow: none; clip-path: none; color: rgb(0, 0, 0); cursor: text; direction: ltr; filter: none; font-family: sans-serif; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 12px; font-stretch: 100%; font-style: normal; font-synthesis-weight: auto; font-variant-numeric: normal; font-variation-settings: normal; font-weight: 400; hyphens: manual; image-rendering: auto; isolation: auto; letter-spacing: normal; line-height: normal; list-style-position: outside; list-style-type: disc; mask-composite: add; mask-image: none; mask-mode: match-source; mask-position: 0% 0%; mask-repeat: repeat; mask-size: auto; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; opacity: 1; outline: 3px none rgb(0, 0, 0); outline-offset: 0px; overflow-wrap: normal; resize: none; tab-size: 8; text-align: start; text-decoration-color: rgb(0, 0, 0); text-decoration-line: none; text-decoration-style: solid; text-decoration-thickness: auto; text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-transform: none; text-underline-offset: auto; text-wrap-style: auto; touch-action: auto; transform: scale(0); transform-style: flat; vertical-align: baseline; white-space: normal; word-break: normal; word-spacing: 0px; }
.quest-3-input::placeholder { -webkit-text-fill-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-style: normal; font-weight: 400; opacity: 1; }
.quest-background-3 { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; }
.quest-main-3 { display: flex; position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; mix-blend-mode: overlay; }
.quest-main-color-3 { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-color: rgb(106, 78, 148); }
.quest-radial-overlay-5 { display: flex; position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-image: radial-gradient(250% 150% at 50% 9.7%, rgba(13, 13, 13, 0) 0%, rgba(5, 5, 5, 0.9) 70%, rgb(0, 0, 0) 100%); }
.quest-accent-3 { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; }
.quest-accent-color-3 { display: flex; position: absolute; inset: 0px; z-index: 1; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-color: rgb(168, 141, 205); opacity: 0.3; }
.quest-radial-overlay-6 { display: flex; position: absolute; inset: 0px; z-index: 2; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; overflow: hidden; background-image: radial-gradient(250% 150% at 50% 9.6%, rgba(13, 13, 13, 0) 0%, rgba(5, 5, 5, 0.9) 70%, rgb(0, 0, 0) 100%); }
.quest-noise-3 { position: fixed; inset: 0px; z-index: 2; flex-shrink: 0; opacity: 0.1; }
.quest-noise-3-div { position: absolute; inset: 0px; background-image: url("/assets/images/6mcf62RlDfRfU61Yg5vb2pefpi4.avif"); background-size: 182px auto; }
.quest-3-div3 { position: absolute; bottom: 0px; left: 50%; z-index: 1; flex-shrink: 0; opacity: 0; transform: translate(-50%); }
.legal { display: flex; position: relative; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; height: 1080px; min-height: 100vh; padding-right: 50px; padding-left: 50px; overflow: clip; background-color: rgb(13, 13, 13); }
.legal-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.legal-h3 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 48px; letter-spacing: -0.96px; line-height: 57.6px; overflow-wrap: break-word; text-align: center; white-space-collapse: preserve; word-break: break-word; }
.legal-2 { display: flex; position: relative; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 10px; height: 1080px; min-height: 100vh; padding-right: 50px; padding-left: 50px; overflow: clip; background-color: rgb(13, 13, 13); }
.legal-2-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.legal-2-h3 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 48px; letter-spacing: -0.96px; line-height: 57.6px; overflow-wrap: break-word; text-align: center; white-space-collapse: preserve; word-break: break-word; }
.styles { display: flex; position: relative; flex-direction: column; justify-content: flex-start; align-items: center; align-content: center; gap: 16px; height: min-content; min-height: 100vh; overflow: hidden; background-color: rgb(8, 8, 8); }
.styles-div { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 40px; width: 100%; height: min-content; padding: 24px; overflow: hidden; background-color: rgb(0, 0, 0); }
.styles-div2 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; max-width: 1200px; padding-bottom: 24px; overflow: hidden; }
.styles-div2::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-bottom-color: rgb(26, 26, 26); border-bottom-style: solid; border-bottom-width: 1px; pointer-events: none; }
.styles-type-specimen-regular { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.styles-type-specimen-regular-h3 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 48px; letter-spacing: -0.96px; line-height: 57.6px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-div3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 24px; width: 100%; height: min-content; max-width: 1200px; overflow: hidden; }
.styles-type-specimen-regular-2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-2-h1 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 80px; letter-spacing: -1.44px; line-height: 96px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-3 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-3-h2 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 66px; letter-spacing: -1.2px; line-height: 79.2px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-4 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-4-h3 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 48px; letter-spacing: -0.96px; line-height: 57.6px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-5 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-5-h4 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 36px; letter-spacing: -0.72px; line-height: 43.2px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-6 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-6-h5 { -webkit-font-smoothing: antialiased; color: rgb(230, 230, 230); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-7 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-7-h6 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; line-height: 28.8px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-8 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-8-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; letter-spacing: -0.17px; line-height: 27.55px; overflow-wrap: break-word; text-align: left; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-9 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-9-p { -webkit-font-smoothing: antialiased; color: rgb(128, 128, 128); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; letter-spacing: -0.18px; line-height: 27px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-10 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-10-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.16px; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-11 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-11-p { -webkit-font-smoothing: antialiased; color: rgb(128, 128, 128); font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 21px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-div4 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 40px; width: 100%; height: min-content; padding: 24px; background-color: rgb(0, 0, 0); }
.styles-div5 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; max-width: 1200px; padding-bottom: 24px; overflow: hidden; }
.styles-div5::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-bottom-color: rgb(26, 26, 26); border-bottom-style: solid; border-bottom-width: 1px; pointer-events: none; }
.styles-type-specimen-regular-12 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.styles-type-specimen-regular-12-h3 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 48px; letter-spacing: -0.96px; line-height: 57.6px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-div6 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 56px; width: 100%; height: min-content; max-width: 1200px; overflow: hidden; }
.styles-div7 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 16px; width: 100%; height: min-content; }
.styles-div8 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 4px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-13 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-13-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.7); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 20px; line-height: 30px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-14 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-14-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.16px; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-div9 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 0px; width: 100%; height: min-content; }
.styles-system-color-swatch-copy { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(230, 230, 230); }
.styles-system-color-swatch-copy-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-15 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-15-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-2 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-2-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(204, 204, 204); }
.styles-system-color-swatch-copy-2-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-16 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-16-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-3 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-3-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(179, 179, 179); }
.styles-system-color-swatch-copy-3-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-17 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-17-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-4 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-4-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(153, 153, 153); }
.styles-system-color-swatch-copy-4-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-18 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-18-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-5 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-5-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(128, 128, 128); }
.styles-system-color-swatch-copy-5-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-19 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-19-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-6 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-6-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(102, 102, 102); }
.styles-system-color-swatch-copy-6-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-20 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-20-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-7 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-7-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(77, 77, 77); }
.styles-system-color-swatch-copy-7-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-21 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-21-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-8 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-8-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(51, 51, 51); }
.styles-system-color-swatch-copy-8-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-22 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-22-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-9 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-9-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(26, 26, 26); }
.styles-system-color-swatch-copy-9-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-23 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-23-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-10 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-10-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(13, 13, 13); }
.styles-system-color-swatch-copy-10-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-24 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-24-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-11 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-11-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(8, 8, 8); }
.styles-system-color-swatch-copy-11-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-25 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-25-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-12 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-12-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(0, 0, 0); }
.styles-system-color-swatch-copy-12-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-26 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-26-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-div10 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 16px; width: 100%; height: min-content; }
.styles-div11 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 4px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-27 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-27-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.7); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 20px; line-height: 30px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-28 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-28-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.16px; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-div12 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 0px; width: 100%; height: min-content; }
.styles-system-color-swatch-copy-13 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-13-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(237, 157, 130); }
.styles-system-color-swatch-copy-13-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-29 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-29-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-14 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-14-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(237, 134, 100); }
.styles-system-color-swatch-copy-14-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-30 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-30-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-15 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-15-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(243, 114, 63); }
.styles-system-color-swatch-copy-15-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-31 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-31-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-16 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-16-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(243, 100, 22); }
.styles-system-color-swatch-copy-16-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-32 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-32-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-17 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-17-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(234, 101, 6); }
.styles-system-color-swatch-copy-17-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-33 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-33-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-18 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-18-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(195, 90, 4); }
.styles-system-color-swatch-copy-18-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-34 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-34-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-19 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-19-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(141, 74, 2); }
.styles-system-color-swatch-copy-19-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-35 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-35-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-20 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-20-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(86, 46, 1); }
.styles-system-color-swatch-copy-20-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-36 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-36-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-21 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-21-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(51, 29, 0); }
.styles-system-color-swatch-copy-21-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-37 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-37-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-22 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-22-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(36, 20, 0); }
.styles-system-color-swatch-copy-22-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-38 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-38-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-system-color-swatch-copy-23 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 1px; height: min-content; }
.styles-system-color-swatch-copy-23-div { position: relative; flex-shrink: 0; width: 100%; height: 55px; overflow: hidden; background-color: rgb(26, 15, 0); }
.styles-system-color-swatch-copy-23-div2 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 0px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-39 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-39-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.8); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-div13 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 40px; width: 100%; height: min-content; padding: 24px; background-color: rgb(0, 0, 0); }
.styles-div14 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; max-width: 1200px; padding-bottom: 24px; overflow: hidden; }
.styles-div14::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-bottom-color: rgb(26, 26, 26); border-bottom-style: solid; border-bottom-width: 1px; pointer-events: none; }
.styles-type-specimen-regular-40 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.styles-type-specimen-regular-40-h3 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 48px; letter-spacing: -0.96px; line-height: 57.6px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-div15 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 56px; width: 100%; height: min-content; max-width: 1200px; overflow: hidden; }
.styles-div16 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 16px; width: 100%; height: min-content; }
.styles-div17 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 4px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-41 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-41-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.7); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 20px; line-height: 30px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-42 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-42-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.16px; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-div18 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 100%; height: min-content; overflow: hidden; }
.styles-div19 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 24px; width: 1px; padding: 24px; overflow: hidden; background-color: rgb(13, 13, 13); }
.styles-div20 { position: relative; flex-shrink: 0; width: 40px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(0, 0, 0); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.08) 0px 0.301094px 0.782844px -0.833333px, rgba(0, 0, 0, 0.08) 0px 1.14427px 2.97509px -1.66667px, rgba(0, 0, 0, 0.08) 0px 5px 13px -2.5px; opacity: 0.193175; transform: perspective(1200px) translateY(40.3413px); }
.styles-div20::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(13, 13, 13); border-radius: 8px; pointer-events: none; }
.styles-type-specimen-regular-43 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-43-p { -webkit-font-smoothing: antialiased; color: rgb(102, 102, 102); font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 500; line-height: 24px; overflow-wrap: break-word; text-align: center; white-space-collapse: preserve; word-break: break-word; }
.styles-div21 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 24px; width: 1px; padding: 24px; overflow: hidden; background-color: rgb(13, 13, 13); }
.styles-div22 { position: relative; flex-shrink: 0; width: 40px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(0, 0, 0); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.08) 0px 0.301094px 0.782844px -0.833333px, rgba(0, 0, 0, 0.08) 0px 1.14427px 2.97509px -1.66667px, rgba(0, 0, 0, 0.08) 0px 5px 13px -2.5px; opacity: 0; transform: perspective(1200px) translateY(50px); }
.styles-div22::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(13, 13, 13); border-radius: 8px; pointer-events: none; }
.styles-type-specimen-regular-44 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-44-p { -webkit-font-smoothing: antialiased; color: rgb(102, 102, 102); font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 500; line-height: 24px; overflow-wrap: break-word; text-align: center; white-space-collapse: preserve; word-break: break-word; }
.styles-div23 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 24px; width: 1px; padding: 24px; overflow: hidden; background-color: rgb(13, 13, 13); }
.styles-div24 { position: relative; flex-shrink: 0; width: 40px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(0, 0, 0); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.08) 0px 0.301094px 0.782844px -0.833333px, rgba(0, 0, 0, 0.08) 0px 1.14427px 2.97509px -1.66667px, rgba(0, 0, 0, 0.08) 0px 5px 13px -2.5px; opacity: 0; transform: perspective(1200px) translateY(50px); }
.styles-div24::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(13, 13, 13); border-radius: 8px; pointer-events: none; }
.styles-type-specimen-regular-45 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-45-p { -webkit-font-smoothing: antialiased; color: rgb(102, 102, 102); font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 500; line-height: 24px; overflow-wrap: break-word; text-align: center; white-space-collapse: preserve; word-break: break-word; }
.styles-div25 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 16px; width: 100%; height: min-content; }
.styles-div26 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 4px; width: 100%; height: min-content; overflow: hidden; }
.styles-type-specimen-regular-46 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-46-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.7); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 20px; line-height: 30px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-type-specimen-regular-47 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-47-p { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.5); font-family: ".SFNSText", SFProText-Regular, SFUIText-Regular, ".SFUIText", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.16px; line-height: 24px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-div27 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 100%; height: min-content; overflow: hidden; }
.styles-div28 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 24px; width: 1px; padding: 24px; overflow: hidden; background-color: rgb(13, 13, 13); }
.styles-div29 { position: relative; flex-shrink: 0; width: 40px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(0, 0, 0); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.08) 0px 0.301094px 0.782844px -0.833333px, rgba(0, 0, 0, 0.08) 0px 1.14427px 2.97509px -1.66667px, rgba(0, 0, 0, 0.08) 0px 5px 13px -2.5px; transform: translateX(25.6336px); }
.styles-div29::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(13, 13, 13); border-radius: 8px; pointer-events: none; }
.styles-type-specimen-regular-48 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-48-p { -webkit-font-smoothing: antialiased; color: rgb(102, 102, 102); font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 500; line-height: 24px; overflow-wrap: break-word; text-align: center; white-space-collapse: preserve; word-break: break-word; }
.styles-div30 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 24px; width: 1px; padding: 24px; overflow: hidden; background-color: rgb(13, 13, 13); }
.styles-div31 { position: relative; flex-shrink: 0; width: 40px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(0, 0, 0); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.08) 0px 0.301094px 0.782844px -0.833333px, rgba(0, 0, 0, 0.08) 0px 1.14427px 2.97509px -1.66667px, rgba(0, 0, 0, 0.08) 0px 5px 13px -2.5px; transform: translateX(56.9819px); }
.styles-div31::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(13, 13, 13); border-radius: 8px; pointer-events: none; }
.styles-type-specimen-regular-49 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-49-p { -webkit-font-smoothing: antialiased; color: rgb(102, 102, 102); font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 500; line-height: 24px; overflow-wrap: break-word; text-align: center; white-space-collapse: preserve; word-break: break-word; }
.styles-div32 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 24px; width: 1px; padding: 24px; overflow: hidden; background-color: rgb(13, 13, 13); }
.styles-div33 { position: relative; flex-shrink: 0; width: 40px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(0, 0, 0); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.08) 0px 0.301094px 0.782844px -0.833333px, rgba(0, 0, 0, 0.08) 0px 1.14427px 2.97509px -1.66667px, rgba(0, 0, 0, 0.08) 0px 5px 13px -2.5px; transform: translateX(78.8889px); }
.styles-div33::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(13, 13, 13); border-radius: 8px; pointer-events: none; }
.styles-type-specimen-regular-50 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-50-p { -webkit-font-smoothing: antialiased; color: rgb(102, 102, 102); font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 500; line-height: 24px; overflow-wrap: break-word; text-align: center; white-space-collapse: preserve; word-break: break-word; }
.styles-div34 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 40px; width: 100%; height: min-content; padding: 24px; background-color: rgb(0, 0, 0); }
.styles-div35 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: center; align-content: center; gap: 10px; width: 100%; height: min-content; max-width: 1200px; padding-bottom: 24px; overflow: hidden; }
.styles-div35::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-bottom-color: rgb(26, 26, 26); border-bottom-style: solid; border-bottom-width: 1px; pointer-events: none; }
.styles-type-specimen-regular-51 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: flex-start; width: 1px; }
.styles-type-specimen-regular-51-h3 { -webkit-font-smoothing: antialiased; color: rgba(255, 255, 255, 0.9); font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 48px; letter-spacing: -0.96px; line-height: 57.6px; overflow-wrap: break-word; white-space-collapse: preserve; word-break: break-word; }
.styles-div36 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 56px; width: 100%; height: min-content; max-width: 1200px; overflow: hidden; }
.styles-div37 { display: flex; position: relative; flex-shrink: 0; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 8px; width: 100%; height: min-content; overflow: hidden; }
.styles-div38 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 24px; width: 1px; padding: 24px; overflow: hidden; background-color: rgb(13, 13, 13); }
.styles-div39 { position: relative; flex-shrink: 0; width: 86px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(0, 0, 0); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.14) 0px 0.301094px 1.50547px -1.5px, rgba(0, 0, 0, 0.114) 0px 1.14427px 5.72133px -3px, rgba(0, 0, 0, 0.016) 0px 5px 25px -4.5px; }
.styles-div39::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(13, 13, 13); border-radius: 8px; pointer-events: none; }
.styles-type-specimen-regular-52 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-52-p { -webkit-font-smoothing: antialiased; color: rgb(102, 102, 102); font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 500; line-height: 24px; overflow-wrap: break-word; text-align: center; white-space-collapse: preserve; word-break: break-word; }
.styles-div40 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 24px; width: 1px; padding: 24px; overflow: hidden; background-color: rgb(13, 13, 13); }
.styles-div41 { position: relative; flex-shrink: 0; width: 86px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(0, 0, 0); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.12) 0px 0.301094px 1.50547px -1.33333px, rgba(0, 0, 0, 0.106) 0px 1.14427px 5.72133px -2.66667px, rgba(0, 0, 0, 0.03) 0px 5px 25px -4px; }
.styles-div41::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(13, 13, 13); border-radius: 8px; pointer-events: none; }
.styles-type-specimen-regular-53 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-53-p { -webkit-font-smoothing: antialiased; color: rgb(102, 102, 102); font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 500; line-height: 24px; overflow-wrap: break-word; text-align: center; white-space-collapse: preserve; word-break: break-word; }
.styles-div42 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 24px; width: 1px; padding: 24px; overflow: hidden; background-color: rgb(13, 13, 13); }
.styles-div43 { position: relative; flex-shrink: 0; width: 86px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(0, 0, 0); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.08) 0px 0.301094px 0.782844px -0.833333px, rgba(0, 0, 0, 0.08) 0px 1.14427px 2.97509px -1.66667px, rgba(0, 0, 0, 0.08) 0px 5px 13px -2.5px; }
.styles-div43::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(13, 13, 13); border-radius: 8px; pointer-events: none; }
.styles-type-specimen-regular-54 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-54-p { -webkit-font-smoothing: antialiased; color: rgb(102, 102, 102); font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 500; line-height: 24px; overflow-wrap: break-word; text-align: center; white-space-collapse: preserve; word-break: break-word; }
.styles-div44 { display: flex; position: relative; flex: 1 0 0px; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 24px; width: 1px; padding: 24px; overflow: hidden; background-color: rgb(13, 13, 13); }
.styles-div45 { position: relative; flex-shrink: 0; width: 86px; aspect-ratio: 1 / 1; overflow: hidden; background-color: rgb(0, 0, 0); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.03) 0px 0.482901px 0.869222px -0.25px, rgba(0, 0, 0, 0.145) 0px 4px 7.2px -0.5px; }
.styles-div45::after { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid rgb(13, 13, 13); border-radius: 8px; pointer-events: none; }
.styles-type-specimen-regular-55 { display: flex; position: relative; flex-shrink: 0; flex-direction: column; justify-content: flex-start; width: 100%; }
.styles-type-specimen-regular-55-p { -webkit-font-smoothing: antialiased; color: rgb(102, 102, 102); font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 500; line-height: 24px; overflow-wrap: break-word; text-align: center; white-space-collapse: preserve; word-break: break-word; }

@media (min-width: 1440px) and (max-width: 1919.98px) {
  .home-transition-top { order: 1; }
  .home-header-wrap { order: 3; }
  .header-logo { height: 63px; }
  .header-logo-avatar { width: 45px; }
  .header-text-p { font-size: 18px; line-height: 19.8px; }
  .toggle { gap: 11px; }
  .toggle-indicator { top: -3px; height: 3px; }
  .toggle-pill { padding: 5px; }
  .toggle-work--oa4c6 { padding: 11px 14px; }
  .toggle-work--j9293 { display: none; }
  .toggle-work--t7okg { padding-bottom: 11px; }
  .toggle-work-label--um6r2 { display: none; }
  .toggle-work-text--1mb25 { display: none; }
  .toggle-info--19jfv { padding: 11px 14px; }
  .toggle-info--1tsgp { display: none; }
  .toggle-info-label--um6r2 { display: none; }
  .toggle-info-text--1mb25 { display: none; }
  .header-socials-wrap { width: 170px; }
  .socials { gap: 9px; }
  .social--133w4 { gap: 8px; }
  .social--8hxdk { display: none; }
  .social--1016v { gap: 8px; }
  .social-label--1nwfh { display: none; }
  .social-text--1k0n4 { display: none; }
  .social-icon-wrap--1q0u8 { display: none; }
  .social-icon--nemxy { width: 16px; height: 16px; background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 0 16 16%22><path d=%22M 14 2.5 C 14 2.224 13.776 2 13.5 2 L 7.5 2 C 7.224 2 7 2.224 7 2.5 C 7 2.776 7.224 3 7.5 3 L 12.293 3 L 2.146 13.146 C 1.95 13.342 1.95 13.658 2.146 13.854 C 2.342 14.05 2.658 14.05 2.854 13.854 L 13 3.707 L 13 8.5 C 13 8.776 13.224 9 13.5 9 C 13.776 9 14 8.776 14 8.5 Z%22 fill=%22rgb(255, 255, 255)%22 stroke-width=%220.25%22 stroke=%22rgb(255, 255, 255)%22 stroke-miterlimit=%222.8125%22></path></svg>"); }
  .social-icon--qe6v1 { display: none; }
  .social-icon--1nmde { width: 16px; height: 16px; background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 0 16 16%22><path d=%22M 14 2.5 C 14 2.224 13.776 2 13.5 2 L 7.5 2 C 7.224 2 7 2.224 7 2.5 C 7 2.776 7.224 3 7.5 3 L 12.293 3 L 2.146 13.146 C 1.95 13.342 1.95 13.658 2.146 13.854 C 2.342 14.05 2.658 14.05 2.854 13.854 L 13 3.707 L 13 8.5 C 13 8.776 13.224 9 13.5 9 C 13.776 9 14 8.776 14 8.5 Z%22 fill=%22rgb(255, 255, 255)%22 stroke-width=%220.25%22 stroke=%22rgb(255, 255, 255)%22 stroke-miterlimit=%222.8125%22></path></svg>"); }
  .socials-button { display: none; }
  .socials-at { display: none; }
  .socials-x { display: none; }
  .home-center { order: 2; width: 960px; }
  .home-browser-div { display: none; }
  .home-browser-div2 { display: none; }
  .home-selected-work-wrap { display: none; }
  .selected-work--19fdw { display: none; }
  .selected-work-arrow--g3cu2 { display: none; }
  .selected-work-label { display: none; }
  .selected-work-text { display: none; }
  .home-macos-bar { padding-top: 18px; padding-bottom: 18px; }
  .home-menu-div { width: 12px; }
  .home-menu-div2 { width: 12px; }
  .home-menu-div3 { width: 12px; }
  .home-website { padding-top: 75px; padding-bottom: 150px; }
  .home-header { display: none; }
  .home-header-div { display: none; }
  .home-header-h1 { display: none; }
  .home-header-div2 { display: none; }
  .card-link { padding: 10px; }
  .card-text { gap: 21px; }
  .card-text-h2 { font-size: 29px; line-height: 29px; }
  .card-arrow { width: 90px; }
  .card-menu { gap: 10px; }
  .home-transition-bottom { order: 4; }
  .home-div { order: 5; }
  .info-header-wrap { order: 1; }
  .info-center { order: 2; gap: 60px; width: 960px; }
  .info-about-me { gap: 60px; }
  .info-hero-h1 { --w: 960; --h: 78; --f: 78.1807; }
  .info-card-1 { padding: 5px; }
  .info-text-1 { padding: 36px; }
  .info-text-1-p--17ye2 { margin-top: 22px; }
  .info-card-1-2 { height: 550px; padding: 5px; }
  .info-image-2-img--plcxf { display: none; }
  .info-text-1-2 { padding: 36px; }
  .info-text-1-2-p2--17ye2 { margin-top: 22px; }
  .info-text-1-3 { padding: 36px; }
  .info-card-1-3 { order: 1; padding: 5px; }
  .info-image-3-img--1s9uk { display: none; }
  .info-text-1-4 { order: 2; padding: 36px; }
  .info-text-1-4-p2--17ye2 { margin-top: 22px; }
  .info-card-1-4 { order: 3; padding: 5px; }
  .info-image-4-img--26auo { display: none; }
  .info-text-1-5 { order: 4; padding: 36px; }
  .info-text-1-5-p--17ye2 { margin-top: 22px; }
  .experience-left { gap: 18px; }
  .experience-left-div3 { order: 1; }
  .experience-top-h4 { font-size: 18px; line-height: 27px; }
  .info-transition-bottom { order: 3; }
  .info-div { order: 4; }
  .project-content-p { font-size: 19px; letter-spacing: -0.19px; }
  .project-content-3-p { font-size: 19px; letter-spacing: -0.19px; }
  .project-title-4-h2 { font-size: 28px; line-height: 33.6px; }
  .project-content-4-p { font-size: 19px; letter-spacing: -0.19px; }
  .project-title-6-h2 { font-size: 28px; line-height: 33.6px; }
  .project-content-5-p { font-size: 19px; letter-spacing: -0.19px; }
  .project-title-8-h2 { font-size: 28px; line-height: 33.6px; }
  .project-content-6-p { font-size: 19px; letter-spacing: -0.19px; }
  .project-title-10-h2 { font-size: 28px; line-height: 33.6px; }
  .project-content-7-p { font-size: 19px; letter-spacing: -0.19px; }
  .quest-title-3-p { font-size: 19px; letter-spacing: -0.19px; }
  .question-title-2-h5 { font-size: 28px; line-height: 33.6px; }
  .quest-title-5-h5 { font-size: 28px; line-height: 33.6px; }
  .quest-title-7-h5 { font-size: 28px; line-height: 33.6px; }
  .submit-p { font-size: 19px; letter-spacing: -0.19px; }
  .quest-title-11-p { font-size: 19px; letter-spacing: -0.19px; }
  .quest-title-13-h5 { font-size: 28px; line-height: 33.6px; }
  .quest-title-15-h5 { font-size: 28px; line-height: 33.6px; }
  .quest-title-19-p { font-size: 19px; letter-spacing: -0.19px; }
  .quest-title-21-h5 { font-size: 28px; line-height: 33.6px; }
  .quest-title-23-h5 { font-size: 28px; line-height: 33.6px; }
  .styles-type-specimen-regular-6-h5 { font-size: 28px; line-height: 33.6px; }
  .styles-type-specimen-regular-8-p { font-size: 19px; letter-spacing: -0.19px; }
}

@media (min-width: 1920px) {
  .header-logo { width: 194px; height: 84px; }
  .header-logo-avatar { width: 54px; }
  .header-text { gap: 6px; }
  .header-text-p { font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 22px; line-height: 24.2px; }
  .header-text-p2 { font-size: 16px; line-height: 19.2px; }
  .toggle { gap: 12px; }
  .toggle-indicator { top: -3px; width: 36px; height: 3px; }
  .toggle-indicator--ye1o0 { left: calc(25.2% - 18px); }
  .toggle-indicator--rhqob { left: calc(25.2% - 18px); }
  .toggle-pill { width: 250px; padding: 6px; }
  .toggle-work--t7okg { display: none; }
  .toggle-work-label--vwtub { display: none; }
  .toggle-work-text--1gub2 { font-size: 23px; line-height: 27.6px; }
  .toggle-work-text--13yws { display: none; }
  .toggle-info--gchx6 { display: none; }
  .toggle-info-label--vwtub { display: none; }
  .toggle-info-text--1gub2 { font-size: 23px; line-height: 27.6px; }
  .toggle-info-text--13yws { display: none; }
  .header-socials-wrap { width: 194px; }
  .social--8hxdk { display: none; }
  .social-label--1nwfh { display: none; }
  .social-text--1gub2 { font-size: 23px; line-height: 27.6px; }
  .social-text--1k0n4 { display: none; }
  .social-text--11zmf { font-size: 23px; line-height: 27.6px; }
  .social-icon-wrap--1q0u8 { display: none; }
  .social-icon--qe6v1 { display: none; }
  .socials-button { display: none; }
  .socials-at { display: none; }
  .socials-x { display: none; }
  .home-center { width: 1388px; }
  .home-hero-div { padding-top: 12px; padding-right: 12px; padding-left: 12px; }
  .home-browser-div { display: none; }
  .home-browser-div2 { display: none; }
  .home-selected-work-wrap { display: none; }
  .selected-work--19fdw { display: none; }
  .selected-work--1cbez { align-items: flex-start; align-content: flex-start; width: 70px; height: 106px; }
  .selected-work-arrow--g3cu2 { display: none; }
  .selected-work-arrow--n17bd { flex-grow: 1; flex-basis: 0px; width: 1px; }
  .selected-work-label { display: none; }
  .selected-work-text { display: none; }
  .home-macos-bar { padding-top: 21px; padding-bottom: 21px; }
  .home-menu { gap: 15px; }
  .home-menu-div { width: 15px; }
  .home-menu-div2 { width: 15px; }
  .home-menu-div3 { width: 15px; }
  .home-website { justify-content: space-between; gap: normal; padding-top: 125px; padding-bottom: 200px; }
  .home-header { display: none; }
  .home-header-div { display: none; }
  .home-header-h1 { display: none; }
  .home-header-div2 { display: none; }
  .home-main-text-h1 { font-size: 124px; line-height: 124px; }
  .card-link { padding: 12px; border-radius: 36px; }
  .card-container { border-radius: 24px; }
  .card-text { gap: 24px; }
  .card-text-h2 { font-size: 32px; line-height: 32px; }
  .card-text-h3 { font-size: 20px; line-height: 20px; }
  .card-text-p { font-size: 20px; line-height: 20px; }
  .card-arrow { width: 100px; }
  .card-arrow-icon { width: 50px; }
  .card-bottom { height: 75%; }
  .card-macos-bar { border-top-left-radius: 15px; border-top-right-radius: 15px; }
  .card-menu { gap: 12px; }
  .card-inner-borders { border-radius: 24px; }
  .card-inactive-border { border-radius: 24px; }
  .card-inactive-border::after { border-radius: 24px; }
  .card-active-border { border-radius: 24px; }
  .card-active-border::after { border-radius: 24px; }
  .card-outer-borders { border-radius: 36px; }
  .card-inactive-border-2 { border-radius: 36px; }
  .card-inactive-border-2::after { border-radius: 36px; }
  .card-active-border-2 { border-radius: 36px; }
  .card-active-border-2::after { border-radius: 36px; }
  .info-center { gap: 96px; width: 1388px; }
  .info-about-me { gap: 96px; }
  .info-content { gap: 48px; }
  .info-card-1 { height: 700px; padding: 6px; }
  .info-text-1 { padding: 48px; }
  .info-text-1-h3 { font-size: 30px; line-height: 36px; }
  .info-text-1-p { font-size: 24px; letter-spacing: 0.48px; line-height: 26.4px; }
  .info-card-1-2 { height: 700px; padding: 6px; }
  .info-image-2-img--plcxf { display: none; }
  .info-text-1-2 { padding: 48px; }
  .info-text-1-3 { padding: 48px; }
  .info-card-1-3 { height: 800px; padding: 6px; }
  .info-image-3-img--1s9uk { display: none; }
  .info-text-1-4 { padding: 48px; }
  .info-text-1-4-h3 { font-size: 30px; line-height: 36px; }
  .info-text-1-4-p2 { font-size: 24px; letter-spacing: 0.48px; line-height: 26.4px; }
  .info-card-1-4 { padding: 6px; }
  .info-image-4-img--26auo { display: none; }
  .info-text-1-5 { padding: 48px; }
  .info-content-2 { gap: 60px; }
  .experience-left { gap: 24px; }
  .experience-left-div { width: 63px; }
  .experience-left-h2 { font-size: 52px; line-height: 62.4px; }
  .experience-top { gap: 6px; }
  .experience-top-h3 { font-size: 36px; line-height: 43.2px; }
  .project-content-p { font-size: 20px; letter-spacing: -0.2px; line-height: 30px; }
  .project-content-2-p { font-size: 20px; letter-spacing: -0.2px; line-height: 30px; }
  .project-content-3-p { font-size: 20px; letter-spacing: -0.2px; line-height: 30px; }
  .project-title-4-h2 { font-size: 30px; line-height: 36px; }
  .project-content-4-p { font-size: 20px; letter-spacing: -0.2px; line-height: 30px; }
  .project-title-6-h2 { font-size: 30px; line-height: 36px; }
  .project-content-5-p { font-size: 20px; letter-spacing: -0.2px; line-height: 30px; }
  .project-title-8-h2 { font-size: 30px; line-height: 36px; }
  .project-content-6-p { font-size: 20px; letter-spacing: -0.2px; line-height: 30px; }
  .project-title-10-h2 { font-size: 30px; line-height: 36px; }
  .project-content-7-p { font-size: 20px; letter-spacing: -0.2px; line-height: 30px; }
  .back-social-button-p { font-size: 23px; line-height: 27.6px; }
  .contents-p { font-size: 23px; line-height: 27.6px; }
  .contents-link-p { font-size: 16px; line-height: 24px; }
  .quest-title-3-p { font-size: 20px; letter-spacing: -0.2px; line-height: 30px; }
  .question-title-2-h5 { font-size: 30px; line-height: 36px; }
  .quest-title-5-h5 { font-size: 30px; line-height: 36px; }
  .quest-title-7-h5 { font-size: 30px; line-height: 36px; }
  .submit-p { font-size: 20px; letter-spacing: -0.2px; line-height: 30px; }
  .quest-title-11-p { font-size: 20px; letter-spacing: -0.2px; line-height: 30px; }
  .quest-title-13-h5 { font-size: 30px; line-height: 36px; }
  .quest-title-15-h5 { font-size: 30px; line-height: 36px; }
  .quest-title-19-p { font-size: 20px; letter-spacing: -0.2px; line-height: 30px; }
  .quest-title-21-h5 { font-size: 30px; line-height: 36px; }
  .quest-title-23-h5 { font-size: 30px; line-height: 36px; }
  .styles-type-specimen-regular-6-h5 { font-size: 30px; line-height: 36px; }
  .styles-type-specimen-regular-8-p { font-size: 20px; letter-spacing: -0.2px; line-height: 30px; }
  .styles-div20 { opacity: 0.157226; transform: perspective(1200px) translateY(42.1387px); }
  .styles-div29 { transform: translateX(5.99218px); }
  .styles-div31 { transform: translateX(79.9997px); }
  .styles-div33 { transform: translateX(3.35189px); }
}

@media (min-width: 1280px) and (max-width: 1439.98px) {
  .home-transition-top { order: 1; }
  .home-header-wrap { top: 24px; right: 25px; left: 23px; order: 2; }
  .header-logo { height: 60px; }
  .header-text-p2 { font-size: 13px; line-height: 15.6px; }
  .header-toggle-wrap { order: 1; }
  .toggle-indicator { width: 32px; }
  .toggle-indicator--ye1o0 { left: calc(24% - 16px); }
  .toggle-indicator--rhqob { left: calc(75.5% - 16px); }
  .toggle-pill { width: 200px; }
  .toggle-work--oa4c6 { padding: 10px 13px; }
  .toggle-work--j9293 { display: none; }
  .toggle-work--t7okg { padding: 10px 13px; }
  .toggle-work-label--um6r2 { display: none; }
  .toggle-work-text--1gub2 { font-size: 17px; line-height: 20.4px; }
  .toggle-work-text--1mb25 { display: none; }
  .toggle-work-text--13yws { font-size: 17px; line-height: 20.4px; }
  .toggle-info--19jfv { padding: 10px 13px; }
  .toggle-info--1tsgp { display: none; }
  .toggle-info--gchx6 { padding: 10px 13px; }
  .toggle-info-label--um6r2 { display: none; }
  .toggle-info-text--1gub2 { font-size: 17px; line-height: 20.4px; }
  .toggle-info-text--1mb25 { display: none; }
  .toggle-info-text--13yws { font-size: 17px; line-height: 20.4px; }
  .header-socials-wrap { order: 2; width: 157px; }
  .socials { gap: 6px; }
  .social--133w4 { gap: 6px; padding: 6px 12px; }
  .social--8hxdk { display: none; }
  .social--1016v { gap: 6px; padding: 6px 12px; }
  .social-label--1nwfh { display: none; }
  .social-text--1gub2 { font-size: 17px; line-height: 20.4px; }
  .social-text--1k0n4 { display: none; }
  .social-text--11zmf { font-size: 17px; line-height: 20.4px; }
  .social-icon-wrap--1q0u8 { display: none; }
  .social-icon--nemxy { width: 14px; height: 14px; background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 0 14 14%22><path d=%22M 12.25 2.188 C 12.25 1.946 12.054 1.75 11.813 1.75 L 6.563 1.75 C 6.321 1.75 6.125 1.946 6.125 2.188 C 6.125 2.429 6.321 2.625 6.563 2.625 L 10.756 2.625 L 1.878 11.503 C 1.707 11.674 1.707 11.951 1.878 12.122 C 2.049 12.293 2.326 12.293 2.497 12.122 L 11.375 3.244 L 11.375 7.438 C 11.375 7.679 11.571 7.875 11.813 7.875 C 12.054 7.875 12.25 7.679 12.25 7.438 Z%22 fill=%22rgb(255, 255, 255)%22 stroke-width=%220.22%22 stroke=%22rgb(255, 255, 255)%22 stroke-miterlimit=%222.8125%22></path></svg>"); }
  .social-icon--qe6v1 { display: none; }
  .social-icon--1nmde { width: 14px; height: 14px; background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 0 14 14%22><path d=%22M 12.25 2.188 C 12.25 1.946 12.054 1.75 11.813 1.75 L 6.563 1.75 C 6.321 1.75 6.125 1.946 6.125 2.188 C 6.125 2.429 6.321 2.625 6.563 2.625 L 10.756 2.625 L 1.878 11.503 C 1.707 11.674 1.707 11.951 1.878 12.122 C 2.049 12.293 2.326 12.293 2.497 12.122 L 11.375 3.244 L 11.375 7.438 C 11.375 7.679 11.571 7.875 11.813 7.875 C 12.054 7.875 12.25 7.679 12.25 7.438 Z%22 fill=%22rgb(255, 255, 255)%22 stroke-width=%220.22%22 stroke=%22rgb(255, 255, 255)%22 stroke-miterlimit=%222.8125%22></path></svg>"); }
  .socials-button { display: none; }
  .socials-at { display: none; }
  .socials-x { display: none; }
  .home-center { order: 3; width: 900px; }
  .home-browser-div { display: none; }
  .home-browser-div2 { display: none; }
  .home-selected-work-wrap { display: none; }
  .selected-work--19fdw { display: none; }
  .selected-work--1cbez { height: 70px; }
  .selected-work-arrow--g3cu2 { display: none; }
  .selected-work-arrow--n17bd { width: 46px; }
  .selected-work-label { display: none; }
  .selected-work-text { display: none; }
  .home-macos-bar { padding-right: 24px; padding-left: 24px; }
  .home-menu { gap: 9px; }
  .home-plus { width: 14px; height: auto; aspect-ratio: 1 / 1; }
  .home-plus-div { left: calc(50% - 7px); width: 14px; }
  .home-plus-div2 { top: calc(50% - 7px); right: 6px; left: calc(50% - 1px); height: 14px; }
  .home-website { gap: 60px; padding-bottom: 125px; }
  .home-header { display: none; }
  .home-header-div { display: none; }
  .home-header-h1 { display: none; }
  .home-header-div2 { display: none; }
  .home-main-text-h1 { font-size: 82px; line-height: 82px; }
  .card-link { padding: 9px; border-radius: 30px; }
  .card-container { border-radius: 21px; }
  .card-text { gap: 18px; }
  .card-text-h3 { font-size: 18px; line-height: 18px; }
  .card-text-p { font-size: 18px; line-height: 18px; }
  .card-arrow { width: 80px; }
  .card-arrow-icon { width: 40px; }
  .card-macos-bar { border-top-left-radius: 13px; border-top-right-radius: 13px; }
  .card-inner-borders { border-radius: 21px; }
  .card-inactive-border { border-radius: 21px; }
  .card-inactive-border::after { border-radius: 21px; }
  .card-active-border { border-radius: 21px; }
  .card-active-border::after { border-radius: 21px; }
  .card-outer-borders { border-radius: 30px; }
  .card-inactive-border-2 { border-radius: 30px; }
  .card-inactive-border-2::after { border-radius: 30px; }
  .card-active-border-2 { border-radius: 30px; }
  .card-active-border-2::after { border-radius: 30px; }
  .home-transition-bottom { order: 4; }
  .home-div { order: 5; }
  .info-header-wrap { top: 24px; right: -592px; left: 50%; order: 1; width: 1232px; transform: translate(-50%); }
  .info-center { order: 2; width: 900px; }
  .info-header-div { width: 9px; }
  .info-header-p { font-size: 15px; letter-spacing: 1.2px; line-height: 15px; }
  .info-hero-h1 { --w: 897; --h: 73; --f: 73; }
  .info-card-1 { height: 550px; padding: 4px; }
  .info-text-1-h3 { font-size: 25px; line-height: 30px; }
  .info-card-1-2 { height: 500px; padding: 4px; }
  .info-image-2-img--plcxf { display: none; }
  .info-text-1-2-h3 { font-size: 25px; line-height: 25px; }
  .info-text-1-2-p2 { font-size: 22px; letter-spacing: 0.44px; line-height: 24.2px; }
  .info-text-1-3-p { font-size: 25px; line-height: 37.5px; }
  .info-card-1-3 { height: 600px; padding: 4px; }
  .info-image-3-img--1s9uk { display: none; }
  .info-text-1-4-h3 { font-size: 25px; line-height: 30px; }
  .info-card-1-4 { padding: 4px; }
  .info-image-4-img--26auo { display: none; }
  .info-text-1-5-h3 { font-size: 25px; line-height: 25px; }
  .info-text-1-5-p { font-size: 22px; letter-spacing: 0.44px; line-height: 24.2px; }
  .info-header-2-div { width: 9px; }
  .info-header-2-p { font-size: 15px; letter-spacing: 1.2px; line-height: 15px; }
  .experience-left { gap: 15px; }
  .experience-left-div { width: 46px; }
  .experience-left-h2 { font-size: 38px; line-height: 45.6px; }
  .experience-top-h3 { font-size: 28px; line-height: 33.6px; }
  .experience-top-h4 { font-size: 17px; line-height: 25.5px; }
  .experience-description-p { font-size: 22px; letter-spacing: 0.44px; line-height: 24.2px; }
  .info-transition-bottom { order: 3; }
  .info-div { order: 4; }
  .project-content-p { line-height: 23.8px; }
  .project-content-2-p { font-size: 17px; letter-spacing: -0.17px; line-height: 23.8px; }
  .project-content-3-p { line-height: 23.8px; }
  .project-content-4-p { line-height: 23.8px; }
  .project-content-5-p { line-height: 23.8px; }
  .project-content-6-p { line-height: 23.8px; }
  .project-content-7-p { line-height: 23.8px; }
  .project-content-7-p--pdzfi { margin-top: 18px; }
  .back-social-button-p { font-size: 17px; line-height: 20.4px; }
  .contents-p { font-size: 17px; line-height: 20.4px; }
  .contents-link-p { font-size: 14px; line-height: 21px; }
  .quest-title-3-p { line-height: 23.8px; }
  .submit-p { line-height: 23.8px; }
  .quest-title-11-p { line-height: 23.8px; }
  .quest-title-19-p { line-height: 23.8px; }
  .styles-type-specimen-regular-8-p { line-height: 23.8px; }
  .styles-div20 { opacity: 0.200468; transform: perspective(1200px) translateY(39.9766px); }
  .styles-div29 { transform: translateX(31.685px); }
  .styles-div31 { transform: translateX(32.1587px); }
  .styles-div33 { transform: translateX(24.268px); }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
  .home { padding-right: 50px; padding-bottom: 50px; padding-left: 50px; }
  .home-transition-top { height: 215px; }
  .home-header-wrap { top: 25px; right: 50px; left: 50px; }
  .header-logo { justify-content: flex-start; gap: 9px; width: 52px; overflow: visible; }
  .header-logo-avatar { align-self: stretch; height: auto; }
  .header-text { gap: 6px; }
  .header-text-p { font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; }
  .header-text-span { font-size: 18px; line-height: 19.8px; }
  .header-text-p2 { font-size: 12px; line-height: 14.4px; }
  .toggle-indicator { width: 30px; }
  .toggle-indicator--ye1o0 { left: calc(24% - 15px); }
  .toggle-indicator--rhqob { left: calc(75% - 15px); }
  .toggle-pill { width: 220px; }
  .toggle-work--j9293 { display: none; }
  .toggle-work--t7okg { padding-top: 12px; padding-right: 15px; padding-left: 15px; }
  .toggle-work-label--um6r2 { display: none; }
  .toggle-work-text--1mb25 { display: none; }
  .toggle-info--1tsgp { display: none; }
  .toggle-info--gchx6 { padding: 12px 15px; }
  .toggle-info-label--um6r2 { display: none; }
  .toggle-info-text--1mb25 { display: none; }
  .socials { align-items: flex-end; align-content: flex-end; gap: 6px; cursor: pointer; }
  .socials-links { position: absolute; top: 76px; left: 0px; order: 1; align-self: auto; width: min-content; padding: 18px; overflow: hidden; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); background-color: rgba(255, 255, 255, 0.05); border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; border-top-left-radius: 24px; opacity: 0; }
  .socials-links::after { content: ""; }
  .social--133w4 { gap: 6px; padding: 6px 12px; }
  .social--15kp8 { display: none; }
  .social--1016v { display: none; }
  .social-label--2s6mi { display: none; }
  .social-text--11zmf { display: none; }
  .social-icon-wrap--14tc3 { display: none; }
  .social-icon--nemxy { width: 14px; height: 14px; background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 0 14 14%22><path d=%22M 12.25 2.188 C 12.25 1.946 12.054 1.75 11.813 1.75 L 6.563 1.75 C 6.321 1.75 6.125 1.946 6.125 2.188 C 6.125 2.429 6.321 2.625 6.563 2.625 L 10.756 2.625 L 1.878 11.503 C 1.707 11.674 1.707 11.951 1.878 12.122 C 2.049 12.293 2.326 12.293 2.497 12.122 L 11.375 3.244 L 11.375 7.438 C 11.375 7.679 11.571 7.875 11.813 7.875 C 12.054 7.875 12.25 7.679 12.25 7.438 Z%22 fill=%22rgb(255, 255, 255)%22 stroke-width=%220.22%22 stroke=%22rgb(255, 255, 255)%22 stroke-miterlimit=%222.8125%22></path></svg>"); }
  .social-icon--1p707 { display: none; }
  .social-icon--1nmde { display: none; }
  .home-center { flex-grow: 1; flex-basis: 0px; gap: 48px; }
  .home-center-div { gap: 48px; }
  .home-hero { align-items: flex-start; align-content: flex-start; height: min-content; padding-top: 150px; }
  .home-hero-div { height: 500px; padding-top: 6px; padding-right: 6px; padding-left: 6px; border-top-left-radius: 18px; border-top-right-radius: 19px; }
  .home-hero-div::after { border-top-left-radius: 18px; border-top-right-radius: 19px; }
  .home-browser { border-top-left-radius: 15px; border-top-right-radius: 15px; }
  .home-browser::after { border-top-left-radius: 15px; border-top-right-radius: 15px; }
  .home-browser-div { display: none; }
  .home-browser-div2 { display: none; }
  .home-selected-work-wrap { display: none; }
  .selected-work--19fdw { display: none; }
  .selected-work--1cbez { height: 60px; }
  .selected-work-arrow--g3cu2 { display: none; }
  .selected-work-arrow--n17bd { width: 34px; transform: translate3d(0px, -0.272238px, 0px) rotate(90deg); }
  .selected-work-label { display: none; }
  .selected-work-text { display: none; }
  .home-macos-bar { padding-right: 24px; padding-left: 24px; border-top-left-radius: 15px; border-top-right-radius: 15px; }
  .home-menu-div { box-shadow: rgba(244, 108, 93, 0.6) 0px 0px 5px 3px; }
  .home-menu-div2 { box-shadow: rgba(248, 189, 78, 0.6) 0px 0px 5px 3px; }
  .home-menu-div3 { box-shadow: rgba(87, 196, 83, 0.6) 0px 0px 5px 3px; }
  .home-website { gap: 50px; }
  .home-header { display: none; }
  .home-header-div { display: none; }
  .home-header-h1 { display: none; }
  .home-header-div2 { display: none; }
  .home-main-text-h1 { font-size: 27px; line-height: 27px; }
  .home-website-p { font-size: 24px; line-height: 24px; }
  .home-thailotus { height: 500px; }
  .card { cursor: auto; }
  .card-link { height: 100%; border-radius: 24px; }
  .card-container { padding-top: 36px; padding-right: 36px; padding-left: 36px; border-radius: 18px; }
  .card-container--guart { background-color: rgb(47, 62, 42); }
  .card-container--velvetgrowth { background-color: rgb(125, 5, 5); }
  .card-container--marketingembodied { background-color: rgb(29, 95, 154); }
  .card-container--ifa { background-color: rgb(74, 88, 97); }
  .card-container--toma { background-color: rgb(1, 128, 12); }
  .card-container--thailotus { background-color: rgb(97, 63, 13); }
  .card-text-h3 { font-size: 16px; line-height: 16px; }
  .card-text-p { font-size: 16px; line-height: 16px; }
  .card-arrow-icon { width: 36px; }
  .card-bottom { height: 75%; }
  .card-macos-bar { padding: 9px 21px; border-top-left-radius: 12px; border-top-right-radius: 12px; }
  .card-menu-div { width: 9px; }
  .card-menu-div2 { width: 9px; }
  .card-menu-div3 { width: 9px; }
  .card-inner-borders { border-radius: 18px; }
  .card-inactive-border { border-radius: 18px; }
  .card-inactive-border::after { border-radius: 18px; }
  .card-active-border { border-radius: 18px; }
  .card-active-border::after { border-radius: 18px; }
  .card-outer-borders { border-radius: 24px; }
  .card-inactive-border-2 { border-radius: 24px; }
  .card-inactive-border-2::after { border-radius: 24px; }
  .card-active-border-2 { border-radius: 24px; }
  .card-active-border-2::after { border-radius: 24px; }
  .home-divider { order: 1; }
  .home-transition-bottom { height: 215px; }
  .info { padding-right: 50px; padding-left: 50px; }
  .info-transition-top { height: 215px; }
  .info-header-wrap { top: 25px; right: 50px; left: 50px; }
  .info-center { flex-grow: 1; flex-basis: 0px; }
  .info-hero { align-items: flex-start; align-content: flex-start; }
  .info-top-padding { height: 150px; }
  .info-hero-div { gap: 12px; }
  .info-header-div { width: 8px; }
  .info-header-p { font-size: 14px; letter-spacing: 1.12px; line-height: 14px; }
  .info-hero-h1 { --w: 713; --h: 58; --f: 58; }
  .info-card-1 { height: 400px; }
  .info-text-1-h3 { font-size: 24px; line-height: 28.8px; }
  .info-text-1-p { font-size: 20px; letter-spacing: 0.2px; line-height: 22px; }
  .info-image-2-img--plcxf { display: none; }
  .info-text-1-2-h3 { font-size: 24px; line-height: 24px; }
  .info-text-1-2-p2 { font-size: 20px; letter-spacing: 0.4px; line-height: 22px; }
  .info-text-1-3-p { font-size: 24px; line-height: 36px; }
  .info-text-1-3-p--37pc3 { text-align: left; }
  .info-card-1-3 { height: 450px; }
  .info-image-3-img--1s9uk { display: none; }
  .info-text-1-4-h3 { font-size: 24px; line-height: 28.8px; }
  .info-text-1-4-p2 { font-size: 20px; letter-spacing: 0.2px; line-height: 22px; }
  .info-image-4-img--26auo { display: none; }
  .info-text-1-5-h3 { font-size: 24px; line-height: 24px; }
  .info-text-1-5-p { font-size: 20px; letter-spacing: 0.4px; line-height: 22px; }
  .info-divider { order: 1; }
  .info-experience { order: 3; }
  .info-header-2-div { width: 8px; }
  .info-header-2-p { font-size: 14px; letter-spacing: 1.12px; line-height: 14px; }
  .info-content-2 { gap: 60px; }
  .experience { flex-direction: column; gap: 24px; }
  .experience-left { flex-grow: 0; flex-basis: auto; width: 100%; }
  .experience-left-div { width: 56px; }
  .experience-left-h2 { font-size: 46px; line-height: 55.2px; }
  .experience-right { flex-grow: 0; flex-basis: auto; width: 100%; }
  .experience-top-h3 { font-size: 32px; line-height: 38.4px; }
  .info-divider-2 { order: 2; }
  .info-transition-bottom { height: 215px; }
  .project { gap: 144px; padding-right: 48px; padding-left: 48px; }
  .project-hero { padding-top: 160px; }
  .project-title-2-h1 { font-size: 58px; line-height: 69.6px; }
  .project-content-p { font-size: 18px; letter-spacing: -0.18px; line-height: 27px; }
  .project-content-2-p { font-size: 18px; letter-spacing: -0.18px; line-height: 27px; }
  .project-content-3-p { font-size: 18px; letter-spacing: -0.18px; line-height: 27px; }
  .project-image { gap: 2px; padding-right: 12.5px; padding-left: 12.5px; }
  .project-menubar { height: 11px; padding-right: 12px; padding-left: 12px; }
  .project-menus { gap: 8px; }
  .project-menus-div { height: 7px; }
  .project-menus-p { font-size: 6.5px; line-height: 7.8px; }
  .project-menus-p2 { font-size: 6.5px; line-height: 7.8px; }
  .project-menus-p3 { font-size: 6.5px; line-height: 7.8px; }
  .project-menus-p4 { font-size: 6.5px; line-height: 7.8px; }
  .project-menus-p5 { font-size: 6.5px; line-height: 7.8px; }
  .project-menus-p6 { font-size: 6.5px; line-height: 7.8px; }
  .project-menus-p7 { font-size: 6.5px; line-height: 7.8px; }
  .project-menus-p8 { font-size: 6.5px; line-height: 7.8px; }
  .project-status { gap: 6px; }
  .project-status-svg { height: 7px; }
  .project-status-svg2 { height: 7px; }
  .project-status-svg3 { height: 7px; }
  .project-toggle { width: 6px; height: 3px; border-radius: 2px; }
  .project-toggle::after { border-radius: 2px; }
  .project-toggle-2 { width: 6px; height: 3px; border-radius: 2px; }
  .project-toggle-2::after { border-radius: 2px; }
  .project-status-p { font-size: 6.5px; line-height: 7.8px; }
  .project-macos-bar { padding: 10px 12px; }
  .project-menu { gap: 6px; }
  .project-menu-div { width: 7px; box-shadow: rgba(244, 108, 93, 0.6) 0px 0px 5px 3px; }
  .project-menu-div2 { width: 7px; box-shadow: rgba(248, 189, 78, 0.6) 0px 0px 5px 3px; }
  .project-menu-div3 { width: 7px; box-shadow: rgba(87, 196, 83, 0.6) 0px 0px 5px 3px; }
  .project-overview { flex-direction: column; width: 100%; scroll-margin-top: 96px; }
  .project-left { order: 1; flex-grow: 0; flex-basis: auto; gap: 32px; width: 100%; }
  .project-content-4-p { font-size: 18px; letter-spacing: -0.18px; line-height: 27px; }
  .project-content-5-p { font-size: 18px; letter-spacing: -0.18px; line-height: 27px; }
  .project-content-6-p { font-size: 18px; letter-spacing: -0.18px; line-height: 27px; }
  .project-left-2 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .project-content-7-p { font-size: 18px; letter-spacing: -0.18px; line-height: 27px; }
  .project-highlights { width: 100%; scroll-margin-top: 96px; }
  .project-highlights-div { padding: 24px; }
  .project-top-outline { left: 7.35119%; }
  .project-post-6 { gap: 64px; }
  .project-top { gap: 48px; }
  .project-title-12-h4 { font-size: 30px; line-height: 36px; }
  .project-bottom { gap: 48px; }
  .back--ijnpf { cursor: auto; }
  .back-social-button { padding: 6px 12px; }
  .project-right { align-items: flex-end; align-content: flex-end; }
  .project-socials-top { gap: 6px; width: min-content; cursor: pointer; }
  .contents { align-items: flex-end; align-content: flex-end; padding: 9px 15px; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); background-color: rgba(255, 255, 255, 0.05); border-radius: 24px; cursor: pointer; }
  .contents::after { content: ""; }
  .contents-nav { order: 1; align-self: auto; align-items: flex-end; align-content: flex-end; gap: 10px; width: min-content; }
  .contents-div2 { display: none; }
  .contents-contents-link-wrap { display: none; }
  .contents-link { display: none; }
  .contents-link-div { display: none; }
  .contents-link-p { display: none; }
  .contents-contents-link-wrap-2 { display: none; }
  .quest { padding-right: 48px; padding-left: 48px; }
  .quest-form { width: 100%; }
  .quest-title-2-h3 { font-size: 38px; line-height: 45.6px; }
  .quest-title-3-p { font-size: 18px; letter-spacing: -0.18px; line-height: 27px; }
  .quest-questions { align-self: auto; width: 100%; }
  .quest-submit-wrap { align-self: auto; width: 100%; }
  .submit-p { font-size: 18px; letter-spacing: -0.18px; line-height: 27px; }
  .quest-2 { padding-right: 48px; padding-left: 48px; }
  .quest-title-10-h3 { font-size: 38px; line-height: 45.6px; }
  .quest-title-11-p { font-size: 18px; letter-spacing: -0.18px; line-height: 27px; }
  .quest-title-18-h3 { font-size: 38px; line-height: 45.6px; }
  .quest-title-19-p { font-size: 18px; letter-spacing: -0.18px; line-height: 27px; }
  .legal-h3 { font-size: 38px; line-height: 45.6px; }
  .legal-2-h3 { font-size: 38px; line-height: 45.6px; }
  .styles-type-specimen-regular-h3 { font-size: 38px; line-height: 45.6px; }
  .styles-type-specimen-regular-2-h1 { font-size: 58px; line-height: 69.6px; }
  .styles-type-specimen-regular-3-h2 { font-size: 48px; line-height: 57.6px; }
  .styles-type-specimen-regular-4-h3 { font-size: 38px; line-height: 45.6px; }
  .styles-type-specimen-regular-5-h4 { font-size: 30px; line-height: 36px; }
  .styles-type-specimen-regular-7-h6 { font-size: 22px; line-height: 26.4px; }
  .styles-type-specimen-regular-8-p { font-size: 18px; letter-spacing: -0.18px; line-height: 27px; }
  .styles-type-specimen-regular-12-h3 { font-size: 38px; line-height: 45.6px; }
  .styles-type-specimen-regular-40-h3 { font-size: 38px; line-height: 45.6px; }
  .styles-div20 { opacity: 0.193693; transform: perspective(1200px) translateY(40.3154px); }
  .styles-div29 { transform: translateX(24.7048px); }
  .styles-div31 { transform: translateX(69.7837px); }
  .styles-div33 { transform: translateX(78.9155px); }
  .styles-type-specimen-regular-51-h3 { font-size: 38px; line-height: 45.6px; }
}

@media (max-width: 767.98px) {
  .home { padding-bottom: 0px; }
  .home-transition-top { height: 127px; background-image: linear-gradient(rgba(255, 128, 0, 0) 0%, rgba(13, 13, 13, 0.8) 60%, rgb(13, 13, 13) 100%); }
  .home-header-wrap { top: 24px; right: 24px; left: 24px; }
  .header { min-height: 40px; }
  .header-logo { position: absolute; top: 0px; left: 0px; z-index: 1; }
  .header-logo-avatar { position: relative; height: auto; aspect-ratio: 1 / 1; }
  .header-logo-img { object-position: 50% 40%; }
  .header-text { display: none; }
  .header-text-div { display: none; }
  .header-text-p { display: none; }
  .header-text-div2 { display: none; }
  .header-text-p2 { display: none; }
  .toggle { gap: 6px; }
  .toggle-indicator { width: 24px; }
  .toggle-indicator--ye1o0 { left: calc(24.6667% - 12px); }
  .toggle-indicator--rhqob { left: calc(74.6667% - 12px); }
  .toggle-pill { gap: 6px; width: 180px; padding: 3px; }
  .toggle-work--oa4c6 { padding: 9px 24px; }
  .toggle-work--j9293 { display: none; }
  .toggle-work--t7okg { padding-top: 9px; padding-right: 24px; padding-left: 24px; background-color: rgba(255, 255, 255, 0); }
  .toggle-work-label--um6r2 { display: none; }
  .toggle-work-text--1gub2 { font-size: 16px; line-height: 19.2px; }
  .toggle-work-text--1mb25 { display: none; }
  .toggle-work-text--13yws { font-size: 16px; line-height: 19.2px; }
  .toggle-info--19jfv { padding: 9px 24px; background-color: rgba(255, 255, 255, 0); }
  .toggle-info--1tsgp { display: none; }
  .toggle-info--gchx6 { padding: 9px 24px; background-color: rgba(255, 255, 255, 0.05); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%); }
  .toggle-info-label--um6r2 { display: none; }
  .toggle-info-text--1gub2 { font-size: 16px; line-height: 19.2px; }
  .toggle-info-text--1mb25 { display: none; }
  .toggle-info-text--13yws { font-size: 16px; line-height: 19.2px; }
  .header-socials-wrap { position: absolute; top: 0px; right: 1px; }
  .socials { cursor: pointer; }
  .socials-links { position: absolute; top: 52px; left: 268%; order: 1; align-self: auto; width: min-content; padding: 18px; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); background-color: rgba(255, 255, 255, 0.05); border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; border-top-left-radius: 24px; opacity: 0; transform: translateX(-50%); }
  .socials-links::after { content: ""; }
  .social--8hxdk { display: none; }
  .social-label--1nwfh { display: none; }
  .social-text--1gub2 { font-size: 16px; line-height: 19.2px; }
  .social-text--1k0n4 { display: none; }
  .social-text--11zmf { font-size: 16px; line-height: 19.2px; }
  .social-icon-wrap--1q0u8 { display: none; }
  .social-icon--qe6v1 { display: none; }
  .socials-button { width: 40px; }
  .socials-at { inset: 8px; width: 24px; height: 24px; }
  .socials-x { inset: 19px; }
  .home-center { flex-grow: 1; flex-basis: 0px; gap: 24px; padding-right: 25px; padding-bottom: 50px; padding-left: 25px; background-image: radial-gradient(80% 11% at 50% 6.2%, rgb(57, 57, 57) 0%, rgb(13, 13, 13) 100%); }
  .home-center-div { gap: 12px; overflow: visible; }
  .home-hero { align-items: flex-start; align-content: flex-start; height: min-content; padding-top: 125px; overflow: visible; }
  .home-hero-div { height: min-content; padding-top: 0px; padding-right: 0px; padding-left: 0px; overflow: visible; -webkit-mask-image: none; background-image: radial-gradient(73% 95% at 50% 1.7%, rgba(77, 77, 77, 0) 0%, rgba(0, 0, 0, 0) 100%); border-top-left-radius: 0px; border-top-right-radius: 0px; mask-image: none; }
  .home-hero-div::after { border-left-color: rgb(0, 0, 0); border-left-style: none; border-left-width: 0px; border-right-color: rgb(0, 0, 0); border-right-style: none; border-right-width: 0px; border-top-color: rgb(0, 0, 0); border-top-left-radius: 0px; border-top-right-radius: 0px; border-top-style: none; border-top-width: 0px; }
  .home-upper-shadow { display: none; }
  .home-browser { flex-grow: 0; flex-basis: auto; gap: 48px; height: min-content; overflow: visible; }
  .home-browser::after { border-left-color: rgb(0, 0, 0); border-left-style: none; border-left-width: 0px; border-right-color: rgb(0, 0, 0); border-right-style: none; border-right-width: 0px; border-top-color: rgb(0, 0, 0); border-top-style: none; border-top-width: 0px; }
  .selected-work--1cbez { display: none; }
  .selected-work-arrow--n17bd { display: none; }
  .home-macos-bar { display: none; }
  .home-bottom-shadow { display: none; }
  .home-menu { display: none; }
  .home-menu-div { display: none; }
  .home-menu-div2 { display: none; }
  .home-menu-div3 { display: none; }
  .home-plus { display: none; }
  .home-plus-div { display: none; }
  .home-plus-div2 { display: none; }
  .home-website { order: 1; flex-grow: 0; flex-basis: auto; gap: 24px; height: min-content; padding-top: 0px; padding-right: 0px; padding-left: 0px; background-color: rgba(0, 0, 0, 0); }
  .home-text { order: 1; }
  .home-main-text-h1 { font-size: 29px; line-height: 26.1px; }
  .home-main-text-span--187y0 { font-size: 43px; line-height: 38.7px; }
  .home-main-text-span--zj2l0 { font-size: 43px; line-height: 38.7px; }
  .home-website-div { order: 2; }
  .home-website-div2 { flex-grow: 1; flex-basis: 0px; width: 1px; }
  .home-website-div3 { order: 2; }
  .home-website-p { font-size: 16px; line-height: 16px; }
  .home-selected-work-wrap-2 { display: none; }
  .home-work { order: 1; }
  .home-thailotus { height: auto; }
  .card { height: 375px; padding-top: 24px; padding-bottom: 24px; cursor: auto; }
  .card-link { height: 100%; border-radius: 21px; }
  .card-container { padding-top: 24px; padding-right: 24px; padding-left: 24px; border-radius: 15px; }
  .card-container--guart { background-color: rgb(47, 62, 42); }
  .card-container--velvetgrowth { background-color: rgb(125, 5, 5); }
  .card-container--marketingembodied { background-color: rgb(29, 95, 154); }
  .card-container--ifa { background-color: rgb(74, 88, 97); }
  .card-container--toma { background-color: rgb(1, 128, 12); }
  .card-container--thailotus { background-color: rgb(97, 63, 13); }
  .card-text { flex-grow: 1; flex-basis: 0px; width: 1px; }
  .card-text-h2 { font-size: 22px; line-height: 22px; }
  .card-text-div2 { flex-direction: column; align-items: flex-start; align-content: flex-start; gap: 6px; width: 100%; }
  .card-text-h3 { font-size: 14px; line-height: 14px; }
  .card-text-div4 { order: 1; width: 100%; }
  .card-text-p { font-size: 12px; line-height: 12px; overflow-wrap: break-word; text-wrap-mode: wrap; word-break: break-word; }
  .card-arrow-icon { width: 24px; }
  .card-bottom { height: 65%; }
  .card-macos-bar { padding: 6px 15px; border-top-left-radius: 9px; border-top-right-radius: 9px; }
  .card-menu { gap: 4px; }
  .card-menu-div { width: 4px; }
  .card-menu-div2 { width: 4px; }
  .card-menu-div3 { width: 4px; }
  .card-plus { width: 7px; height: 7px; }
  .card-plus-div { top: 3px; bottom: 3px; }
  .card-plus-div2 { right: 3px; left: 3px; }
  .card-inner-borders { border-radius: 15px; }
  .card-inactive-border { border-radius: 15px; }
  .card-inactive-border::after { border-radius: 15px; }
  .card-active-border { border-radius: 15px; }
  .card-active-border::after { border-radius: 15px; }
  .card-outer-borders { border-radius: 21px; }
  .card-inactive-border-2 { border-radius: 21px; }
  .card-inactive-border-2::after { border-radius: 21px; }
  .card-active-border-2 { border-radius: 21px; }
  .card-active-border-2::after { border-radius: 21px; }
  .home-transition-bottom { height: 127px; }
  .info { padding-bottom: 0px; }
  .info-transition-top { height: 127px; background-image: linear-gradient(rgba(255, 128, 0, 0) 0%, rgba(13, 13, 13, 0.8) 60%, rgb(13, 13, 13) 100%); }
  .info-header-wrap { top: 24px; right: 24px; left: 24px; }
  .info-center { flex-grow: 1; flex-basis: 0px; gap: 24px; padding-right: 25px; padding-bottom: 50px; padding-left: 25px; background-image: radial-gradient(80% 11% at 50% 6.2%, rgb(57, 57, 57) 0%, rgb(13, 13, 13) 100%); }
  .info-about-me { gap: 24px; }
  .info-hero { align-items: flex-start; align-content: flex-start; height: 176px; }
  .info-top-padding { height: 125px; }
  .info-hero-div { gap: 12px; }
  .info-header { gap: 9px; }
  .info-header-div { width: 8px; }
  .info-header-p { font-size: 12px; letter-spacing: 0.96px; line-height: 12px; }
  .info-content { order: 1; flex-direction: column; gap: 12px; }
  .info-left { flex-grow: 0; flex-basis: auto; width: 100%; }
  .info-card-1 { height: 350px; }
  .info-image { gap: 48px; overflow: visible; }
  .info-image-img { object-position: 50% 0%; }
  .info-text-1 { order: 1; padding: 12px; }
  .info-text-1-h3 { font-size: 21px; line-height: 25.2px; }
  .info-text-1-p { font-size: 16px; letter-spacing: 0.32px; line-height: 17.6px; }
  .info-text-1-p--17ye2 { margin-top: 18px; }
  .info-card-1-2 { order: 2; }
  .info-image-2 { gap: 48px; overflow: visible; }
  .info-image-2-img--7u9cw { display: none; }
  .info-text-1-2 { order: 3; padding: 12px; }
  .info-text-1-2-p2 { color: rgb(179, 179, 179); font-size: 16px; letter-spacing: 0.32px; line-height: 17.6px; }
  .info-text-1-2-p2--17ye2 { margin-top: 18px; }
  .info-right { order: 1; flex-grow: 0; flex-basis: auto; width: 100%; }
  .info-text-1-3 { display: none; }
  .info-text-1-3-div { display: none; }
  .info-card-1-3 { order: 1; height: 200px; }
  .info-image-3 { gap: 48px; overflow: visible; }
  .info-image-3-img--7iuvi { display: none; }
  .info-text-1-4 { order: 2; padding: 12px; }
  .info-text-1-4-p2 { color: rgb(179, 179, 179); font-size: 16px; letter-spacing: 0.32px; line-height: 17.6px; }
  .info-text-1-4-p2--17ye2 { margin-top: 18px; }
  .info-card-1-4 { order: 3; height: 300px; aspect-ratio: auto; }
  .info-image-4 { gap: 48px; overflow: visible; }
  .info-image-4-img--qety9 { display: none; }
  .info-text-1-5 { order: 4; padding: 12px; }
  .info-text-1-5-h3 { font-size: 21px; line-height: 21px; }
  .info-text-1-5-p { font-size: 16px; letter-spacing: 0.32px; line-height: 17.6px; }
  .info-text-1-5-p--17ye2 { margin-top: 18px; }
  .info-header-2 { gap: 9px; }
  .info-header-2-div { width: 8px; }
  .info-header-2-p { font-size: 12px; letter-spacing: 0.96px; line-height: 12px; }
  .experience { flex-direction: column; gap: 24px; }
  .experience-left { flex-grow: 0; flex-basis: auto; width: 100%; }
  .experience-left-div { width: 34px; }
  .experience-left-h2 { font-size: 28px; line-height: 33.6px; }
  .experience-right { flex-grow: 0; flex-basis: auto; width: 100%; }
  .experience-top-h3 { font-size: 22px; line-height: 26.4px; }
  .experience-top-h4 { font-size: 16px; line-height: 24px; }
  .experience-description-p { font-size: 18px; letter-spacing: 0.36px; line-height: 19.8px; }
  .info-transition-bottom { height: 127px; }
  .project { gap: 120px; padding-right: 10px; padding-left: 10px; }
  .project-hero { padding-top: 128px; }
  .project-title-2-h1 { font-size: 46px; line-height: 55.2px; }
  .project-post-div { flex-direction: column; gap: 9px; }
  .project-content-p { line-height: 25.5px; }
  .project-content-2 { display: none; }
  .project-content-2-p { display: none; }
  .project-content-3 { width: 100%; }
  .project-content-3-p { line-height: 25.5px; overflow-wrap: break-word; text-align: center; text-wrap-mode: wrap; word-break: break-word; }
  .project-image { padding-top: 7px; padding-right: 6.5px; padding-left: 6.5px; }
  .project-menubar { height: 9px; padding-right: 8px; padding-left: 8px; }
  .project-menus { gap: 5px; }
  .project-menus-div { height: 5px; }
  .project-menus-p { font-size: 3px; line-height: 3.6px; }
  .project-menus-p2 { font-size: 3px; line-height: 3.6px; }
  .project-menus-p3 { font-size: 3px; line-height: 3.6px; }
  .project-menus-p4 { font-size: 3px; line-height: 3.6px; }
  .project-menus-p5 { font-size: 3px; line-height: 3.6px; }
  .project-menus-p6 { font-size: 3px; line-height: 3.6px; }
  .project-menus-p7 { font-size: 3px; line-height: 3.6px; }
  .project-menus-p8 { font-size: 3px; line-height: 3.6px; }
  .project-status { gap: 5px; }
  .project-status-svg { height: 5px; }
  .project-status-svg2 { height: 5px; }
  .project-status-svg3 { height: 5px; }
  .project-control-center { gap: 0.5px; }
  .project-toggle { width: 5px; height: 2px; }
  .project-toggle-2 { width: 5px; height: 2px; }
  .project-status-p { font-size: 4px; line-height: 4.8px; }
  .project-macos-bar { padding: 4px 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; }
  .project-menu { gap: 4px; }
  .project-menu-div { width: 4px; }
  .project-menu-div2 { width: 4px; }
  .project-menu-div3 { width: 4px; }
  .project-plus { width: 9px; height: 9px; }
  .project-plus-div { top: 4px; bottom: 4px; }
  .project-plus-div2 { right: 4px; left: calc(50% - 0.5px); width: 1px; }
  .project-overview { flex-direction: column; width: 100%; padding-right: 10px; padding-left: 10px; scroll-margin-top: 96px; }
  .project-left { order: 1; flex-grow: 0; flex-basis: auto; gap: 32px; width: 100%; }
  .project-title-4-h2 { font-size: 22px; line-height: 26.4px; }
  .project-content-4-p { line-height: 25.5px; }
  .project-title-6-h2 { font-size: 22px; line-height: 26.4px; }
  .project-content-5-p { line-height: 25.5px; }
  .project-title-8-h2 { font-size: 22px; line-height: 26.4px; }
  .project-content-6-p { line-height: 25.5px; }
  .project-left-2 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .project-title-10-h2 { font-size: 22px; line-height: 26.4px; }
  .project-content-7-p { line-height: 25.5px; }
  .project-highlights { width: 100%; scroll-margin-top: 96px; }
  .project-highlights-div { padding: 24px 12px 12px; }
  .project-top-outline { left: 15%; width: 70%; }
  .project-post-6 { gap: 64px; }
  .project-top { gap: 32px; }
  .project-title-12-h4 { font-size: 30px; line-height: 36px; }
  .project-bottom { gap: 32px; }
  .project-left-3 { width: min-content; }
  .back--ijnpf { cursor: auto; }
  .back-social-button-div { width: 20px; }
  .back-social-button-p { font-size: 16px; line-height: 19.2px; }
  .project-right { align-items: flex-end; align-content: flex-end; gap: 16px; }
  .project-socials-top { width: min-content; cursor: pointer; }
  .back-social-button-div3 { width: 20px; }
  .contents { align-items: flex-end; align-content: flex-end; padding: 9px 15px; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); background-color: rgba(255, 255, 255, 0.05); border-radius: 24px; cursor: pointer; }
  .contents::after { content: ""; }
  .contents-nav { order: 1; align-self: auto; align-items: flex-end; align-content: flex-end; gap: 10px; width: min-content; }
  .contents-p { font-size: 16px; line-height: 19.2px; }
  .contents-div2 { display: none; }
  .contents-contents-link-wrap { display: none; }
  .contents-link { display: none; }
  .contents-link-div { display: none; }
  .contents-link-p { display: none; }
  .contents-contents-link-wrap-2 { display: none; }
  .project-beforeafter-div3--1avz2 { height: 64px; }
  .project-beforeafter-div4 { width: 64px; height: 64px; }
  .quest { padding-top: 60px; padding-bottom: 60px; }
  .quest-form { width: 100%; }
  .quest-div { width: 100%; }
  .quest-title { width: 100%; padding-right: 0px; padding-left: 0px; -webkit-mask-image: none; mask-image: none; }
  .quest-title-2 { flex-grow: 1; flex-basis: 0px; width: 1px; }
  .quest-title-2-h3 { font-size: 34px; line-height: 40.8px; overflow-wrap: break-word; text-wrap-mode: wrap; word-break: break-word; }
  .quest-div2 { align-self: auto; width: 100%; padding-right: 0px; padding-left: 0px; }
  .quest-title-3-p { line-height: 25.5px; }
  .quest-questions { align-self: auto; width: 100%; }
  .question--pcnyv { gap: 12px; }
  .question-title--p4ox3 { padding-right: 0px; padding-left: 0px; -webkit-mask-image: none; mask-image: none; }
  .question-title-2-h5 { font-size: 22px; line-height: 26.4px; }
  .question-description--k5fhw { padding-right: 0px; padding-left: 0px; }
  .question-label--k5fhw { padding-right: 0px; padding-left: 0px; }
  .question-div--nj3yh { min-height: 80px; }
  .question-textarea--nj3yh { min-height: 80px; }
  .quest-title-4 { padding-right: 0px; padding-left: 0px; -webkit-mask-image: none; mask-image: none; }
  .quest-title-5-h5 { font-size: 22px; line-height: 26.4px; }
  .quest-questions-label { padding-right: 0px; padding-left: 0px; }
  .quest-title-6 { padding-right: 0px; padding-left: 0px; -webkit-mask-image: none; mask-image: none; }
  .quest-title-7-h5 { font-size: 22px; line-height: 26.4px; }
  .quest-description { padding-right: 0px; padding-left: 0px; }
  .quest-title-8 { flex-grow: 1; flex-basis: 0px; width: 1px; }
  .quest-title-8-p { overflow-wrap: break-word; text-wrap-mode: wrap; word-break: break-word; }
  .quest-questions-label2 { padding-right: 0px; padding-left: 0px; }
  .quest-submit-wrap { align-self: auto; width: 100%; }
  .submit-p { line-height: 25.5px; }
  .quest-2 { padding-top: 60px; padding-bottom: 60px; }
  .quest-2-div { width: 100%; }
  .quest-title-9 { width: 100%; padding-right: 0px; padding-left: 0px; -webkit-mask-image: none; mask-image: none; }
  .quest-title-10 { flex-grow: 1; flex-basis: 0px; width: 1px; }
  .quest-title-10-h3 { font-size: 34px; line-height: 40.8px; overflow-wrap: break-word; text-wrap-mode: wrap; word-break: break-word; }
  .quest-2-div2 { align-self: auto; width: 100%; padding-right: 0px; padding-left: 0px; }
  .quest-title-11-p { line-height: 25.5px; }
  .quest-title-12 { padding-right: 0px; padding-left: 0px; -webkit-mask-image: none; mask-image: none; }
  .quest-title-13-h5 { font-size: 22px; line-height: 26.4px; }
  .quest-questions-2-label { padding-right: 0px; padding-left: 0px; }
  .quest-title-14 { padding-right: 0px; padding-left: 0px; -webkit-mask-image: none; mask-image: none; }
  .quest-title-15-h5 { font-size: 22px; line-height: 26.4px; }
  .quest-description-2 { padding-right: 0px; padding-left: 0px; }
  .quest-title-16 { flex-grow: 1; flex-basis: 0px; width: 1px; }
  .quest-title-16-p { overflow-wrap: break-word; text-wrap-mode: wrap; word-break: break-word; }
  .quest-questions-2-label2 { padding-right: 0px; padding-left: 0px; }
  .quest-title-18-h3 { font-size: 34px; line-height: 40.8px; }
  .quest-title-19-p { line-height: 25.5px; }
  .quest-title-21-h5 { font-size: 22px; line-height: 26.4px; }
  .quest-title-23-h5 { font-size: 22px; line-height: 26.4px; }
  .legal-h3 { font-size: 34px; line-height: 40.8px; }
  .legal-2-h3 { font-size: 34px; line-height: 40.8px; }
  .styles-type-specimen-regular-h3 { font-size: 34px; line-height: 40.8px; }
  .styles-type-specimen-regular-2-h1 { font-size: 46px; line-height: 55.2px; }
  .styles-type-specimen-regular-3-h2 { font-size: 38px; line-height: 45.6px; }
  .styles-type-specimen-regular-4-h3 { font-size: 34px; line-height: 40.8px; }
  .styles-type-specimen-regular-5-h4 { font-size: 30px; line-height: 36px; }
  .styles-type-specimen-regular-6-h5 { font-size: 22px; line-height: 26.4px; }
  .styles-type-specimen-regular-7-h6 { font-size: 22px; line-height: 26.4px; }
  .styles-type-specimen-regular-8-p { line-height: 25.5px; }
  .styles-type-specimen-regular-12-h3 { font-size: 34px; line-height: 40.8px; }
  .styles-div9 { flex-direction: column; }
  .styles-system-color-swatch-copy { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-2 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-3 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-4 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-5 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-6 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-7 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-8 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-9 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-10 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-11 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-12 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-div12 { flex-direction: column; }
  .styles-system-color-swatch-copy-13 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-14 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-15 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-16 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-17 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-18 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-19 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-20 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-21 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-22 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-system-color-swatch-copy-23 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-type-specimen-regular-40-h3 { font-size: 34px; line-height: 40.8px; }
  .styles-div18 { flex-direction: column; }
  .styles-div19 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-div20 { opacity: 0.100572; transform: perspective(1200px) translateY(44.9714px); }
  .styles-div21 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-div23 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-div27 { flex-direction: column; }
  .styles-div28 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-div29 { transform: translateX(32.4012px); }
  .styles-div30 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-div31 { transform: translateX(58.6344px); }
  .styles-div32 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-div33 { transform: translateX(77.583px); }
  .styles-type-specimen-regular-51-h3 { font-size: 34px; line-height: 40.8px; }
  .styles-div37 { flex-direction: column; }
  .styles-div38 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-div40 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-div42 { flex-grow: 0; flex-basis: auto; width: 100%; }
  .styles-div44 { flex-grow: 0; flex-basis: auto; width: 100%; }
}
.vc { display: contents; }
@media (min-width: 1440px) and (max-width: 1919.98px) { .v:not(.v-1440) { display: none; } }
@media (min-width: 1920px) { .v:not(.v-1920) { display: none; } }
@media (min-width: 1280px) and (max-width: 1439.98px) { .v:not(.v-1280) { display: none; } }
@media (min-width: 768px) and (max-width: 1279.98px) { .v:not(.v-810) { display: none; } }
@media (max-width: 767.98px) { .v:not(.v-390) { display: none; } }

/* fix-project-hero.css */
/* Project pages — hero on tablet and phone (deliberate fix, differs from the Framer original).
   The original kept the desktop side padding of 248px at every width, so below 1280px the title and the
   browser mock-up were squeezed into a narrow column and on phones they collapsed completely.
   The inner parts (title size, stacked subtitle, mock-up details) were already designed per breakpoint;
   only the available width was wrong. Delete this file to get the original behaviour back. */

/* Tablet: the hero spans the page's own 48px margins, like the text below; the mock-up never gets wider
   than on a 1280px desktop (784px). */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .project-hero { padding-right: max(0px, calc((100% - 784px) / 2)); padding-left: max(0px, calc((100% - 784px) / 2)); }
  /* subtitle ("10 Pages | Heritage — …"): flows as one centred sentence, so a long one wraps between words
     in two even lines instead of leaving the dash alone at the end of the first */
  .project-post-div { display: block; text-align: center; text-wrap: balance; }
  .project-content, .project-content-2, .project-content-3,
  .project-content-p, .project-content-2-p, .project-content-3-p { display: inline; white-space: normal; }
}

/* Phone: lines up with the text below (20px from the screen edge). The title shrinks just enough for the longest one-word
   project name ("MarketingEmbodied") to stay on one line; from 445px up it has its designed 46px. */
@media (max-width: 767.98px) {
  .project-hero { padding-right: 10px; padding-left: 10px; }
  .project-title-2-h1 { font-size: min(46px, calc((100vw - 40px) / 8.8)); line-height: 1.2; overflow-wrap: normal; word-break: normal; }
}

/* keeps a hyphenated term together when a line wraps */
.nowrap { white-space: nowrap; }

/* ix-404.css */
/* 404 page — same minimal layout as the previous host's default "Page not found", in the site's own dark look. */
body[data-page="404"] { background-color: rgb(13, 13, 13); background-image: radial-gradient(65% 13% at 50% 4.7%, rgb(64, 64, 64) 0%, rgb(13, 13, 13) 100%); }
.notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; -webkit-font-smoothing: antialiased; font-family: Inter, "Inter Placeholder", sans-serif; color: rgb(153, 153, 153); text-align: center; }
.notfound-title { max-width: 240px; margin: 0 0 10px; font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 22px; line-height: 1.1; color: rgb(242, 242, 242); text-wrap: balance; }
.notfound-text { max-width: 240px; font-size: 14px; line-height: 1.4; text-wrap: balance; }
.notfound-link { display: inline-flex; align-items: center; justify-content: center; height: 40px; margin-top: 20px; padding: 0 18px; border-radius: 100px; background-color: rgba(255, 255, 255, 0.08); color: rgb(242, 242, 242); font-size: 14px; line-height: 1; transition: background-color 120ms ease; }
.notfound-link:hover { background-color: rgba(255, 255, 255, 0.16); }
.notfound-link:focus-visible { outline: 2px solid rgb(242, 242, 242); outline-offset: 2px; }

/* ix-base.css */
/* Shared motion tokens, measured from the original Framer components. */
:root {
  /* tween used by cards, the "Selected Work" arrow and contents links */
  --ease-tween: cubic-bezier(0.44, 0, 0.56, 1);
  /* Motion spring { stiffness: 500, damping: 60, mass: 1 } — use with 750ms */
  --spring-snappy: linear(0, 0.1379, 0.3419, 0.5128, 0.6424, 0.7381, 0.8083, 0.8598, 0.8974, 0.9249, 0.9451, 0.9598, 0.9706, 0.9785, 0.9843, 0.9885, 0.9916, 0.9938, 0.9955, 0.9967, 0.9976, 0.9982, 0.9987, 1, 1);
  /* Motion spring { duration: 0.4, bounce: 0.2 } — use with 400ms */
  --spring-bouncy: linear(0, 0.1873, 0.4978, 0.7484, 0.9025, 0.9795, 1.0091, 1.0152, 1.0123, 1.0076, 1.0038, 1.0015, 1);
}

/* Lenis smooth scrolling (same rules the original injected) */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ix-header.css */
/* Header interactions (home + info): Work/Info toggle, social links, tablet/phone link menu. */

/* --- Work/Info toggle: the inactive tab gets a soft gradient highlight on hover (desktop only) --- */
@property --toggle-hl { syntax: '<number>'; inherits: false; initial-value: 0; }
.toggle-work, .toggle-info { transition: --toggle-hl 750ms var(--spring-snappy); }
@media (hover: hover) and (min-width: 1280px) {
  .toggle-info[href] { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255 255 255 / var(--toggle-hl)) 100%); }
  .toggle-work[href] { background-image: linear-gradient(90deg, rgb(255 255 255 / var(--toggle-hl)) 0%, rgba(255, 255, 255, 0) 100%); }
  .toggle-info[href]:hover, .toggle-work[href]:hover { --toggle-hl: 0.05; }
}

/* --- Social links (desktop): pill background, wider gap and a 45° arrow turn on hover --- */
.social { transition: gap 750ms var(--spring-snappy), background-color 750ms var(--spring-snappy); }
.social-icon-wrap { transition: transform 750ms var(--spring-snappy); }
@media (hover: hover) and (min-width: 1280px) {
  .social:hover { gap: 16px; background-color: rgba(255, 255, 255, 0.3); }
  .social:hover .social-icon-wrap { transform: rotate(45deg); }
}
@media (hover: hover) and (min-width: 1280px) and (max-width: 1439.98px) { .social:hover { gap: 12px; } }
@media (hover: hover) and (min-width: 1920px) { .social:hover { gap: 18px; } }

/* --- Tablet / phone: the "@" button opens the link panel (class toggled by header.js) --- */
.socials-links { transition: opacity 750ms var(--spring-snappy); }
.socials-button { transition: background-color 750ms var(--spring-snappy); }
.socials-at { transition: inset 200ms cubic-bezier(0.6, 0, 0.88, 0.77), width 200ms cubic-bezier(0.6, 0, 0.88, 0.77), height 200ms cubic-bezier(0.6, 0, 0.88, 0.77), opacity 200ms cubic-bezier(0.6, 0, 0.88, 0.77); }
.socials-x { transition: inset 200ms cubic-bezier(0.12, 0.23, 0.5, 1), width 200ms cubic-bezier(0.12, 0.23, 0.5, 1), height 200ms cubic-bezier(0.12, 0.23, 0.5, 1), opacity 200ms cubic-bezier(0.12, 0.23, 0.5, 1); }
@media (max-width: 1279.98px) {
  .socials.is-open .socials-links { position: relative; top: auto; left: auto; opacity: 1; transform: none; }
  .socials.is-open .socials-button { background-color: rgba(255, 255, 255, 0.05); }
  .socials.is-open .socials-at { opacity: 0; }
  .socials.is-open .socials-x { opacity: 1; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .socials.is-open { gap: 24px; }
  .socials.is-open .socials-at { inset: 25px; width: 2px; height: 2px; }
  .socials.is-open .socials-x { inset: 14px; width: 24px; height: 24px; }
}
@media (max-width: 767.98px) {
  .socials.is-open { align-items: flex-end; align-content: flex-end; }
  .socials.is-open .socials-at { inset: 19px; width: 2px; height: 2px; }
  .socials.is-open .socials-x { inset: 11px; width: 18px; height: 18px; }
}

/* --- Deliberate fix (differs from the Framer original) ---
   At tablet width the original's menu listed "Book a Meeting, LinkedIn, LinkedIn, LinkedIn" with the last three
   unlinked (component defaults were never overridden for that breakpoint). Show the real links there instead.
   Delete this block to get the original's tablet menu back. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .social--8hxdk { display: none; }
  .social--15kp8, .social--1016v { display: flex; gap: 6px; padding: 6px 12px; }
  .social-label--2s6mi { display: flex; }
  .social-text--11zmf { display: block; }
  .social-icon-wrap--14tc3 { display: flex; }
  .social-icon--1p707, .social-icon--1nmde { display: block; width: 14px; height: 14px; }
}

/* ix-home.css */
/* Home interactions: project cards and the "Selected Work" arrow. */

/* --- Project cards (desktop): tint in the project colour, arrow slides right, mock-up rises — 0.5s tween --- */
.card-container--guart { --card-color: rgb(47, 62, 42); }
.card-container--velvetgrowth { --card-color: rgb(125, 5, 5); }
.card-container--marketingembodied { --card-color: rgb(29, 95, 154); }
.card-container--ifa { --card-color: rgb(74, 88, 97); }
.card-container--toma { --card-color: rgb(1, 128, 12); }
.card-container--thailotus { --card-color: rgb(97, 63, 13); }

@property --card-edge-alpha { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --card-edge-stop { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
.card-container { transition: background-color 0.5s var(--ease-tween); }
.card-arrow-icon { transition: transform 0.5s var(--ease-tween); }
.card-bottom { transition: bottom 0.5s var(--ease-tween); }
.card-color-helper { transition: inset 0.5s var(--ease-tween); }
.card-active-border, .card-active-border-2 { transition: --card-edge-alpha 0.5s var(--ease-tween), --card-edge-stop 0.5s var(--ease-tween); }

@media (hover: hover) and (min-width: 1280px) {
  .card:hover .card-container { background-color: var(--card-color); }
  .card:hover .card-arrow-icon { transform: translateX(100%); }
  .card:hover .card-bottom { bottom: 0; }
}
/* the widest layout also lights up the full border on hover */
@media (min-width: 1920px) {
  .card-active-border, .card-active-border-2 {
    -webkit-mask-image: linear-gradient(0deg, rgb(0 0 0 / var(--card-edge-alpha)) var(--card-edge-stop), rgb(0, 0, 0) 100%);
    mask-image: linear-gradient(0deg, rgb(0 0 0 / var(--card-edge-alpha)) var(--card-edge-stop), rgb(0, 0, 0) 100%);
  }
}
@media (hover: hover) and (min-width: 1920px) {
  .card:hover .card-active-border, .card:hover .card-active-border-2 { --card-edge-alpha: 1; --card-edge-stop: 0%; }
  .card:hover .card-color-helper { inset: 0 1px 1px 1px; }
}

/* --- "Selected Work" arrow: rests 3s, dips for 1s (0.5s each way), repeats. Phone shows a static arrow + label. --- */
@keyframes selected-work-dip {
  0% { translate: 0 var(--dip); }
  12.5%, 75% { translate: 0 0; }
  87.5%, 100% { translate: 0 var(--dip); }
}
.selected-work-arrow { --dip: 24px; animation: selected-work-dip 4s var(--ease-tween) -0.5s infinite; }
@media (min-width: 1920px) { .selected-work-arrow { --dip: 36px; } }
@media (min-width: 768px) and (max-width: 1279.98px) { .selected-work-arrow { --dip: 26px; } }
@media (max-width: 767.98px) { .selected-work-arrow { animation: none; } }

/* ix-project.css */
/* Interactions of the project ("collection") pages. Layout lives in site.css; behaviour in scripts/project.js. */

/* "Back" / "Book a Meeting" pill: on hover the gap between icon and label grows from 6 to 12px, so the pill
   widens by 6px away from the screen edge. Desktop variants only, same spring as the original button. */
@media (min-width: 1280px) {
  .back-social-button { transition: gap 750ms var(--spring-snappy); }
}
@media (min-width: 1280px) and (hover: hover) {
  .back:hover .back-social-button { gap: 12px; }
}

/* Contents link: on hover the label fades in from transparent to 85% white and snaps back to 70% on leave
   (this is what the original does, at every width). */
@keyframes contents-link-hover {
  from { color: rgba(255, 255, 255, 0); }
  to { color: rgba(255, 255, 255, 0.85); }
}
@media (hover: hover) {
  .contents-link:hover .contents-link-p { animation: contents-link-hover 300ms var(--ease-tween) both; }
}

/* Contents nav below 1280px: a collapsed pill that opens on tap ("Phone" -> "Phone - Active").
   project.js toggles .is-open and animates the size change. */
@media (max-width: 1279.98px) {
  .contents { justify-content: flex-start; }
  .contents::after { border-radius: inherit; }
  .contents.is-open { padding: 18px; border-top-right-radius: 0; cursor: auto; }
  .contents.is-open .contents-nav { gap: 16px; }
  .contents.is-open .contents-div { cursor: pointer; }
  .contents.is-open .contents-div2 { display: flex; align-self: stretch; align-items: flex-end; align-content: flex-end; gap: 12px; width: auto; }
  .contents.is-open .contents-contents-link-wrap,
  .contents.is-open .contents-contents-link-wrap-2 { display: block; }
  .contents.is-open .contents-link,
  .contents.is-open .contents-link-div { display: flex; }
  .contents.is-open .contents-link-p { display: block; font-size: 18px; line-height: 27px; }
}
@media (max-width: 767.98px) {
  .contents.is-open .contents-link-p { font-size: 16px; line-height: 24px; }
}

/* Before/After slider: the track is focusable but, like the original, shows no focus ring. */
.project-beforeafter [role="slider"] { outline: none; }

/* ix-quest.css */
/* Questionnaire forms: field states and the submit button variants.
   Values are taken from the original form components (focus/invalid rules) and from Motion's defaults,
   which the original button uses because it sets no transition of its own:
   values 0.3s cubic-bezier(0.25, 0.1, 0.35, 1), layout 0.45s cubic-bezier(0.4, 0, 0.1, 1) (see quest.js). */

/* ---- textarea ---- */
/* underline: 50% white -> text colour while focused */
.question-div::after { transition: border-color 0.3s var(--ease-tween), border-width 0.3s var(--ease-tween), border-style 0.3s var(--ease-tween); }
.question-div:focus-within::after { border-color: rgb(242, 242, 242); }
/* resize handle and scrollbar */
.question-textarea::-webkit-resizer { background: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2214%22 height=%2214%22><path d=%22m1.5 8 7-7M9 5.5l-3 3%22 stroke=%22%23999%22 stroke-width=%221.5%22 stroke-linecap=%22round%22></path></svg>") no-repeat; }
.question-textarea::-webkit-scrollbar { background: transparent; cursor: pointer; }
.question-textarea::-webkit-scrollbar-thumb:window-inactive { opacity: 0; }
.question-textarea::-webkit-scrollbar-corner { background: transparent; outline: none; }

/* ---- select ---- */
/* the chevron box is 16px wide plus its padding */
.quest-questions-div2::before { box-sizing: content-box; }
/* underline switches without a transition */
.quest-questions-div2:focus-within::after { border-color: rgb(242, 242, 242); }
/* placeholder colour while nothing is chosen, text colour afterwards */
.quest-questions-select { color: rgb(242, 242, 242); }
.quest-questions-select:required:invalid { color: rgba(255, 255, 255, 0.4); }
.quest-questions-select option { color: rgb(0, 0, 0); }
.quest-questions-select option:disabled { color: rgba(0, 0, 0, 0.4); }

/* ---- submit button ----
   variants: disabled (required answers missing, the base style), default, loading, success, error */
.submit { cursor: auto; transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.35, 1); }
.submit:focus-visible { outline: revert; }
.submit[data-variant="default"] { opacity: 1; cursor: pointer; }
.submit[data-variant="loading"] { min-height: 40px; opacity: 1; }
.submit[data-variant="success"],
.submit[data-variant="error"] { opacity: 1; }
.submit-div[hidden] { display: none; }
.submit[data-variant="success"] .submit-p,
.submit[data-variant="error"] .submit-p { color: rgb(0, 0, 0); }
/* black -> light when an answer is edited after sending; the curve is Motion's colour mix (square root of the eased progress) */
.submit[data-variant="default"] .submit-p,
.submit[data-variant="disabled"] .submit-p { transition: color 0.3s linear(0 0%, 0.046 0.5%, 0.0668 1%, 0.0993 2%, 0.1404 3.5%, 0.1781 5%, 0.2376 7.5%, 0.2948 10%, 0.3825 14%, 0.4648 18%, 0.5583 23%, 0.6396 28%, 0.7211 34%, 0.787 40%, 0.8473 47%, 0.8991 55%, 0.9368 63%, 0.9665 72%, 0.9871 82%, 0.997 91%, 1 100%); }

/* ix-styles-page.css */
/* Styles page, "Animations" section: the six demo boxes. Values measured from the original Framer effects.
   Like the original, these keep playing under prefers-reduced-motion (the Framer site never reduced them).
   site.css carries one frozen frame of these animations (opacity/transform per breakpoint); the rules here replace it. */

.styles-fx-slow { --styles-fx-duration: 2s; }
.styles-fx-medium { --styles-fx-duration: 1s; }
.styles-fx-fast { --styles-fx-duration: 0.7s; }

/* --- Layer in View: hidden 50px lower until scrolled into the viewport, then fade + move up; the reverse
       when it leaves. styles-page.js adds .styles-inview-in / .styles-inview-out. --- */
.styles-inview { opacity: 0; transform: perspective(1200px) translateY(50px); will-change: transform; }
.styles-inview-in { opacity: 1; transform: perspective(1200px) translateY(0px); animation: styles-inview-enter var(--styles-fx-duration) cubic-bezier(0.12, 0.23, 0, 0.98); }
.styles-inview-out { animation: styles-inview-exit var(--styles-fx-duration) cubic-bezier(0.12, 0.23, 0, 0.98); }
@keyframes styles-inview-enter {
  from { opacity: 0; transform: perspective(1200px) translateY(50px); }
  to { opacity: 1; transform: perspective(1200px) translateY(0px); }
}
@keyframes styles-inview-exit {
  from { opacity: 1; transform: perspective(1200px) translateY(0px); }
  to { opacity: 0; transform: perspective(1200px) translateY(50px); }
}

/* --- Loop: 80px to the right and back, forever. The easing runs forwards in both directions (Framer's
       "mirror"), so it is two keyframe segments rather than animation-direction: alternate. --- */
.styles-loop { transform: none; will-change: transform; animation: styles-loop calc(var(--styles-fx-duration) * 2) cubic-bezier(0.12, 0.23, 0, 1) infinite; }
.styles-loop-reset { animation: none; }
@keyframes styles-loop {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(80px); }
}