PageSourceSearch

https://okaydev.co/login

html okaydev.co collected 2026-10-03 23:30:36 UTC 324,131 bytes, 1,889 lines download raw bytes

1
2<!DOCTYPE html><html data-page="login" lang="en" class="okaydev-boot-pending is-dark" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#" data-use-project-image-blurred-bg="false">
3
4    <head><link
5rel="preconnect" href="https://images.okaydev.co" crossorigin><link
6rel="preconnect" href="https://servd-okaydev-site.b-cdn.net" crossorigin><link
7rel="preconnect" href="https://cdn.usefathom.com" crossorigin><link
8rel="preload" href="https://okaydev.co/dist/assets/AeonikPro-VF-DJagqNti.woff2" as="font" type="font/woff2" crossorigin><link
9rel="preload" href="https://okaydev.co/dist/assets/AeonikMono-Regular-BJhjWe-O.woff2" as="font" type="font/woff2" crossorigin><link
10rel="preload" href="https://okaydev.co/dist/assets/Megazoid-Regular-DP6yeqDh.woff2" as="font" type="font/woff2" crossorigin><meta
11charset="utf-8"><meta
12name="viewport" content="width=device-width,minimum-scale=1"> 
12<script>(function(){if(!window.matchMedia('(display-mode: standalone)').matches&&navigator.standalone!==true)return;document.documentElement.classList.add('is-standalone-app');var viewport=document.querySelector('meta[name="viewport"]');if(viewport&&viewport.content.indexOf('viewport-fit')===-1){viewport.content+=',viewport-fit=cover';}})();</script>
12 <style>.app-toolbar,.app-logo,.app-explore-nav{display:none}html.is-standalone-app{--app-safe-top:env(safe-area-inset-top,0px);--app-safe-right:env(safe-area-inset-right,0px);--app-safe-bottom:env(safe-area-inset-bottom,0px);--app-safe-left:env(safe-area-inset-left,0px);--app-content-left:var(--app-safe-left);--app-content-right:var(--app-safe-right)}html.is-standalone-app main[data-router-wrapper]{box-sizing:border-box;padding-left:var(--app-content-left);padding-right:var(--app-content-right)}html.is-standalone-app body{--app-chrome-bg:var(--bg-current,#121212)}html.is-standalone-app body.bento-page-shell{--app-chrome-bg:color-mix(in srgb,var(--bento-page-bg) 88%,#0c0c0c)}html.is-standalone-app body:after{content:'';position:fixed;inset:0;z-index:4000;border-left:var(--app-content-left) solid var(--app-chrome-bg);border-right:var(--app-content-right) solid var(--app-chrome-bg);pointer-events:none}html.is-standalone-app #okaydev-pwa-launch:not([hidden]){left:var(--app-content-left);right:var(--app-content-right)}@media (max-width:1023px),(hover:none) and (pointer:coarse){html.is-standalone-app{--app-logo-gutter:var(--gutter-x,16px);--app-logo-height:32px;--app-logo-top:calc(max(var(--app-safe-top),var(--app-status-tint-height,12px)) + var(--app-logo-gutter));--core-header-height:calc(var(--app-logo-top) + var(--app-logo-height) + var(--app-logo-gutter))}html.is-standalone-app .core-header,html.is-standalone-app body:not([data-page=home]) .core-footer{display:none}html.is-standalone-app[data-app-nav-side]{--app-rail-space:max(80px,var(--app-safe-left),var(--app-safe-right))}html.is-standalone-app[data-app-nav-side=left]{--app-content-left:var(--app-rail-space)}html.is-standalone-app[data-app-nav-side=right]{--app-content-right:var(--app-rail-space)}}</style> 
12<script>(function(){var root=document.documentElement;if(!root.classList.contains('is-standalone-app')||!window.matchMedia('(max-width: 1023px), (hover: none) and (pointer: coarse)').matches)return;var style=getComputedStyle(root);var left=parseFloat(style.getPropertyValue('--app-safe-left'))||0;var right=parseFloat(style.getPropertyValue('--app-safe-right'))||0;if(Math.max(left,right)>0){var side=left>right?'left':'right';if(left===right&&root.clientWidth>window.innerHeight){var angle=window.screen.orientation?window.screen.orientation.angle:window.orientation;var rotation=(((angle||0)%360)+360)%360;if(rotation===270)side='left';else if(rotation===90)side='right';}
13root.dataset.appNavSide=side;}})();</script>
13 <meta
14name="csrf-token-name" content="CRAFT_CSRF_TOKEN"><meta
15name="csrf-token" content="tF5kAD0SxdXjLRXc8VJ4PaZ5IRVU2hNPiLH11EpmGuwtRLpWOYqoRswXMFNNZJaxjlosupgHOw3hLnRhDop4fNz4xpMbDymAHwbKPg3hmj4="><link
16id="favicon-png" class="favicon-default" rel="icon" type="image/png" href="/dist/images/icons/favicon-96x96.png" sizes="96x96" /><link
17id="favicon-svg" class="favicon-default" rel="icon" type="image/svg+xml" href="/dist/images/icons/favicon.svg" /><link
18id="favicon-ico" class="favicon-default" rel="shortcut icon" href="/dist/images/icons/favicon.ico" /><link
19rel="manifest" href="/manifest.webmanifest"><link
20rel="apple-touch-icon" sizes="1024x1024" href="/pwa/stacked-purple-1024.png"><meta
21name="apple-mobile-web-app-capable" content="yes"><meta
22name="apple-mobile-web-app-status-bar-style" content="default"><link
23rel="apple-touch-startup-image" href="/pwa/startup/320-568-2-portrait-v3.png" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link
24rel="apple-touch-startup-image" href="/pwa/startup/320-568-2-landscape-v3.png" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link
25rel="apple-touch-startup-image" href="/pwa/startup/375-667-2-portrait-v3.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link
26rel="apple-touch-startup-image" href="/pwa/startup/375-667-2-landscape-v3.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link
27rel="apple-touch-startup-image" href="/pwa/startup/414-736-3-portrait-v3.png" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link
28rel="apple-touch-startup-image" href="/pwa/startup/414-736-3-landscape-v3.png" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link
29rel="apple-touch-startup-image" href="/pwa/startup/375-812-3-portrait-v3.png" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link
30rel="apple-touch-startup-image" href="/pwa/startup/375-812-3-landscape-v3.png" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link
31rel="apple-touch-startup-image" href="/pwa/startup/390-844-3-portrait-v3.png" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link
32rel="apple-touch-startup-image" href="/pwa/startup/390-844-3-landscape-v3.png" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link
33rel="apple-touch-startup-image" href="/pwa/startup/393-852-3-portrait-v3.png" media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link
34rel="apple-touch-startup-image" href="/pwa/startup/393-852-3-landscape-v3.png" media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link
35rel="apple-touch-startup-image" href="/pwa/startup/402-874-3-portrait-v3.png" media="screen and (device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link
36rel="apple-touch-startup-image" href="/pwa/startup/402-874-3-landscape-v3.png" media="screen and (device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link
37rel="apple-touch-startup-image" href="/pwa/startup/414-896-2-portrait-v3.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link
38rel="apple-touch-startup-image" href="/pwa/startup/414-896-2-landscape-v3.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link
39rel="apple-touch-startup-image" href="/pwa/startup/414-896-3-portrait-v3.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link
40rel="apple-touch-startup-image" href="/pwa/startup/414-896-3-landscape-v3.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link
41rel="apple-touch-startup-image" href="/pwa/startup/428-926-3-portrait-v3.png" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link
42rel="apple-touch-startup-image" href="/pwa/startup/428-926-3-landscape-v3.png" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link
43rel="apple-touch-startup-image" href="/pwa/startup/430-932-3-portrait-v3.png" media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link
44rel="apple-touch-startup-image" href="/pwa/startup/430-932-3-landscape-v3.png" media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link
45rel="apple-touch-startup-image" href="/pwa/startup/440-956-3-portrait-v3.png" media="screen and (device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><link
46rel="apple-touch-startup-image" href="/pwa/startup/440-956-3-landscape-v3.png" media="screen and (device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><link
47rel="apple-touch-startup-image" href="/pwa/startup/768-1024-2-portrait-v3.png" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link
48rel="apple-touch-startup-image" href="/pwa/startup/768-1024-2-landscape-v3.png" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link
49rel="apple-touch-startup-image" href="/pwa/startup/810-1080-2-portrait-v3.png" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link
50rel="apple-touch-startup-image" href="/pwa/startup/810-1080-2-landscape-v3.png" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link
51rel="apple-touch-startup-image" href="/pwa/startup/820-1180-2-portrait-v3.png" media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link
52rel="apple-touch-startup-image" href="/pwa/startup/820-1180-2-landscape-v3.png" media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link
53rel="apple-touch-startup-image" href="/pwa/startup/834-1112-2-portrait-v3.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link
54rel="apple-touch-startup-image" href="/pwa/startup/834-1112-2-landscape-v3.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link
55rel="apple-touch-startup-image" href="/pwa/startup/834-1194-2-portrait-v3.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link
56rel="apple-touch-startup-image" href="/pwa/startup/834-1194-2-landscape-v3.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link
57rel="apple-touch-startup-image" href="/pwa/startup/744-1133-2-portrait-v3.png" media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link
58rel="apple-touch-startup-image" href="/pwa/startup/744-1133-2-landscape-v3.png" media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link
59rel="apple-touch-startup-image" href="/pwa/startup/1024-1366-2-portrait-v3.png" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link
60rel="apple-touch-startup-image" href="/pwa/startup/1024-1366-2-landscape-v3.png" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><link
61rel="apple-touch-startup-image" href="/pwa/startup/1032-1376-2-portrait-v3.png" media="screen and (device-width: 1032px) and (device-height: 1376px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><link
62rel="apple-touch-startup-image" href="/pwa/startup/1032-1376-2-landscape-v3.png" media="screen and (device-width: 1032px) and (device-height: 1376px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><meta
63name="apple-mobile-web-app-title" content="OkayDev" /><meta
64id="msapplication-tile-color" name="msapplication-TileColor" content="#121212"><meta
65name="msapplication-config" content="/dist/browserconfig.xml"><meta
66id="theme-color-meta" name="theme-color" content="#121212"><!--# if expr="$HTTP_COOKIE=/critical\-css\=1/" --><style>@media (max-width:1023px){.project-page-title{grid-area:title;margin-block:0;padding-block:0;font-size:22px;line-height:40px;white-space:normal}.project-page-layout .author-ctas,.project-page-layout .author-ctas-2,.project-page-layout .bento-project-overlay-actions{grid-area:metrics;width:100%}}@font-face{font-display:swap;font-family:Aeonik;font-style:normal;font-weight:100 900;src:url(/dist/assets/AeonikPro-VF-DJagqNti.woff2) format("woff2")}@font-face{font-display:optional;font-family:Megazoid;font-style:normal;font-weight:400;src:url(/dist/assets/Megazoid-Regular-DP6yeqDh.woff2) format("woff2")}@font-face{font-display:swap;font-family:Aeonik Mono;font-style:normal;font-weight:400;src:url(/dist/assets/AeonikMono-Regular-BJhjWe-O.woff2) format("woff2")}.bento-identity-card__content>.bento-identity-card__header{display:flex;align-items:center;justify-content:space-between;gap:12px;grid-area:eyebrow;min-width:0;height:11px;min-height:0}.bento-identity-card__team-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;grid-area:badges}.bento-identity-card__avatar{grid-area:avatar;align-self:start;justify-self:start;position:relative;width:auto;height:2lh;aspect-ratio:4/5;font-size:var(--bento-identity-name-fit-size,clamp(28px,4.4vw,44px));line-height:.92;perspective:900px}.bento-identity-card__copy{grid-area:name;padding-right:clamp(8px,1vw,14px)}@media (max-width:767px){.bento-identity-card__content>
66.bento-identity-card__header .bento-details-card__actions{grid-area:utility;width:100%;margin:4px 0 0;border-top:1px solid;padding-top:calc(var(--bento-identity-content-gap) + 4px - 6.5px)}}.bento-identity-card__actions{grid-area:actions;display:grid;align-self:end;gap:10px}.bento-social-icons.bento-identity-card__profile-social-icons{--bento-profile-social-hit-size:38px;grid-area:social;align-self:start;width:100%;margin-left:calc((var(--bento-profile-social-hit-size) - 19px)/-2)}.bento-identity-card__overlay-details{--bento-gig-fade-width:1.75em;--bento-gig-fade-stops:rgb(from var(--bento-theme-surface) r g b/0%) 0%,rgb(from var(--bento-theme-surface) r g b/1.5%) 18%,rgb(from var(--bento-theme-surface) r g b/6%) 36%,rgb(from var(--bento-theme-surface) r g b/13%) 54%,rgb(from var(--bento-theme-surface) r g b/24%) 72%,rgb(from var(--bento-theme-surface) r g b/37%) 86%,rgb(from var(--bento-theme-surface) r g b/100%) 100%;display:block;grid-area:work;min-width:0}.bento-stats-card__emoji{grid-area:1/1;display:block;line-height:1;will-change:transform,opacity}@media (min-width:0){.bento-identity-card.is-expanded .bento-identity-card__team-badges{grid-area:auto;margin-top:12px}.bento-identity-card.is-expanded .bento-identity-card__profile-column{--bento-profile-info-space:clamp(18px,2.2vw,28px);grid-area:profile;gap:var(--bento-profile-info-space)}.bento-identity-card.is-expanded .bento-identity-card__information-column{grid-area:information;gap:0;padding-top:clamp(8px,.85vw,12px)}}.bento-user-hub-aside.bento-identity-card .bento-user-hub-aside__utility-actions{grid-area:utility;align-self:end;width:100%;margin:0 0 -6.5px;border:0;border-top:1px solid;padding:calc(var(--bento-identity-content-gap) - 6.5px - 1px) 0 0;color:var(--bento-theme-ink)}.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date{display:flex;align-items:stretch;gap:inherit;grid-area:head;min-width:0;width:100%}.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-client,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-client,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-client,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-client,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-credits{grid-area:unset;grid-column:1/-1;width:100%}@media (max-width:1023px){.bento-project-card.is-expanded:has([data-bento-project-overlay-header]) .bento-project-card__exp
66anded-title{display:block;grid-area:title;position:relative;min-width:0;height:var(--overlay-close-size);margin:0;padding:0;overflow:hidden;font-size:22px;line-height:var(--overlay-close-size);white-space:nowrap}.bento-project-card.is-expanded:has([data-bento-project-overlay-header]) .author-ctas,.bento-project-card.is-expanded:has([data-bento-project-overlay-header]) .author-ctas-2{grid-area:metrics;width:100%;min-width:0}.bento-project-card.is-expanded:has([data-bento-project-overlay-header]) .bento-card__close{grid-area:close;align-self:start;width:var(--overlay-close-size);height:var(--overlay-close-size);margin-left:0}.page-project-overlay .bento-project-card__expanded-title{grid-area:title;height:var(--overlay-close-size);margin:0;padding:0;font-size:22px;line-height:var(--overlay-close-size)}.page-project-overlay .bento-card__close{grid-area:close;width:var(--overlay-close-size);height:var(--overlay-close-size);margin-left:0}.page-project-overlay .author-ctas,.page-project-overlay .author-ctas-2,.page-project-overlay .bento-project-overlay-actions{grid-area:metrics;width:100%}}@font-face{font-display:swap;
66font-family:FallbackFont;src:local("Arial");font-weight:400}@font-face{font-display:swap;font-family:FallbackFontMono;src:local("monospace");font-weight:400}@font-face{font-display:swap;font-family:FallbackFontBold;src:local("Arial Bold");font-weight:800}@font-face{font-display:swap;font-family:Aeonik;font-weight:100 900;font-style:italic;src:url(/dist/assets/AeonikPro-Italic-VF-DGkIg-ar.woff2) format("woff2"),url(/dist/assets/AeonikPro-Italic-VF-WifKrdD1.woff) format("woff")}@font-face{font-display:swap;font-family:Aeonik;font-weight:100 900;font-style:normal;src:url(/dist/assets/AeonikPro-VF-DJagqNti.woff2) format("woff2"),url(/dist/assets/AeonikPro-VF-B5-mzo4h.woff) format("woff")}@font-face{font-display:swap;font-family:Aeonik Mono;font-weight:400;font-style:normal;src:url(/dist/assets/AeonikMono-Regular-BJhjWe-O.woff2) format("woff2"),url(/dist/assets/AeonikMono-Regular-v8syvusg.woff) format("woff")}@font-face{font-display:swap;font-family:Megazoid;font-weight:400;font-style:normal;src:url(/dist/assets/Megazoid-Regular-DP6yeqDh.woff2) format("woff2"),url(/dist/assets/Megazoid-Regular-DDQUTSy0.woff) format("woff")}[data-page=login] [data-handle=login]{display:flex;flex-direction:column;min-height:calc(100svh - var(--core-header-height))}[data-page=login] [data-handle=login] .login-container{display:flex;flex:1 1 auto;align-items:center;justify-content:center;width:100%;padding-top:calc(var(--gutter-y)*2);padding-bottom:calc(var(--gutter-y)*3)}[data-page=login] [data-handle=login] .login-container .login-panel{width:100%;max-width:360px;margin-inline:auto}[data-page=login] [data-handle=login] .login-container .heading{font-family:Megazoid,FallbackFontBold,arial,helvetica,sans-serif;font-feature-settings:"liga" on,"kern" on,"ss01" on,"ss04" on,"ss12" on;font-size:clamp(48px,5vw,192px);font-weight:400;letter-spacing:.005em;line-height:1;font-size:clamp(40px,6vw,64px);margin-bottom:28px;text-align:center;text-transform:uppercase}[data-page=login] [data-handle=login] .login-container .content{width:100%}[data-page=login] [data-handle=login] .login-container form{display:flex;flex-direction:column;gap:18px;width:100%}[data-page=login] [data-handle=login] .login-container .field-container{position:relative;display:flex;flex-direction:column;align-items:stretch;width:100%}[data-page=login] [data-handle=login] .login-container .field-container label{margin-bottom:8px}[data-page=login] [data-handle=login] .login-container .field-container #password{padding-right:48px}[data-page=login] [data-handle=login] .login-container .field-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}[data-page=login] [data-handle=login] .login-container .field-label-row label{margin-bottom:0}[data-page=login] [data-handle=login] .login-container .password-reveal-wrapper{position:absolute;top:auto;right:16px;bottom:14px;width:20px;height:20px;transform:none}[data-page=login] [data-handle=login] .login-container .password-reveal-wrapper label{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;border-radius:5px}[data-page=login] [data-handle=login] .login-container .password-reveal-wrapper label:after{display:none}[data-page=login] [data-handle=login] .login-container .password-reveal-wrapper #password-reveal{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:1;clip-path:inset(50%)}[data-page=login] [data-handle=login] .login-container .password-reveal-wrapper .eye-fill{display:none}[data-page=login] [data-handle=login] .login-container .password-reveal-wrapper svg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}[data-page=login] [data-handle=login] .login-container .label-wrap{margin:2px 0 4px}[data-page=login] [data-handle=login] .login-container .label-wrap input[type=checkbox]{flex-shrink:0;background-color:color-mix(in srgb,var(--text-current) 6%,var(--bg-current))!important;border:1px solid color-mix(in srgb,var(--text-current) 28%,transparent)!important;border-radius:4px}[data-page=login] [data-handle=login] .login-container .label-wrap input[type=checkbox]:before{border-radius:2px;box-shadow:inset 1em 1em var(--text-current)}[data-page=login] [data-handle=login] .login-container button[type=submit]{width:100%;margin-top:6px}[data-page=login] [data-handle=login] .login-container .forgot-password{display:inline-block;position:relative;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;
66font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:12px;line-height:1;text-transform:uppercase;position:absolute;top:0;right:0;flex-shrink:0;color:color-mix(in srgb,var(--text-current) 70%,transparent)}[data-page=login] [data-handle=login] .login-container .sign-up-message{margin-top:28px;text-align:center;color:color-mix(in srgb,var(--text-current) 70%,transparent)}[data-page=login] [data-handle=login] .login-container .sign-up-message a{display:inline-block;position:relative;font-weight:700;color:var(--text-current)}@media (min-width:768px){.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date{grid-area:head}.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-client,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-client,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-client,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-client,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-credits{grid-area:unset;grid-column:auto;width:100%}
66.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-agency{grid-area:agency}.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-client,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-client,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-client,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-client{grid-area:client}.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-credits{grid-area:credits}.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section{grid-area:awards}[data-page=login] [data-handle=login] .login-container .forgot-password:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--text-current);transform:scaleX(0);transform-origin:right top;will-change:transform}[data-page=login] [data-handle=login] .login-container .sign-up-message a:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--text-current);transform:scaleX(0);transform-origin:right top;will-change:transform}.hide-on-desktop{display:none!important}}body.is-dark [data-handle=login] .login-container form label{margin-left:0;color:var(--text-current)}body.is-dark [data-handle=login] .login-container form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]){box-sizing:border-box;width:100%;padding:12px 14px;font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif!important;font-size:16px!important;line-height:1.4;color:var(--text-current)!important;caret-color:var(--text-current);background-color:color-mix(in srgb,var(--text-current) 6%,var(--bg-current))!important;border:1px solid color-mix(in srgb,var(--text-current) 14%,transparent)!important;border-radius:8px;will-change:transform}body.is-dark [data-handle=login] .login-container form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):-webkit-autofill{-webkit-text-fill-color:var(--text-current)!important;box-shadow:0 0 0 1000px color-mix(in srgb,var(--text-current) 6%,var(--bg-current)) inset!important}body.is-dark [data-handle=login] .login-container form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):-webkit-autofill{will-change:transform}body.is-dark [data-handle=login] .login-container form #password{padding-right:48px}body.is-dark [data-handle=login] .login-container form .password-reveal-wrapper svg,body.is-dark [data-handle=login] .login-container form .password-reveal-wrapper svg path{f
66ill:var(--text-current)!important}.bento-customizer.is-floating.is-project-details[data-project-details-panel] .publish-toggle-label>*{grid-area:1/1}.home-feature-directory-stack .pagination-actions,[data-handle=directory] .directory-container .pagination-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-start;min-width:0}.home-feature-directory-stack .pagination-info,[data-handle=directory] .directory-container .pagination-info{font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-variant-numeric:lining-nums proportional-nums slashed-zero;font-feature-settings:"ss08" on,"ss02" on,"ss07" on;font-size:14px;line-height:1.5;letter-spacing:.21px;grid-area:info;align-self:center;text-align:right;min-width:0}.home-feature-directory-stack .pagination-upgrade,[data-handle=directory] .directory-container .pagination-upgrade{font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-variant-numeric:lining-nums proportional-nums slashed-zero;font-feature-settings:"ss08" on,"ss02" on,"ss07" on;font-size:14px;line-height:1.5;letter-spacing:.21px;grid-area:upgrade;display:flex;align-items:baseline;justify-content:center;gap:10px;justify-self:center;text-align:center}@media (max-width:767px){.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col:not(.is-people)>*,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col:not(.is-people)>*,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col:not(.is-people)>*,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col:not(.is-people)>*{grid-area:auto;grid-column:1/-1}[data-handle=home] .work-item{position:relative;grid-area:1/1;width:min(305px,100vw - 2*var(--gutter-cap));border-radius:6px;visibility:hidden;opacity:0}}*,:after,:before{box-sizing:border-box}body{min-height:100vh;min-height:100dvh;margin:0}ul[class]{padding:0;list-style-type:""}a{text-decoration:none}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}button,input{font:inherit}:root{--metric-count-ch:6ch;--metric-count-min-width:6ch;--metric-action-icon-size:20px;--metric-action-row-gap:6px;--metric-action-inner-gap:4px;--metric-action-cluster-min-width:calc(var(--metric-action-icon-size) + var(--metric-action-inner-gap) + var(--metric-count-min-width));--metric-profile-pill-aspect-ratio:2/1}body{color:var(--text-current);font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-variant-numeric:lining-nums proportional-nums slashed-zero;font-feature-settings:"ss02" on,"ss07" on,"ss08" on;font-weight:400;font-style:normal;font-size:18px;line-height:1.5;letter-spacing:.18px;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}.button,button,input,label{font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-feature-settings:"ss08" on,"ss02" on,"ss07" on;font-size:18px;line-height:1.5;letter-spacing:.18px;border-radius:0;font-weight:400;font-variant-numeric:lining-nums proportional-nums slashed-zero;font-feature-settings:"ss02" on,"ss07" on,"ss08" off;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}input,label{text-transform:none}label{font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:12px;line-height:1;text-transform:uppercase}input[type=password]:not(:placeholder-shown){font-family:sans-serif}input:-webkit-autofill{-webkit-text-fill-color:inherit;box-shadow:0 0 0 1000px var(--bg-current,#fff) inset!important}input:-webkit-autofill{will-change:transform}body.is-dark input:-webkit-autofill{background-color:transparent!important;background-image:none!important;-webkit-text-fill-color:var(--text-current);box-shadow:0 0 0 1000px var(--bg-current) inset!important}body.is-dark input:-webkit-autofill{will-change:transform}form label{margin-bottom:10px;margin-left:17px}form input{background-color:#fff;border:1px solid var(--text-current);border-radius:5px;padding:16px;width:100%;display:block;resize:none;will-change:transform}form input:-webkit-autofill{-webkit-text-fill-color:inherit;box-shadow:0 0 0 1000px #fff inset!important}form input:-webkit-autofill{will-change:transform}form input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-grid!important;place-content:center;min-width:18px;min-height:18px;width:auto;height:auto;padding:0}form input[type=checkbox]:before{content:"";display:block;width:11px;height:11px;border-radius:50%;transform:scale(0);box-shadow:inset 1em 1em var(--text-current);will-change:transform,opacity}form button{margin:0;border:0;background-color:transparent;color:inherit;-webkit-appearance:none;appearance:none;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;
66font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:14px;line-height:1;text-transform:uppercase;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:22px;padding:0 25px;color:var(--bg-current);background-color:var(--text-current);overflow:hidden;margin-top:calc(var(--gutter-y)*.75);will-change:transform}.heading,h1{margin-top:0;margin-bottom:0;font-weight:800;line-height:1}h1{font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-weight:900;font-size:clamp(63px,6.7vw,146px);font-feature-settings:"dlig" on,"ss11" on,"ss09" on,"ss08" on,"ss05" on,"ss07" on,"ss06" on,"ss03" on,"case" on;line-height:.96;letter-spacing:-1.92px}p{margin-top:1em;margin-bottom:0}p:first-child{margin-top:0}.label-1{font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:14px;line-height:1;text-transform:uppercase}.label-2{font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:12px;line-height:1;text-transform:uppercase}@media screen and (max-width:767px){form label{margin-left:0}}:root{box-sizing:border-box;--vw:100vw;--vh:100vh;--text-current:#fff;--bg-current:#121212}*,:after,:before{box-sizing:inherit}@media (max-width:1023px),(hover:none) and (pointer:coarse){*,:after,:before{will-change:auto!important}}body,html{width:100%;margin:0;background-color:var(--bg-current)}body{overflow-x:clip}body.is-dark,html.is-dark{color-scheme:dark}.bg-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;will-change:transform,opacity}.bg-layer--dark{background-color:#121212;opacity:1}.bg-layer--light{background-color:#fff;opacity:0}main[data-router-wrapper]{position:relative;z-index:1;width:100%}img,svg{vertical-align:middle}.page-container{padding-top:60px;padding-bottom:calc(var(--gutter-y)*3)}@media (max-width:767px){h1{letter-spacing:-1.26px}.hide-on-mobile{display:none!important}.page-container{padding-top:calc(var(--gutter-y)*2);padding-bottom:calc(var(--gutter-y)*6);backface-visibility:hidden}.okay-form .label-wrap{margin-left:17px}}.wrapper{width:100%;margin-left:auto;margin-right:auto;padding-left:var(--gutter-cap);padding-right:var(--gutter-cap)}[data-handle]>.page-container.wrapper{max-width:var(--page-content-shell-max-width);margin-left:auto;margin-right:auto}:is([data-handle=login],[data-handle=signUp],[data-handle=businessSignUp],[data-handle=editProfile],[data-handle=managePortfolio],[data-handle=manageTeam],[data-handle=membership],[data-handle=accountSettings],[data-handle=accountSettingsBusiness],[data-handle=notifications])>.page-container.wrapper{max-width:calc(1280px + var(--core-header-outer-padding)*2);margin-left:auto;margin-right:auto;padding-left:calc(var(--core-header-outer-padding) + var(--core-header-inner-padding-x-left));padding-right:calc(var(--core-header-outer-padding) + var(--core-header-inner-padding-x-right))}craft-csrf-input{display:none!important}img{max-width:100%}dialog:not([open]){display:none}button{touch-action:manipulation}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.okay-form .heading{font-family:Megazoid,FallbackFontBold,arial,helvetica,sans-serif;font-feature-settings:"liga" on,"kern" on,"ss01" on,"ss04" on,"ss12" on;font-size:clamp(48px,5vw,192px);font-weight:400;letter-spacing:.005em;line-height:1;margin-bottom:var(--gutter-y)}.okay-form .field-container{display:flex;flex-wrap:wrap;align-items:center;width:100%}.okay-form .field-container:has([required]) label:after{content:"*";margin-left:5px;color:#dc3545}.okay-form .label-wrap{display:flex;align-items:center}.okay-form .label-wrap input{margin-right:6px}.okay-form button[type=submit]{margin-top:0}.brand-variant-card__choice>span{grid-area:description;color:#525252;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-size:10px;line-height:1.2;text-transform:uppercase}.brand-variant-swatches{display:flex;flex-wrap:wrap;grid-area:swatches;gap:8px}
66.brand-download-links{display:flex;grid-area:downloads;justify-self:end;gap:6px}:root{--color-bg-black-rgb:12,12,12}:root{--color-bg-gray-dark-4-rgb:2,2,2}:root{--color-bg-gray-dark-3-rgb:2,2,2}:root{--color-bg-gray-dark-2-rgb:82,82,82}:root{--color-bg-gray-dark-1-rgb:129,129,129}:root{--color-bg-gray-light-4-rgb:242,242,242}:root{--color-bg-gray-light-3-rgb:234,234,234}:root{--color-bg-gray-light-2-rgb:204,204,204}:root{--color-bg-gray-light-1-rgb:184,184,184}:root{--color-bg-gray-rgb:102,102,102}:root{--color-bg-gray-light-rgb:191,191,191}:root{--color-bg-white-rgb:255,255,255}:root{--color-bg-yellow-rgb:238,230,66}:root{--color-bg-yellow-light-rgb:255,253,217}:root{--color-bg-red-rgb:236,66,66}:root{--color-bg-red-light-rgb:255,217,217}:root{--color-bg-orange-rgb:237,148,66}:root{--color-bg-orange-light-rgb:255,235,217}:root{--color-bg-teal-rgb:66,227,237}:root{--color-bg-teal-light-rgb:204,252,255}:root{--color-bg-purple-rgb:109,66,237}:root{--color-bg-purple-light-rgb:236,229,255}:root{--color-bg-green-rgb:66,237,145}:root{--color-bg-green-light-rgb:204,255,228}:root{--color-bg-placeholder-light-rgb:241,241,241}:root{--color-bg-placeholder-dark-rgb:0,0,0}:root{--max-width:1920px;--column-count:12;--gutter-cap:36px;--gutter-x:24px;--gutter-y:40px;--page-content-max-width:1280px;--page-content-shell-max-width:calc(var(--page-content-max-width) + (var(--gutter-cap)*2));--social-feed-max-width:800px;--social-feed-grid-gap:24px;--text-current:#fff;--bg-current:#121212}:root{--reduced-motion:1}:root{--core-header-outer-padding:calc(var(--gutter-cap)*.5);--core-header-hamburger-padding-right:23px;--core-header-hamburger-svg-trim:4px;--core-header-inner-padding-y:13px;--core-header-inner-padding-x-left:var(--core-header-inner-padding-y);--core-header-inner-padding-x-right:calc(var(--core-header-hamburger-padding-right) - var(--core-header-hamburger-svg-trim));--core-header-logo-height:32px;--core-header-control-height:36px;--core-header-inner-height:calc((var(--core-header-inner-padding-y)*2) + max(var(--core-header-logo-height),var(--core-header-control-height)));
66--core-header-height:calc((var(--core-header-outer-padding)*2) + var(--core-header-inner-height));--core-header-pill-radius:9999px;--core-header-avatar-indicator-ring:var(--bg-current);--core-header-shadow:0 10px 6px 0 rgba(0,0,0,.06);--core-header-shadow-dark:0 4px 10px rgba(0,0,0,.4);--core-header-glass-tint-rgb:255 255 255;--core-header-glass-tint-alpha:1;--core-header-glass-highlight-alpha:.7;--core-header-glass-border-alpha:.2;--core-header-glass-backdrop-blur:2px;--core-header-glass-saturate:1.2;--core-header-glass-contrast:1.15;--core-header-glass-shadow-y:6px;--core-header-glass-shadow-blur:10px;--core-header-glass-shadow-alpha:.12;--core-header-glass-sheen-opacity:0;--core-header-glass-sheen-highlight-opacity:max(var(--core-header-glass-sheen-opacity),0);--core-header-glass-sheen-shade-opacity:max(calc(var(--core-header-glass-sheen-opacity)*-1),0);--core-header-glass-fallback-blur:3px;--core-header-glass-fallback-opacity:.25;--core-header-glass-fallback-edge-alpha:.5;--core-header-glass-fallback-edge-shadow-alpha:.5;--core-header-glass-fallback-edge-size:12px;--core-header-glass-liquid-scale:30;--core-header-glass-chromatic-aberration:.4;--core-header-glass-map-depth:1;--core-header-glass-map-edge-waist:.5;--core-header-glass-map-edge-x:1.5;--core-header-glass-map-edge-y:.45;--core-header-glass-map-center-inset-x:.9;--core-header-glass-map-center-inset-y:.55;--core-header-glass-map-center-blur:.2;--core-header-glass-map-center-opacity:1;--core-header-hover-intent:.1s}.core-header-slot{position:relative;flex-shrink:0;height:var(--core-header-height)}.core-header{position:fixed;top:0;left:0;right:0;z-index:2000;width:100%;padding:var(--core-header-outer-padding) var(--gutter-cap);color:var(--text-current);transform:translate3d(0,var(--core-header-scroll-shift,0),0);backface-visibility:hidden}@media (prefers-reduced-motion:no-preference){html:not([data-header-intro-seen=true]) .core-header[data-header-enter-pending] .btn-mobile-nav,html:not([data-header-intro-seen=true]) .core-header[data-header-enter-pending] .core-header-pill,html:not([data-header-intro-seen=true]) .core-header[data-header-enter-pending] .core-logo-container,html:not([data-header-intro-seen=true]) .core-header[data-header-enter-pending] .core-nav-list-primary>li:not(.is-empty),html:not([data-header-intro-seen=true]) .core-header[data-header-enter-pending] .okaydev-navbar-auth-root,html:not([data-header-intro-seen=true]) .core-header[data-header-enter-pending] .okaydev-navbar-leading-root{visibility:hidden}}body[data-header-theme=purple] .core-header .header-backdrop{opacity:1}body[data-header-theme=purple] .core-header-pill{box-shadow:var(--core-header-shadow)}body[data-header-theme=purple] .core-header{--core-header-avatar-indicator-ring:#6d42ed;color:#fff}body[data-header-theme=purple] .core-header .btn-mobile-nav,body[data-header-theme=purple] .core-header .core-nav-list-primary a.label-1,body[data-header-theme=purple] .core-header .sign-in a.label-1{color:#fff}body[data-header-theme=purple] .core-header .core-nav a.btn-core-sign-up{--btn-core-sign-up-bg:#fff;--btn-core-sign-up-fg:#0c0c0c;--btn-core-sign-up-hover-bg:#0c0c0c;--btn-core-sign-up-hover-fg:#fff}body[data-header-theme=purple] .core-header .header-backdrop{background-color:#6d42ed}body.is-dark{--core-header-glass-tint-rgb:12 12 12;--core-header-glass-tint-alpha:1;--core-header-glass-highlight-alpha:0;--core-header-glass-saturate:1.2;--core-header-glass-contrast:1.15;--core-header-glass-shadow-y:6px;--core-header-glass-shadow-blur:10px;--core-header-glass-shadow-alpha:.45;--core-header-glass-sheen-opacity:-1;--core-header-glass-liquid-scale:20;--core-header-glass-chromatic-aberration:.7;--core-header-glass-map-depth:1;--core-header-glass-map-edge-waist:.5;--core-header-glass-map-edge-y:.8;--core-header-glass-map-center-inset-y:.4}.core-header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--gutter-x);position:relative;width:100%;max-width:var(--page-content-max-width);margin-inline:auto;min-height:var(--core-header-inner-height);padding:var(--core-header-inner-padding-y) var(--core-header-inner-padding-x-right) var(--core-header-inner-padding-y) var(--core-header-inner-padding-x-left);border-radius:0;box-shadow:none;overflow:visible}.core-header-pill{--core-header-pill-cap-size:calc(var(--core-header-inner-height)/2);position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;display:flex;align-items:stretch;width:100%;max-width:none;border-radius:var(--core-header-pill-radius);box-shadow:none;transform:translateZ(0)}.core-header-pill-cap{flex:0 0 var(--core-header-pill-cap-size);width:var(--core-header-pill-cap-size);min-width:var(--core-header-pill-cap-size)}.core-header-pill-mid{flex:1 1 auto;min-width:0}@media (min-width:1101px){:root{--core-header-inner-padding-y:10px;--core-header-inner-padding-x-left:12px;--core-header-inner-padding-x-right:calc(var(--core-header-hamburger-padding-right) - var(--core-header-hamburger-svg-trim))}.core-header-inner{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:0}.core-header .core-logo-container{grid-area:1/1;justify-self:start}.core-header .core-nav{grid-area:1/1;width:100%;position:static}}.core-header .header-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;border-radius:inherit;opacity:0;transform:translateZ(0);-webkit-backdrop-filter:none;backdrop-filter:none;background-color:transparent;will-change:transform,opacity}.core-header .core-logo-container{flex-shrink:0;position:relative;z-index:3}.core-header .core-logo-link{display:flex;align-items:center;border-radius:2px;color:var(--text-current);position:relative;z-index:1;touch-action:manipulation}.core-logo-brand-menu{position:absolute;top:calc(100% + 14px);left:-8px;z-index:20;width:min(304px,100vw - var(--gutter-cap)*2);color:#eaeaea;font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;visibility:hidden;will-change:transform}.core-logo-brand-menu__surface{position:relative;border:1px solid #333;border-radius:14px;background:#161616;box-shadow:0 14px 36px rgba(0,0,0,.42)}.core-logo-brand-menu__content{max-height:calc(100dvh - var(--core-header-height) - 28px);overflow-x:hidden;overflow-y:auto;padding:8px;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.core-logo-brand-menu__content::-webkit-scrollbar{display:none}.core-logo-brand-menu__label,.core-logo-brand-menu__title{margin:0;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-weight:400;text-transform:uppercase}.core-logo-brand-menu__heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 8px;color:inherit;text-decoration:none}.core-logo-brand-menu__heading:after{content:none}.core-logo-brand-menu__title{padding:0;color:#fff;font-size:14px;letter-spacing:.08em}.core-logo-brand-menu__page{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #525252;border-radius:50%;color:#b8b8b8;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-size:10px;font-weight:700;line-height:1;text-decoration:none}.core-logo-brand-menu__page:after{content:none}.core-logo-brand-menu__group{border-top:1px solid #303030;padding-top:6px}.core-logo-brand-menu__group+.core-logo-brand-menu__group{margin-top:6px}.core-logo-brand-menu__label{padding:2px 6px 5px;color:#b8b8b8;font-size:12px;letter-spacing:.09em}.core-logo-brand-menu__toggle{display:flex;align-items:center;gap:8px;width:100%;border:0;border-radius:8px;padding:4px 2px;color:#b8b8b8;background:0 0;text-align:left}.core-logo-brand-menu__toggle .core-logo-brand-menu__label{flex:1;padding:0}.core-logo-brand-menu__chevron{display:grid;place-items:center;flex-shrink:0;width:14px;
66height:14px;margin-inline:4px 0;will-change:transform}.core-logo-brand-menu__chevron svg{display:block;width:100%;height:100%}.core-logo-brand-menu__assets{padding-block:4px}.core-logo-brand-menu__asset{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:40px;border-radius:8px;padding:2px 4px 2px 2px;color:#eaeaea;font-size:12px;font-weight:600;line-height:1.1}.core-logo-brand-menu__actions{display:flex;gap:4px}.core-logo-brand-menu__actions a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:26px;border:1px solid #525252;border-radius:6px;padding-inline:5px;color:#ccc;background:#222;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-size:8px;font-weight:400;letter-spacing:.04em;text-decoration:none}.core-logo-brand-menu__actions a:after{content:none}.core-logo-brand-menu__preview{display:grid;place-items:center;width:36px;height:36px;border-radius:6px;padding:4px;overflow:hidden}.core-logo-brand-menu__preview img{display:block;width:100%;height:100%;object-fit:contain}.core-logo-brand-menu__preview--light{background:#f2f2f2}.core-logo-brand-menu__preview--purple{background:#6d42ed}.core-logo-brand-menu__preview--dark{background:#0c0c0c}.core-logo-brand-menu__footer{display:flex;gap:8px;margin-bottom:8px;padding-bottom:8px}.core-logo-brand-menu__kit{min-width:0;flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;text-align:center;gap:8px;min-height:40px;border-radius:999px;padding:9px 8px 9px 12px;color:#0c0c0c;background:#eee642;font-size:12px;font-weight:650;line-height:1;text-decoration:none;white-space:nowrap;will-change:transform}.core-logo-brand-menu__kit:after{content:none}.core-logo-brand-menu__kit span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;background:#0c0c0c;font-size:15px;will-change:transform}.core-logo-brand-menu__kit--guidelines{flex:0 0 auto;color:#fff;background:#6d42ed;will-change:transform}.core-logo-brand-menu__kit--guidelines span{padding-bottom:2px;color:#0c0c0c;background:#fff;will-change:transform}.core-logo-brand-menu .core-logo-brand-menu__surface{opacity:0;visibility:hidden;filter:blur(2px);transform:scale(.98) translateY(-8px);transform-origin:center center;visibility:visible;will-change:transform,opacity}@media (prefers-reduced-motion:reduce){:root{--reduced-motion:0}.core-logo-brand-menu__surface{animation-duration:NaNs!important;filter:none!important;transform:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}.core-header .logo-name{--logo-fill-outer:#0c0c0c;--logo-fill-inner:#eee642;display:inline-flex;width:auto;height:var(--core-header-logo-height)}.core-header .logo-name svg{width:auto;height:100%;overflow:visible}.core-header .logo-name svg path{will-change:transform}.core-header .logo-name .logo-letter{transform-box:fill-box;transform-origin:center;will-change:transform}.core-header .logo-name .logo-letter-face{will-change:transform}body.is-dark .core-header .logo-name{--logo-fill-outer:#fff;--logo-fill-inner:#0c0c0c}body[data-header-theme=purple] .core-header .logo-name{--logo-fill-outer:#0c0c0c;--logo-fill-inner:#eee642}body:not([data-page=social]):not([data-page=gallery]) .social-feed-top-button{display:none!important}.social-feed-top-button{position:absolute;top:100%;left:50%;margin-top:8px;z-index:2100;display:inline-flex;align-items:center;gap:2px;padding:6px 12px;border-radius:999px;border:0;background-color:#6d42ed;color:#fff;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;opacity:0;transform:translate(-50%,-8px);will-change:transform,opacity}.social-feed-top-button[hidden]{display:none}.social-feed-top-button-icon{display:inline-flex;width:18px;height:18px}.social-feed-top-button-icon svg{width:100%;height:100%}
66.social-feed-top-button-icon svg path{fill:currentColor}.social-feed-top-button-spinner{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:0}:root{--core-nav-user-menu-shadow:0 18px 48px rgba(0,0,0,.16)}.core-nav{display:flex;align-items:center;flex:1 1 auto;min-width:0;width:100%;text-transform:uppercase;position:relative;z-index:2}.core-nav a{display:flex;padding:0 8px;align-items:center;gap:6px;position:relative;border-radius:4px;color:var(--text-current)}.btn-mobile-nav{margin:0;padding:0;border:0;background-color:transparent;color:inherit;-webkit-appearance:none;appearance:none;display:none;align-items:center;justify-content:center;color:var(--text-current);background-color:transparent!important}.btn-mobile-nav .mobile-nav-toggle-icon{display:block;position:relative;width:24px;height:24px}.btn-mobile-nav .mobile-nav-toggle-line{position:absolute;top:50%;left:50%;display:block;width:19px;height:2px;margin-top:-.5px;margin-left:-9.5px;border-radius:999px;background-color:currentColor;transform-origin:center center;will-change:transform,opacity}.btn-mobile-nav .mobile-nav-toggle-line-top{transform:translateY(-3.5px)}.btn-mobile-nav .mobile-nav-toggle-line-middle{opacity:0}.btn-mobile-nav .mobile-nav-toggle-line-bottom{transform:translate(-2.85px,3.5px) scaleX(.7);transform-origin:center center}body[data-header-theme=purple] .core-header .core-nav-list-primary a.label-1{color:#fff}.core-nav-list{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0}.core-nav-list .sign-in,.core-nav-list .sign-up,.core-nav-list li{flex-shrink:0}.core-nav-list-primary{display:flex;align-items:center;width:100%;margin:0}.core-nav-list-primary>li{margin-left:1.2vw}.core-nav-list-link-row{display:contents}@media (max-width:1100px){:root{--core-header-inner-padding-y:8px;--core-header-inner-padding-x-left:12px;--core-header-inner-padding-x-right:calc(var(--core-header-hamburger-padding-right) - var(--core-header-hamburger-svg-trim));--core-header-logo-height:28px}.core-nav-link-roll>span:last-child{display:none}}@media (min-width:1101px){.core-nav{position:static}.core-nav-list-primary,.okaydev-navbar-auth-root{--core-nav-primary-link-font-size:14px;--core-nav-primary-link-hover-font-size:15px;--core-nav-primary-link-roll-duration:.24s;--core-nav-primary-link-roll-stagger:.04s}.core-nav-link-roll{display:inline-grid;align-items:center;justify-items:center;overflow:hidden;vertical-align:bottom;font-size:var(--core-nav-primary-link-hover-font-size);line-height:1}.core-nav-link-roll>span{grid-area:1/1;transform-origin:center;will-change:transform}.core-nav-link-roll>span:first-child{font-size:calc(var(--core-nav-primary-link-font-size)/var(--core-nav-primary-link-hover-font-size)*1em)}.core-nav-link-roll>span:last-child{font-size:1em;transform:translateY(100%)}.core-nav-list-primary a.label-1,.okaydev-navbar-auth-root .sign-in a.label-1{display:inline-block;padding:8px 12px}.core-nav{--core-nav-current-user-gap:4px;--core-nav-avatar-menu-icon-box:24px;--core-nav-avatar-menu-svg-size:20px;--core-nav-avatar-adjacent-visual-gap:calc(var(--core-nav-current-user-gap) + (var(--core-nav-avatar-menu-icon-box) - var(--core-nav-avatar-menu-svg-size))/2 + var(--core-nav-avatar-menu-svg-size)*3.5/24)}.core-nav-list{position:static;justify-content:flex-end}.core-nav-list-primary{flex:0 1 auto;min-width:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);justify-content:center;width:max-content;margin:0;z-index:1}.core-nav-list-primary>li{margin-left:max(4px,1.2vw - 8px)}.okaydev-navbar-auth-root{position:relative;z-index:3}.okaydev-navbar-auth-root.is-navbar-auth-guest{margin-right:calc(var(--core-header-inner-padding-y) - var(--core-header-inner-padding-x-right))}.core-nav-list-pricing{position:relative}.core-nav-list-pricing .okaydev-nav-go-pro-mount{position:absolute;top:50%;left:calc(100% + 12px);transform:translateY(-50%)}}.core-nav a.btn-core-sign-up{border:0;background-color:transparent;color:inherit;-webkit-appearance:none;appearance:none;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;
66font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:14px;line-height:1;text-transform:uppercase;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:22px;background-color:var(--text-current);overflow:hidden;padding:0 15px 0 20px;color:var(--bg-current);--btn-core-sign-up-bg:var(--text-current);--btn-core-sign-up-fg:var(--bg-current);--btn-core-sign-up-hover-bg:#6d42ed;--btn-core-sign-up-hover-fg:#fff;position:relative;isolation:isolate;margin:0 0 0 8px;color:var(--btn-core-sign-up-fg);background-color:var(--btn-core-sign-up-bg);will-change:transform}.core-nav a.btn-core-sign-up svg path{fill:var(--bg-current);will-change:transform}.core-nav a.btn-core-sign-up:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;background-color:var(--btn-core-sign-up-hover-bg);opacity:0;will-change:transform,opacity}.core-nav a.btn-core-sign-up svg path{fill:var(--btn-core-sign-up-fg);will-change:transform}.core-nav-list-primary .core-nav-list-add-project{display:none}.mobile-content-cover{display:none}@media (max-width:1100px){.core-nav{--core-nav-mobile-gutter-cap:12px;--core-nav-mobile-gutter-x:16px;--core-nav-mobile-gutter-y:14px;--core-nav-mobile-links-top:18px;--core-nav-mobile-links-row-gap:calc(var(--core-nav-mobile-gutter-y)*1.5);--core-nav-mobile-content-inline:calc(var(--core-nav-mobile-gutter-cap) + var(--core-nav-mobile-gutter-x));--core-nav-mobile-content-max-width:430px;--core-nav-mobile-panel-bg:#0c0c0c;--core-nav-mobile-account-bg:#121212;--core-nav-mobile-auth-section-gap:26px;--core-nav-mobile-user-menu-row-gap:15px;--core-nav-mobile-panel-height:calc(100dvh - var(--core-header-height,60px));justify-content:flex-start;align-items:center;gap:8px}.core-nav .okaydev-navbar-leading-root{order:1;display:flex;align-items:center;justify-content:flex-end;flex:1 1 auto;min-width:0;width:auto;position:relative;z-index:3}.core-nav .okaydev-navbar-leading-root>:is(.dynamic-block,.servd-dynamic-stale-preview){display:flex;align-items:center;justify-content:flex-end;flex:1 1 auto;min-width:0;width:100%}.core-nav a{padding-left:0;padding-right:0}.core-header .core-nav .mobile-content-cover{display:none;position:fixed;top:var(--core-header-height,60px);left:0;z-index:1998;width:100%;height:var(--core-nav-mobile-panel-height);background-color:transparent}.btn-mobile-nav{display:flex;order:2;flex-shrink:0;position:relative;z-index:3}.core-header .core-nav .core-nav-list{display:flex;flex-wrap:nowrap;align-content:flex-start;justify-content:flex-start;position:fixed;top:var(--core-header-height,60px);left:0;z-index:1999;width:100%;height:var(--core-nav-mobile-panel-height);max-height:var(--core-nav-mobile-panel-height);min-height:0;--text-current:#fff;--bg-current:var(--core-nav-mobile-panel-bg);color:var(--text-current);background-color:transparent;color-scheme:dark;overflow-x:clip;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding-top:var(--core-nav-mobile-links-top);visibility:hidden;opacity:0;transform:scale(.97);transform-origin:center top;isolation:isolate}.core-header .core-nav .core-nav-list a:not(.button):not(.btn-core-sign-up):not(.btn-core-login):not(.btn-core-add-project):not(.memberships-cta):not(.name):not(.username){color:var(--text-current)}.core-header>.core-nav-mobile-panel-bg{position:fixed;top:0;left:0;z-index:0;display:block;width:100%;height:100lvh;background:linear-gradient(180deg,color-mix(in srgb,#6d42ed 12%,#0c0c0c) 0,var(--core-nav-mobile-panel-bg,#0c0c0c) 18%,var(--core-nav-mobile-panel-bg,#0c0c0c) 100%);transform:scaleY(0);transform-origin:center top;opacity:0}.core-header .core-nav .core-nav-list ul.core-nav-list-primary{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--core-nav-mobile-gutter-x);row-gap:var(--core-nav-mobile-links-row-gap);align-items:start;flex-shrink:0;width:100%;max-width:calc(var(--core-nav-mobile-content-max-width) + var(--core-nav-mobile-content-inline)*2);margin-left:auto;margin-right:auto;padding-left:var(--core-nav-mobile-content-inline);padding-right:var(--core-nav-mobile-content-inline)}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li{width:auto;min-width:0;margin-top:0;margin-left:0}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li.core-nav-list-social{grid-column:1;grid-row:1}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li.core-nav-list-projects{grid-column:2;grid-row:1}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li.core-nav-list-directory{grid-column:1;grid-row:2}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li.core-nav-list-articles{grid-column:2;grid-row:2}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li.core-nav-list-jobs{grid-column:1;grid-row:3}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li.core-nav-list-pricing{grid-column:2;grid-row:3}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li>
66.core-nav-list-link-row>a.label-1{font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-weight:900;font-style:normal;font-size:clamp(36px,3.5vw,63px);font-feature-settings:"dlig" on,"ss11" on,"ss09" on,"ss08" on,"ss05" on,"ss07" on,"ss06" on,"ss03" on,"case" on;line-height:.98;letter-spacing:-.48px;font-size:24px;height:auto;text-transform:none}.core-header .core-nav .core-nav-list ul.core-nav-list-primary .core-nav-list-link-row{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:var(--core-nav-mobile-gutter-x);width:100%}.core-header .core-nav .core-nav-list ul.core-nav-list-primary .core-nav-list-pricing .core-nav-list-link-row{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:calc(var(--core-nav-mobile-gutter-x)*.75);width:100%}.core-header .core-nav .core-nav-list ul.core-nav-list-primary .core-nav-list-pricing .okaydev-nav-go-pro-mount{position:static;top:auto;left:auto;transform:none;flex-shrink:0}.core-header .core-nav .core-nav-list ul.core-nav-list-primary .core-nav-list-add-project{display:none}.sign-up{order:2}.core-nav a.btn-core-sign-up{margin-left:0}.sign-in{order:3;display:flex;align-items:center;height:42px;margin-left:var(--core-nav-mobile-gutter-x)}.okaydev-navbar-auth-root{position:relative;z-index:1;isolation:isolate;padding-left:var(--core-nav-mobile-content-inline);padding-right:var(--core-nav-mobile-content-inline)}.okaydev-navbar-auth-root.is-navbar-auth-guest{margin-top:40px}.core-nav-mobile-account-bg,.core-nav-mobile-account-divider{position:absolute;display:block}.core-nav-mobile-account-bg{z-index:0;top:0;right:0;bottom:0;left:0;background-color:var(--core-nav-mobile-account-bg);opacity:0}
66.core-nav-mobile-account-divider{z-index:1;top:0;left:0;width:100%;height:1px;background-color:#222;opacity:0;transform:scaleX(0);transform-origin:center center}.okaydev-navbar-auth-root>:not(.core-nav-mobile-account-bg):not(.core-nav-mobile-account-divider){position:relative;z-index:2}.okaydev-navbar-auth-root.is-navbar-auth-guest{display:flex;flex-wrap:nowrap;column-gap:var(--core-nav-mobile-gutter-x);align-items:center;justify-content:flex-start;align-self:stretch;width:100%;max-width:calc(var(--core-nav-mobile-content-max-width) + var(--core-nav-mobile-content-inline)*2);margin-left:auto;margin-right:auto}.okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-mobile-account-bg{background-color:transparent}.okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-mobile-account-divider{display:none}.okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up{order:1;display:flex;justify-content:flex-start;flex:0 0 calc((100% - var(--core-nav-mobile-gutter-x))/2)}.okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up .btn-core-sign-up{width:max-content;min-width:0;padding-left:16px;padding-right:12px}.okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in{order:2;flex:0 0 calc((100% - var(--core-nav-mobile-gutter-x))/2);margin-left:0}body[data-header-theme=purple] .core-header .btn-mobile-nav{color:#fff;background-color:transparent!important}body[data-header-theme=purple] .core-header .mobile-nav-toggle-line{background-color:#fff}}@media (max-width:1100px) and (min-width:768px){.core-nav-list-primary>li{margin-left:0}}.okaydev-nav-go-pro-mount{display:inline-flex;align-items:baseline;min-width:0}.navbar-pricing-go-pro-ph{display:none}.okaydev-navbar-leading-root{display:flex;align-items:center;min-width:0}@media (min-width:1101px){.core-nav a.btn-core-sign-up{height:var(--btn-core-add-project-size,36px);padding-left:16px;padding-right:12px;border-radius:9999px}.okaydev-navbar-leading-root{display:none}}.okaydev-navbar-auth-root{display:flex;align-items:center;min-width:0;width:100%}@media (max-width:1100px){.okaydev-navbar-auth-root.is-navbar-auth-guest{display:flex;flex-wrap:nowrap;column-gap:var(--core-nav-mobile-gutter-x);align-items:center;justify-content:flex-start;align-self:stretch;width:100%}.okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up{order:1;display:flex;justify-content:flex-start;flex:0 0 calc((100% - var(--core-nav-mobile-gutter-x))/2)}.okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up .btn-core-sign-up{width:max-content;min-width:0;padding-left:16px;padding-right:12px}.okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in{order:2;flex:0 0 calc((100% - var(--core-nav-mobile-gutter-x))/2);margin-left:0}}@media (min-width:1101px){.okaydev-navbar-auth-root{flex:0 0 auto;width:auto}}.core-nav-guest-extra{display:none}@media (max-width:1100px){.core-header .core-nav .okaydev-navbar-auth-root.is-navbar-auth-guest{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;flex:1 0 auto;align-items:start;padding-bottom:24px}.core-header .core-nav .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up{order:1}.core-header .core-nav .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in{order:2}.core-header .core-nav .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up>a.btn-core-sign-up{--btn-core-sign-up-bg:#42ed91;--btn-core-sign-up-fg:#0c0c0c}.core-header .core-nav .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in>a.btn-core-login{margin:0;border:0;background-color:transparent;color:inherit;-webkit-appearance:none;appearance:none;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:14px;line-height:1;text-transform:uppercase;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:22px;padding:0 25px;color:var(--bg-current);background-color:var(--text-current);overflow:hidden;width:max-content;padding-inline:16px;color:#0c0c0c;background-color:#fff;will-change:transform}.core-nav .core-nav-guest-extra{display:flex;flex-direction:column;grid-column:1/-1;align-self:stretch;position:relative;order:3;flex:0 0 100%;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15)}.core-nav .core-nav-guest-extra ul{position:static;display:flex;flex-wrap:wrap;width:100%;margin:0;padding:0;gap:16px 24px;list-style:none}.core-nav .core-nav-guest-extra .core-nav-guest-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--core-nav-mobile-gutter-x);text-transform:none}.core-nav .core-nav-guest-extra .core-nav-guest-social-nav{margin-top:auto;padding-top:24px}.core-nav .core-nav-guest-extra .core-nav-guest-social-eyebrow{margin:0 0 14px;color:rgba(255,255,255,.6);letter-spacing:.08em}.core-nav .core-nav-guest-extra .core-nav-guest-social a{display:flex;align-items:center;min-height:32px}
66.core-nav .core-nav-guest-extra .core-nav-guest-social svg{display:block;width:22px;height:22px}.core-nav .core-nav-guest-extra .core-nav-guest-social .bento-social-mark--instagram{transform:scale(1.25)}}@media (min-width:640px) and (max-width:1100px) and (orientation:landscape){.core-header .core-nav .core-nav-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:24px;align-items:start;padding-block:24px;padding-left:max(var(--gutter-cap),(100% - var(--page-content-max-width))/2,env(safe-area-inset-left));padding-right:max(var(--gutter-cap),(100% - var(--page-content-max-width))/2,env(safe-area-inset-right))}.core-header .core-nav .core-nav-list ul.core-nav-list-primary{grid-column:1/3;grid-row:1;max-width:none;margin:0;padding:0;column-gap:24px}.core-header .core-nav .core-nav-list .okaydev-navbar-auth-root.is-navbar-auth-guest{grid-column:1/-1;grid-row:1/3;grid-template-columns:subgrid;grid-template-rows:subgrid;gap:24px;max-width:none;margin:0;padding:0}.core-header .core-nav .core-nav-list .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up{grid-column:1;grid-row:2}.core-header .core-nav .core-nav-list .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in{grid-column:2;grid-row:2}.core-header .core-nav .core-nav-list .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in,.core-header .core-nav .core-nav-list .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up{align-self:end}.core-header .core-nav .core-nav-list .okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-guest-extra{grid-column:3/5;grid-row:1/3;min-width:0;margin-top:0;padding-top:0;padding-left:24px;border-top:0;border-left:1px solid rgba(255,255,255,.15)}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest){grid-template-rows:repeat(3,auto) auto}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) ul.core-nav-list-primary{grid-row:1/4;grid-template-rows:subgrid;row-gap:normal;align-items:baseline}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) ul.core-nav-list-primary .core-nav-list-link-row{align-items:baseline}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest{grid-row:1/5}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in,.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up{grid-row:4}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-guest-extra{display:grid;grid-row:1/5;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:subgrid}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-guest-extra .core-nav-guest-secondary,.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-guest-extra>nav:first-child{display:grid;grid-column:1/-1;grid-row:1/4;grid-template-columns:subgrid;grid-template-rows:subgrid;row-gap:normal;align-items:baseline}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-guest-extra .core-nav-guest-social-nav{grid-column:1/-1;grid-row:4;align-self:end;margin-top:0;padding-top:0}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-guest-extra .core-nav-guest-social a{align-items:center;min-height:42px}}.app-toolbar{--app-toolbar-inset-left:max(12px,var(--app-safe-left,0px));--app-toolbar-inset-right:max(12px,var(--app-safe-right,0px));--app-toolbar-surface:rgb(28 28 30/72%);--app-toolbar-knockout:#1c1c1e;--app-toolbar-hairline:rgb(255 255 255/10%);--app-toolbar-fg:rgb(255 255 255/60%);--app-toolbar-fg-active:#fff;--app-toolbar-highlight:rgb(255 255 255/11%);--app-toolbar-shadow:0 12px 32px rgb(0 0 0/45%),0 2px 8px rgb(0 0 0/30%);--app-toolbar-dot:#af;--app-toolbar-dot-glow:0 0 5px 1px rgb(140 105 255/90%),0 0 14px 4px rgb(109 66 237/65%)}.app-toolbar{position:fixed;right:0;bottom:var(--app-toolbar-bottom,12px);left:0;z-index:2000;width:calc(100% - var(--app-toolbar-inset-left) - var(--app-toolbar-inset-right));max-width:440px;margin:0 auto;will-change:transform,opacity}.app-toolbar-list{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;align-items:center;height:var(--app-toolbar-height,60px);margin:0;padding:0 4px;list-style:none;border-radius:9999px;background:var(--app-toolbar-surface);box-shadow:var(--app-toolbar-shadow),inset 0 0 0 1px var(--app-toolbar-hairline);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}.app-toolbar-item{display:flex;justify-content:center;min-width:0;margin:0}.app-toolbar-tab{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:calc(var(--app-toolbar-height,60px) - 8px);margin:0;padding:0;border:0;border-radius:9999px;background:0 0;font:inherit;text-decoration:none;-webkit-appearance:none;appearance:none;touch-action:manipulation}.app-toolbar-tab{flex-direction:column;gap:3px;padding-top:6px;color:var(--app-toolbar-fg);will-change:transform}.app-toolbar-tab:before{content:"";position:absolute;top:1px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--app-toolbar-dot);box-shadow:var(--app-toolbar-dot-glow);opacity:0;transform:translate3d(0,3px,0) scale(.2);will-change:transform,opacity}.app-toolbar-icon{position:relative;display:grid;place-items:center;width:26px;height:26px}.app-toolbar-glyph{display:block;width:24px;height:24px;overflow:visible}.app-toolbar-glyph circle,.app-toolbar-glyph path{will-change:transform}.app-toolbar-glyph--social .app-toolbar-glyph-disc{fill:transparent;stroke:var(--app-toolbar-fg)}
66.app-toolbar-glyph--social .app-toolbar-glyph-mark{fill:var(--app-toolbar-fg)}.app-toolbar-label{position:relative;max-width:100%;margin-block:-.2em;padding-block:.2em;overflow:hidden;font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-size:10.5px;font-weight:500;line-height:1;letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis}.app-toolbar{--app-sheet-surface:rgb(28 28 30/94%);--app-sheet-card:#2c2c2e;--app-sheet-outline:rgb(255 255 255/22%)}.app-logo{--app-logo-shade:#fff;--app-logo-fill:#0c0c0c;position:relative;z-index:2;justify-content:center;height:100%;padding:var(--app-logo-top) var(--app-logo-gutter) var(--app-logo-gutter)}.app-logo-link{display:block;border-radius:4px;touch-action:manipulation;will-change:transform}.app-logo-mark{display:block;height:var(--app-logo-height);width:auto;aspect-ratio:1483/276}.app-logo-fill,.app-logo-shade{will-change:transform}.app-logo-shade{fill:var(--app-logo-shade)}.app-logo-fill{fill:var(--app-logo-fill)}.app-status-tint{display:none;position:fixed;top:0;right:0;left:0;z-index:3;height:var(--app-status-tint-height,12px);background-color:var(--bg-current)}:is([data-handle=login],[data-handle=forgotPassword],[data-handle=signUp],[data-handle=businessSignUp],[data-handle=editProfile],[data-handle=managePortfolio],[data-handle=manageTeam],[data-handle=membership],[data-handle=thankYou],[data-handle=accountSettings],[data-handle=accountNotifications],[data-handle=accountSettingsBusiness],[data-handle=notifications],[data-handle=about],[data-handle=faqs],[data-handle=contact],[data-handle=communityGuidelines],[data-handle=legal]){position:relative;background:0 0}:is([data-handle=login],[data-handle=forgotPassword],[data-handle=signUp],[data-handle=businessSignUp],[data-handle=editProfile],[data-handle=managePortfolio],[data-handle=manageTeam],[data-handle=membership],[data-handle=thankYou],[data-handle=accountSettings],[data-handle=accountNotifications],[data-handle=accountSettingsBusiness],[data-handle=notifications],[data-handle=about],[data-handle=faqs],[data-handle=contact],[data-handle=communityGuidelines],[data-handle=legal])>.page-container{position:relative;z-index:1}.auth-shell-bg{position:absolute;top:calc(-1*var(--core-header-height));right:0;bottom:-100vmax;left:0;z-index:0;overflow:hidden;background-color:var(--bg-current)}:is([data-handle=login],[data-handle=forgotPassword],[data-handle=signUp],[data-handle=businessSignUp],[data-handle=errorpage],[data-handle=errorpage-404],[data-handle=errorpage-503]) .auth-shell-bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:linear-gradient(to right,transparent 0,color-mix(in srgb,var(--bg-current) 28%,transparent) 16%,color-mix(in srgb,var(--bg-current) 58%,transparent) 28%,color-mix(in srgb,var(--bg-current) 62%,transparent) 32%,color-mix(in srgb,var(--bg-current) 62%,transparent) 68%,color-mix(in srgb,var(--bg-current) 58%,transparent) 72%,color-mix(in srgb,var(--bg-current) 28%,transparent) 84%,transparent 100%)}.auth-shell-bg-shadow{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;mix-blend-mode:soft-light;opacity:.75}.auth-shell-bg-shadow img{width:100%;height:100%;object-fit:cover}.auth-shell-grid-lines{--grid-minor:40px;--grid-major:calc(var(--grid-minor)*5);position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' fill='none'%3E%3Cpath stroke='rgba(255,255,255,0.07)' stroke-width='1' stroke-dasharray='5 5' d='M20 0v200M60 0v200M140 0v200M180 0v200M0 20h200M0 60h200M0 140h200M0 180h200'/%3E%3C/svg%3E");background-size:var(--grid-major) var(--grid-major);background-position:center;background-repeat:repeat}.auth-shell-grid-lines:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(to right,transparent 0 calc(var(--grid-major)/2 - .5px),rgba(255,255,255,.1) calc(var(--grid-major)/2 - .5px) calc(var(--grid-major)/2 + .5px),transparent calc(var(--grid-major)/2 + .5px) var(--grid-major)),repeating-linear-gradient(to bottom,transparent 0 calc(var(--grid-major)/2 - .5px),rgba(255,255,255,.1) calc(var(--grid-major)/2 - .5px) calc(var(--grid-major)/2 + .5px),transparent calc(var(--grid-major)/2 + .5px) var(--grid-major));background-size:var(--grid-major) 100%,100% var(--grid-major);background-position:center;background-repeat:repeat}.okay-dialog{--dialog-field-bg:color-mix(in srgb,var(--bg-current) 96%,var(--text-current));display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:none;background:0 0;outline:0;overflow:visible}@media (max-width:767px){:root{--column-count:6;--gutter-cap:12px;--gutter-x:16px;--gutter-y:14px}:root{--core-header-outer-padding:var(--gutter-cap)}.okay-dialog{padding:8px}}.dialog-content{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:555px;max-height:calc(100vh - var(--gutter-y)*2);border-radius:12px;margin:0;padding:0;font-size:16px;color:var(--text-current);background-color:var(--bg-current);box-shadow:0 25px 35px 5px rgba(0,0,0,.15);overflow-x:hidden;overflow-y:hidden;overscroll-behavior:contain}.dialog-content a{position:relative;z-index:1}.dialog-content p{color:var(--text-current)}.dialog-content p{font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-variant-numeric:lining-nums proportional-nums slashed-zero;font-feature-settings:"ss08" on,"ss02" on,"ss07" on;font-size:14px;line-height:1.5;letter-spacing:.21px;font-size:16px}.dialog-content a{text-decoration:underline;color:var(--text-current);opacity:.75;will-change:transform,opacity}.dialog-content a:after{background-color:var(--text-current)}body.is-dark .okay-dialog:not([data-theme=light]){--dialog-field-bg:color-mix(in srgb,var(--bg-current) 88%,var(--text-current))}body.is-dark .dialog-content{box-shadow:0 25px 35px 5px rgba(0,0,0,.45)}.dialog-heading{font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;
66font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:14px;line-height:1;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:500}.dialog-heading-content{display:inline-flex;align-items:center;gap:calc(var(--gutter-x)*.5);min-width:0}.dialog-heading-text{min-width:0}.dialog-footer,.dialog-header{width:100%;flex:0 0 auto;padding:14px 14px 14px 24px}.dialog-header{background-color:color-mix(in srgb,var(--text-current) 3%,#fff)}body.is-dark .dialog-header{background-color:color-mix(in srgb,var(--bg-current) 94%,#fff)}.dialog-header{border-bottom:1px solid color-mix(in srgb,var(--text-current) 8%,transparent)}@media (max-width:767px){.dialog-content{max-height:calc(100vh - 66px - var(--gutter-y)*8)}.dialog-header{padding:6px 6px 6px 12px}}.dialog-inner{width:100%;flex:1 1 auto;min-height:0;max-height:677px;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 18px 24px;scrollbar-gutter:stable}.dialog-footer{margin-top:auto;background-color:color-mix(in srgb,var(--text-current) 3%,#fff);border-top:1px solid color-mix(in srgb,var(--text-current) 8%,transparent);color:gray}body.is-dark .dialog-footer{background-color:color-mix(in srgb,var(--bg-current) 94%,#fff);border-top-color:color-mix(in srgb,#fff 12%,transparent)}.okay-dialog .dialog-content .dialog-footer :is(.button,button,input[type=submit],input[type=button]){font-size:13px}.okay-dialog .dialog-content .button:not(.btn-text){border:1px solid color-mix(in srgb,var(--text-current) 14%,transparent)}.okay-dialog{--dialog-chrome-bg:color-mix(in srgb,var(--text-current) 3%,#fff);--dialog-chrome-line:color-mix(in srgb,var(--text-current) 8%,transparent)}.okay-dialog .dialog-content{--panel-scroll-fade-bg:var(--bg-current);position:relative}.okay-dialog .dialog-content>.dialog-header{min-height:44px;padding:6px 6px 6px 14px;border-bottom-color:var(--dialog-chrome-line);background-color:var(--dialog-chrome-bg)}.okay-dialog .dialog-content>.dialog-footer{padding:10px 12px;border-top-color:var(--dialog-chrome-line);background-color:var(--dialog-chrome-bg)}.okay-dialog .dialog-footer .button{min-height:32px}.okay-dialog .dialog-heading{min-height:32px;font-size:12px;line-height:1}.okay-dialog .btn-close-dialog{flex:0 0 32px}.okay-dialog .dialog-content .button{font-size:12px}body.is-dark .okay-dialog:not([data-theme=light]){--dialog-chrome-bg:color-mix(in srgb,var(--bg-current) 94%,#fff);--dialog-chrome-line:color-mix(in srgb,#fff 14%,transparent)}.okay-dialog[data-dialog=social-guest-gate] .ui-claim-project-actions{display:flex;justify-content:flex-end;gap:10px;width:100%;margin-top:0}.okay-dialog[data-dialog=social-guest-gate] .ui-claim-project-action{display:inline-flex;align-items:center;justify-content:center;min-width:0;border:none!important;border-radius:8px;height:auto;padding:8px 12px;font:inherit;font-size:12px;line-height:1;text-decoration:none;text-transform:uppercase;opacity:1;box-shadow:none;will-change:transform,opacity}.okay-dialog[data-dialog=social-guest-gate] .ui-claim-project-action:before{content:none}.okay-dialog[data-dialog=social-guest-gate] .ui-claim-project-action.is-secondary{background-color:color-mix(in srgb,var(--text-current) 15%,transparent);color:var(--text-current)}.okay-dialog[data-dialog=social-guest-gate] .ui-claim-project-action.is-primary{background-color:#42ed91;color:#0c0c0c}body.is-dark .okay-dialog[data-dialog=social-guest-gate] .ui-claim-project-action.is-secondary{background-color:#fff;color:#0c0c0c}.okay-dialog[data-dialog=social-guest-gate] .ui-social-guest-gate{text-wrap:pretty}.okay-dialog[data-dialog=social-guest-gate] .ui-social-guest-gate-image{display:block;width:100%;height:auto;aspect-ratio:1200/630;margin-bottom:18px;background-color:color-mix(in srgb,var(--text-current) 6%,transparent)}.okay-dialog[data-dialog=social-guest-gate] .ui-social-guest-gate-image[hidden]{display:none}@media (max-width:767px){.dialog-inner{padding:16px}.dialog-footer{padding:6px}.okay-dialog[data-dialog=social-guest-gate] .ui-social-guest-gate-image{margin-bottom:16px}}.btn-close-dialog{display:grid;place-content:center;position:relative;width:32px;height:32px;border:none;border-radius:8px;margin:0;padding:0;background-color:color-mix(in srgb,var(--text-current) 10%,transparent);color:var(--text-current)}
66.btn-close-dialog svg path{fill:currentColor}.okay-dialog .dialog-footer .button{-webkit-appearance:none;appearance:none;border:1px solid color-mix(in srgb,var(--text-current) 14%,transparent);border-radius:8px;height:auto;padding:8px 12px;font:inherit;font-size:12px;line-height:1;text-decoration:none;text-transform:uppercase;box-shadow:none;will-change:transform}body.is-dark .btn-close-dialog{background-color:color-mix(in srgb,#0c0c0c 72%,#fff);border-color:color-mix(in srgb,#fff 14%,transparent);color:#fff}@media (max-width:767px){.media-library-row>.media-library-cell:first-child{grid-area:check;align-self:stretch;display:flex;align-items:center;justify-content:center;margin-top:-8px;margin-right:-8px;margin-bottom:-8px;padding:12px;border-left:1px solid color-mix(in srgb,var(--text-current) 12%,transparent)}.media-library-row>.media-library-cell:nth-child(2){grid-area:preview;align-self:start}.media-library-row>.media-library-cell:nth-child(3){grid-area:name}.media-library-row>.media-library-cell:nth-child(4){grid-area:details}.media-library-row>.media-library-cell:nth-child(6){grid-area:used}}.okay-dialog[data-size=sm] .dialog-content{max-width:420px}.okay-dialog{visibility:visible;will-change:transform}.okay-dialog .dialog-content{opacity:0;visibility:hidden;filter:blur(2px);transform:scale(.98) translateY(20px);transform-origin:center center;visibility:visible;will-change:transform,opacity}@media (prefers-reduced-motion:reduce){.okay-dialog{animation-duration:NaNs!important;filter:none!important;transform:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.okay-dialog .dialog-content{animation-duration:NaNs!important;filter:none!important;transform:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}body.is-dark .okay-dialog:not([data-theme=light]){--editor-canvas:#f3f3f6;--editor-surface:#fff;--editor-field:#fff;--editor-ink:#262626;--editor-muted:#626262;--editor-line:#dedede;--editor-control:#fafafa;--editor-hover:#ededed;--editor-focus:#737373;--editor-control-line:#d4d4d4;--editor-line-hover:#a3a3a3;--editor-quiet:#f2f2f2;--editor-pressed:#e5e5e5;--editor-subtle-line:#c7c7c7;--editor-placeholder:#757575;--editor-disabled-ink:#858585;--editor-primary:#262626;--editor-primary-ink:#fff;--editor-primary-hover:#404040;--editor-table:#e7e7e9;--editor-table-ink:#333;--editor-row-hover:#f7f7f7;--editor-danger:#b42318;--editor-danger-line:#e0bcbc;--editor-danger-hover:#fcebea;--editor-drop-active:#e8f9ef;--editor-focus-shadow:rgb(64 64 64/12%);--editor-scheme:light;--editor-radius:10px;--editor-shadow:0 24px 64px rgb(24 24 24/20%),0 4px 16px rgb(24 24 24/10%);--text-current:var(--editor-ink);--bg-current:var(--editor-surface);--dialog-field-bg:var(--editor-field);--dialog-chrome-bg:var(--editor-surface);--dialog-chrome-line:var(--editor-line);color-scheme:var(--editor-scheme)}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content{--panel-scroll-fade-bg:var(--editor-canvas);border:1px solid var(--editor-line);border-radius:var(--editor-radius);color:var(--editor-ink);background:var(--editor-canvas);box-shadow:var(--editor-shadow)}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content>.dialog-header{min-height:56px;padding:9px 10px 9px 16px;background:var(--editor-surface)}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-heading{min-height:36px;font-family:Aeonik,sans-serif;font-size:16px;font-weight:500;letter-spacing:0;line-height:1.25;text-transform:none}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-heading-content{gap:8px}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content .btn-close-dialog{display:grid;flex:0 0 36px;place-items:center;width:36px;height:36px;border:1px solid var(--editor-control-line);border-radius:8px;padding:8px;color:var(--editor-muted);background:var(--editor-quiet);box-shadow:none}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content .btn-close-dialog svg{width:18px;height:18px}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content>.dialog-footer{border-color:var(--editor-line);padding:12px;color:var(--editor-muted);background:var(--editor-surface)}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content .button:not(.btn-text){min-height:36px;border:1px solid var(--editor-control-line);border-radius:8px;padding:8px 12px;color:var(--editor-ink);background:var(--editor-control);box-shadow:none;font-family:Aeonik,sans-serif;font-size:12px;font-weight:500;letter-spacing:0;line-height:1.2;text-transform:none}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content .dialog-footer :is(.button,button,input[type=submit],input[type=button]){font-size:13px}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content .dialog-footer .is-primary{border-color:var(--editor-primary);color:var(--editor-primary-ink);background:var(--editor-primary)}body.is-dark .okay-dialog:not([data-theme=light]){--editor-canvas:#19191b;--editor-surface:#252527;--editor-field:#1e1e21;--editor-ink:#ededee;--editor-muted:#b0b0b6;--editor-line:#3f3f43;--editor-control:#2c2c2f;--editor-hover:#38383c;--editor-focus:#a4a4ad;--editor-control-line:#49494e;--editor-line-hover:#72727a;--editor-quiet:#303034;--editor-pressed:#414146;--editor-subtle-line:#55555c;--editor-placeholder:#93939b;--editor-disabled-ink:#797982;--editor-primary:#ededee;--editor-primary-ink:#19191b;--editor-primary-hover:#d1d1d6;--editor-table:#353539;--editor-table-ink:#dddde1;--editor-row-hover:#2c2c2f;--editor-danger:#ff9991;--editor-danger-line:#78433f;--editor-danger-hover:#442b2b;--editor-drop-active:#233d2e;--editor-focus-shadow:rgb(190 190 200/16%);--editor-scheme:dark;--editor-radius:10px;--editor-shadow:0 24px 64px rgb(0 0 0/48%),0 4px 16px rgb(0 0 0/32%)}.social-image-viewer-dialog{display:flex;align-items:stretch;justify-content:stretch;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:none;background:0 0;outline:0;overflow:hidden;opacity:0;visibility:visible;will-change:transform,opacity}.social-image-viewer-dialog__panel{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background-color:#0c0c0c}.social-image-viewer-dialog__close.btn-close-dialog{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) - 6px);right:calc(max(12px,env(safe-area-inset-right)) - 6px);z-index:3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:0;color:#fff;background-color:transparent;opacity:.92;box-shadow:none;will-change:transform,opacity}
66.social-image-viewer-dialog__close.btn-close-dialog svg path{fill:currentColor}body.is-dark .social-image-viewer-dialog__close.btn-close-dialog{background-color:transparent;border-color:transparent;color:#fff}.social-image-viewer-dialog__thumbs{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));z-index:2;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 72px)}.social-image-viewer-dialog__viewport{position:relative;flex:1 1 auto;min-height:0;width:100%}.social-image-viewer-dialog__track{display:flex;height:100%;min-height:100%}.social-image-viewer-dialog__footer{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:2px;padding:6px max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));color:#fff;background:linear-gradient(to top,#0c0c0c,rgba(12,12,12,0))}.social-image-viewer-dialog__pagination{display:flex;align-items:baseline;gap:.1em;margin:0;color:#666;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:12px;line-height:1;text-transform:uppercase}.social-image-viewer-dialog__pagination-sep{color:#525252}.social-image-viewer-dialog__pagination[hidden]{display:none}.social-image-viewer-dialog__title{width:100%;margin:0;font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-variant-numeric:lining-nums proportional-nums slashed-zero;font-feature-settings:"ss08" on,"ss02" on,"ss07" on;font-size:14px;line-height:1.5;letter-spacing:.21px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}</style> 
66<script type="module">!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))r(e);new MutationObserver((e=>{for(const o of e)if("childList"===o.type)for(const e of o.addedNodes)if("LINK"===e.tagName&&"modulepreload"===e.rel)r(e);else if(e.querySelectorAll)for(const o of e.querySelectorAll("link[rel=modulepreload]"))r(o)})).observe(document,{childList:!0,subtree:!0})}function r(e){if(e.ep)return;e.ep=!0;const r=function(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerpolicy&&(r.referrerPolicy=e.referrerpolicy),"use-credentials"===e.crossorigin?r.credentials="include":"anonymous"===e.crossorigin?r.credentials="omit":r.credentials="same-origin",r}(e);fetch(e.href,r)}}();</script>
66 
66<script>!function(){var e=document.createElement("script");if(!("noModule"in e)&&"onbeforeload"in e){var t=!1;document.addEventListener("beforeload",(function(n){if(n.target===e)t=!0;else if(!n.target.hasAttribute("nomodule")||!t)return;n.preventDefault()}),!0),e.type="module",e.src=".",document.head.appendChild(e),e.remove()}}();</script>
66 
66<script src="https://okaydev.co/dist/assets/polyfills-legacy-BzKQwQQB.js" nomodule onload="e=new CustomEvent(&#039;vite-script-loaded&#039;, {detail:{path: &#039;vite/legacy-polyfills-legacy&#039;}});document.dispatchEvent(e);" integrity="sha384-pH8N5ycuIq+ACzM6fhMz2e8UzeuN+j7PHg3PG6BlBNnbtcF5l0yREZ+Qz6Nz5cnB"></script>
66 
66<script type="module" src="https://okaydev.co/dist/assets/app-BiaPDw27.js" crossorigin onload="e=new CustomEvent(&#039;vite-script-loaded&#039;, {detail:{path: &#039;src/js/app.js&#039;}});document.dispatchEvent(e);" integrity="sha384-rc5tBKMHskM7eBhFEZPTGXy6OHE1v9kVH3CFceI2+biaB/epTvymjBWYPcAm/ON2"></script>
66 <link
67href="https://okaydev.co/dist/assets/HeaderLogoLetters-CMLHzChc.js" rel="modulepreload" crossorigin integrity="sha384-pjhTnwsDelDxaY6fqULoIHCayLxtTzRhoYqKTVaO+87m1qwAkztwnQjVugQ7c2/q"><link
68href="https://okaydev.co/dist/assets/refreshNavbarAuth-V-4DhXEm.js" rel="modulepreload" crossorigin integrity="sha384-0aZeN9dWGPf+9eV9pvZnoPI036VrIYihmPuUvMvWVuSHgtMqyKN6ftO7P1UMFRdR"><link
69href="https://okaydev.co/dist/assets/lazyDialog-CU88mIO4.js" rel="modulepreload" crossorigin integrity="sha384-vYPSV+cKPQU3zXSX+RzB5WHwKiBbt2oSUEe/pmXdy6rR9d2zYHnnXv0+qgCFZaQ8"><link
70href="https://okaydev.co/dist/assets/app-4P6e9Apm.css" rel="stylesheet"><link
71href="https://okaydev.co/dist/assets/HeaderLogoLetters-DngiwBoB.css" rel="stylesheet"> 
71<script src="https://okaydev.co/dist/assets/app-legacy-CcTcNDK7.js" nomodule onload="e=new CustomEvent(&#039;vite-script-loaded&#039;, {detail:{path: &#039;src/js/app-legacy.js&#039;}});document.dispatchEvent(e);" integrity="sha384-w6ID9rdE1/PtnaIaIVSfmeV7xrtdYPWgWvY6pXl6WZ6mtzjOqN4HYDG8uDhC6xaJ"></script>
71 <!--# else --> 
71<script>function setCookie(name,value,days,secure){let expires="";if(days){const date=new Date();date.setTime(date.getTime()+(days*24*60*60*1000));expires="; expires="+date.toUTCString();}
72let cookieString=name+"="+(value||"")+expires+"; path=/";if(secure){cookieString+="; Secure";}
73document.cookie=cookieString;}
74setCookie("critical-css","1",365,1);</script>
74 <style>@media (max-width:1023px){.project-page-title{grid-area:title;margin-block:0;padding-block:0;font-size:22px;line-height:40px;white-space:normal}.project-page-layout .author-ctas,.project-page-layout .author-ctas-2,.project-page-layout .bento-project-overlay-actions{grid-area:metrics;width:100%}}@font-face{font-display:swap;font-family:Aeonik;font-style:normal;font-weight:100 900;src:url(/dist/assets/AeonikPro-VF-DJagqNti.woff2) format("woff2")}@font-face{font-display:optional;font-family:Megazoid;font-style:normal;font-weight:400;src:url(/dist/assets/Megazoid-Regular-DP6yeqDh.woff2) format("woff2")}@font-face{font-display:swap;font-family:Aeonik Mono;font-style:normal;font-weight:400;src:url(/dist/assets/AeonikMono-Regular-BJhjWe-O.woff2) format("woff2")}.bento-identity-card__content>.bento-identity-card__header{display:flex;align-items:center;justify-content:space-between;gap:12px;grid-area:eyebrow;min-width:0;height:11px;min-height:0}.bento-identity-card__team-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;grid-area:badges}.bento-identity-card__avatar{grid-area:avatar;align-self:start;justify-self:start;position:relative;width:auto;height:2lh;aspect-ratio:4/5;font-size:var(--bento-identity-name-fit-size,clamp(28px,4.4vw,44px));line-height:.92;perspective:900px}.bento-identity-card__copy{grid-area:name;padding-right:clamp(8px,1vw,14px)}@media (max-width:767px){.bento-identity-card__content>.bento-identity-card__header .bento-details-card__actions{grid-area:utility;width:100%;margin:4px 0 0;border-top:1px solid;padding-top:calc(var(--bento-identity-content-gap) + 4px - 6.5px)}}.bento-identity-card__actions{grid-area:actions;display:grid;align-self:end;gap:10px}.bento-social-icons.bento-identity-card__profile-social-icons{--bento-profile-social-hit-size:38px;grid-area:social;align-self:start;width:100%;margin-left:calc((var(--bento-profile-social-hit-size) - 19px)/-2)}.bento-identity-card__overlay-details{--bento-gig-fade-width:1.75em;--bento-gig-fade-stops:rgb(from var(--bento-theme-surface) r g b/0%) 0%,rgb(from var(--bento-theme-surface) r g b/1.5%) 18%,rgb(from var(--bento-theme-surface) r g b/6%) 36%,rgb(from var(--bento-theme-surface) r g b/13%) 54%,rgb(from var(--bento-theme-surface) r g b/24%) 72%,rgb(from var(--bento-theme-surface) r g b/37%) 86%,rgb(from var(--bento-theme-surface) r g b/100%) 100%;display:block;grid-area:work;min-width:0}.bento-stats-card__emoji{grid-area:1/1;display:block;line-height:1;will-change:transform,opacity}@media (min-width:0){.bento-identity-card.is-expanded .bento-identity-card__team-badges{grid-area:auto;margin-top:12px}.bento-identity-card.is-expanded .bento-identity-card__profile-column{--bento-profile-info-space:clamp(18px,2.2vw,28px);grid-area:profile;gap:var(--bento-profile-info-space)}.bento-identity-card.is-expanded .bento-identity-card__information-column{grid-area:information;gap:0;padding-top:clamp(8px,.85vw,12px)}}.bento-user-hub-aside.bento-identity-card .bento-user-hub-aside__utility-actions{grid-area:utility;align-self:end;width:100%;margin:0 0 -6.5px;border:0;border-top:1px solid;padding:calc(var(--bento-identity-content-gap) - 6.5px - 1px) 0 0;color:var(--bento-theme-ink)}.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date{display:flex;align-items:stretch;gap:inherit;grid-area:head;min-width:0;width:100%}.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-client,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-client,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-client,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-client,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-credits{grid-area:unset;grid-column:1/-1;width:100%}@media (max-width:1023px){.bento-project-card.is-expanded:has([data-bento-project-overlay-header]) .bento-project-card__exp
74anded-title{display:block;grid-area:title;position:relative;min-width:0;height:var(--overlay-close-size);margin:0;padding:0;overflow:hidden;font-size:22px;line-height:var(--overlay-close-size);white-space:nowrap}.bento-project-card.is-expanded:has([data-bento-project-overlay-header]) .author-ctas,.bento-project-card.is-expanded:has([data-bento-project-overlay-header]) .author-ctas-2{grid-area:metrics;width:100%;min-width:0}.bento-project-card.is-expanded:has([data-bento-project-overlay-header]) .bento-card__close{grid-area:close;align-self:start;width:var(--overlay-close-size);height:var(--overlay-close-size);margin-left:0}.page-project-overlay .bento-project-card__expanded-title{grid-area:title;height:var(--overlay-close-size);margin:0;padding:0;font-size:22px;line-height:var(--overlay-close-size)}.page-project-overlay .bento-card__close{grid-area:close;width:var(--overlay-close-size);height:var(--overlay-close-size);margin-left:0}.page-project-overlay .author-ctas,.page-project-overlay .author-ctas-2,.page-project-overlay .bento-project-overlay-actions{grid-area:metrics;width:100%}}@font-face{font-display:swap;
74font-family:FallbackFont;src:local("Arial");font-weight:400}@font-face{font-display:swap;font-family:FallbackFontMono;src:local("monospace");font-weight:400}@font-face{font-display:swap;font-family:FallbackFontBold;src:local("Arial Bold");font-weight:800}@font-face{font-display:swap;font-family:Aeonik;font-weight:100 900;font-style:italic;src:url(/dist/assets/AeonikPro-Italic-VF-DGkIg-ar.woff2) format("woff2"),url(/dist/assets/AeonikPro-Italic-VF-WifKrdD1.woff) format("woff")}@font-face{font-display:swap;font-family:Aeonik;font-weight:100 900;font-style:normal;src:url(/dist/assets/AeonikPro-VF-DJagqNti.woff2) format("woff2"),url(/dist/assets/AeonikPro-VF-B5-mzo4h.woff) format("woff")}@font-face{font-display:swap;font-family:Aeonik Mono;font-weight:400;font-style:normal;src:url(/dist/assets/AeonikMono-Regular-BJhjWe-O.woff2) format("woff2"),url(/dist/assets/AeonikMono-Regular-v8syvusg.woff) format("woff")}@font-face{font-display:swap;font-family:Megazoid;font-weight:400;font-style:normal;src:url(/dist/assets/Megazoid-Regular-DP6yeqDh.woff2) format("woff2"),url(/dist/assets/Megazoid-Regular-DDQUTSy0.woff) format("woff")}[data-page=login] [data-handle=login]{display:flex;flex-direction:column;min-height:calc(100svh - var(--core-header-height))}[data-page=login] [data-handle=login] .login-container{display:flex;flex:1 1 auto;align-items:center;justify-content:center;width:100%;padding-top:calc(var(--gutter-y)*2);padding-bottom:calc(var(--gutter-y)*3)}[data-page=login] [data-handle=login] .login-container .login-panel{width:100%;max-width:360px;margin-inline:auto}[data-page=login] [data-handle=login] .login-container .heading{font-family:Megazoid,FallbackFontBold,arial,helvetica,sans-serif;font-feature-settings:"liga" on,"kern" on,"ss01" on,"ss04" on,"ss12" on;font-size:clamp(48px,5vw,192px);font-weight:400;letter-spacing:.005em;line-height:1;font-size:clamp(40px,6vw,64px);margin-bottom:28px;text-align:center;text-transform:uppercase}[data-page=login] [data-handle=login] .login-container .content{width:100%}[data-page=login] [data-handle=login] .login-container form{display:flex;flex-direction:column;gap:18px;width:100%}[data-page=login] [data-handle=login] .login-container .field-container{position:relative;display:flex;flex-direction:column;align-items:stretch;width:100%}[data-page=login] [data-handle=login] .login-container .field-container label{margin-bottom:8px}[data-page=login] [data-handle=login] .login-container .field-container #password{padding-right:48px}[data-page=login] [data-handle=login] .login-container .field-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}[data-page=login] [data-handle=login] .login-container .field-label-row label{margin-bottom:0}[data-page=login] [data-handle=login] .login-container .password-reveal-wrapper{position:absolute;top:auto;right:16px;bottom:14px;width:20px;height:20px;transform:none}[data-page=login] [data-handle=login] .login-container .password-reveal-wrapper label{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;border-radius:5px}[data-page=login] [data-handle=login] .login-container .password-reveal-wrapper label:after{display:none}[data-page=login] [data-handle=login] .login-container .password-reveal-wrapper #password-reveal{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:1;clip-path:inset(50%)}[data-page=login] [data-handle=login] .login-container .password-reveal-wrapper .eye-fill{display:none}[data-page=login] [data-handle=login] .login-container .password-reveal-wrapper svg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}[data-page=login] [data-handle=login] .login-container .label-wrap{margin:2px 0 4px}[data-page=login] [data-handle=login] .login-container .label-wrap input[type=checkbox]{flex-shrink:0;background-color:color-mix(in srgb,var(--text-current) 6%,var(--bg-current))!important;border:1px solid color-mix(in srgb,var(--text-current) 28%,transparent)!important;border-radius:4px}[data-page=login] [data-handle=login] .login-container .label-wrap input[type=checkbox]:before{border-radius:2px;box-shadow:inset 1em 1em var(--text-current)}[data-page=login] [data-handle=login] .login-container button[type=submit]{width:100%;margin-top:6px}[data-page=login] [data-handle=login] .login-container .forgot-password{display:inline-block;position:relative;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;
74font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:12px;line-height:1;text-transform:uppercase;position:absolute;top:0;right:0;flex-shrink:0;color:color-mix(in srgb,var(--text-current) 70%,transparent)}[data-page=login] [data-handle=login] .login-container .sign-up-message{margin-top:28px;text-align:center;color:color-mix(in srgb,var(--text-current) 70%,transparent)}[data-page=login] [data-handle=login] .login-container .sign-up-message a{display:inline-block;position:relative;font-weight:700;color:var(--text-current)}@media (min-width:768px){.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.is-people-author-date{grid-area:head}.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-client,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-client,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-client,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-client,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-credits{grid-area:unset;grid-column:auto;width:100%}
74.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-agency,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-agency{grid-area:agency}.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-client,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-client,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-client,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-client{grid-area:client}.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-credits,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-credits{grid-area:credits}.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col.is-people>.project-awards-section{grid-area:awards}[data-page=login] [data-handle=login] .login-container .forgot-password:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--text-current);transform:scaleX(0);transform-origin:right top;will-change:transform}[data-page=login] [data-handle=login] .login-container .sign-up-message a:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--text-current);transform:scaleX(0);transform-origin:right top;will-change:transform}.hide-on-desktop{display:none!important}}body.is-dark [data-handle=login] .login-container form label{margin-left:0;color:var(--text-current)}body.is-dark [data-handle=login] .login-container form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]){box-sizing:border-box;width:100%;padding:12px 14px;font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif!important;font-size:16px!important;line-height:1.4;color:var(--text-current)!important;caret-color:var(--text-current);background-color:color-mix(in srgb,var(--text-current) 6%,var(--bg-current))!important;border:1px solid color-mix(in srgb,var(--text-current) 14%,transparent)!important;border-radius:8px;will-change:transform}body.is-dark [data-handle=login] .login-container form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):-webkit-autofill{-webkit-text-fill-color:var(--text-current)!important;box-shadow:0 0 0 1000px color-mix(in srgb,var(--text-current) 6%,var(--bg-current)) inset!important}body.is-dark [data-handle=login] .login-container form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):-webkit-autofill{will-change:transform}body.is-dark [data-handle=login] .login-container form #password{padding-right:48px}body.is-dark [data-handle=login] .login-container form .password-reveal-wrapper svg,body.is-dark [data-handle=login] .login-container form .password-reveal-wrapper svg path{f
74ill:var(--text-current)!important}.bento-customizer.is-floating.is-project-details[data-project-details-panel] .publish-toggle-label>*{grid-area:1/1}.home-feature-directory-stack .pagination-actions,[data-handle=directory] .directory-container .pagination-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-start;min-width:0}.home-feature-directory-stack .pagination-info,[data-handle=directory] .directory-container .pagination-info{font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-variant-numeric:lining-nums proportional-nums slashed-zero;font-feature-settings:"ss08" on,"ss02" on,"ss07" on;font-size:14px;line-height:1.5;letter-spacing:.21px;grid-area:info;align-self:center;text-align:right;min-width:0}.home-feature-directory-stack .pagination-upgrade,[data-handle=directory] .directory-container .pagination-upgrade{font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-variant-numeric:lining-nums proportional-nums slashed-zero;font-feature-settings:"ss08" on,"ss02" on,"ss07" on;font-size:14px;line-height:1.5;letter-spacing:.21px;grid-area:upgrade;display:flex;align-items:baseline;justify-content:center;gap:10px;justify-self:center;text-align:center}@media (max-width:767px){.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col:not(.is-people)>*,.bento-project-card.is-expanded .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col:not(.is-people)>*,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-discussion-layout>.project-link-credits>.project-link-credits-col:not(.is-people)>*,.project-page-layout .bento-project-overlay-fragment .portfolio-bottom.is-bento-overlay>.project-link-credits>.project-link-credits-col:not(.is-people)>*{grid-area:auto;grid-column:1/-1}[data-handle=home] .work-item{position:relative;grid-area:1/1;width:min(305px,100vw - 2*var(--gutter-cap));border-radius:6px;visibility:hidden;opacity:0}}*,:after,:before{box-sizing:border-box}body{min-height:100vh;min-height:100dvh;margin:0}ul[class]{padding:0;list-style-type:""}a{text-decoration:none}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}button,input{font:inherit}:root{--metric-count-ch:6ch;--metric-count-min-width:6ch;--metric-action-icon-size:20px;--metric-action-row-gap:6px;--metric-action-inner-gap:4px;--metric-action-cluster-min-width:calc(var(--metric-action-icon-size) + var(--metric-action-inner-gap) + var(--metric-count-min-width));--metric-profile-pill-aspect-ratio:2/1}body{color:var(--text-current);font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-variant-numeric:lining-nums proportional-nums slashed-zero;font-feature-settings:"ss02" on,"ss07" on,"ss08" on;font-weight:400;font-style:normal;font-size:18px;line-height:1.5;letter-spacing:.18px;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}.button,button,input,label{font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-feature-settings:"ss08" on,"ss02" on,"ss07" on;font-size:18px;line-height:1.5;letter-spacing:.18px;border-radius:0;font-weight:400;font-variant-numeric:lining-nums proportional-nums slashed-zero;font-feature-settings:"ss02" on,"ss07" on,"ss08" off;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}input,label{text-transform:none}label{font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:12px;line-height:1;text-transform:uppercase}input[type=password]:not(:placeholder-shown){font-family:sans-serif}input:-webkit-autofill{-webkit-text-fill-color:inherit;box-shadow:0 0 0 1000px var(--bg-current,#fff) inset!important}input:-webkit-autofill{will-change:transform}body.is-dark input:-webkit-autofill{background-color:transparent!important;background-image:none!important;-webkit-text-fill-color:var(--text-current);box-shadow:0 0 0 1000px var(--bg-current) inset!important}body.is-dark input:-webkit-autofill{will-change:transform}form label{margin-bottom:10px;margin-left:17px}form input{background-color:#fff;border:1px solid var(--text-current);border-radius:5px;padding:16px;width:100%;display:block;resize:none;will-change:transform}form input:-webkit-autofill{-webkit-text-fill-color:inherit;box-shadow:0 0 0 1000px #fff inset!important}form input:-webkit-autofill{will-change:transform}form input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-grid!important;place-content:center;min-width:18px;min-height:18px;width:auto;height:auto;padding:0}form input[type=checkbox]:before{content:"";display:block;width:11px;height:11px;border-radius:50%;transform:scale(0);box-shadow:inset 1em 1em var(--text-current);will-change:transform,opacity}form button{margin:0;border:0;background-color:transparent;color:inherit;-webkit-appearance:none;appearance:none;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;
74font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:14px;line-height:1;text-transform:uppercase;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:22px;padding:0 25px;color:var(--bg-current);background-color:var(--text-current);overflow:hidden;margin-top:calc(var(--gutter-y)*.75);will-change:transform}.heading,h1{margin-top:0;margin-bottom:0;font-weight:800;line-height:1}h1{font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-weight:900;font-size:clamp(63px,6.7vw,146px);font-feature-settings:"dlig" on,"ss11" on,"ss09" on,"ss08" on,"ss05" on,"ss07" on,"ss06" on,"ss03" on,"case" on;line-height:.96;letter-spacing:-1.92px}p{margin-top:1em;margin-bottom:0}p:first-child{margin-top:0}.label-1{font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:14px;line-height:1;text-transform:uppercase}.label-2{font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:12px;line-height:1;text-transform:uppercase}@media screen and (max-width:767px){form label{margin-left:0}}:root{box-sizing:border-box;--vw:100vw;--vh:100vh;--text-current:#fff;--bg-current:#121212}*,:after,:before{box-sizing:inherit}@media (max-width:1023px),(hover:none) and (pointer:coarse){*,:after,:before{will-change:auto!important}}body,html{width:100%;margin:0;background-color:var(--bg-current)}body{overflow-x:clip}body.is-dark,html.is-dark{color-scheme:dark}.bg-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;will-change:transform,opacity}.bg-layer--dark{background-color:#121212;opacity:1}.bg-layer--light{background-color:#fff;opacity:0}main[data-router-wrapper]{position:relative;z-index:1;width:100%}img,svg{vertical-align:middle}.page-container{padding-top:60px;padding-bottom:calc(var(--gutter-y)*3)}@media (max-width:767px){h1{letter-spacing:-1.26px}.hide-on-mobile{display:none!important}.page-container{padding-top:calc(var(--gutter-y)*2);padding-bottom:calc(var(--gutter-y)*6);backface-visibility:hidden}.okay-form .label-wrap{margin-left:17px}}.wrapper{width:100%;margin-left:auto;margin-right:auto;padding-left:var(--gutter-cap);padding-right:var(--gutter-cap)}[data-handle]>.page-container.wrapper{max-width:var(--page-content-shell-max-width);margin-left:auto;margin-right:auto}:is([data-handle=login],[data-handle=signUp],[data-handle=businessSignUp],[data-handle=editProfile],[data-handle=managePortfolio],[data-handle=manageTeam],[data-handle=membership],[data-handle=accountSettings],[data-handle=accountSettingsBusiness],[data-handle=notifications])>.page-container.wrapper{max-width:calc(1280px + var(--core-header-outer-padding)*2);margin-left:auto;margin-right:auto;padding-left:calc(var(--core-header-outer-padding) + var(--core-header-inner-padding-x-left));padding-right:calc(var(--core-header-outer-padding) + var(--core-header-inner-padding-x-right))}craft-csrf-input{display:none!important}img{max-width:100%}dialog:not([open]){display:none}button{touch-action:manipulation}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.okay-form .heading{font-family:Megazoid,FallbackFontBold,arial,helvetica,sans-serif;font-feature-settings:"liga" on,"kern" on,"ss01" on,"ss04" on,"ss12" on;font-size:clamp(48px,5vw,192px);font-weight:400;letter-spacing:.005em;line-height:1;margin-bottom:var(--gutter-y)}.okay-form .field-container{display:flex;flex-wrap:wrap;align-items:center;width:100%}.okay-form .field-container:has([required]) label:after{content:"*";margin-left:5px;color:#dc3545}.okay-form .label-wrap{display:flex;align-items:center}.okay-form .label-wrap input{margin-right:6px}.okay-form button[type=submit]{margin-top:0}.brand-variant-card__choice>span{grid-area:description;color:#525252;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-size:10px;line-height:1.2;text-transform:uppercase}.brand-variant-swatches{display:flex;flex-wrap:wrap;grid-area:swatches;gap:8px}
74.brand-download-links{display:flex;grid-area:downloads;justify-self:end;gap:6px}:root{--color-bg-black-rgb:12,12,12}:root{--color-bg-gray-dark-4-rgb:2,2,2}:root{--color-bg-gray-dark-3-rgb:2,2,2}:root{--color-bg-gray-dark-2-rgb:82,82,82}:root{--color-bg-gray-dark-1-rgb:129,129,129}:root{--color-bg-gray-light-4-rgb:242,242,242}:root{--color-bg-gray-light-3-rgb:234,234,234}:root{--color-bg-gray-light-2-rgb:204,204,204}:root{--color-bg-gray-light-1-rgb:184,184,184}:root{--color-bg-gray-rgb:102,102,102}:root{--color-bg-gray-light-rgb:191,191,191}:root{--color-bg-white-rgb:255,255,255}:root{--color-bg-yellow-rgb:238,230,66}:root{--color-bg-yellow-light-rgb:255,253,217}:root{--color-bg-red-rgb:236,66,66}:root{--color-bg-red-light-rgb:255,217,217}:root{--color-bg-orange-rgb:237,148,66}:root{--color-bg-orange-light-rgb:255,235,217}:root{--color-bg-teal-rgb:66,227,237}:root{--color-bg-teal-light-rgb:204,252,255}:root{--color-bg-purple-rgb:109,66,237}:root{--color-bg-purple-light-rgb:236,229,255}:root{--color-bg-green-rgb:66,237,145}:root{--color-bg-green-light-rgb:204,255,228}:root{--color-bg-placeholder-light-rgb:241,241,241}:root{--color-bg-placeholder-dark-rgb:0,0,0}:root{--max-width:1920px;--column-count:12;--gutter-cap:36px;--gutter-x:24px;--gutter-y:40px;--page-content-max-width:1280px;--page-content-shell-max-width:calc(var(--page-content-max-width) + (var(--gutter-cap)*2));--social-feed-max-width:800px;--social-feed-grid-gap:24px;--text-current:#fff;--bg-current:#121212}:root{--reduced-motion:1}:root{--core-header-outer-padding:calc(var(--gutter-cap)*.5);--core-header-hamburger-padding-right:23px;--core-header-hamburger-svg-trim:4px;--core-header-inner-padding-y:13px;--core-header-inner-padding-x-left:var(--core-header-inner-padding-y);--core-header-inner-padding-x-right:calc(var(--core-header-hamburger-padding-right) - var(--core-header-hamburger-svg-trim));--core-header-logo-height:32px;--core-header-control-height:36px;--core-header-inner-height:calc((var(--core-header-inner-padding-y)*2) + max(var(--core-header-logo-height),var(--core-header-control-height)));
74--core-header-height:calc((var(--core-header-outer-padding)*2) + var(--core-header-inner-height));--core-header-pill-radius:9999px;--core-header-avatar-indicator-ring:var(--bg-current);--core-header-shadow:0 10px 6px 0 rgba(0,0,0,.06);--core-header-shadow-dark:0 4px 10px rgba(0,0,0,.4);--core-header-glass-tint-rgb:255 255 255;--core-header-glass-tint-alpha:1;--core-header-glass-highlight-alpha:.7;--core-header-glass-border-alpha:.2;--core-header-glass-backdrop-blur:2px;--core-header-glass-saturate:1.2;--core-header-glass-contrast:1.15;--core-header-glass-shadow-y:6px;--core-header-glass-shadow-blur:10px;--core-header-glass-shadow-alpha:.12;--core-header-glass-sheen-opacity:0;--core-header-glass-sheen-highlight-opacity:max(var(--core-header-glass-sheen-opacity),0);--core-header-glass-sheen-shade-opacity:max(calc(var(--core-header-glass-sheen-opacity)*-1),0);--core-header-glass-fallback-blur:3px;--core-header-glass-fallback-opacity:.25;--core-header-glass-fallback-edge-alpha:.5;--core-header-glass-fallback-edge-shadow-alpha:.5;--core-header-glass-fallback-edge-size:12px;--core-header-glass-liquid-scale:30;--core-header-glass-chromatic-aberration:.4;--core-header-glass-map-depth:1;--core-header-glass-map-edge-waist:.5;--core-header-glass-map-edge-x:1.5;--core-header-glass-map-edge-y:.45;--core-header-glass-map-center-inset-x:.9;--core-header-glass-map-center-inset-y:.55;--core-header-glass-map-center-blur:.2;--core-header-glass-map-center-opacity:1;--core-header-hover-intent:.1s}.core-header-slot{position:relative;flex-shrink:0;height:var(--core-header-height)}.core-header{position:fixed;top:0;left:0;right:0;z-index:2000;width:100%;padding:var(--core-header-outer-padding) var(--gutter-cap);color:var(--text-current);transform:translate3d(0,var(--core-header-scroll-shift,0),0);backface-visibility:hidden}@media (prefers-reduced-motion:no-preference){html:not([data-header-intro-seen=true]) .core-header[data-header-enter-pending] .btn-mobile-nav,html:not([data-header-intro-seen=true]) .core-header[data-header-enter-pending] .core-header-pill,html:not([data-header-intro-seen=true]) .core-header[data-header-enter-pending] .core-logo-container,html:not([data-header-intro-seen=true]) .core-header[data-header-enter-pending] .core-nav-list-primary>li:not(.is-empty),html:not([data-header-intro-seen=true]) .core-header[data-header-enter-pending] .okaydev-navbar-auth-root,html:not([data-header-intro-seen=true]) .core-header[data-header-enter-pending] .okaydev-navbar-leading-root{visibility:hidden}}body[data-header-theme=purple] .core-header .header-backdrop{opacity:1}body[data-header-theme=purple] .core-header-pill{box-shadow:var(--core-header-shadow)}body[data-header-theme=purple] .core-header{--core-header-avatar-indicator-ring:#6d42ed;color:#fff}body[data-header-theme=purple] .core-header .btn-mobile-nav,body[data-header-theme=purple] .core-header .core-nav-list-primary a.label-1,body[data-header-theme=purple] .core-header .sign-in a.label-1{color:#fff}body[data-header-theme=purple] .core-header .core-nav a.btn-core-sign-up{--btn-core-sign-up-bg:#fff;--btn-core-sign-up-fg:#0c0c0c;--btn-core-sign-up-hover-bg:#0c0c0c;--btn-core-sign-up-hover-fg:#fff}body[data-header-theme=purple] .core-header .header-backdrop{background-color:#6d42ed}body.is-dark{--core-header-glass-tint-rgb:12 12 12;--core-header-glass-tint-alpha:1;--core-header-glass-highlight-alpha:0;--core-header-glass-saturate:1.2;--core-header-glass-contrast:1.15;--core-header-glass-shadow-y:6px;--core-header-glass-shadow-blur:10px;--core-header-glass-shadow-alpha:.45;--core-header-glass-sheen-opacity:-1;--core-header-glass-liquid-scale:20;--core-header-glass-chromatic-aberration:.7;--core-header-glass-map-depth:1;--core-header-glass-map-edge-waist:.5;--core-header-glass-map-edge-y:.8;--core-header-glass-map-center-inset-y:.4}.core-header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--gutter-x);position:relative;width:100%;max-width:var(--page-content-max-width);margin-inline:auto;min-height:var(--core-header-inner-height);padding:var(--core-header-inner-padding-y) var(--core-header-inner-padding-x-right) var(--core-header-inner-padding-y) var(--core-header-inner-padding-x-left);border-radius:0;box-shadow:none;overflow:visible}.core-header-pill{--core-header-pill-cap-size:calc(var(--core-header-inner-height)/2);position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;display:flex;align-items:stretch;width:100%;max-width:none;border-radius:var(--core-header-pill-radius);box-shadow:none;transform:translateZ(0)}.core-header-pill-cap{flex:0 0 var(--core-header-pill-cap-size);width:var(--core-header-pill-cap-size);min-width:var(--core-header-pill-cap-size)}.core-header-pill-mid{flex:1 1 auto;min-width:0}@media (min-width:1101px){:root{--core-header-inner-padding-y:10px;--core-header-inner-padding-x-left:12px;--core-header-inner-padding-x-right:calc(var(--core-header-hamburger-padding-right) - var(--core-header-hamburger-svg-trim))}.core-header-inner{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:0}.core-header .core-logo-container{grid-area:1/1;justify-self:start}.core-header .core-nav{grid-area:1/1;width:100%;position:static}}.core-header .header-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;border-radius:inherit;opacity:0;transform:translateZ(0);-webkit-backdrop-filter:none;backdrop-filter:none;background-color:transparent;will-change:transform,opacity}.core-header .core-logo-container{flex-shrink:0;position:relative;z-index:3}.core-header .core-logo-link{display:flex;align-items:center;border-radius:2px;color:var(--text-current);position:relative;z-index:1;touch-action:manipulation}.core-logo-brand-menu{position:absolute;top:calc(100% + 14px);left:-8px;z-index:20;width:min(304px,100vw - var(--gutter-cap)*2);color:#eaeaea;font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;visibility:hidden;will-change:transform}.core-logo-brand-menu__surface{position:relative;border:1px solid #333;border-radius:14px;background:#161616;box-shadow:0 14px 36px rgba(0,0,0,.42)}.core-logo-brand-menu__content{max-height:calc(100dvh - var(--core-header-height) - 28px);overflow-x:hidden;overflow-y:auto;padding:8px;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.core-logo-brand-menu__content::-webkit-scrollbar{display:none}.core-logo-brand-menu__label,.core-logo-brand-menu__title{margin:0;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-weight:400;text-transform:uppercase}.core-logo-brand-menu__heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 8px;color:inherit;text-decoration:none}.core-logo-brand-menu__heading:after{content:none}.core-logo-brand-menu__title{padding:0;color:#fff;font-size:14px;letter-spacing:.08em}.core-logo-brand-menu__page{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #525252;border-radius:50%;color:#b8b8b8;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-size:10px;font-weight:700;line-height:1;text-decoration:none}.core-logo-brand-menu__page:after{content:none}.core-logo-brand-menu__group{border-top:1px solid #303030;padding-top:6px}.core-logo-brand-menu__group+.core-logo-brand-menu__group{margin-top:6px}.core-logo-brand-menu__label{padding:2px 6px 5px;color:#b8b8b8;font-size:12px;letter-spacing:.09em}.core-logo-brand-menu__toggle{display:flex;align-items:center;gap:8px;width:100%;border:0;border-radius:8px;padding:4px 2px;color:#b8b8b8;background:0 0;text-align:left}.core-logo-brand-menu__toggle .core-logo-brand-menu__label{flex:1;padding:0}.core-logo-brand-menu__chevron{display:grid;place-items:center;flex-shrink:0;width:14px;
74height:14px;margin-inline:4px 0;will-change:transform}.core-logo-brand-menu__chevron svg{display:block;width:100%;height:100%}.core-logo-brand-menu__assets{padding-block:4px}.core-logo-brand-menu__asset{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:40px;border-radius:8px;padding:2px 4px 2px 2px;color:#eaeaea;font-size:12px;font-weight:600;line-height:1.1}.core-logo-brand-menu__actions{display:flex;gap:4px}.core-logo-brand-menu__actions a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:26px;border:1px solid #525252;border-radius:6px;padding-inline:5px;color:#ccc;background:#222;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-size:8px;font-weight:400;letter-spacing:.04em;text-decoration:none}.core-logo-brand-menu__actions a:after{content:none}.core-logo-brand-menu__preview{display:grid;place-items:center;width:36px;height:36px;border-radius:6px;padding:4px;overflow:hidden}.core-logo-brand-menu__preview img{display:block;width:100%;height:100%;object-fit:contain}.core-logo-brand-menu__preview--light{background:#f2f2f2}.core-logo-brand-menu__preview--purple{background:#6d42ed}.core-logo-brand-menu__preview--dark{background:#0c0c0c}.core-logo-brand-menu__footer{display:flex;gap:8px;margin-bottom:8px;padding-bottom:8px}.core-logo-brand-menu__kit{min-width:0;flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;text-align:center;gap:8px;min-height:40px;border-radius:999px;padding:9px 8px 9px 12px;color:#0c0c0c;background:#eee642;font-size:12px;font-weight:650;line-height:1;text-decoration:none;white-space:nowrap;will-change:transform}.core-logo-brand-menu__kit:after{content:none}.core-logo-brand-menu__kit span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;background:#0c0c0c;font-size:15px;will-change:transform}.core-logo-brand-menu__kit--guidelines{flex:0 0 auto;color:#fff;background:#6d42ed;will-change:transform}.core-logo-brand-menu__kit--guidelines span{padding-bottom:2px;color:#0c0c0c;background:#fff;will-change:transform}.core-logo-brand-menu .core-logo-brand-menu__surface{opacity:0;visibility:hidden;filter:blur(2px);transform:scale(.98) translateY(-8px);transform-origin:center center;visibility:visible;will-change:transform,opacity}@media (prefers-reduced-motion:reduce){:root{--reduced-motion:0}.core-logo-brand-menu__surface{animation-duration:NaNs!important;filter:none!important;transform:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}.core-header .logo-name{--logo-fill-outer:#0c0c0c;--logo-fill-inner:#eee642;display:inline-flex;width:auto;height:var(--core-header-logo-height)}.core-header .logo-name svg{width:auto;height:100%;overflow:visible}.core-header .logo-name svg path{will-change:transform}.core-header .logo-name .logo-letter{transform-box:fill-box;transform-origin:center;will-change:transform}.core-header .logo-name .logo-letter-face{will-change:transform}body.is-dark .core-header .logo-name{--logo-fill-outer:#fff;--logo-fill-inner:#0c0c0c}body[data-header-theme=purple] .core-header .logo-name{--logo-fill-outer:#0c0c0c;--logo-fill-inner:#eee642}body:not([data-page=social]):not([data-page=gallery]) .social-feed-top-button{display:none!important}.social-feed-top-button{position:absolute;top:100%;left:50%;margin-top:8px;z-index:2100;display:inline-flex;align-items:center;gap:2px;padding:6px 12px;border-radius:999px;border:0;background-color:#6d42ed;color:#fff;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;opacity:0;transform:translate(-50%,-8px);will-change:transform,opacity}.social-feed-top-button[hidden]{display:none}.social-feed-top-button-icon{display:inline-flex;width:18px;height:18px}.social-feed-top-button-icon svg{width:100%;height:100%}
74.social-feed-top-button-icon svg path{fill:currentColor}.social-feed-top-button-spinner{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:0}:root{--core-nav-user-menu-shadow:0 18px 48px rgba(0,0,0,.16)}.core-nav{display:flex;align-items:center;flex:1 1 auto;min-width:0;width:100%;text-transform:uppercase;position:relative;z-index:2}.core-nav a{display:flex;padding:0 8px;align-items:center;gap:6px;position:relative;border-radius:4px;color:var(--text-current)}.btn-mobile-nav{margin:0;padding:0;border:0;background-color:transparent;color:inherit;-webkit-appearance:none;appearance:none;display:none;align-items:center;justify-content:center;color:var(--text-current);background-color:transparent!important}.btn-mobile-nav .mobile-nav-toggle-icon{display:block;position:relative;width:24px;height:24px}.btn-mobile-nav .mobile-nav-toggle-line{position:absolute;top:50%;left:50%;display:block;width:19px;height:2px;margin-top:-.5px;margin-left:-9.5px;border-radius:999px;background-color:currentColor;transform-origin:center center;will-change:transform,opacity}.btn-mobile-nav .mobile-nav-toggle-line-top{transform:translateY(-3.5px)}.btn-mobile-nav .mobile-nav-toggle-line-middle{opacity:0}.btn-mobile-nav .mobile-nav-toggle-line-bottom{transform:translate(-2.85px,3.5px) scaleX(.7);transform-origin:center center}body[data-header-theme=purple] .core-header .core-nav-list-primary a.label-1{color:#fff}.core-nav-list{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0}.core-nav-list .sign-in,.core-nav-list .sign-up,.core-nav-list li{flex-shrink:0}.core-nav-list-primary{display:flex;align-items:center;width:100%;margin:0}.core-nav-list-primary>li{margin-left:1.2vw}.core-nav-list-link-row{display:contents}@media (max-width:1100px){:root{--core-header-inner-padding-y:8px;--core-header-inner-padding-x-left:12px;--core-header-inner-padding-x-right:calc(var(--core-header-hamburger-padding-right) - var(--core-header-hamburger-svg-trim));--core-header-logo-height:28px}.core-nav-link-roll>span:last-child{display:none}}@media (min-width:1101px){.core-nav{position:static}.core-nav-list-primary,.okaydev-navbar-auth-root{--core-nav-primary-link-font-size:14px;--core-nav-primary-link-hover-font-size:15px;--core-nav-primary-link-roll-duration:.24s;--core-nav-primary-link-roll-stagger:.04s}.core-nav-link-roll{display:inline-grid;align-items:center;justify-items:center;overflow:hidden;vertical-align:bottom;font-size:var(--core-nav-primary-link-hover-font-size);line-height:1}.core-nav-link-roll>span{grid-area:1/1;transform-origin:center;will-change:transform}.core-nav-link-roll>span:first-child{font-size:calc(var(--core-nav-primary-link-font-size)/var(--core-nav-primary-link-hover-font-size)*1em)}.core-nav-link-roll>span:last-child{font-size:1em;transform:translateY(100%)}.core-nav-list-primary a.label-1,.okaydev-navbar-auth-root .sign-in a.label-1{display:inline-block;padding:8px 12px}.core-nav{--core-nav-current-user-gap:4px;--core-nav-avatar-menu-icon-box:24px;--core-nav-avatar-menu-svg-size:20px;--core-nav-avatar-adjacent-visual-gap:calc(var(--core-nav-current-user-gap) + (var(--core-nav-avatar-menu-icon-box) - var(--core-nav-avatar-menu-svg-size))/2 + var(--core-nav-avatar-menu-svg-size)*3.5/24)}.core-nav-list{position:static;justify-content:flex-end}.core-nav-list-primary{flex:0 1 auto;min-width:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);justify-content:center;width:max-content;margin:0;z-index:1}.core-nav-list-primary>li{margin-left:max(4px,1.2vw - 8px)}.okaydev-navbar-auth-root{position:relative;z-index:3}.okaydev-navbar-auth-root.is-navbar-auth-guest{margin-right:calc(var(--core-header-inner-padding-y) - var(--core-header-inner-padding-x-right))}.core-nav-list-pricing{position:relative}.core-nav-list-pricing .okaydev-nav-go-pro-mount{position:absolute;top:50%;left:calc(100% + 12px);transform:translateY(-50%)}}.core-nav a.btn-core-sign-up{border:0;background-color:transparent;color:inherit;-webkit-appearance:none;appearance:none;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;
74font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:14px;line-height:1;text-transform:uppercase;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:22px;background-color:var(--text-current);overflow:hidden;padding:0 15px 0 20px;color:var(--bg-current);--btn-core-sign-up-bg:var(--text-current);--btn-core-sign-up-fg:var(--bg-current);--btn-core-sign-up-hover-bg:#6d42ed;--btn-core-sign-up-hover-fg:#fff;position:relative;isolation:isolate;margin:0 0 0 8px;color:var(--btn-core-sign-up-fg);background-color:var(--btn-core-sign-up-bg);will-change:transform}.core-nav a.btn-core-sign-up svg path{fill:var(--bg-current);will-change:transform}.core-nav a.btn-core-sign-up:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;background-color:var(--btn-core-sign-up-hover-bg);opacity:0;will-change:transform,opacity}.core-nav a.btn-core-sign-up svg path{fill:var(--btn-core-sign-up-fg);will-change:transform}.core-nav-list-primary .core-nav-list-add-project{display:none}.mobile-content-cover{display:none}@media (max-width:1100px){.core-nav{--core-nav-mobile-gutter-cap:12px;--core-nav-mobile-gutter-x:16px;--core-nav-mobile-gutter-y:14px;--core-nav-mobile-links-top:18px;--core-nav-mobile-links-row-gap:calc(var(--core-nav-mobile-gutter-y)*1.5);--core-nav-mobile-content-inline:calc(var(--core-nav-mobile-gutter-cap) + var(--core-nav-mobile-gutter-x));--core-nav-mobile-content-max-width:430px;--core-nav-mobile-panel-bg:#0c0c0c;--core-nav-mobile-account-bg:#121212;--core-nav-mobile-auth-section-gap:26px;--core-nav-mobile-user-menu-row-gap:15px;--core-nav-mobile-panel-height:calc(100dvh - var(--core-header-height,60px));justify-content:flex-start;align-items:center;gap:8px}.core-nav .okaydev-navbar-leading-root{order:1;display:flex;align-items:center;justify-content:flex-end;flex:1 1 auto;min-width:0;width:auto;position:relative;z-index:3}.core-nav .okaydev-navbar-leading-root>:is(.dynamic-block,.servd-dynamic-stale-preview){display:flex;align-items:center;justify-content:flex-end;flex:1 1 auto;min-width:0;width:100%}.core-nav a{padding-left:0;padding-right:0}.core-header .core-nav .mobile-content-cover{display:none;position:fixed;top:var(--core-header-height,60px);left:0;z-index:1998;width:100%;height:var(--core-nav-mobile-panel-height);background-color:transparent}.btn-mobile-nav{display:flex;order:2;flex-shrink:0;position:relative;z-index:3}.core-header .core-nav .core-nav-list{display:flex;flex-wrap:nowrap;align-content:flex-start;justify-content:flex-start;position:fixed;top:var(--core-header-height,60px);left:0;z-index:1999;width:100%;height:var(--core-nav-mobile-panel-height);max-height:var(--core-nav-mobile-panel-height);min-height:0;--text-current:#fff;--bg-current:var(--core-nav-mobile-panel-bg);color:var(--text-current);background-color:transparent;color-scheme:dark;overflow-x:clip;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding-top:var(--core-nav-mobile-links-top);visibility:hidden;opacity:0;transform:scale(.97);transform-origin:center top;isolation:isolate}.core-header .core-nav .core-nav-list a:not(.button):not(.btn-core-sign-up):not(.btn-core-login):not(.btn-core-add-project):not(.memberships-cta):not(.name):not(.username){color:var(--text-current)}.core-header>.core-nav-mobile-panel-bg{position:fixed;top:0;left:0;z-index:0;display:block;width:100%;height:100lvh;background:linear-gradient(180deg,color-mix(in srgb,#6d42ed 12%,#0c0c0c) 0,var(--core-nav-mobile-panel-bg,#0c0c0c) 18%,var(--core-nav-mobile-panel-bg,#0c0c0c) 100%);transform:scaleY(0);transform-origin:center top;opacity:0}.core-header .core-nav .core-nav-list ul.core-nav-list-primary{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--core-nav-mobile-gutter-x);row-gap:var(--core-nav-mobile-links-row-gap);align-items:start;flex-shrink:0;width:100%;max-width:calc(var(--core-nav-mobile-content-max-width) + var(--core-nav-mobile-content-inline)*2);margin-left:auto;margin-right:auto;padding-left:var(--core-nav-mobile-content-inline);padding-right:var(--core-nav-mobile-content-inline)}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li{width:auto;min-width:0;margin-top:0;margin-left:0}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li.core-nav-list-social{grid-column:1;grid-row:1}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li.core-nav-list-projects{grid-column:2;grid-row:1}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li.core-nav-list-directory{grid-column:1;grid-row:2}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li.core-nav-list-articles{grid-column:2;grid-row:2}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li.core-nav-list-jobs{grid-column:1;grid-row:3}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li.core-nav-list-pricing{grid-column:2;grid-row:3}.core-header .core-nav .core-nav-list ul.core-nav-list-primary>li>
74.core-nav-list-link-row>a.label-1{font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-weight:900;font-style:normal;font-size:clamp(36px,3.5vw,63px);font-feature-settings:"dlig" on,"ss11" on,"ss09" on,"ss08" on,"ss05" on,"ss07" on,"ss06" on,"ss03" on,"case" on;line-height:.98;letter-spacing:-.48px;font-size:24px;height:auto;text-transform:none}.core-header .core-nav .core-nav-list ul.core-nav-list-primary .core-nav-list-link-row{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:var(--core-nav-mobile-gutter-x);width:100%}.core-header .core-nav .core-nav-list ul.core-nav-list-primary .core-nav-list-pricing .core-nav-list-link-row{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:calc(var(--core-nav-mobile-gutter-x)*.75);width:100%}.core-header .core-nav .core-nav-list ul.core-nav-list-primary .core-nav-list-pricing .okaydev-nav-go-pro-mount{position:static;top:auto;left:auto;transform:none;flex-shrink:0}.core-header .core-nav .core-nav-list ul.core-nav-list-primary .core-nav-list-add-project{display:none}.sign-up{order:2}.core-nav a.btn-core-sign-up{margin-left:0}.sign-in{order:3;display:flex;align-items:center;height:42px;margin-left:var(--core-nav-mobile-gutter-x)}.okaydev-navbar-auth-root{position:relative;z-index:1;isolation:isolate;padding-left:var(--core-nav-mobile-content-inline);padding-right:var(--core-nav-mobile-content-inline)}.okaydev-navbar-auth-root.is-navbar-auth-guest{margin-top:40px}.core-nav-mobile-account-bg,.core-nav-mobile-account-divider{position:absolute;display:block}.core-nav-mobile-account-bg{z-index:0;top:0;right:0;bottom:0;left:0;background-color:var(--core-nav-mobile-account-bg);opacity:0}
74.core-nav-mobile-account-divider{z-index:1;top:0;left:0;width:100%;height:1px;background-color:#222;opacity:0;transform:scaleX(0);transform-origin:center center}.okaydev-navbar-auth-root>:not(.core-nav-mobile-account-bg):not(.core-nav-mobile-account-divider){position:relative;z-index:2}.okaydev-navbar-auth-root.is-navbar-auth-guest{display:flex;flex-wrap:nowrap;column-gap:var(--core-nav-mobile-gutter-x);align-items:center;justify-content:flex-start;align-self:stretch;width:100%;max-width:calc(var(--core-nav-mobile-content-max-width) + var(--core-nav-mobile-content-inline)*2);margin-left:auto;margin-right:auto}.okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-mobile-account-bg{background-color:transparent}.okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-mobile-account-divider{display:none}.okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up{order:1;display:flex;justify-content:flex-start;flex:0 0 calc((100% - var(--core-nav-mobile-gutter-x))/2)}.okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up .btn-core-sign-up{width:max-content;min-width:0;padding-left:16px;padding-right:12px}.okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in{order:2;flex:0 0 calc((100% - var(--core-nav-mobile-gutter-x))/2);margin-left:0}body[data-header-theme=purple] .core-header .btn-mobile-nav{color:#fff;background-color:transparent!important}body[data-header-theme=purple] .core-header .mobile-nav-toggle-line{background-color:#fff}}@media (max-width:1100px) and (min-width:768px){.core-nav-list-primary>li{margin-left:0}}.okaydev-nav-go-pro-mount{display:inline-flex;align-items:baseline;min-width:0}.navbar-pricing-go-pro-ph{display:none}.okaydev-navbar-leading-root{display:flex;align-items:center;min-width:0}@media (min-width:1101px){.core-nav a.btn-core-sign-up{height:var(--btn-core-add-project-size,36px);padding-left:16px;padding-right:12px;border-radius:9999px}.okaydev-navbar-leading-root{display:none}}.okaydev-navbar-auth-root{display:flex;align-items:center;min-width:0;width:100%}@media (max-width:1100px){.okaydev-navbar-auth-root.is-navbar-auth-guest{display:flex;flex-wrap:nowrap;column-gap:var(--core-nav-mobile-gutter-x);align-items:center;justify-content:flex-start;align-self:stretch;width:100%}.okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up{order:1;display:flex;justify-content:flex-start;flex:0 0 calc((100% - var(--core-nav-mobile-gutter-x))/2)}.okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up .btn-core-sign-up{width:max-content;min-width:0;padding-left:16px;padding-right:12px}.okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in{order:2;flex:0 0 calc((100% - var(--core-nav-mobile-gutter-x))/2);margin-left:0}}@media (min-width:1101px){.okaydev-navbar-auth-root{flex:0 0 auto;width:auto}}.core-nav-guest-extra{display:none}@media (max-width:1100px){.core-header .core-nav .okaydev-navbar-auth-root.is-navbar-auth-guest{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;flex:1 0 auto;align-items:start;padding-bottom:24px}.core-header .core-nav .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up{order:1}.core-header .core-nav .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in{order:2}.core-header .core-nav .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up>a.btn-core-sign-up{--btn-core-sign-up-bg:#42ed91;--btn-core-sign-up-fg:#0c0c0c}.core-header .core-nav .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in>a.btn-core-login{margin:0;border:0;background-color:transparent;color:inherit;-webkit-appearance:none;appearance:none;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:14px;line-height:1;text-transform:uppercase;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:22px;padding:0 25px;color:var(--bg-current);background-color:var(--text-current);overflow:hidden;width:max-content;padding-inline:16px;color:#0c0c0c;background-color:#fff;will-change:transform}.core-nav .core-nav-guest-extra{display:flex;flex-direction:column;grid-column:1/-1;align-self:stretch;position:relative;order:3;flex:0 0 100%;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15)}.core-nav .core-nav-guest-extra ul{position:static;display:flex;flex-wrap:wrap;width:100%;margin:0;padding:0;gap:16px 24px;list-style:none}.core-nav .core-nav-guest-extra .core-nav-guest-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--core-nav-mobile-gutter-x);text-transform:none}.core-nav .core-nav-guest-extra .core-nav-guest-social-nav{margin-top:auto;padding-top:24px}.core-nav .core-nav-guest-extra .core-nav-guest-social-eyebrow{margin:0 0 14px;color:rgba(255,255,255,.6);letter-spacing:.08em}.core-nav .core-nav-guest-extra .core-nav-guest-social a{display:flex;align-items:center;min-height:32px}
74.core-nav .core-nav-guest-extra .core-nav-guest-social svg{display:block;width:22px;height:22px}.core-nav .core-nav-guest-extra .core-nav-guest-social .bento-social-mark--instagram{transform:scale(1.25)}}@media (min-width:640px) and (max-width:1100px) and (orientation:landscape){.core-header .core-nav .core-nav-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:24px;align-items:start;padding-block:24px;padding-left:max(var(--gutter-cap),(100% - var(--page-content-max-width))/2,env(safe-area-inset-left));padding-right:max(var(--gutter-cap),(100% - var(--page-content-max-width))/2,env(safe-area-inset-right))}.core-header .core-nav .core-nav-list ul.core-nav-list-primary{grid-column:1/3;grid-row:1;max-width:none;margin:0;padding:0;column-gap:24px}.core-header .core-nav .core-nav-list .okaydev-navbar-auth-root.is-navbar-auth-guest{grid-column:1/-1;grid-row:1/3;grid-template-columns:subgrid;grid-template-rows:subgrid;gap:24px;max-width:none;margin:0;padding:0}.core-header .core-nav .core-nav-list .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up{grid-column:1;grid-row:2}.core-header .core-nav .core-nav-list .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in{grid-column:2;grid-row:2}.core-header .core-nav .core-nav-list .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in,.core-header .core-nav .core-nav-list .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up{align-self:end}.core-header .core-nav .core-nav-list .okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-guest-extra{grid-column:3/5;grid-row:1/3;min-width:0;margin-top:0;padding-top:0;padding-left:24px;border-top:0;border-left:1px solid rgba(255,255,255,.15)}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest){grid-template-rows:repeat(3,auto) auto}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) ul.core-nav-list-primary{grid-row:1/4;grid-template-rows:subgrid;row-gap:normal;align-items:baseline}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) ul.core-nav-list-primary .core-nav-list-link-row{align-items:baseline}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest{grid-row:1/5}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-in,.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .sign-up{grid-row:4}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-guest-extra{display:grid;grid-row:1/5;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:subgrid}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-guest-extra .core-nav-guest-secondary,.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-guest-extra>nav:first-child{display:grid;grid-column:1/-1;grid-row:1/4;grid-template-columns:subgrid;grid-template-rows:subgrid;row-gap:normal;align-items:baseline}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-guest-extra .core-nav-guest-social-nav{grid-column:1/-1;grid-row:4;align-self:end;margin-top:0;padding-top:0}.core-header .core-nav .core-nav-list:has(>.is-navbar-auth-guest) .okaydev-navbar-auth-root.is-navbar-auth-guest .core-nav-guest-extra .core-nav-guest-social a{align-items:center;min-height:42px}}.app-toolbar{--app-toolbar-inset-left:max(12px,var(--app-safe-left,0px));--app-toolbar-inset-right:max(12px,var(--app-safe-right,0px));--app-toolbar-surface:rgb(28 28 30/72%);--app-toolbar-knockout:#1c1c1e;--app-toolbar-hairline:rgb(255 255 255/10%);--app-toolbar-fg:rgb(255 255 255/60%);--app-toolbar-fg-active:#fff;--app-toolbar-highlight:rgb(255 255 255/11%);--app-toolbar-shadow:0 12px 32px rgb(0 0 0/45%),0 2px 8px rgb(0 0 0/30%);--app-toolbar-dot:#af;--app-toolbar-dot-glow:0 0 5px 1px rgb(140 105 255/90%),0 0 14px 4px rgb(109 66 237/65%)}.app-toolbar{position:fixed;right:0;bottom:var(--app-toolbar-bottom,12px);left:0;z-index:2000;width:calc(100% - var(--app-toolbar-inset-left) - var(--app-toolbar-inset-right));max-width:440px;margin:0 auto;will-change:transform,opacity}.app-toolbar-list{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;align-items:center;height:var(--app-toolbar-height,60px);margin:0;padding:0 4px;list-style:none;border-radius:9999px;background:var(--app-toolbar-surface);box-shadow:var(--app-toolbar-shadow),inset 0 0 0 1px var(--app-toolbar-hairline);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}.app-toolbar-item{display:flex;justify-content:center;min-width:0;margin:0}.app-toolbar-tab{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:calc(var(--app-toolbar-height,60px) - 8px);margin:0;padding:0;border:0;border-radius:9999px;background:0 0;font:inherit;text-decoration:none;-webkit-appearance:none;appearance:none;touch-action:manipulation}.app-toolbar-tab{flex-direction:column;gap:3px;padding-top:6px;color:var(--app-toolbar-fg);will-change:transform}.app-toolbar-tab:before{content:"";position:absolute;top:1px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--app-toolbar-dot);box-shadow:var(--app-toolbar-dot-glow);opacity:0;transform:translate3d(0,3px,0) scale(.2);will-change:transform,opacity}.app-toolbar-icon{position:relative;display:grid;place-items:center;width:26px;height:26px}.app-toolbar-glyph{display:block;width:24px;height:24px;overflow:visible}.app-toolbar-glyph circle,.app-toolbar-glyph path{will-change:transform}.app-toolbar-glyph--social .app-toolbar-glyph-disc{fill:transparent;stroke:var(--app-toolbar-fg)}
74.app-toolbar-glyph--social .app-toolbar-glyph-mark{fill:var(--app-toolbar-fg)}.app-toolbar-label{position:relative;max-width:100%;margin-block:-.2em;padding-block:.2em;overflow:hidden;font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-size:10.5px;font-weight:500;line-height:1;letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis}.app-toolbar{--app-sheet-surface:rgb(28 28 30/94%);--app-sheet-card:#2c2c2e;--app-sheet-outline:rgb(255 255 255/22%)}.app-logo{--app-logo-shade:#fff;--app-logo-fill:#0c0c0c;position:relative;z-index:2;justify-content:center;height:100%;padding:var(--app-logo-top) var(--app-logo-gutter) var(--app-logo-gutter)}.app-logo-link{display:block;border-radius:4px;touch-action:manipulation;will-change:transform}.app-logo-mark{display:block;height:var(--app-logo-height);width:auto;aspect-ratio:1483/276}.app-logo-fill,.app-logo-shade{will-change:transform}.app-logo-shade{fill:var(--app-logo-shade)}.app-logo-fill{fill:var(--app-logo-fill)}.app-status-tint{display:none;position:fixed;top:0;right:0;left:0;z-index:3;height:var(--app-status-tint-height,12px);background-color:var(--bg-current)}:is([data-handle=login],[data-handle=forgotPassword],[data-handle=signUp],[data-handle=businessSignUp],[data-handle=editProfile],[data-handle=managePortfolio],[data-handle=manageTeam],[data-handle=membership],[data-handle=thankYou],[data-handle=accountSettings],[data-handle=accountNotifications],[data-handle=accountSettingsBusiness],[data-handle=notifications],[data-handle=about],[data-handle=faqs],[data-handle=contact],[data-handle=communityGuidelines],[data-handle=legal]){position:relative;background:0 0}:is([data-handle=login],[data-handle=forgotPassword],[data-handle=signUp],[data-handle=businessSignUp],[data-handle=editProfile],[data-handle=managePortfolio],[data-handle=manageTeam],[data-handle=membership],[data-handle=thankYou],[data-handle=accountSettings],[data-handle=accountNotifications],[data-handle=accountSettingsBusiness],[data-handle=notifications],[data-handle=about],[data-handle=faqs],[data-handle=contact],[data-handle=communityGuidelines],[data-handle=legal])>.page-container{position:relative;z-index:1}.auth-shell-bg{position:absolute;top:calc(-1*var(--core-header-height));right:0;bottom:-100vmax;left:0;z-index:0;overflow:hidden;background-color:var(--bg-current)}:is([data-handle=login],[data-handle=forgotPassword],[data-handle=signUp],[data-handle=businessSignUp],[data-handle=errorpage],[data-handle=errorpage-404],[data-handle=errorpage-503]) .auth-shell-bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:linear-gradient(to right,transparent 0,color-mix(in srgb,var(--bg-current) 28%,transparent) 16%,color-mix(in srgb,var(--bg-current) 58%,transparent) 28%,color-mix(in srgb,var(--bg-current) 62%,transparent) 32%,color-mix(in srgb,var(--bg-current) 62%,transparent) 68%,color-mix(in srgb,var(--bg-current) 58%,transparent) 72%,color-mix(in srgb,var(--bg-current) 28%,transparent) 84%,transparent 100%)}.auth-shell-bg-shadow{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;mix-blend-mode:soft-light;opacity:.75}.auth-shell-bg-shadow img{width:100%;height:100%;object-fit:cover}.auth-shell-grid-lines{--grid-minor:40px;--grid-major:calc(var(--grid-minor)*5);position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' fill='none'%3E%3Cpath stroke='rgba(255,255,255,0.07)' stroke-width='1' stroke-dasharray='5 5' d='M20 0v200M60 0v200M140 0v200M180 0v200M0 20h200M0 60h200M0 140h200M0 180h200'/%3E%3C/svg%3E");background-size:var(--grid-major) var(--grid-major);background-position:center;background-repeat:repeat}.auth-shell-grid-lines:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(to right,transparent 0 calc(var(--grid-major)/2 - .5px),rgba(255,255,255,.1) calc(var(--grid-major)/2 - .5px) calc(var(--grid-major)/2 + .5px),transparent calc(var(--grid-major)/2 + .5px) var(--grid-major)),repeating-linear-gradient(to bottom,transparent 0 calc(var(--grid-major)/2 - .5px),rgba(255,255,255,.1) calc(var(--grid-major)/2 - .5px) calc(var(--grid-major)/2 + .5px),transparent calc(var(--grid-major)/2 + .5px) var(--grid-major));background-size:var(--grid-major) 100%,100% var(--grid-major);background-position:center;background-repeat:repeat}.okay-dialog{--dialog-field-bg:color-mix(in srgb,var(--bg-current) 96%,var(--text-current));display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:none;background:0 0;outline:0;overflow:visible}@media (max-width:767px){:root{--column-count:6;--gutter-cap:12px;--gutter-x:16px;--gutter-y:14px}:root{--core-header-outer-padding:var(--gutter-cap)}.okay-dialog{padding:8px}}.dialog-content{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:555px;max-height:calc(100vh - var(--gutter-y)*2);border-radius:12px;margin:0;padding:0;font-size:16px;color:var(--text-current);background-color:var(--bg-current);box-shadow:0 25px 35px 5px rgba(0,0,0,.15);overflow-x:hidden;overflow-y:hidden;overscroll-behavior:contain}.dialog-content a{position:relative;z-index:1}.dialog-content p{color:var(--text-current)}.dialog-content p{font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-variant-numeric:lining-nums proportional-nums slashed-zero;font-feature-settings:"ss08" on,"ss02" on,"ss07" on;font-size:14px;line-height:1.5;letter-spacing:.21px;font-size:16px}.dialog-content a{text-decoration:underline;color:var(--text-current);opacity:.75;will-change:transform,opacity}.dialog-content a:after{background-color:var(--text-current)}body.is-dark .okay-dialog:not([data-theme=light]){--dialog-field-bg:color-mix(in srgb,var(--bg-current) 88%,var(--text-current))}body.is-dark .dialog-content{box-shadow:0 25px 35px 5px rgba(0,0,0,.45)}.dialog-heading{font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;
74font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:14px;line-height:1;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:500}.dialog-heading-content{display:inline-flex;align-items:center;gap:calc(var(--gutter-x)*.5);min-width:0}.dialog-heading-text{min-width:0}.dialog-footer,.dialog-header{width:100%;flex:0 0 auto;padding:14px 14px 14px 24px}.dialog-header{background-color:color-mix(in srgb,var(--text-current) 3%,#fff)}body.is-dark .dialog-header{background-color:color-mix(in srgb,var(--bg-current) 94%,#fff)}.dialog-header{border-bottom:1px solid color-mix(in srgb,var(--text-current) 8%,transparent)}@media (max-width:767px){.dialog-content{max-height:calc(100vh - 66px - var(--gutter-y)*8)}.dialog-header{padding:6px 6px 6px 12px}}.dialog-inner{width:100%;flex:1 1 auto;min-height:0;max-height:677px;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 18px 24px;scrollbar-gutter:stable}.dialog-footer{margin-top:auto;background-color:color-mix(in srgb,var(--text-current) 3%,#fff);border-top:1px solid color-mix(in srgb,var(--text-current) 8%,transparent);color:gray}body.is-dark .dialog-footer{background-color:color-mix(in srgb,var(--bg-current) 94%,#fff);border-top-color:color-mix(in srgb,#fff 12%,transparent)}.okay-dialog .dialog-content .dialog-footer :is(.button,button,input[type=submit],input[type=button]){font-size:13px}.okay-dialog .dialog-content .button:not(.btn-text){border:1px solid color-mix(in srgb,var(--text-current) 14%,transparent)}.okay-dialog{--dialog-chrome-bg:color-mix(in srgb,var(--text-current) 3%,#fff);--dialog-chrome-line:color-mix(in srgb,var(--text-current) 8%,transparent)}.okay-dialog .dialog-content{--panel-scroll-fade-bg:var(--bg-current);position:relative}.okay-dialog .dialog-content>.dialog-header{min-height:44px;padding:6px 6px 6px 14px;border-bottom-color:var(--dialog-chrome-line);background-color:var(--dialog-chrome-bg)}.okay-dialog .dialog-content>.dialog-footer{padding:10px 12px;border-top-color:var(--dialog-chrome-line);background-color:var(--dialog-chrome-bg)}.okay-dialog .dialog-footer .button{min-height:32px}.okay-dialog .dialog-heading{min-height:32px;font-size:12px;line-height:1}.okay-dialog .btn-close-dialog{flex:0 0 32px}.okay-dialog .dialog-content .button{font-size:12px}body.is-dark .okay-dialog:not([data-theme=light]){--dialog-chrome-bg:color-mix(in srgb,var(--bg-current) 94%,#fff);--dialog-chrome-line:color-mix(in srgb,#fff 14%,transparent)}.okay-dialog[data-dialog=social-guest-gate] .ui-claim-project-actions{display:flex;justify-content:flex-end;gap:10px;width:100%;margin-top:0}.okay-dialog[data-dialog=social-guest-gate] .ui-claim-project-action{display:inline-flex;align-items:center;justify-content:center;min-width:0;border:none!important;border-radius:8px;height:auto;padding:8px 12px;font:inherit;font-size:12px;line-height:1;text-decoration:none;text-transform:uppercase;opacity:1;box-shadow:none;will-change:transform,opacity}.okay-dialog[data-dialog=social-guest-gate] .ui-claim-project-action:before{content:none}.okay-dialog[data-dialog=social-guest-gate] .ui-claim-project-action.is-secondary{background-color:color-mix(in srgb,var(--text-current) 15%,transparent);color:var(--text-current)}.okay-dialog[data-dialog=social-guest-gate] .ui-claim-project-action.is-primary{background-color:#42ed91;color:#0c0c0c}body.is-dark .okay-dialog[data-dialog=social-guest-gate] .ui-claim-project-action.is-secondary{background-color:#fff;color:#0c0c0c}.okay-dialog[data-dialog=social-guest-gate] .ui-social-guest-gate{text-wrap:pretty}.okay-dialog[data-dialog=social-guest-gate] .ui-social-guest-gate-image{display:block;width:100%;height:auto;aspect-ratio:1200/630;margin-bottom:18px;background-color:color-mix(in srgb,var(--text-current) 6%,transparent)}.okay-dialog[data-dialog=social-guest-gate] .ui-social-guest-gate-image[hidden]{display:none}@media (max-width:767px){.dialog-inner{padding:16px}.dialog-footer{padding:6px}.okay-dialog[data-dialog=social-guest-gate] .ui-social-guest-gate-image{margin-bottom:16px}}.btn-close-dialog{display:grid;place-content:center;position:relative;width:32px;height:32px;border:none;border-radius:8px;margin:0;padding:0;background-color:color-mix(in srgb,var(--text-current) 10%,transparent);color:var(--text-current)}
74.btn-close-dialog svg path{fill:currentColor}.okay-dialog .dialog-footer .button{-webkit-appearance:none;appearance:none;border:1px solid color-mix(in srgb,var(--text-current) 14%,transparent);border-radius:8px;height:auto;padding:8px 12px;font:inherit;font-size:12px;line-height:1;text-decoration:none;text-transform:uppercase;box-shadow:none;will-change:transform}body.is-dark .btn-close-dialog{background-color:color-mix(in srgb,#0c0c0c 72%,#fff);border-color:color-mix(in srgb,#fff 14%,transparent);color:#fff}@media (max-width:767px){.media-library-row>.media-library-cell:first-child{grid-area:check;align-self:stretch;display:flex;align-items:center;justify-content:center;margin-top:-8px;margin-right:-8px;margin-bottom:-8px;padding:12px;border-left:1px solid color-mix(in srgb,var(--text-current) 12%,transparent)}.media-library-row>.media-library-cell:nth-child(2){grid-area:preview;align-self:start}.media-library-row>.media-library-cell:nth-child(3){grid-area:name}.media-library-row>.media-library-cell:nth-child(4){grid-area:details}.media-library-row>.media-library-cell:nth-child(6){grid-area:used}}.okay-dialog[data-size=sm] .dialog-content{max-width:420px}.okay-dialog{visibility:visible;will-change:transform}.okay-dialog .dialog-content{opacity:0;visibility:hidden;filter:blur(2px);transform:scale(.98) translateY(20px);transform-origin:center center;visibility:visible;will-change:transform,opacity}@media (prefers-reduced-motion:reduce){.okay-dialog{animation-duration:NaNs!important;filter:none!important;transform:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.okay-dialog .dialog-content{animation-duration:NaNs!important;filter:none!important;transform:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}body.is-dark .okay-dialog:not([data-theme=light]){--editor-canvas:#f3f3f6;--editor-surface:#fff;--editor-field:#fff;--editor-ink:#262626;--editor-muted:#626262;--editor-line:#dedede;--editor-control:#fafafa;--editor-hover:#ededed;--editor-focus:#737373;--editor-control-line:#d4d4d4;--editor-line-hover:#a3a3a3;--editor-quiet:#f2f2f2;--editor-pressed:#e5e5e5;--editor-subtle-line:#c7c7c7;--editor-placeholder:#757575;--editor-disabled-ink:#858585;--editor-primary:#262626;--editor-primary-ink:#fff;--editor-primary-hover:#404040;--editor-table:#e7e7e9;--editor-table-ink:#333;--editor-row-hover:#f7f7f7;--editor-danger:#b42318;--editor-danger-line:#e0bcbc;--editor-danger-hover:#fcebea;--editor-drop-active:#e8f9ef;--editor-focus-shadow:rgb(64 64 64/12%);--editor-scheme:light;--editor-radius:10px;--editor-shadow:0 24px 64px rgb(24 24 24/20%),0 4px 16px rgb(24 24 24/10%);--text-current:var(--editor-ink);--bg-current:var(--editor-surface);--dialog-field-bg:var(--editor-field);--dialog-chrome-bg:var(--editor-surface);--dialog-chrome-line:var(--editor-line);color-scheme:var(--editor-scheme)}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content{--panel-scroll-fade-bg:var(--editor-canvas);border:1px solid var(--editor-line);border-radius:var(--editor-radius);color:var(--editor-ink);background:var(--editor-canvas);box-shadow:var(--editor-shadow)}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content>.dialog-header{min-height:56px;padding:9px 10px 9px 16px;background:var(--editor-surface)}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-heading{min-height:36px;font-family:Aeonik,sans-serif;font-size:16px;font-weight:500;letter-spacing:0;line-height:1.25;text-transform:none}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-heading-content{gap:8px}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content .btn-close-dialog{display:grid;flex:0 0 36px;place-items:center;width:36px;height:36px;border:1px solid var(--editor-control-line);border-radius:8px;padding:8px;color:var(--editor-muted);background:var(--editor-quiet);box-shadow:none}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content .btn-close-dialog svg{width:18px;height:18px}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content>.dialog-footer{border-color:var(--editor-line);padding:12px;color:var(--editor-muted);background:var(--editor-surface)}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content .button:not(.btn-text){min-height:36px;border:1px solid var(--editor-control-line);border-radius:8px;padding:8px 12px;color:var(--editor-ink);background:var(--editor-control);box-shadow:none;font-family:Aeonik,sans-serif;font-size:12px;font-weight:500;letter-spacing:0;line-height:1.2;text-transform:none}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content .dialog-footer :is(.button,button,input[type=submit],input[type=button]){font-size:13px}body.is-dark .okay-dialog:not([data-theme=light]) .dialog-content .dialog-footer .is-primary{border-color:var(--editor-primary);color:var(--editor-primary-ink);background:var(--editor-primary)}body.is-dark .okay-dialog:not([data-theme=light]){--editor-canvas:#19191b;--editor-surface:#252527;--editor-field:#1e1e21;--editor-ink:#ededee;--editor-muted:#b0b0b6;--editor-line:#3f3f43;--editor-control:#2c2c2f;--editor-hover:#38383c;--editor-focus:#a4a4ad;--editor-control-line:#49494e;--editor-line-hover:#72727a;--editor-quiet:#303034;--editor-pressed:#414146;--editor-subtle-line:#55555c;--editor-placeholder:#93939b;--editor-disabled-ink:#797982;--editor-primary:#ededee;--editor-primary-ink:#19191b;--editor-primary-hover:#d1d1d6;--editor-table:#353539;--editor-table-ink:#dddde1;--editor-row-hover:#2c2c2f;--editor-danger:#ff9991;--editor-danger-line:#78433f;--editor-danger-hover:#442b2b;--editor-drop-active:#233d2e;--editor-focus-shadow:rgb(190 190 200/16%);--editor-scheme:dark;--editor-radius:10px;--editor-shadow:0 24px 64px rgb(0 0 0/48%),0 4px 16px rgb(0 0 0/32%)}.social-image-viewer-dialog{display:flex;align-items:stretch;justify-content:stretch;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:none;background:0 0;outline:0;overflow:hidden;opacity:0;visibility:visible;will-change:transform,opacity}.social-image-viewer-dialog__panel{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background-color:#0c0c0c}.social-image-viewer-dialog__close.btn-close-dialog{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) - 6px);right:calc(max(12px,env(safe-area-inset-right)) - 6px);z-index:3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:0;color:#fff;background-color:transparent;opacity:.92;box-shadow:none;will-change:transform,opacity}
74.social-image-viewer-dialog__close.btn-close-dialog svg path{fill:currentColor}body.is-dark .social-image-viewer-dialog__close.btn-close-dialog{background-color:transparent;border-color:transparent;color:#fff}.social-image-viewer-dialog__thumbs{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));z-index:2;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 72px)}.social-image-viewer-dialog__viewport{position:relative;flex:1 1 auto;min-height:0;width:100%}.social-image-viewer-dialog__track{display:flex;height:100%;min-height:100%}.social-image-viewer-dialog__footer{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:2px;padding:6px max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));color:#fff;background:linear-gradient(to top,#0c0c0c,rgba(12,12,12,0))}.social-image-viewer-dialog__pagination{display:flex;align-items:baseline;gap:.1em;margin:0;color:#666;font-family:Aeonik Mono,FallbackFontMono,monospace,menlo,monaco,Lucida Console,courier;font-variant-numeric:lining-nums proportional-nums stacked-fractions slashed-zero;font-feature-settings:"dlig" on,"case" on,"ss05" on,"ss06" on,"ss07" on,"ss12" off;font-size:12px;line-height:1;text-transform:uppercase}.social-image-viewer-dialog__pagination-sep{color:#525252}.social-image-viewer-dialog__pagination[hidden]{display:none}.social-image-viewer-dialog__title{width:100%;margin:0;font-family:Aeonik,FallbackFont,arial,helvetica,sans-serif;font-variant-numeric:lining-nums proportional-nums slashed-zero;font-feature-settings:"ss08" on,"ss02" on,"ss07" on;font-size:14px;line-height:1.5;letter-spacing:.21px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}</style> 
74<script type="module" src="https://okaydev.co/dist/assets/app-BiaPDw27.js" crossorigin onload="e=new CustomEvent(&#039;vite-script-loaded&#039;, {detail:{path: &#039;src/js/app.js&#039;}});document.dispatchEvent(e);" integrity="sha384-rc5tBKMHskM7eBhFEZPTGXy6OHE1v9kVH3CFceI2+biaB/epTvymjBWYPcAm/ON2"></script>
74 <link
75href="https://okaydev.co/dist/assets/HeaderLogoLetters-CMLHzChc.js" rel="modulepreload" crossorigin integrity="sha384-pjhTnwsDelDxaY6fqULoIHCayLxtTzRhoYqKTVaO+87m1qwAkztwnQjVugQ7c2/q"><link
76href="https://okaydev.co/dist/assets/refreshNavbarAuth-V-4DhXEm.js" rel="modulepreload" crossorigin integrity="sha384-0aZeN9dWGPf+9eV9pvZnoPI036VrIYihmPuUvMvWVuSHgtMqyKN6ftO7P1UMFRdR"><link
77href="https://okaydev.co/dist/assets/lazyDialog-CU88mIO4.js" rel="modulepreload" crossorigin integrity="sha384-vYPSV+cKPQU3zXSX+RzB5WHwKiBbt2oSUEe/pmXdy6rR9d2zYHnnXv0+qgCFZaQ8"><link
78href="https://okaydev.co/dist/assets/app-4P6e9Apm.css" rel="stylesheet" media="print" onload="this.media=&#039;all&#039;"><link
79href="https://okaydev.co/dist/assets/HeaderLogoLetters-DngiwBoB.css" rel="stylesheet" media="print" onload="this.media=&#039;all&#039;"> 
79<script src="https://okaydev.co/dist/assets/app-legacy-CcTcNDK7.js" nomodule onload="e=new CustomEvent(&#039;vite-script-loaded&#039;, {detail:{path: &#039;src/js/app-legacy.js&#039;}});document.dispatchEvent(e);" integrity="sha384-w6ID9rdE1/PtnaIaIVSfmeV7xrtdYPWgWvY6pXl6WZ6mtzjOqN4HYDG8uDhC6xaJ"></script>
79 <!--# endif --><style id="okaydev-dark-first-paint">html.is-dark,body.is-dark{--text-current:#fff;--bg-current:#121212;background-color:#121212}body.is-dark[data-page=pricing] form input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]),body.is-dark[data-page=pricing] form textarea,body.is-dark[data-page=pricing] form select{background-color:#0d0d0d;color:var(--text-current);border-color:#333}</style> 
79<script>try{if(sessionStorage.getItem('okaydev:header-intro-seen')==='1'){document.documentElement.dataset.headerIntroSeen='true';}}catch(_){}</script>
79 <style id="okaydev-initial-boot-hide">html.okaydev-boot-pending body{opacity:0}html.okaydev-boot-pending[data-header-intro-seen=true] body{opacity:1}html.okaydev-boot-pending[data-header-intro-seen=true] body>:not(.core-header-slot):not(#okaydev-pwa-launch){opacity:0}</style> 
79<script>(function(){var lifted=false;var lift=function(){if(lifted)return;lifted=true;document.documentElement.classList.remove('okaydev-boot-pending');};var nav=performance.getEntriesByType&&performance.getEntriesByType('navigation')[0];var isReload=(nav&&nav.type==='reload')||(performance.navigation&&performance.navigation.type===1);if(isReload){var afterScrollRestore=function(){requestAnimationFrame(function(){requestAnimationFrame(lift);});};if(document.readyState==='complete'){afterScrollRestore();}else{window.addEventListener('load',afterScrollRestore,{once:true});}
80setTimeout(lift,2000);return;}
81var cssLink=document.querySelector('link[rel="stylesheet"][href*="/dist/"], link[rel="stylesheet"][href*="/assets/app"]');var media=cssLink&&(cssLink.media||'all');var hasBlockingAppCss=!!cssLink&&(media==='all'||media==='screen');var hasCriticalCss=false;var styles=document.querySelectorAll('style');for(var i=0;i<styles.length;i++){if((styles[i].textContent||'').length>5000){hasCriticalCss=true;break;}}
82if(!hasBlockingAppCss&&!hasCriticalCss){setTimeout(lift,2000);return;}
83if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',lift,{once:true});}else{lift();}})();</script>
83 
83<script>(function(){var root=document.documentElement;if(root.classList.contains('is-pointer-hover-armed'))return;if(window.matchMedia&&window.matchMedia('(hover: none), (pointer: coarse)').matches){root.classList.add('is-pointer-hover-armed');return;}
84var arm=function(){root.classList.add('is-pointer-hover-armed');};window.addEventListener('pointermove',arm,{once:true,passive:true,capture:true});})();</script>
84 
84<script>(function(){try{if(sessionStorage.getItem('okaydev:social-feed-scroll-top')!=='1'){return;}
85if('scrollRestoration'in history){history.scrollRestoration='manual';}
86window.scrollTo(0,0);}catch(e){}})();</script>
86<script>window.passwordpolicy = {"showStrengthIndicator":false};</script>
86</head>
87
88        <body class="is-dark  is-production" data-page="login" data-header-theme="purple" data-sticky-mobile-header="true">
89
90        <style>
91    #okaydev-pwa-launch { display: none; }
92    html.okaydev-boot-pending body:has(> #okaydev-pwa-launch) { opacity: 1; }
93    #okaydev-pwa-launch:not([hidden]) {
94        display: grid; place-items: center; position: fixed; inset: 0;
95        z-index: 2147483645; overflow: hidden;
96        color: #fff;
97    }
98    #okaydev-pwa-launch.is-ready { pointer-events: none; }
99    #okaydev-pwa-launch .pwa-launch-background { position: absolute; inset: 0; background: #000; will-change: opacity; }
100    /* Match app-navigation-cover.scss before the application styles arrive. */
101    #okaydev-pwa-launch .pwa-launch-spinner {
102        position: relative; display: block; width: 28px; height: 28px; box-sizing: border-box;
103        border: 2px solid rgb(255 255 255 / 30%); border-top-color: currentColor;
104        border-radius: 50%; opacity: 0; transition: opacity 140ms ease-out;
105        animation: okaydev-launch-spin 800ms linear infinite paused;
106    }
107    #okaydev-pwa-launch.is-loading .pwa-launch-spinner { opacity: 1; animation-play-state: running; }
108    @keyframes okaydev-launch-spin { to { transform: rotate(360deg); } }
109    @media (prefers-reduced-motion: reduce) {
110        #okaydev-pwa-launch .pwa-launch-spinner { animation: none; transition: none; }
111    }
112</style>
113<div id="okaydev-pwa-launch" role="status" aria-label="Loading page" hidden>
114    <span class="pwa-launch-background" aria-hidden="true"></span>
115    <span class="pwa-launch-spinner" aria-hidden="true"></span>
116</div>
117<script>
118    (function () {
119        var screen = document.getElementById('okaydev-pwa-launch');
120        if (!window.matchMedia('(display-mode: standalone)').matches && !navigator.standalone) {
121            screen.remove();
122            return;
123        }
124        screen.hidden = false;
125        var root = document.documentElement;
126        var holds = [];
127        var observer;
128        var timer;
129        var rendererTimer;
130        var spinnerTimer;
131        var removed = false;
132        var background = screen.querySelector('.pwa-launch-background');
133        var motion = window.matchMedia('(prefers-reduced-motion: reduce)');
134        // A new document has no outgoing page to cover. Start opaque so its
135        // unfinished markup never shows through an entrance animation.
136        var animation = null;
137        var entered = Promise.resolve();
138        function showSpinner() { if (!done && !removed) screen.classList.add('is-loading'); }
139        entered.then(function () {
140            if (done || removed) return;
141            spinnerTimer = setTimeout(showSpinner, 180);
142        }).catch(function () {});
143        function reduceMotion() { if (motion.matches && animation) animation.finish(); }
144        motion.addEventListener('change', reduceMotion);
145        var settling = false;
146        var done = false;
147        // `holdAppLaunch()` (src/js/utils/appLaunch.js) keeps the screen up for work that moves the page, like the push invitation.
148        window.okaydevLaunch = { hold: function (work) { holds.push(Promise.resolve(work).catch(function () {})); } };
149        function frame() { return new Promise(function (resolve) { requestAnimationFrame(function () { resolve(); }); }); }
150        function within(ms, work) { return Promise.race([work, new Promise(function (resolve) { setTimeout(resolve, ms); })]); }
151        function finish(immediate) {
152            if (done) return;
153            done = true;
154            clearTimeout(timer);
155            clearTimeout(rendererTimer);
156            if (observer) observer.disconnect();
157            document.removeEventListener('DOMContentLoaded', check);
158            delete window.okaydevLaunch;
159            clearTimeout(spinnerTimer);
160            screen.classList.remove('is-loading');
161            screen.classList.add('is-ready');
162            if (immediate || motion.matches) { remove(); return; }
163            // Reveal the ready document with the same fade as PJAX.
164            entered.then(function () {
165                if (removed) return;
166                if (motion.matches) { remove(); return; }
167                if (animation) animation.cancel();
168                animation = background.animate([
169                    { opacity: 1 },
170                    { opacity: 0 }
171                ], { duration: 260, easing: 'cubic-bezier(0.65, 0, 0.35, 1)', fill: 'both' });
172                animation.finished.then(remove).catch(function () {});
173            }).catch(function () {});
174        }
175        function remove() {
176            removed = true;
177            clearTimeout(spinnerTimer);
178            if (animation) animation.cancel();
179            motion.removeEventListener('change', reduceMotion);
180            window.removeEventListener('pagehide', hide);
181            screen.remove();
182        }
183        function hide() { finish(true); remove(); }
184        function settle() {
185            if (settling) return;
186            settling = true;
187            // Holds register as the renderer finishes; uncover once they, fonts, and the next paint are done.
188            frame()
189                .then(function () { return within(2500, Promise.all(holds.concat(document.fonts ? document.fonts.ready : []))); })
190                .then(frame)
191                .then(frame)
192                .then(function () { finish(false); });
193        }
194        function check() {
195            if (document.readyState === 'loading' || root.classList.contains('okaydev-boot-pending')) return;
196            // PJAX pages load their styles with the renderer; Bento pages have none to wait for.
197            if (!document.querySelector('[data-router-view]') || document.body.hasAttribute('data-renderer-ready')) settle();
198            else if (!rendererTimer) rendererTimer = setTimeout(settle, 4000);
199        }
200        observer = new MutationObserver(check);
201        observer.observe(root, { attributes: true, attributeFilter: ['class'] });
202        observer.observe(document.body, { attributes: true, attributeFilter: ['data-renderer-ready'] });
203        document.addEventListener('DOMContentLoaded', check, { once: true });
204        window.addEventListener('pagehide', hide, { once: true });
205        timer = setTimeout(function () { finish(false); }, 8000);
206        check();
207    })();
208</script>
208
209            <div class="bg-layer bg-layer--dark" aria-hidden="true"></div>
210    <div class="bg-layer bg-layer--light" aria-hidden="true"></div>
211    <div class="app-status-tint" aria-hidden="true"></div>
212
213        
214    
215    
216    
217    
218    
219    
220    
221<div class="core-header-slot">
222    <header class="core-header" data-header-enter-pending>
223                <span class="core-nav-mobile-panel-bg" aria-hidden="true"></span>
224
225        <div class="core-header-inner">
226                        <div class="core-header-pill" aria-hidden="true">
227                <span class="core-header-pill-cap core-header-pill-cap--start"></span>
228                <span class="core-header-pill-mid"></span>
229                <span class="core-header-pill-cap core-header-pill-cap--end"></span>
230                <div class="header-backdrop"></div>
231            </div>
232
233            <div class="core-logo-container">
234                <a
235                    class="core-logo-link"
236                    href="https://okaydev.co/"
237                                        aria-label="Home"
238                    aria-haspopup="menu"
239                    aria-controls="core-logo-brand-menu"
240                    aria-expanded="false"
241                    data-header-brand-menu-trigger
242                >
243                    <span class="logo-name">
244                        <svg class="logo-okaydev" role="img" aria-label="OKAYDEV logo" width="1483" height="276" viewBox="0 0 1483 276" fill="none" xmlns="http://www.w3.org/2000/svg">
245        <g class="logo-shades" aria-hidden="true">
246        <path class="logo-letter-shadow" data-letter="V" d="M1350.75 34.5V4H1252.25L1202.25 54V272H1374.75L1424.75 222L1483 4H1381.25L1350.75 34.5Z" fill="var(--logo-fill-outer)"/>
247        <path class="logo-letter-shadow" data-letter="E" d="M1088.75 4L1038.75 54V272H1211L1261 222V4H1088.75Z" fill="var(--logo-fill-outer)"/>
248        <path class="logo-letter-shadow" data-letter="D" d="M875.5 4L825.5 54V272H935.5C967 272 996 259.75 1016.5 239.25L1066.5 189.25C1086.5 169.25 1099.25 142.5 1099.25 113C1099.25 53 1047.75 4 985.5 4H875.5Z" fill="var(--logo-fill-outer)"/>
249        <path class="logo-letter-shadow" data-letter="Y" d="M791.75 272L841.75 222L900 4H795.25L777.5 21.75V4H680.25L630.25 54V235.5H696.75L687 272H791.75Z" fill="var(--logo-fill-outer)"/>
250        <path class="logo-letter-shadow" data-letter="A" d="M540.25 240.25V272H638.25L688.25 222V4H515L465 54L406.75 272H508.5L540.25 240.25Z" fill="var(--logo-fill-outer)"/>
251        <path class="logo-letter-shadow" data-letter="K" d="M337 254.25V272H434.25L484.25 222V85.25H465.5L487.25 4H272L222 54V272H319.25L337 254.25Z" fill="var(--logo-fill-outer)"/>
252        <path class="logo-letter-shadow" data-letter="O" d="M197.25 243.5L247.25 193.5C269 173 282.5 144.5 282.5 112.75C282.5 50.75 229.75 0 166.5 0C135 0 106.5 12 85.5 31.75L35.5 81.75C14.25 103 0 131 0 162.75C0 225.25 52 276 116.5 276C147.75 276 176.25 263.75 197.25 243.5Z" fill="var(--logo-fill-outer)"/>
253    </g>
254
255        <g class="logo-faces">
256        <g class="logo-letter" data-letter="V">
257            <path class="logo-letter-face" d="M1261.25 13V213H1417.75L1471.25 13H1388.25L1356.25 132C1353.75 141 1341.75 140.25 1341.75 130V13H1261.25Z" fill="var(--logo-fill-inner)"/>
258        </g>
259        <g class="logo-letter" data-letter="E">
260            <path class="logo-letter-face" d="M1097.75 13V213H1252V145.5H1207V107H1184.5C1177.25 107 1172 101.5 1172 93.75C1172 86 1177.25 80.5 1184.5 80.5H1252V13H1097.75Z" fill="var(--logo-fill-inner)"/>
261        </g>
262        <g class="logo-letter" data-letter="D">
263            <path class="logo-letter-face" d="M884.5 13V213H985.5C1043 213 1090.25 168 1090.25 113C1090.25 58 1043 13 985.5 13H884.5ZM953 113C953 97.25 966 84.25 981.75 84.25C997.5 84.25 1010.25 97.25 1010.25 113C1010.25 128.75 997.5 141.75 981.75 141.75C966 141.75 953 128.75 953 113Z" fill="var(--logo-fill-inner)"/>
264        </g>
265        <g class="logo-letter" data-letter="Y">
266            <path class="logo-letter-face" d="M758.5 176.5L748.75 213H834.75L888.25 13H802.25L778.5 101.25C777 107 768.5 105.5 768.5 99.25V13H689.25V176.5H758.5Z" fill="var(--logo-fill-inner)"/>
267        </g>
268        <g class="logo-letter" data-letter="A">
269            <path class="logo-letter-face" d="M522 13L468.5 213H551.5L564.75 163.7
2695H599.25V213H679.25V13H522ZM568.25 90.5C568.25 79.25 577.5 70.25 588.5 70.25C599.5 70.25 608.5 79.25 608.5 90.5C608.5 101.5 599.5 110.5 588.5 110.5C577.5 110.5 568.25 101.5 568.25 90.5Z" fill="var(--logo-fill-inner)"/>
270        </g>
271        <g class="logo-letter" data-letter="K">
272            <path class="logo-letter-face" d="M281 13V213H360.25V151.25H396V213H475.25V94.25H453.75L475.5 13H381V71C381 88.25 360.25 88.25 360.25 71V13H281Z" fill="var(--logo-fill-inner)"/>
273        </g>
274        <g class="logo-letter" data-letter="O">
275            <path class="logo-letter-face" d="M166.5 217C225 217 273.5 170.25 273.5 112.75C273.5 55.75 225 9 166.5 9C106.75 9 59 55.75 59 112.75C59 170.25 106.75 217 166.5 217ZM137.25 113C137.25 97.25 150.5 84.25 166.25 84.25C181.5 84.25 194.5 97.25 194.5 113C194.5 129 181.5 141.75 166.25 141.75C150.5 141.75 137.25 129 137.25 113Z" fill="var(--logo-fill-inner)"/>
276        </g>
277    </g>
278</svg>
279                    </span>
280                </a>
281
282                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <div
283                    class="core-logo-brand-menu"
284                    id="core-logo-brand-menu"
285                    role="menu"
286                    aria-label="OkayDev brand asset downloads"
287                    aria-hidden="true"
288                    data-header-brand-menu
289                >
290                    <div class="core-logo-brand-menu__surface">
291                                                <div class="core-logo-brand-menu__content" tabindex="-1">
292                            <a
293                                class="core-logo-brand-menu__heading"
294                                href="https://okaydev.co/brand"
295                                role="menuitem"
296                                tabindex="-1"
297                                aria-label="Brand page"
298                            >
299                                <p class="core-logo-brand-menu__title">Brand assets</p>
300                                <span class="core-logo-brand-menu__page">
301                                    <span aria-hidden="true">i</span>
302                                </span>
303                            </a>
304
305                            <div class="core-logo-brand-menu__footer">
306                                <a
307                                    class="core-logo-brand-menu__kit core-logo-brand-menu__kit--guidelines"
308                                    href="https://okaydev.co/brand"
309                                    role="menuitem"
310                                    tabindex="-1"
311                                >
312                                    Brand Guidelines
313                                    <span aria-hidden="true">↗</span>
314                                </a>
315                                <a
316                                    class="core-logo-brand-menu__kit"
317                                    href="/dist/brand/okay-dev-brand-kit.zip"
318                                    download
319                                    data-router-disabled
320                                    role="menuitem"
321                                    tabindex="-1"
322                                    aria-label="Full Brand Kit"
323                                >
324                                    Full Brand Kit
325                                    <span aria-hidden="true">↓</span>
326                                </a>
327                            </div>
328
329                                                            <div
330                                    class="core-logo-brand-menu__group"
331                                    role="group"
332                                    aria-labelledby="brand-menu-horizontal"
333                                >
334                                                                        <button
335                                        type="button"
336                                        class="core-logo-brand-menu__toggle"
337                                        id="brand-menu-horizontal"
338                                        data-brand-accordion-toggle
339                                        role="menuitem"
340                                        tabindex="-1"
341                                        aria-expanded="false"
342                                        aria-controls="brand-menu-assets-horizontal"
343                                    >
344                                        <span class="core-logo-brand-menu__chevron" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
345</span>
346                                        <span class="core-logo-brand-menu__label">Horizontal</span>
347                                        <span class="core-logo-brand-menu__preview core-logo-brand-menu__preview--light" aria-hidden="true">
348                                            <img src="/dist/brand/okay-dev-brand-kit/logos/horizontal/svg/okay-dev-horizontal-black-yellow.svg" alt="" loading="lazy" decoding="async">
349                                        </span>
350                                    </button>
351                                    <div class="core-logo-brand-menu__assets" id="brand-menu-assets-horizontal" hidden inert>
352                                                                            <div class="core-logo-brand-menu__asset">
353                                            <span
354                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--light"
355                                                aria-hidden="true"
356                                            >
357                                                <img
358                                                    src="/dist/brand/okay-dev-brand-kit/logos/horizontal/svg/okay-dev-horizontal-black-yellow.svg"
359                                                    alt=""
360                                                    loading="lazy"
361                                                    decoding="async"
362                                                >
363                                            </span>
364                                            <span class="core-logo-brand-menu__name">Yellow fill</span>
365                                            <span class="core-logo-brand-menu__actions">
366                                                <a
367                                                    href="/dist/brand/okay-dev-brand-kit/logos/horizontal/svg/okay-dev-horizontal-black-yellow.svg"
368                                                    download
369                                                    data-router-disabled
370                                                    role="menuitem"
371                                                    tabindex="-1"
372                                                    aria-label="Download horizontal logo, black shade and yellow fill as SVG"
373                                                >SVG</a>
374                                                <a
375                                                    href="/dist/brand/okay-dev-brand-kit/logos/horizontal/png/okay-dev-horizontal-black-yellow-1200w.png"
376                                                    download
377                                                    data-router-disabled
378                                                    role="menuitem"
379                                                    tabindex="-1"
380                                                    aria-label="Download horizontal logo, black shade and yellow fill as PNG"
381                                                >PNG</a>
382                                            </span>
383                                        </div>
384                                                                            <div class="core-logo-brand-menu__asset">
385                                            <span
386                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--purple"
387                                                aria-hidden="true"
388                                            >
389                                                <img
390                                                    src="/dist/brand/okay-dev-brand-kit/logos/horizontal/svg/okay-dev-horizontal-black-white.svg"
391                                                    alt=""
392                                                    loading="lazy"
393                                                    decoding="async"
394                                                >
395                                            </span>
396                                            <span class="core-logo-brand-menu__name">White fill</span>
397                                            <span class="core-logo-brand-menu__actions">
398                                                <a
399                                                    href="/dist/brand/okay-dev-brand-kit/logos/horizontal/svg/okay-dev-horizontal-black-white.svg"
400                                                    download
401                                                    data-router-disabled
402                                                    role="menuitem"
403                                                    tabindex="-1"
404                                                    aria-label="Download horizontal logo, black shade and white fill as SVG"
405                                                >SVG</a>
406                                                <a
407                                                    href="/dist/brand/okay-dev-brand-kit/logos/horizontal/png/okay-dev-horizontal-black-white-1200w.png"
408                                                    download
409                                                    data-router-disabled
410                                                    role="menuitem"
411                                                    tabindex="-1"
412                                                    aria-label="Download horizontal logo, black shade and white fill as PNG"
413                                                >PNG</a>
414                                            </span>
415                                        </div>
416                                                                            <div class="core-logo-brand-menu__asset">
417                                            <span
418                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--dark"
419                                                aria-hidden="true"
420                                            >
421                                                <img
422                                                    src="/dist/brand/okay-dev-brand-kit/logos/horizontal/svg/okay-dev-horizontal-white-black.svg"
423                                                    alt=""
424                                                    loading="lazy"
425                                                    decoding="async"
426                                                >
427                                            </span>
428                                            <span class="core-logo-brand-menu__name">Reversed</span>
429                                            <span class="core-logo-brand-menu__actions">
430                                                <a
431                                                    href="/dist/brand/okay-dev-brand-kit/logos/horizontal/svg/okay-dev-horizontal-white-black.svg"
432                                                    download
433                                                    data-router-disabled
434                                                    role="menuitem"
435                                                    tabindex="-1"
436                                                    aria-label="Download horizontal logo, white shade and black fill as SVG"
437                                                >SVG</a>
438                                                <a
439                                                    href="/dist/brand/okay-dev-brand-kit/logos/horizontal/png/okay-dev-horizontal-white-black-1200w.png"
440                                                    download
441                                                    data-router-disabled
442                                                    role="menuitem"
443                                                    tabindex="-1"
444                                                    aria-label="Download horizontal logo, white shade and black fill as PNG"
445                                                >PNG</a>
446                                            </span>
447                                        </div>
448                                                                        </div>
449                                </div>
450                                                            <div
451                                    class="core-logo-brand-menu__group"
452                                    role="group"
453                                    aria-labelledby="brand-menu-stacked"
454                                >
455                                                                        <button
456                                        type="button"
457                                        class="core-logo-brand-menu__toggle"
458                                        id="brand-menu-stacked"
459                                        data-brand-accordion-toggle
460                                        role="menuitem"
461                                        tabindex="-1"
462                                        aria-expanded="false"
463                                        aria-controls="brand-menu-assets-stacked"
464                                    >
465                                        <span class="core-logo-brand-menu__chevron" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
466</span>
467                                        <span class="core-logo-brand-menu__label">Stacked</span>
468                                        <span class="core-logo-brand-menu__preview core-logo-brand-menu__preview--purple" aria-hidden="true">
469                                            <img src="/dist/brand/okay-dev-brand-kit/logos/stacked/svg/okay-dev-stacked-black-white-yellow.svg" alt="" loading="lazy" decoding="async">
470                                        </span>
471                                    </button>
472                                    <div class="core-logo-brand-menu__assets" id="brand-menu-assets-stacked" hidden inert>
473                                                                            <div class="core-logo-brand-menu__asset">
474                                            <span
475                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--purple"
476                                                aria-hidden="true"
477                                            >
478                                                <img
479                                                    src="/dist/brand/okay-dev-brand-kit/logos/stacked/svg/okay-dev-stacked-black-white-yellow.svg"
480                                                    alt=""
481                                                    loading="lazy"
482                                                    decoding="async"
483                                                >
484                                            </span>
485                                            <span class="core-logo-brand-menu__name">Primary</span>
486                                            <span class="core-logo-brand-menu__actions">
487                                                <a
488                                                    href="/dist/brand/okay-dev-brand-kit/logos/stacked/svg/okay-dev-stacked-black-white-yellow.svg"
489                                                    download
490                                                    data-router-disabled
491                                                    role="menuitem"
492                                                    tabindex="-1"
493                                                    aria-label="Download stacked logo, black shade, white fill, and yellow smiley as SVG"
494                                                >SVG</a>
495                                                <a
496                                                    href="/dist/brand/okay-dev-brand-kit/logos/stacked/png/okay-dev-stacked-black-white-yellow-1000w.png"
497                                                    download
498                                                    data-router-disabled
499                                                    role="menuitem"
500                                                    tabindex="-1"
501                                                    aria-label="Download stacked logo, black shade, white fill, and yellow smiley as PNG"
502                                                >PNG</a>
503                                            </span>
504                                        </div>
505                                                                            <div class="core-logo-brand-menu__asset">
506                                            <span
507                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--dark"
508                                                aria-hidden="true"
509                                            >
510                                                <img
511                                                    src="/dist/brand/okay-dev-brand-kit/logos/stacked/svg/okay-dev-stacked-white-black-black.svg"
512                                                    alt=""
513                                                    loading="lazy"
514                                                    decoding="async"
515                                                >
516                                            </span>
517                                            <span class="core-logo-brand-menu__name">Reversed</span>
518                                            <span class="core-logo-brand-menu__actions">
519                                                <a
520                                                    href="/dist/brand/okay-dev-brand-kit/logos/stacked/svg/okay-dev-stacked-white-black-black.svg"
521                                                    download
522                                                    data-router-disabled
523                                                    role="menuitem"
524                                                    tabindex="-1"
525                                                    aria-label="Download stacked logo, white shade, black fill, and black smiley as SVG"
526                                                >SVG</a>
527                                                <a
528                                                    href="/dist/brand/okay-dev-brand-kit/logos/stacked/png/okay-dev-stacked-white-black-black-1000w.png"
529                                                    download
530                                                    data-router-disabled
531                                                    role="menuitem"
532                                                    tabindex="-1"
533                                                    aria-label="Download stacked logo, white shade, black fill, and black smiley as PNG"
534                                                >PNG</a>
535                                            </span>
536                                        </div>
537                                                                        </div>
538                                </div>
539                                                            <div
540                                    class="core-logo-brand-menu__group"
541                                    role="group"
542                                    aria-labelledby="brand-menu-smiley"
543                                >
544                                                                        <button
545                                        type="button"
546                                        class="core-logo-brand-menu__toggle"
547                                        id="brand-menu-smiley"
548                                        data-brand-accordion-toggle
549                                        role="menuitem"
550                                        tabindex="-1"
551                                        aria-expanded="false"
552                                        aria-controls="brand-menu-assets-smiley"
553                                    >
554                                        <span class="core-logo-brand-menu__chevron" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
555</span>
556                                        <span class="core-logo-brand-menu__label">Smiley</span>
557                                        <span class="core-logo-brand-menu__preview core-logo-brand-menu__preview--dark" aria-hidden="true">
558                                            <img src="/dist/brand/okay-dev-brand-kit/marks/filled/svg/okay-dev-mark-filled-yellow.svg" alt="" loading="lazy" decoding="async">
559                                        </span>
560                                    </button>
561                                    <div class="core-logo-brand-menu__assets" id="brand-menu-assets-smiley" hidden inert>
562                                                                            <div class="core-logo-brand-menu__asset">
563                                            <span
564                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--dark"
565                                                aria-hidden="true"
566                                            >
567                                                <img
568                                                    src="/dist/brand/okay-dev-brand-kit/marks/filled/svg/okay-dev-mark-filled-yellow.svg"
569                                                    alt=""
570                                                    loading="lazy"
571                                                    decoding="async"
572                                                >
573                                            </span>
574                                            <span class="core-logo-brand-menu__name">Filled yellow</span>
575                                            <span class="core-logo-brand-menu__actions">
576                                                <a
577                                                    href="/dist/brand/okay-dev-brand-kit/marks/filled/svg/okay-dev-mark-filled-yellow.svg"
578                                                    download
579                                                    data-router-disabled
580                                                    role="menuitem"
581                                                    tabindex="-1"
582                                                    aria-label="Download filled yellow smiley with black features as SVG"
583                                                >SVG</a>
584                                                <a
585                                                    href="/dist/brand/okay-dev-brand-kit/marks/filled/png/okay-dev-mark-filled-yellow-512px.png"
586                                                    download
587                                                    data-router-disabled
588                                                    role="menuitem"
589                                                    tabindex="-1"
590                                                    aria-label="Download filled yellow smiley with black features as PNG"
591                                                >PNG</a>
592                                            </span>
593                                        </div>
594                                                                            <div class="core-logo-brand-menu__asset">
595                                            <span
596                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--light"
597                                                aria-hidden="true"
598                                            >
599                                                <img
600                                                    src="/dist/brand/okay-dev-brand-kit/marks/outlined/svg/okay-dev-mark-outlined-black.svg"
601                                                    alt=""
602                                                    loading="lazy"
603                                                    decoding="async"
604                                                >
605                                            </span>
606                                            <span class="core-logo-brand-menu__name">Outline black</span>
607                                            <span class="core-logo-brand-menu__actions">
608                                                <a
609                                                    href="/dist/brand/okay-dev-brand-kit/marks/outlined/svg/okay-dev-mark-outlined-black.svg"
610                                                    download
611                                                    data-router-disabled
612                                                    role="menuitem"
613                                                    tabindex="-1"
614                                                    aria-label="Download outlined black smiley as SVG"
615                                                >SVG</a>
616                                                <a
617                                                    href="/dist/brand/okay-dev-brand-kit/marks/outlined/png/okay-dev-mark-outlined-black-512px.png"
618                                                    download
619                                                    data-router-disabled
620                                                    role="menuitem"
621                                                    tabindex="-1"
622                                                    aria-label="Download outlined black smiley as PNG"
623                                                >PNG</a>
624                                            </span>
625                                        </div>
626                                                                            <div class="core-logo-brand-menu__asset">
627                                            <span
628                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--dark"
629                                                aria-hidden="true"
630                                            >
631                                                <img
632                                                    src="/dist/brand/okay-dev-brand-kit/marks/outlined/svg/okay-dev-mark-outlined-white.svg"
633                                                    alt=""
634                                                    loading="lazy"
635                                                    decoding="async"
636                                                >
637                                            </span>
638                                            <span class="core-logo-brand-menu__name">Outline white</span>
639                                            <span class="core-logo-brand-menu__actions">
640                                                <a
641                                                    href="/dist/brand/okay-dev-brand-kit/marks/outlined/svg/okay-dev-mark-outlined-white.svg"
642                                                    download
643                                                    data-router-disabled
644                                                    role="menuitem"
645                                                    tabindex="-1"
646                                                    aria-label="Download outlined white smiley as SVG"
647                                                >SVG</a>
648                                                <a
649                                                    href="/dist/brand/okay-dev-brand-kit/marks/outlined/png/okay-dev-mark-outlined-white-512px.png"
650                                                    download
651                                                    data-router-disabled
652                                                    role="menuitem"
653                                                    tabindex="-1"
654                                                    aria-label="Download outlined white smiley as PNG"
655                                                >PNG</a>
656                                            </span>
657                                        </div>
658                                                                        </div>
659                                </div>
660                                                            <div
661                                    class="core-logo-brand-menu__group"
662                                    role="group"
663                                    aria-labelledby="brand-menu-okay-pick-primary"
664                                >
665                                                                        <button
666                                        type="button"
667                                        class="core-logo-brand-menu__toggle"
668                                        id="brand-menu-okay-pick-primary"
669                                        data-brand-accordion-toggle
670                                        role="menuitem"
671                                        tabindex="-1"
672                                        aria-expanded="false"
673                                        aria-controls="brand-menu-assets-okay-pick-primary"
674                                    >
675                                        <span class="core-logo-brand-menu__chevron" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
676</span>
677                                        <span class="core-logo-brand-menu__label">Okay Pick · Primary</span>
678                                        <span class="core-logo-brand-menu__preview core-logo-brand-menu__preview--transparent" aria-hidden="true">
679                                            <img src="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/svg/okay-pick-primary-yellow.svg" alt="" loading="lazy" decoding="async">
680                                        </span>
681                                    </button>
682                                    <div class="core-logo-brand-menu__assets" id="brand-menu-assets-okay-pick-primary" hidden inert>
683                                                                            <div class="core-logo-brand-menu__asset">
684                                            <span
685                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--transparent"
686                                                aria-hidden="true"
687                                            >
688                                                <img
689                                                    src="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/svg/okay-pick-primary-yellow.svg"
690                                                    alt=""
691                                                    loading="lazy"
692                                                    decoding="async"
693                                                >
694                                            </span>
695                                            <span class="core-logo-brand-menu__name">Yellow</span>
696                                            <span class="core-logo-brand-menu__actions">
697                                                <a
698                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/svg/okay-pick-primary-yellow.svg"
699                                                    download
700                                                    data-router-disabled
701                                                    role="menuitem"
702                                                    tabindex="-1"
703                                                    aria-label="Download Okay Pick primary badge, yellow as SVG"
704                                                >SVG</a>
705                                                <a
706                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/png/okay-pick-primary-yellow-384px.png"
707                                                    download
708                                                    data-router-disabled
709                                                    role="menuitem"
710                                                    tabindex="-1"
711                                                    aria-label="Download Okay Pick primary badge, yellow as PNG"
712                                                >PNG</a>
713                                            </span>
714                                        </div>
715                                                                            <div class="core-logo-brand-menu__asset">
716                                            <span
717                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--transparent"
718                                                aria-hidden="true"
719                                            >
720                                                <img
721                                                    src="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/svg/okay-pick-primary-black.svg"
722                                                    alt=""
723                                                    loading="lazy"
724                                                    decoding="async"
725                                                >
726                                            </span>
727                                            <span class="core-logo-brand-menu__name">Black</span>
728                                            <span class="core-logo-brand-menu__actions">
729                                                <a
730                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/svg/okay-pick-primary-black.svg"
731                                                    download
732                                                    data-router-disabled
733                                                    role="menuitem"
734                                                    tabindex="-1"
735                                                    aria-label="Download Okay Pick primary badge, black as SVG"
736                                                >SVG</a>
737                                                <a
738                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/png/okay-pick-primary-black-384px.png"
739                                                    download
740                                                    data-router-disabled
741                                                    role="menuitem"
742                                                    tabindex="-1"
743                                                    aria-label="Download Okay Pick primary badge, black as PNG"
744                                                >PNG</a>
745                                            </span>
746                                        </div>
747                                                                            <div class="core-logo-brand-menu__asset">
748                                            <span
749                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--transparent"
750                                                aria-hidden="true"
751                                            >
752                                                <img
753                                                    src="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/svg/okay-pick-primary-white.svg"
754                                                    alt=""
755                                                    loading="lazy"
756                                                    decoding="async"
757                                                >
758                                            </span>
759                                            <span class="core-logo-brand-menu__name">White</span>
760                                            <span class="core-logo-brand-menu__actions">
761                                                <a
762                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/svg/okay-pick-primary-white.svg"
763                                                    download
764                                                    data-router-disabled
765                                                    role="menuitem"
766                                                    tabindex="-1"
767                                                    aria-label="Download Okay Pick primary badge, white as SVG"
768                                                >SVG</a>
769                                                <a
770                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/png/okay-pick-primary-white-384px.png"
771                                                    download
772                                                    data-router-disabled
773                                                    role="menuitem"
774                                                    tabindex="-1"
775                                                    aria-label="Download Okay Pick primary badge, white as PNG"
776                                                >PNG</a>
777                                            </span>
778                                        </div>
779                                                                            <div class="core-logo-brand-menu__asset">
780                                            <span
781                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--transparent"
782                                                aria-hidden="true"
783                                            >
784                                                <img
785                                                    src="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/svg/okay-pick-primary-light-gray.svg"
786                                                    alt=""
787                                                    loading="lazy"
788                                                    decoding="async"
789                                                >
790                                            </span>
791                                            <span class="core-logo-brand-menu__name">Light Gray</span>
792                                            <span class="core-logo-brand-menu__actions">
793                                                <a
794                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/svg/okay-pick-primary-light-gray.svg"
795                                                    download
796                                                    data-router-disabled
797                                                    role="menuitem"
798                                                    tabindex="-1"
799                                                    aria-label="Download Okay Pick primary badge, light-gray as SVG"
800                                                >SVG</a>
801                                                <a
802                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/primary/png/okay-pick-primary-light-gray-384px.png"
803                                                    download
804                                                    data-router-disabled
805                                                    role="menuitem"
806                                                    tabindex="-1"
807                                                    aria-label="Download Okay Pick primary badge, light-gray as PNG"
808                                                >PNG</a>
809                                            </span>
810                                        </div>
811                                                                        </div>
812                                </div>
813                                                            <div
814                                    class="core-logo-brand-menu__group"
815                                    role="group"
816                                    aria-labelledby="brand-menu-okay-pick-icon"
817                                >
818                                                                        <button
819                                        type="button"
820                                        class="core-logo-brand-menu__toggle"
821                                        id="brand-menu-okay-pick-icon"
822                                        data-brand-accordion-toggle
823                                        role="menuitem"
824                                        tabindex="-1"
825                                        aria-expanded="false"
826                                        aria-controls="brand-menu-assets-okay-pick-icon"
827                                    >
828                                        <span class="core-logo-brand-menu__chevron" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
829</span>
830                                        <span class="core-logo-brand-menu__label">Okay Pick · Icon</span>
831                                        <span class="core-logo-brand-menu__preview core-logo-brand-menu__preview--transparent" aria-hidden="true">
832                                            <img src="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/svg/okay-pick-icon-yellow.svg" alt="" loading="lazy" decoding="async">
833                                        </span>
834                                    </button>
835                                    <div class="core-logo-brand-menu__assets" id="brand-menu-assets-okay-pick-icon" hidden inert>
836                                                                            <div class="core-logo-brand-menu__asset">
837                                            <span
838                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--transparent"
839                                                aria-hidden="true"
840                                            >
841                                                <img
842                                                    src="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/svg/okay-pick-icon-yellow.svg"
843                                                    alt=""
844                                                    loading="lazy"
845                                                    decoding="async"
846                                                >
847                                            </span>
848                                            <span class="core-logo-brand-menu__name">Yellow</span>
849                                            <span class="core-logo-brand-menu__actions">
850                                                <a
851                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/svg/okay-pick-icon-yellow.svg"
852                                                    download
853                                                    data-router-disabled
854                                                    role="menuitem"
855                                                    tabindex="-1"
856                                                    aria-label="Download Okay Pick icon badge, yellow as SVG"
857                                                >SVG</a>
858                                                <a
859                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/png/okay-pick-icon-yellow-176px.png"
860                                                    download
861                                                    data-router-disabled
862                                                    role="menuitem"
863                                                    tabindex="-1"
864                                                    aria-label="Download Okay Pick icon badge, yellow as PNG"
865                                                >PNG</a>
866                                            </span>
867                                        </div>
868                                                                            <div class="core-logo-brand-menu__asset">
869                                            <span
870                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--transparent"
871                                                aria-hidden="true"
872                                            >
873                                                <img
874                                                    src="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/svg/okay-pick-icon-black.svg"
875                                                    alt=""
876                                                    loading="lazy"
877                                                    decoding="async"
878                                                >
879                                            </span>
880                                            <span class="core-logo-brand-menu__name">Black</span>
881                                            <span class="core-logo-brand-menu__actions">
882                                                <a
883                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/svg/okay-pick-icon-black.svg"
884                                                    download
885                                                    data-router-disabled
886                                                    role="menuitem"
887                                                    tabindex="-1"
888                                                    aria-label="Download Okay Pick icon badge, black as SVG"
889                                                >SVG</a>
890                                                <a
891                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/png/okay-pick-icon-black-176px.png"
892                                                    download
893                                                    data-router-disabled
894                                                    role="menuitem"
895                                                    tabindex="-1"
896                                                    aria-label="Download Okay Pick icon badge, black as PNG"
897                                                >PNG</a>
898                                            </span>
899                                        </div>
900                                                                            <div class="core-logo-brand-menu__asset">
901                                            <span
902                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--transparent"
903                                                aria-hidden="true"
904                                            >
905                                                <img
906                                                    src="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/svg/okay-pick-icon-white.svg"
907                                                    alt=""
908                                                    loading="lazy"
909                                                    decoding="async"
910                                                >
911                                            </span>
912                                            <span class="core-logo-brand-menu__name">White</span>
913                                            <span class="core-logo-brand-menu__actions">
914                                                <a
915                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/svg/okay-pick-icon-white.svg"
916                                                    download
917                                                    data-router-disabled
918                                                    role="menuitem"
919                                                    tabindex="-1"
920                                                    aria-label="Download Okay Pick icon badge, white as SVG"
921                                                >SVG</a>
922                                                <a
923                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/png/okay-pick-icon-white-176px.png"
924                                                    download
925                                                    data-router-disabled
926                                                    role="menuitem"
927                                                    tabindex="-1"
928                                                    aria-label="Download Okay Pick icon badge, white as PNG"
929                                                >PNG</a>
930                                            </span>
931                                        </div>
932                                                                            <div class="core-logo-brand-menu__asset">
933                                            <span
934                                                class="core-logo-brand-menu__preview core-logo-brand-menu__preview--transparent"
935                                                aria-hidden="true"
936                                            >
937                                                <img
938                                                    src="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/svg/okay-pick-icon-light-gray.svg"
939                                                    alt=""
940                                                    loading="lazy"
941                                                    decoding="async"
942                                                >
943                                            </span>
944                                            <span class="core-logo-brand-menu__name">Light Gray</span>
945                                            <span class="core-logo-brand-menu__actions">
946                                                <a
947                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/svg/okay-pick-icon-light-gray.svg"
948                                                    download
949                                                    data-router-disabled
950                                                    role="menuitem"
951                                                    tabindex="-1"
952                                                    aria-label="Download Okay Pick icon badge, light-gray as SVG"
953                                                >SVG</a>
954                                                <a
955                                                    href="/dist/brand/okay-dev-brand-kit/awards/okay-pick/icon/png/okay-pick-icon-light-gray-176px.png"
956                                                    download
957                                                    data-router-disabled
958                                                    role="menuitem"
959                                                    tabindex="-1"
960                                                    aria-label="Download Okay Pick icon badge, light-gray as PNG"
961                                                >PNG</a>
962                                            </span>
963                                        </div>
964                                                                        </div>
965                                </div>
966                            
967
968                        </div>
969                    </div>
970                </div>
971            </div>
972
973                            
974
975<nav class="core-nav">
976
977    <button class="btn-mobile-nav" aria-label="Navigation menu toggle">
978        <span class="mobile-nav-toggle-icon" aria-hidden="true">
979            <span class="mobile-nav-toggle-line mobile-nav-toggle-line-top"></span>
980            <span class="mobile-nav-toggle-line mobile-nav-toggle-line-middle"></span>
981            <span class="mobile-nav-toggle-line mobile-nav-toggle-line-bottom"></span>
982        </span>
983    </button>
984
985        <div id="okaydev-navbar-leading-root" class="okaydev-navbar-leading-root">
986        <div id="dynamic-block-1299141225" class="dynamic-block" data-site="1" data-template="MjEzNjNhZDgwZjVjMzVhODBiOTQyN2I2M2M2ODY2YWIwMTRlOTI5MTA2YjYyYzMwYTY3NmE2MWJkZjNkYzc3OV8vcGFydGlhbHMvbmF2L2R5bmFtaWMvbmF2YmFyLW1vYmlsZS1hdmF0YXItaXNsYW5k" data-args="eJxLtDKwqq4FAAZPAf4=" data-ignore-missing="false">                    </div>    </div>
987
988    <div class="core-nav-list">
989        <ul class="core-nav-list-primary">
990
991                            <li class="core-nav-list-social">
992                    <div class="core-nav-list-link-row">
993                                                <a class="label-1 prefetch-hover" href="https://okaydev.co/social">
994                            <span class="core-nav-link-roll">
995                                <span>Social</span>
996                                <span aria-hidden="true">Social</span>
997                            </span>
998                        </a>
999
1000                                            </div>
1001
1002                                    </li>
1003
1004                                            <li class="core-nav-list-projects">
1005                    <div class="core-nav-list-link-row">
1006                                                <a class="label-1 prefetch-hover" href="https://okaydev.co/gallery">
1007                            <span class="core-nav-link-roll">
1008                                <span>Gallery</span>
1009                                <span aria-hidden="true">Gallery</span>
1010                            </span>
1011                        </a>
1012
1013                                            </div>
1014
1015                                    </li>
1016
1017                                            <li class="core-nav-list-directory">
1018                    <div class="core-nav-list-link-row">
1019                                                <a class="label-1 prefetch-hover" href="https://okaydev.co/directory">
1020                            <span class="core-nav-link-roll">
1021                                <span>Directory</span>
1022                                <span aria-hidden="true">Directory</span>
1023                            </span>
1024                        </a>
1025
1026                                            </div>
1027
1028                                    </li>
1029
1030                                            <li class="core-nav-list-articles">
1031                    <div class="core-nav-list-link-row">
1032                                                <a class="label-1 prefetch-hover" href="https://okaydev.co/articles">
1033                            <span class="core-nav-link-roll">
1034                                <span>Articles</span>
1035                                <span aria-hidden="true">Articles</span>
1036                            </span>
1037                        </a>
1038
1039                                            </div>
1040
1041                                    </li>
1042
1043                                            <li class="core-nav-list-jobs">
1044                    <div class="core-nav-list-link-row">
1045                                                <a class="label-1 prefetch-hover" href="https://okaydev.co/jobs">
1046                            <span class="core-nav-link-roll">
1047                                <span>Jobs</span>
1048                                <span aria-hidden="true">Jobs</span>
1049                            </span>
1050                        </a>
1051
1052                                            </div>
1053
1054                                    </li>
1055
1056                                            <li class="core-nav-list-pricing core-nav-list-pricing">
1057                    <div class="core-nav-list-link-row">
1058                                                <a class="label-1 prefetch-hover" href="https://okaydev.co/pricing">
1059                            <span class="core-nav-link-roll">
1060                                <span>Pricing</span>
1061                                <span aria-hidden="true">Pricing</span>
1062                            </span>
1063                        </a>
1064
1065                                                    <span id="okaydev-nav-go-pro-mount" class="okaydev-nav-go-pro-mount">
1066                                <div id="dynamic-block-1041572241" class="dynamic-block" data-site="1" data-template="MGFjNTAxYzQ3ZmU3OWFkMGE1MTg5YjZmODY0YmMxOTgzNzViZjAxN2YwODk1MDgwNjRlOWJkZDk1MmMyYjZiOF8vcGFydGlhbHMvbmF2L2R5bmFtaWMvbmF2YmFyLXByaWNpbmctZ28tcHJvLWlzbGFuZA==" data-args="eJxLtDKwqq4FAAZPAf4=" data-ignore-missing="false">                                    <span class="navbar-pricing-go-pro-ph" aria-hidden="true"></span>
1067                                </div>                            </span>
1068                                            </div>
1069
1070                                    </li>
1071
1072                                    <div id="dynamic-block-1614719068" class="dynamic-block" data-site="1" data-template="Yjk0M2RjY2NiZDgwZTE2ZTQ4OGM2ODIyM2M3NDY1NjM2ODllN2IzMzI3ODRiMGM1MDljN2I1NWIxYjMxODVlMV8vcGFydGlhbHMvbmF2L2R5bmFtaWMvbmF2YmFyLWFkZC1wcm9qZWN0LWxpLWlzbGFuZA==" data-args="eJxLtDKwqq4FAAZPAf4=" data-ignore-missing="false">                        <li class="core-nav-list-add-project is-empty" id="okaydev-nav-add-project-slot" hidden aria-hidden="true"></li>
1073                    </div>                            
1074        </ul>
1075
1076        
1077        <div id="okaydev-navbar-auth-root" class="okaydev-navbar-auth-root is-navbar-auth-guest">
1078            <span class="core-nav-mobile-account-bg" aria-hidden="true"></span>
1079            <span class="core-nav-mobile-account-divider" aria-hidden="true"></span>
1080
1081                            
1082<div class="sign-up">
1083    <a class="button btn-core-sign-up" href="https://okaydev.co/sign-up">
1084        Sign Up
1085        <svg aria-hidden="true" class="hide-on-mobile" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path fill="#0C0C0C" d="m10 15.68-.766-.774 4.364-4.364H4.32V9.458h9.277L9.234 5.095 10 4.32 15.68 10 10 15.68Z"/></svg>
1086<svg aria-hidden="true" class="hide-on-desktop" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#0C0C0C" d="m12 19.23-.713-.707L17.31 12.5H4.77v-1h12.54l-6.023-6.023.713-.708L19.23 12 12 19.232Z"/></svg>    </a>
1087</div>
1088
1089<div class="sign-in">
1090    <a class="button label-1 btn-core-login" href="https://okaydev.co/login">
1091        <span class="core-nav-link-roll">
1092            <span>Login</span>
1093            <span aria-hidden="true">Login</span>
1094        </span>
1095        <span class="sr-only">Login</span>
1096    </a>
1097</div>
1098
1099<div class="core-nav-guest-extra">
1100    <nav aria-label="Secondary navigation">
1101        <ul class="core-nav-guest-secondary">
1102                                                                            <li><a href="https://okaydev.co/about">About</a></li>
1103                                                                                <li><a href="https://okaydev.co/faqs">FAQs</a></li>
1104                                                                                <li><a href="https://okaydev.co/brand">Brand</a></li>
1105                                                                                <li><a href="https://okaydev.co/contact">Contact</a></li>
1106                                                                                                                                                <li><a href="https://okaydev.co/newsletter" data-dialog="newsletter" aria-haspopup="dialog">Newsletter</a></li>
1107                    </ul>
1108    </nav>
1109    <nav class="core-nav-guest-social-nav" aria-label="Social links">
1110        <p class="core-nav-guest-social-eyebrow label-2">Follow OkayDev</p>
1111        <ul class="core-nav-guest-social">
1112                                                                                        <li>
1113                        <a href="https://okaydev.co/u/okaydev" aria-label="OkayDev on OkayDev">
1114                                                            <span aria-hidden="true"><svg class="bento-social-mark bento-social-mark--okaydev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
1115    <circle cx="125" cy="125" r="117" fill="none" stroke="currentColor" stroke-width="16"/>
1116    <path d="M55 160c20 28 41 38 70 38s50-10 70-38" fill="none" stroke="currentColor" stroke-width="16"/>
1117    <path d="m142 55-34 95" fill="none" stroke="currentColor" stroke-width="15"/>
1118    <path d="M84.3 130 59.3 105 84.3 80M165.7 130 190.7 105 165.7 80" fill="none" stroke="currentColor" stroke-width="15"/>
1119</svg>
1120</span>
1121                                                    </a>
1122                    </li>
1123                                                                                                        <li>
1124                        <a href="https://x.com/okaydevs" aria-label="OkayDev on X" target="_blank" rel="noopener">
1125                                                            <span aria-hidden="true"><svg class="bento-social-mark bento-social-mark--x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227">
1126    <path fill="currentColor" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/>
1127</svg>
1128</span>
1129                                                    </a>
1130                    </li>
1131                                                                                                        <li>
1132                        <a href="https://bsky.app/profile/okaydev.co" aria-label="OkayDev on Bluesky" target="_blank" rel="noopener">
1133                                                            <span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 226">
1134    <path fill="currentColor" d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z"/>
1135</svg>
1136</span>
1137                                                    </a>
1138                    </li>
1139                                                                                                        <li>
1140                        <a href="https://www.instagram.com/okaydevs" aria-label="OkayDev on Instagram" target="_blank" rel="noopener">
1141                                                            <span aria-hidden="true"><svg class="bento-social-mark bento-social-mark--instagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264.583 264.583">
1142    <path fill="currentColor" d="M132.345 33.973c-26.716 0-30.07.117-40.563.594-10.472.48-17.62 2.136-23.876 4.567-6.47 2.51-11.958 5.87-17.426 11.335-5.472 5.464-8.834 10.948-11.354 17.412-2.44 6.252-4.1 13.397-4.57 23.858-.47 10.486-.593 13.838-.593 40.535 0 26.697.119 30.037.594 40.522.482 10.465 2.14 17.609 4.57 23.859 2.515 6.465 5.876 11.95 11.346 17.414 5.466 5.468 10.955 8.834 17.42 11.345 6.26 2.431 13.41 4.088 23.881 4.567 10.493.477 13.844.594 40.559.594 26.719 0 30.061-.117 40.555-.594 10.472-.48 17.63-2.136 23.888-4.567 6.468-2.51 11.948-5.877 17.414-11.345 5.472-5.464 8.834-10.949 11.354-17.412 2.419-6.252 4.079-13.398 4.57-23.858.472-10.486.595-13.828.595-40.525s-.123-30.047-.594-40.533c-.492-10.465-2.152-17.608-4.57-23.858-2.521-6.466-5.883-11.95-11.355-17.414-5.472-5.468-10.944-8.827-17.42-11.335-6.271-2.431-13.424-4.088-23.897-4.567-10.493-.477-13.834-.594-40.558-.594zm-8.825 17.715c2.62-.004 5.542 0 8.825 0 26.266 0 29.38.094 39.752.565 9.591.438 14.797 2.04 18.264 3.385 4.591 1.782 7.864 3.912 11.305 7.352 3.443 3.44 5.575 6.717 7.362 11.305 1.346 3.46 2.951 8.663 3.388 18.247.47 10.363.573 13.475.573 39.71 0 26.233-.102 29.346-.573 39.709-.44 9.584-2.042 14.786-3.388 18.247-1.783 4.587-3.919 7.854-7.362 11.292-3.443 3.441-6.712 5.57-11.305 7.352-3.463 1.352-8.673 2.95-18.264 3.388-10.37.47-13.486.573-39.752.573-26.268 0-29.38-.102-39.751-.573-9.592-.443-14.797-2.044-18.267-3.39-4.59-1.781-7.87-3.911-11.313-7.352-3.443-3.44-5.574-6.709-7.362-11.298-1.346-3.461-2.95-8.663-3.387-18.247-.472-10.363-.566-13.476-.566-39.726s.094-29.347.566-39.71c.438-9.584 2.04-14.786 3.387-18.25 1.783-4.588 3.919-7.865 7.362-11.305 3.443-3.441 6.722-5.57 11.313-7.357 3.468-1.351 8.675-2.949 18.267-3.389 9.075-.41 12.592-.532 30.926-.553zm61.337 16.322c-6.518 0-11.805 5.277-11.805 11.792 0 6.512 5.287 11.796 11.805 11.796 6.517 0 11.804-5.284 11.804-11.796 0-6.513-5.287-11.796-11.805-11.796zm-52.512 13.782c-27.9 0-50.519 22.603-50.519 50.482 0 27.879 22.62 50.471 50.52 50.471s50.51-22.592 50.51-50.471c0-27.879-22.613-50.482-50.513-50.482zm0 17.715c18.11 0 32.792 14.67 32.792 32.767 0 18.096-14.683 32.767-32.792 32.767-18.11 0-32.791-14.671-32.791-32.767 0-18.098 14.68-32.767 32.791-32.767Z"/>
1143</svg>
1144</span>
1145                                                    </a>
1146                    </li>
1147                                                                                                        <li>
1148                        <a href="https://www.linkedin.com/company/okay-dev" aria-label="OkayDev on LinkedIn" target="_blank" rel="noopener">
1149                                                            <span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
1150    <path fill="currentColor" d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453"/>
1150
1151</svg>
1152</span>
1153                                                    </a>
1154                    </li>
1155                                                                                                        <li>
1156                        <a href="https://github.com/okaydevco" aria-label="OkayDev on GitHub" target="_blank" rel="noopener">
1157                                                            <span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
1158    <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28s87.04 5.76 128 17.28c97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0"/>
1159</svg>
1160</span>
1161                                                    </a>
1162                    </li>
1163                                    </ul>
1164    </nav>
1165</div>
1166                    </div>
1167
1168    </div>
1169
1170    <div class="mobile-content-cover"></div>
1171
1172</nav>
1173                    </div>
1174
1175                <button type="button"
1176    class="social-feed-top-button"
1177    data-social-feed-top-button
1178    aria-label="Jump to top"
1179    hidden>
1180    <span class="social-feed-top-button-icon" aria-hidden="true">
1181        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M11.29 8.71L6.7 13.3c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 10.83l3.88 3.88c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L12.7 8.71c-.38-.39-1.02-.39-1.41 0z"/></svg>    </span>
1182    <span class="social-feed-top-button-label">TOP</span>
1183    <span class="social-feed-top-button-spinner" aria-hidden="true"></span>
1184</button>
1185
1186    </header>
1187    
1187<script>
1188        (function () {
1189            // Clear before the first paint, including when older critical CSS still
1190            // contains the unconditional intro-hide selector. Do not wait for app.js.
1191            if (document.documentElement.dataset.headerIntroSeen === 'true') {
1192                var header = document.currentScript.previousElementSibling;
1193                header.removeAttribute('data-header-enter-pending');
1194                // Servd may hydrate after the app boots; its avatar entrance should
1195                // also stay skipped when this tab has already shown the header.
1196                header.querySelectorAll('.okaydev-navbar-leading-root, .okaydev-navbar-auth-root').forEach(function (root) {
1197                    root.classList.add('is-navbar-auth-refreshed');
1198                });
1199            }
1200        })();
1201    </script>
1201
1202    <div class="app-logo">
1203    <a
1204        class="app-logo-link"
1205        href="https://okaydev.co/"
1206                aria-label="OkayDev, Home"
1207        data-app-tab="home"
1208    >
1209        <svg class="app-logo-mark" viewBox="0 0 1483 276" aria-hidden="true" focusable="false">
1210            <g class="app-logo-shade">
1211                <path d="M1350.75 34.5V4H1252.25L1202.25 54V272H1374.75L1424.75 222L1483 4H1381.25L1350.75 34.5Z"/>
1212                <path d="M1088.75 4L1038.75 54V272H1211L1261 222V4H1088.75Z"/>
1213                <path d="M875.5 4L825.5 54V272H935.5C967 272 996 259.75 1016.5 239.25L1066.5 189.25C1086.5 169.25 1099.25 142.5 1099.25 113C1099.25 53 1047.75 4 985.5 4H875.5Z"/>
1214                <path d="M791.75 272L841.75 222L900 4H795.25L777.5 21.75V4H680.25L630.25 54V235.5H696.75L687 272H791.75Z"/>
1215                <path d="M540.25 240.25V272H638.25L688.25 222V4H515L465 54L406.75 272H508.5L540.25 240.25Z"/>
1216                <path d="M337 254.25V272H434.25L484.25 222V85.25H465.5L487.25 4H272L222 54V272H319.25L337 254.25Z"/>
1217                <path d="M197.25 243.5L247.25 193.5C269 173 282.5 144.5 282.5 112.75C282.5 50.75 229.75 0 166.5 0C135 0 106.5 12 85.5 31.75L35.5 81.75C14.25 103 0 131 0 162.75C0 225.25 52 276 116.5 276C147.75 276 176.25 263.75 197.25 243.5Z"/>
1218            </g>
1219            <g class="app-logo-fill">
1220                <path d="M1261.25 13V213H1417.75L1471.25 13H1388.25L1356.25 132C1353.75 141 1341.75 140.25 1341.75 130V13H1261.25Z"/>
1221                <path d="M1097.75 13V213H1252V145.5H1207V107H1184.5C1177.25 107 1172 101.5 1172 93.75C1172 86 1177.25 80.5 1184.5 80.5H1252V13H1097.75Z"/>
1222                <path d="M884.5 13V213H985.5C1043 213 1090.25 168 1090.25 113C1090.25 58 1043 13 985.5 13H884.5ZM953 113C953 97.25 966 84.25 981.75 84.25C997.5 84.25 1010.25 97.25 1010.25 113C1010.25 128.75 997.5 141.75 981.75 141.75C966 141.75 953 128.75 953 113Z"/>
1223                <path d="M758.5 176.5L748.75 213H834.75L888.25 13H802.25L778.5 101.25C777 107 768.5 105.5 768.5 99.25V13H689.25V176.5H758.5Z"/>
1224                <path d="M522 13L468.5 213H551.5L564.75 163.75H599.25V213H679.25V13H522ZM568.25 90.5C568.25 79.25 577.5 70.25 588.5 70.25C599.5 70.25 608.5 79.25 608.5 90.5C608.5 101.5 599.5 110.5 588.5 110.5C577.5 110.5 568.25 101.5 568.25 90.5Z"/>
1225                <path d="M281 13V213H360.25V151.25H396V213H475.25V94.25H453.75L475.5 13H381V71C381 88.25 360.25 88.25 360.25 71V13H281Z"/>
1226                <path d="M166.5 217C225 217 273.5 170.25 273.5 112.75C273.5 55.75 225 9 166.5 9C106.75 9 59 55.75 59 112.75C59 170.25 106.75 217 166.5 217ZM137.25 113C137.25 97.25 150.5 84.25 166.25 84.25C181.5 84.25 194.5 97.25 194.5 113C194.5 129 181.5 141.75 166.25 141.75C150.5 141.75 137.25 129 137.25 113Z"/>
1227            </g>
1228        </svg>
1229    </a>
1230</div>
1231</div>
1232
1233    <main data-router-wrapper>
1234        
1235    
1236    <section data-router-view="login" data-handle="login" data-theme="dark" data-sticky-mobile-header="true">
1237
1238        <div class="auth-shell-bg" aria-hidden="true">
1239	<div class="auth-shell-bg-shadow">
1240		<img
1241		src="/dist/images/home/hero/bg-shadow.webp"
1242			width="1577"
1243	height="997"
1244	alt=""
1245		>
1246	</div>
1247	<div class="auth-shell-grid-lines"></div>
1248</div>
1249
1250        <div class="login-container page-container wrapper okay-form">
1251
1252            <div class="login-panel">
1253
1254                <h1 class="heading">
1255                    Login
1256                </h1>
1257
1258                <div class="content">
1259
1260                    <form id="login-form" method="post" accept-charset="UTF-8">
1261                        <craft-csrf-input></craft-csrf-input>
1262                        <input type="hidden" name="action" value="users/login">
1263
1264                        <div class="field-container">
1265                            <label for="loginName">Username or email</label>
1266                            <input type="text" id="loginName" name="loginName" autocomplete="username" required>
1267                        </div>
1268
1269                        <div class="field-container field-container--password">
1270                            <div class="field-label-row">
1271                                <label for="password">Password</label>
1272                            </div>
1273                            <input type="password" id="password" name="password" autocomplete="current-password" required>
1274                            <div class="password-reveal-wrapper">
1275                                <label for="password-reveal" title="Show/Hide Password">
1276                                    <input id="password-reveal" type="checkbox" aria-label="Show/Hide Password">
1277                                    <span class="eye-outline"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480.09-336.92q67.99 0 115.49-47.59t47.5-115.58q0-67.99-47.59-115.49t-115.58-47.5q-67.99 0-115.49 47.59t-47.5 115.58q0 67.99 47.59 115.49t115.58 47.5ZM480-392q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm.05 172q-137.97 0-251.43-76.12Q115.16-372.23 61.54-500q53.62-127.77 167.02-203.88Q341.97-780 479.95-780q137.97 0 251.43 76.12Q844.84-627.77 898.46-500q-53.62 127.77-167.02 203.88Q618.03-220 480.05-220ZM480-500Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg></span>
1278                                    <span class="eye-fill"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480.09-336.92q67.99 0 115.49-47.59t47.5-115.58q0-67.99-47.59-115.49t-115.58-47.5q-67.99 0-115.49 47.59t-47.5 115.58q0 67.99 47.59 115.49t115.58 47.5ZM480-392q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm.05 172q-137.97 0-251.43-76.12Q115.16-372.23 61.54-500q53.62-127.77 167.02-203.88Q341.97-780 479.95-780q137.97 0 251.43 76.12Q844.84-627.77 898.46-500q-53.62 127.77-167.02 203.88Q618.03-220 480.05-220Z"/></svg></span>
1279                                </label>
1280                            </div>
1281                                                        <a class="forgot-password" href="https://okaydev.co/forgot-password">Forgot password?</a>
1282                        </div>
1283
1284                        
1285                        <input type="hidden" id="rememberMe" name="rememberMe" value="1">
1286
1287                                                <button type="submit" tabindex="0">Log in</button>
1288                    </form>
1289
1290                    <p class="sign-up-message">
1291                        Not a member yet? <a href="https://okaydev.co/sign-up">Sign up</a>
1292                    </p>
1293
1294                </div>
1295
1296            </div>
1297
1298        </div>
1299
1300    </section>
1301
1302    </main>
1303
1304    
1305    
1306
1307<footer id="core-footer" class="core-footer core-footer--made-on" data-accent="black">
1308    <div class="bento-page-bg" aria-hidden="true">
1309        <div class="bento-page-bg__shadow">
1310            <img
1311		src="https://images.okaydev.co/production/images/home/bg-shadow.webp?w=1577&amp;h=997&amp;auto=compress%2Cformat&amp;fit=min&amp;dm=1784704132&amp;s=0d73f62cc40403b5d51e8e9e06a60810"
1312			width="1577"
1313	height="997"
1314	alt=""
1315	loading="lazy" decoding="async"	>
1316        </div>
1317        <div class="bento-page-bg__grid-lines"></div>
1318        <div class="bento-page-bg__center-fade"></div>
1319    </div>
1320    
1321
1322
1323<div class="bento-made-on" data-bento-made-on>
1324    <div class="bento-made-on__content">
1325        <div class="bento-made-on__brand">
1326            <p class="bento-made-on__copy">A Social Network &amp; Portfolio Platform</p>
1327            <a class="bento-made-on__link" href="https://okaydev.co/" data-bento-made-on-logo>
1328                <span class="bento-made-on__logo">
1329                    <svg class="logo-okaydev" role="img" aria-label="OKAYDEV logo" width="1483" height="276" viewBox="0 0 1483 276" fill="none" xmlns="http://www.w3.org/2000/svg">
1330        <g class="logo-shades" aria-hidden="true">
1331        <path class="logo-letter-shadow" data-letter="V" d="M1350.75 34.5V4H1252.25L1202.25 54V272H1374.75L1424.75 222L1483 4H1381.25L1350.75 34.5Z" fill="var(--logo-fill-outer)"/>
1332        <path class="logo-letter-shadow" data-letter="E" d="M1088.75 4L1038.75 54V272H1211L1261 222V4H1088.75Z" fill="var(--logo-fill-outer)"/>
1333        <path class="logo-letter-shadow" data-letter="D" d="M875.5 4L825.5 54V272H935.5C967 272 996 259.75 1016.5 239.25L1066.5 189.25C1086.5 169.25 1099.25 142.5 1099.25 113C1099.25 53 1047.75 4 985.5 4H875.5Z" fill="var(--logo-fill-outer)"/>
1334        <path class="logo-letter-shadow" data-letter="Y" d="M791.75 272L841.75 222L900 4H795.25L777.5 21.75V4H680.25L630.25 54V235.5H696.75L687 272H791.75Z" fill="var(--logo-fill-outer)"/>
1335        <path class="logo-letter-shadow" data-letter="A" d="M540.25 240.25V272H638.25L688.25 222V4H515L4
133565 54L406.75 272H508.5L540.25 240.25Z" fill="var(--logo-fill-outer)"/>
1336        <path class="logo-letter-shadow" data-letter="K" d="M337 254.25V272H434.25L484.25 222V85.25H465.5L487.25 4H272L222 54V272H319.25L337 254.25Z" fill="var(--logo-fill-outer)"/>
1337        <path class="logo-letter-shadow" data-letter="O" d="M197.25 243.5L247.25 193.5C269 173 282.5 144.5 282.5 112.75C282.5 50.75 229.75 0 166.5 0C135 0 106.5 12 85.5 31.75L35.5 81.75C14.25 103 0 131 0 162.75C0 225.25 52 276 116.5 276C147.75 276 176.25 263.75 197.25 243.5Z" fill="var(--logo-fill-outer)"/>
1338    </g>
1339
1340        <g class="logo-faces">
1341        <g class="logo-letter" data-letter="V">
1342            <path class="logo-letter-face" d="M1261.25 13V213H1417.75L1471.25 13H1388.25L1356.25 132C1353.75 141 1341.75 140.25 1341.75 130V13H1261.25Z" fill="var(--logo-fill-inner)"/>
1343        </g>
1344        <g class="logo-letter" data-letter="E">
1345            <path class="logo-letter-face" d="M1097.75 13V213H1252V145.5H1207V107H1184.5C1177.25 107 1172 101.5 1172 93.75C1172 86 1177.25 80.5 1184.5 80.5H1252V13H1097.75Z" fill="var(--logo-fill-inner)"/>
1346        </g>
1347        <g class="logo-letter" data-letter="D">
1348            <path class="logo-letter-face" d="M884.5 13V213H985.5C1043 213 1090.25 168 1090.25 113C1090.25 58 1043 13 985.5 13H884.5ZM953 113C953 97.25 966 84.25 981.75 84.25C997.5 84.25 1010.25 97.25 1010.25 113C1010.25 128.75 997.5 141.75 981.75 141.75C966 141.75 953 128.75 953 113Z" fill="var(--logo-fill-inner)"/>
1349        </g>
1350        <g class="logo-letter" data-letter="Y">
1351            <path class="logo-letter-face" d="M758.5 176.5L748.75 213H834.75L888.25 13H802.25L778.5 101.25C777 107 768.5 105.5 768.5 99.25V13H689.25V176.5H758.5Z" fill="var(--logo-fill-inner)"/>
1352        </g>
1353        <g class="logo-letter" data-letter="A">
1354            <path class="logo-letter-face" d="M522 13L468.5 213H551.5L564.75 163.75H599.25V213H679.25V13H522ZM568.25 90.5C568.25 79.25 577.5 70.25 588.5 70.25C599.5 70.25 608.5 79.25 608.5 90.5C608.5 101.5 599.5 110.5 588.5 110.5C577.5 110.5 568.25 101.5 568.25 90.5Z" fill="var(--logo-fill-inner)"/>
1355        </g>
1356        <g class="logo-letter" data-letter="K">
1357            <path class="logo-letter-face" d="M281 13V213H360.25V151.25H396V213H475.25V94.25H453.75L475.5 13H381V71C381 88.25 360.25 88.25 360.25 71V13H281Z" fill="var(--logo-fill-inner)"/>
1358        </g>
1359        <g class="logo-letter" data-letter="O">
1360            <path class="logo-letter-face" d="M166.5 217C225 217 273.5 170.25 273.5 112.75C273.5 55.75 225 9 166.5 9C106.75 9 59 55.75 59 112.75C59 170.25 106.75 217 166.5 217ZM137.25 113C137.25 97.25 150.5 84.25 166.25 84.25C181.5 84.25 194.5 97.25 194.5 113C194.5 129 181.5 141.75 166.25 141.75C150.5 141.75 137.25 129 137.25 113Z" fill="var(--logo-fill-inner)"/>
1361        </g>
1362    </g>
1363</svg>
1364                </span>
1365            </a>
1366        </div>
1367
1368                <div class="bento-made-on__join">
1369                            <p class="bento-made-on__cta-heading">
1370                    Join for free and hang with creative people on the internet.
1371                </p>
1372                <a class="bento-button bento-made-on__cta" href="https://okaydev.co/sign-up">
1373                    <span class="bento-button__label">Make Your Profile</span>
1374                    <span class="bento-external-icon" aria-hidden="true"><svg class="bento-external-icon__arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path class="bento-external-icon__arrow-stem" d="M5.77 17.12 16.89 6"/><path d="M6.14 6H16.89V16"/></svg>
1375</span>
1376                </a>
1377                    </div>
1378
1379        <div class="bento-made-on__nav-rows">
1380            <nav class="bento-made-on__nav bento-made-on__nav--primary" aria-label="OkayDev">
1381                <ul class="bento-made-on__nav-list">
1382                    <li>
1383                        <a href="https://okaydev.co/">Home</a>
1384                    </li>
1385                                                                        <li>
1386                                <a href="https://okaydev.co/social">Social</a>
1387                            </li>
1388                                                                                                <li>
1389                                <a href="https://okaydev.co/gallery">Gallery</a>
1390                            </li>
1391                                                                                                <li>
1392                                <a href="https://okaydev.co/directory">Directory</a>
1393                            </li>
1394                                                                                                <li>
1395                                <a href="https://okaydev.co/articles">Articles</a>
1396                            </li>
1397                                                                                                <li>
1398                                <a href="https://okaydev.co/jobs">Jobs</a>
1399                            </li>
1400                                                                                                <li>
1401                                <a href="https://okaydev.co/pricing">Pricing</a>
1402                            </li>
1403                                                            </ul>
1404            </nav>
1405
1406            <nav class="bento-made-on__nav bento-made-on__nav--secondary" aria-label="OkayDev secondary">
1407                <ul class="bento-made-on__nav-list">
1408                                                                                                        <li>
1409                                    <a class="" href="https://okaydev.co/about">About</a>
1410                                </li>
1411                                                                                                                                                            <li>
1412                                    <a class="is-text-transform-none" href="https://okaydev.co/faqs">FAQs</a>
1413                                </li>
1414                                                                                                                                                            <li>
1415                                    <a class="" href="https://okaydev.co/brand">Brand</a>
1416                                </li>
1417                                                                                                                                                            <li>
1418                                    <a class="" href="https://okaydev.co/contact">Contact</a>
1419                                </li>
1420                                                                                                                                                            <li>
1421                                    <a class="" href="https://okaydev.co/login">Login</a>
1422                                </li>
1423                                                                                                                                                            <li>
1424                                    <a class="" href="https://okaydev.co/sign-up">Sign up</a>
1425                                </li>
1426                                                                                            <li>
1427                        <a href="/newsletter" data-dialog="newsletter" aria-haspopup="dialog">Newsletter</a>
1428                    </li>
1429                </ul>
1430            </nav>
1431
1432            <nav class="bento-made-on__nav bento-made-on__nav--social" aria-label="OkayDev social">
1433                <ul class="bento-made-on__nav-list">
1434                    <li>
1435                        <a
1436                            class="bento-made-on__social-link"
1437                            href="https://okaydev.co/u/okaydev/social"
1438                            aria-label="OkayDev social"
1439                            title="OkayDev"
1440                        >
1441                            <span class="bento-made-on__social-logo bento-made-on__social-logo--okaydev-outline" aria-hidden="true">
1442                                <svg class="bento-social-mark bento-social-mark--okaydev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
1443    <circle cx="125" cy="125" r="117" fill="none" stroke="currentColor" stroke-width="16"/>
1444    <path d="M55 160c20 28 41 38 70 38s50-10 70-38" fill="none" stroke="currentColor" stroke-width="16"/>
1445    <path d="m142 55-34 95" fill="none" stroke="currentColor" stroke-width="15"/>
1446    <path d="M84.3 130 59.3 105 84.3 80M165.7 130 190.7 105 165.7 80" fill="none" stroke="currentColor" stroke-width="15"/>
1447</svg>
1448                            </span>
1449                        </a>
1450                    </li>
1451                                                                                                                                                                                                                    <li>
1452                                <a
1453                                    class="bento-made-on__social-link"
1454                                    href="https://x.com/okaydevs"
1455                                    target="_blank"
1456                                    rel="noopener"
1457                                    aria-label="OkayDev on X" title="X"                                >
1458                                                                            <sp
1458an class="bento-made-on__social-logo bento-made-on__social-logo--x" aria-hidden="true">
1459                                            <svg class="bento-social-mark bento-social-mark--x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227">
1460    <path fill="currentColor" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/>
1461</svg>
1462                                        </span>
1463                                                                    </a>
1464                            </li>
1465                                                                                                                                                <li>
1466                                <a
1467                                    class="bento-made-on__social-link"
1468                                    href="https://bsky.app/profile/okaydev.co"
1469                                    target="_blank"
1470                                    rel="noopener"
1471                                    aria-label="OkayDev on Bluesky" title="Bluesky"                                >
1472                                                                            <span class="bento-made-on__social-logo bento-made-on__social-logo--bluesky" aria-hidden="true">
1473                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 226">
1474    <path fill="currentColor" d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z"/>
1475</svg>
1476                                        </span>
1477                                                                    </a>
1478                            </li>
1479                                                                                                                                                <li>
1480                                <a
1481                                    class="bento-made-on__social-link"
1482                                    href="https://www.instagram.com/okaydevs"
1483                                    target="_blank"
1484                                    rel="noopener"
1485                                    aria-label="OkayDev on Instagram" title="Instagram"                                >
1486                                                                            <span class="bento-made-on__social-logo bento-made-on__social-logo--instagram" aria-hidden="true">
1487                                            <svg class="bento-social-mark bento-social-mark--instagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264.583 264.583">
1488    <path fill="currentColor" d="M132.345 33.973c-26.716 0-30.07.117-40.563.594-10.472.48-17.62 2.136-23.876 4.567-6.47 2.51-11.958 5.87-17.426 11.335-5.472 5.464-8.834 10.948-11.354 17.412-2.44 6.252-4.1 13.397-4.57 23.858-.47 10.486-.593 13.838-.593 40.535 0 26.697.119 30.037.594 40.522.482 10.465 2.14 17.609 4.57 23.859 2.515 6.465 5.876 11.95 11.346 17.414 5.466 5.468 10.955 8.834 17.42 11.345 6.26 2.431 13.41 4.088 23.881 4.567 10.493.477 13.844.594 40.559.594 26.719 0 30.061-.117 40.555-.594 10.472-.48 17.63-2.136 23.888-4.567 6.468-2.51 11.948-5.877 17.414-11.345 5.472-5.464 8.834-10.949 11.354-17.412 2.419-6.252 4.079-13.398 4.57-23.858.472-10.486.595-13.828.595-40.525s-.123-30.047-.594-40.533c-.492-10.465-2.152-17.608-4.57-23.858-2.521-6.466-5.883-11.95-11.355-17.414-5.472-5.468-10.944-8.827-17.42-11.335-6.271-2.431-13.424-4.088-23.897-4.567-10.493-.477-13.834-.594-40.558-.594zm-8.825 17.715c2.62-.004 5.542 0 8.825 0 26.266 0 29.38.094 39.752.565 9.591.438 14.797 2.04 18.264 3.385 4.591 1.782 7.864 3.912 11.305 7.352 3.443 3.44 5.575 6.717 7.362 11.305 1.346 3.46 2.951 8.663 3.388 18.247.47 10.363.573 13.475.573 39.71 0 26.233-.102 29.346-.573 39.709-.44 9.584-2.042 14.786-3.388 18.247-1.783 4.587-3.919 7.854-7.362 11.292-3.443 3.441-6.712 5.57-11.305 7.352-3.463 1.352-8.673 2.95-18.264 3.388-10.37.47-13.486.573-39.752.573-26.268 0-29.38-.102-39.751-.573-9.592-.443-14.797-2.044-18.267-3.39-4.59-1.781-7.87-3.911-11.313-7.352-3.443-3.44-5.574-6.709-7.362-11.298-1.346-3.461-2.95-8.663-3.387-18.247-.472-10.363-.566-13.476-.566-39.726s.094-29.347.566-39.71c.438-9.584 2.04-14.786 3.387-18.25 1.783-4.588 3.919-7.865 7.362-11.305 3.443-3.441 6.722-5.57 11.313-7.357 3.468-1.351 8.675-2.949 18.267-3.389 9.075-.41 12.592-.532 30.926-.553zm61.337 16.322c-6.518 0-11.805 5.277-11.805 11.792 0 6.512 5.287 11.796 11.805 11.796 6.517 0 11.804-5.284 11.804-11.796 0-6.513-5.287-11.796-11.805-11.796zm-52.512 13.782c-27.9 0-50.519 22.603-50.519 50.482 0 27.879 22.62 50.471 50.52 50.471s50.51-22.592 50.51-50.471c0-27.879-22.613-50.482-50.513-50.482zm0 17.715c18.11 0 32.792 14.67 32.792 32.767 0 18.096-14.683 32.767-32.792 32.767-18.11 0-32.791-14.671-32.791-32.767 0-18.098 14.68-32.767 32.791-32.767Z"/>
1489</svg>
1490                                        </span>
1491                                                                    </a>
1492                            </li>
1493                                                                                                                                                <li>
1494                                <a
1495                                    class="bento-made-on__social-link"
1496                                    href="https://www.linkedin.com/company/okay-dev"
1497                                    target="_blank"
1498                                    rel="noopener"
1499                                    aria-label="OkayDev on LinkedIn" title="LinkedIn"                                >
1500                                                                            <sp
1500an class="bento-made-on__social-logo bento-made-on__social-logo--linkedin" aria-hidden="true">
1501                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
1502    <path fill="currentColor" d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453"/>
1503</svg>
1504                                        </span>
1505                                                                    </a>
1506                            </li>
1507                                                                                                                                                <li>
1508                                <a
1509                                    class="bento-made-on__social-link"
1510                                    href="https://github.com/okaydevco"
1511                                    target="_blank"
1512                                    rel="noopener"
1513                                    aria-label="OkayDev on GitHub" title="GitHub"                                >
1514                                                                            <span class="bento-made-on__social-logo bento-made-on__social-logo--github" aria-hidden="true">
1515                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
1516    <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28s87.04 5.76 128 17.28c97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0"/>
1517</svg>
1518                                        </span>
1519                                                                    </a>
1520                            </li>
1521                                                            </ul>
1522            </nav>
1523        </div>
1524        
1525        <div class="bento-made-on__legal-block">
1526            <p class="bento-made-on__copyright">
1527                <span class="bento-made-on__copyright-owner">OKAY DEV® 2026 &copy;</span>
1528                <span class="bento-made-on__copyright-rights">All rights reserved</span>
1529            </p>
1530            <ul class="bento-made-on__legal">
1531                <li>
1532                    <a href="/terms-and-conditions">Terms</a>
1533                </li>
1534                <li>
1535                    <a href="/privacy-policy">Privacy</a>
1536                </li>
1537                <li>
1538                    <a href="/acceptable-use-policy">Acceptable Use</a>
1539                </li>
1540                <li>
1541                    <a href="/disclaimer">Disclaimer</a>
1542                </li>
1543                <li>
1544                    <a href="/return-policy">Returns</a>
1545                </li>
1546                <li>
1547                    <a href="/cookie-policy">Cookie Policy</a>
1548                </li>
1549                <li>
1550                    <a href="/community-guidelines">Community Guidelines</a>
1551                </li>
1552            </ul>
1553        </div>
1554    </div>
1555</div>
1556</footer>
1557
1558            
1559<nav class="app-toolbar" aria-label="App" style="--app-toolbar-count: 4" data-app-toolbar>
1560    <ul class="app-toolbar-list">
1561        <li class="app-toolbar-item">
1562            <a class="app-toolbar-tab" href="https://okaydev.co/social" data-app-tab="social">
1563                <span class="app-toolbar-icon" aria-hidden="true">
1564                                        <svg class="app-toolbar-glyph app-toolbar-glyph--social" viewBox="-14 -14 278 278">
1565                        <circle class="app-toolbar-glyph-disc" cx="125" cy="125" r="115.75" fill="none" stroke="currentColor" stroke-width="18.5"/>
1566                        <path class="app-toolbar-glyph-mark" fill="currentColor" d="m182.332 146.485 10.336 7.03-.163.235c-.213.302-.51.707-.89 1.202l-.168.218a69.175 69.175 0 0 1-3.268 3.894c-3.56 3.955-7.8 7.894-12.726 11.57C161.346 181.161 144.485 187.5 125 187.5c-19.485 0-36.346-6.339-50.453-16.866-4.927-3.676-9.166-7.615-12.726-11.57a70.558 70.558 0 0 1-2.955-3.494l-.313-.4a43.152 43.152 0 0 1-.962-1.284l-.259-.37 10.336-7.031.345.476c.115.154.256.34.422.555a56.741 56.741 0 0 0 2.676 3.185c3.034 3.37 6.676 6.755 10.911 9.915C94.09 169.62 108.4 175 125 175c16.601 0 30.91-5.38 42.978-14.384 4.234-3.16 7.877-6.545 10.91-9.915a58.306 58.306 0 0 0 2.394-2.824l.513-.661c.176-.232.312-.416.408-.548l.13-.183ZM131.571 66.774l11.858 3.952-25 75-11.858-3.952zm26.51 25.145 8.838-8.838 23.17 23.169-23.17 23.169-8.838-8.838 14.33-14.331zM83.081 83.081l8.838 8.838-14.33 14.331 14.33 14.331-8.838 8.838-23.17-23.169z"/>
1567                    </svg>
1568                </span>
1569                <span class="app-toolbar-label">Social</span>
1570            </a>
1571        </li>
1572
1573        <li class="app-toolbar-item">
1574            <a class="app-toolbar-tab" href="https://okaydev.co/gallery" data-app-tab="explore">
1575                <span class="app-toolbar-icon" aria-hidden="true">
1576                    <svg class="app-toolbar-glyph app-toolbar-glyph--explore" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
1577                        <circle class="app-toolbar-glyph-disc" cx="12" cy="12" r="9.25"/>
1578                        <path class="app-toolbar-glyph-mark" d="m15.6 8.4-2.1 5.1-5.1 2.1 2.1-5.1 5.1-2.1Z"/>
1579                    </svg>
1580                </span>
1581                <span class="app-toolbar-label">Explore</span>
1582            </a>
1583        </li>
1584
1585                    <li class="app-toolbar-item">
1586                <a class="app-toolbar-tab" href="https://okaydev.co/login" data-app-tab="log-in">
1587                    <span class="app-toolbar-icon" aria-hidden="true">
1588                        <svg class="app-toolbar-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
1589                            <path d="M13.75 4.75h3.5a2 2 0 0 1 2 2v10.5a2 2 0 0 1-2 2h-3.5"/>
1590                            <path d="M4.75 12h10M11.25 8.25 15 12l-3.75 3.75"/>
1591                        </svg>
1592                    </span>
1593                    <span class="app-toolbar-label">Log in</span>
1594                </a>
1595            </li>
1596
1597            <li class="app-toolbar-item">
1598                <a class="app-toolbar-tab" href="https://okaydev.co/sign-up" data-app-tab="sign-up">
1599                    <span class="app-toolbar-icon" aria-hidden="true">
1600                        <svg class="app-toolbar-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
1601                            <circle cx="10" cy="8.25" r="3.75"/>
1602                            <path d="M3.25 19.25c.85-3.3 3.55-5.25 6.75-5.25 1.5 0 2.9.43 4.05 1.2M18.25 13.25v6M15.25 16.25h6"/>
1603                        </svg>
1604                    </span>
1605                    <span class="app-toolbar-label">Sign up</span>
1606                </a>
1607            </li>
1608            </ul>
1609
1610    </nav>
1611    
1612            
1613
1614
1615	<dialog class="okay-dialog" tabindex="-1"
1616				data-dialog="social-guest-gate"								data-size="sm"		>
1617
1618		<div class="dialog-content">
1619
1620			<div class="dialog-header">
1621				<div class="dialog-heading">
1622
1623					<div class="dialog-heading-content">
1624                        						
1625													<span class="dialog-heading-text">The social network for creatives</span>
1626											</div>
1627
1628					<button type="button" class="btn-close-dialog icon-container" aria-label="Close">
1629						<svg aria-hidden="true" class="hide-on-mobile" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path fill="#0C0C0C" d="m6.063 14.711-.775-.774L9.226 10 5.288 6.062l.774-.774L10 9.226l3.938-3.938.773.774L10.774 10l3.938 3.938-.774.773L10 10.774l-3.938 3.938Z"/></svg>
1630<svg aria-hidden="true" class="hide-on-desktop" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
1630<path fill="#0C0C0C" d="m6.4 18.308-.708-.708 5.6-5.6-5.6-5.6.708-.708 5.6 5.6 5.6-5.6.708.708-5.6 5.6 5.6 5.6-.708.708-5.6-5.6-5.6 5.6Z"/></svg>					</button>
1631
1632				</div>
1633			</div>
1634
1635            			<div class="dialog-inner" data-dialog-scroll>
1636				<div class="ui-claim-project ui-social-guest-gate">
1637		<img
1638		class="ui-social-guest-gate-image"
1639		data-dialog-img-src="https://images.okaydev.co/production/images/okay_social-social_share.png?w=1200&h=630&auto=compress%2Cformat&fit=min&dm=1750180106&s=7be33bb1d2aac260cc2762686f7e4057"
1640		alt="Okay Social"
1641		width="1200"
1642		height="630"
1643		decoding="async"
1644		fetchpriority="low"
1645		hidden
1646	>
1647	<p>
1648		Tired of ads, algorithms, and the usual social network BS?
1649	</p>
1650	<p>
1651		The OkayDev community is built for creative devs and designers who want to share cool shit, reconnect, and talk like actual humans.
1652	</p>
1653	<p>
1654		Join for free and come hang with creative people on the internet.
1655	</p>
1656</div>
1657
1658			</div>
1659            
1660							<div class="dialog-footer">
1661					<div class="ui-claim-project-actions">
1662						<a href="/login" class="button ui-claim-project-action is-secondary">LOGIN</a>
1663						<a href="/sign-up" class="button ui-claim-project-action is-primary">SIGN UP</a>
1664					</div>
1665				</div>
1666						
1667		</div>
1668
1669	</dialog>
1670    
1671    <dialog
1672	class="social-image-viewer-dialog"
1673	data-social-image-viewer
1674	closedby="closerequest"
1675	tabindex="-1"
1676	aria-modal="true"
1677	aria-label="Image viewer"
1678>
1679	<div class="social-image-viewer-dialog__panel">
1680		<button
1681			type="button"
1682			class="social-image-viewer-dialog__close btn-close-dialog icon-container"
1683			data-social-image-viewer-close
1684			aria-label="Close image viewer"
1685		>
1686			<svg aria-hidden="true" class="hide-on-mobile" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path fill="#0C0C0C" d="m6.063 14.711-.775-.774L9.226 10 5.288 6.062l.774-.774L10 9.226l3.938-3.938.773.774L10.774 10l3.938 3.938-.774.773L10 10.774l-3.938 3.938Z"/></svg>
1687<svg aria-hidden="true" class="hide-on-desktop" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#0C0C0C" d="m6.4 18.308-.708-.708 5.6-5.6-5.6-5.6.708-.708 5.6 5.6 5.6-5.6.708.708-5.6 5.6 5.6 5.6-.708.708-5.6-5.6-5.6 5.6Z"/></svg>		</button>
1688
1689		<div
1690			class="social-image-viewer-dialog__thumbs"
1691			data-social-image-viewer-thumbs
1692			hidden
1693		></div>
1694
1695		<div
1696			class="social-image-viewer-dialog__viewport"
1697			data-social-image-viewer-viewport
1698		>
1699			<div
1700				class="social-image-viewer-dialog__track"
1701				data-social-image-viewer-track
1702			></div>
1703		</div>
1704
1705		<div class="social-image-viewer-dialog__footer" data-social-image-viewer-footer>
1706			<div
1707				class="social-image-viewer-dialog__pagination"
1708				data-social-image-viewer-pagination
1709				hidden
1710			>
1711				<span data-social-image-viewer-pagination-current></span>
1712				<span class="social-image-viewer-dialog__pagination-sep" aria-hidden="true">/</span>
1713				<span data-social-image-viewer-pagination-total></span>
1714			</div>
1715			<p class="social-image-viewer-dialog__title" data-social-image-viewer-title></p>
1716		</div>
1717	</div>
1718</dialog>
1719
1720        
1721
1722                                    
1722<script src="https://okaydev.co/cpresources/927fa84b/js/scripts/front-end/plugin/freeform.js?v=1762884662"></script>
1722
1723<link rel="stylesheet" href="https://okaydev.co/cpresources/927fa84b/css/front-end/plugin/freeform.css?v=1762884662">
1724<script src="https://okaydev.co/cpresources/927fa84b/js/scripts/front-end/captchas/recaptcha/v3.js?v=1762884662"></script>
1724
1725        
1726                <template id="custom-video-player-chrome">
1727            <div class="custom-video-player__overlay">
1728	<button type="button" class="custom-video-player__play-center" aria-label="Play">
1729		<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
1730			<path d="M8 5v14l11-7z"/>
1731		</svg>
1732	</button>
1733
1734	<div class="custom-video-player__chrome">
1735		<div class="custom-video-player__controls">
1736			<div class="custom-video-player__controls-left">
1737				<button type="button" class="custom-video-player__play-pause" aria-label="Play">
1738					<span class="custom-video-player__icon custom-video-player__icon--play" aria-hidden="true">
1739						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
1740					</span>
1741					<span class="custom-video-player__icon custom-video-player__icon--pause" aria-hidden="true" hidden>
1742						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
1743					</span>
1744				</button>
1745
1746				<span class="custom-video-player__time">
1747					<span data-current-time>0:00</span>
1748					<span class="custom-video-player__time-sep" aria-hidden="true">/</span>
1749					<span data-duration>0:00</span>
1750				</span>
1751
1752				<div class="custom-video-player__progress" role="slider" aria-label="Seek" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" tabindex="0">
1753					<div class="custom-video-player__progress-track">
1754						<div class="custom-video-player__progress-fill"></div>
1755						<div class="custom-video-player__progress-thumb"></div>
1756					</div>
1757				</div>
1758			</div>
1759
1760			<div class="custom-video-player__controls-right">
1761				<button type="button" class="custom-video-player__mute" aria-label="Unmute">
1762					<span class="custom-video-player__icon custom-video-player__icon--muted" aria-hidden="true">
1763						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z"/></svg>
1764					</span>
1765					<span class="custom-video-player__icon custom-video-player__icon--unmuted" aria-hidden="true" hidden>
1766						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
1767					</span>
1768				</button>
1769
1770				<div class="custom-video-player__speed">
1771					<button type="button" class="custom-video-player__speed-toggle" aria-label="Playback speed" aria-haspopup="true" aria-expanded="false">1×</button>
1772					<div class="custom-video-player__speed-menu" hidden>
1773						<button type="button" data-speed="0.5">0.5×</button>
1774						<button type="button" data-speed="1">1×</button>
1775						<button type="button" data-speed="1.5">1.5×</button>
1776						<button type="button" data-speed="2">2×</button>
1777					</div>
1778				</div>
1779
1780				<button type="button" class="custom-video-player__pip" aria-label="Picture in picture" hidden>
1781					<span class="custom-video-player__icon custom-video-player__icon--pip" aria-hidden="true">
1782						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"/></svg>
1783					</span>
1784				</button>
1785
1786				<button type="button" class="custom-video-player__fullscreen" aria-label="Fullscreen">
1787					<span class="custom-video-player__icon custom-video-player__icon--enter-fs" aria-hidden="true">
1788						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
1789					</span>
1790					<span class="custom-video-player__icon custom-video-player__icon--exit-fs" aria-hidden="true" hidden>
1791						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>
1792					</span>
1793				</button>
1794			</div>
1795		</div>
1796	</div>
1797</div>
1798        </template>
1799
1800    
1800<script>
1801  (function() {
1802    fetch('https://okaydev.co/index.php/actions/users/session-info', {
1803      headers: {
1804        'Accept': 'application/json',
1805      }
1806    }).then(response => response.json())
1807      .then(data => {
1808        document.querySelectorAll('craft-csrf-input')
1809          .forEach(element => {
1810            const input = document.createElement('input');
1811            input.type = 'hidden';
1812            input.name = data.csrfTokenName;
1813            input.value = data.csrfTokenValue;
1814            element.replaceWith(input);
1815          });
1816      });
1817  })();
1818</script>
vendor: 1 bytes, line 1818
1818
1819<script>function insertBlocks(blocks)
1820                {
1821                    var allChildrenOnPage = [];
1822                    for(var i = 0; i < blocks.length; i++){
1823                        var rBlock = blocks[i];
1824                        var dBlock = document.getElementById(rBlock.id);
1825                        var placeholder = document.createElement("div");
1826                        placeholder.insertAdjacentHTML("afterbegin", rBlock.html);
1827                        var allChildren = [];
1828                        for (var j = 0; j < placeholder.childNodes.length; j++) {
1829                            allChildren.push(placeholder.childNodes[j]);
1830                            allChildrenOnPage.push(placeholder.childNodes[j]);
1831                        }
1832                        for(var node of allChildren){
1833                            dBlock.parentNode.insertBefore(node, dBlock);
1834                        }
1835                        dBlock.parentNode.removeChild(dBlock);
1836                    }
1837
1838                    return allChildrenOnPage;
1839                }
1840                function pullDynamic() {
1841                    var injectedContent = document.getElementById("SERVD_DYNAMIC_BLOCKS");
1842                    if(injectedContent){
1843                        var parsedContent = JSON.parse(injectedContent.innerHTML);
1844                        let insertedBlocks = insertBlocks(parsedContent.blocks);
1845                        window.dispatchEvent( new CustomEvent("servd.dynamicloaded", {detail: {blocks: insertedBlocks}}) );
1846                        return;
1847                    }
1848
1849                    var dynamicBlocks = document.getElementsByClassName("dynamic-block");
1850                    var len = dynamicBlocks.length;
1851                    var allBlocks = [];
1852                    for (var i=0; i<len; i++) {
1853                        var block = dynamicBlocks[i];
1854                        var blockId = block.id;
1855                        var template = block.getAttribute("data-template");
1856                        var args = block.getAttribute("data-args");
1857                        var siteId = block.getAttribute("data-site");
1858                        allBlocks.push({
1859                            id: blockId,
1860                            template: template,
1861                            args: args,
1862                            siteId: siteId
1863                        });
1864                    }
1865
1866                    if(allBlocks.length > 0){
1867                        var xhr = new XMLHttpRequest();
1868                        xhr.onload = function () {
1869                            if (xhr.status >= 200 && xhr.status <= 299) {
1870                                var responseContent = JSON.parse(xhr.response);
1871                                let insertedBlocks = insertBlocks(responseContent.blocks);
1872                                window.dispatchEvent( new CustomEvent("servd.dynamicloaded", {detail: {blocks: insertedBlocks}}) );
1873                            }
1874                        }
1875                        xhr.open("POST", "https://okaydev.co/index.php/actions/servd-asset-storage/dynamic-content/get-content", );
1876                        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
1877                        xhr.send(JSON.stringify(allBlocks));
1878                    } else {
1879                        window.dispatchEvent( new CustomEvent("servd.dynamicloaded", {detail: {blocks: []}}) );
1880                    }
1881                }
1882
1883                setTimeout(function(){
1884                    if (!window.SERVD_MANUAL_DYNAMIC_LOAD) {
1885                        pullDynamic();
1886                    }
1887                }, 50);</script>
1887</body>
1888
1889</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.