CINXE.COM
Smart Interface Design Patterns (35 lessons + live UX training) – 100 Smart Interface Design Patterns & Live Examples. 10h Video + UX Training.
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Smart Interface Design Patterns (35 lessons + live UX training) – 100 Smart Interface Design Patterns & Live Examples. 10h Video + UX Training.</title> <link rel="preload" href="/build/Mija_Bold-subset.e92b1157.woff2" as="font" type="font/woff2" fetchpriority="high" crossorigin> <link rel="preconnect" href="https://player.vimeo.com/"> <script>if(document.documentElement){ document.documentElement.classList.add('has-js'); document.documentElement.classList.remove('no-js'); }</script> <link rel="stylesheet" href="/build/src/assets/scss/main.css" /> <link rel="preload" href="/build/ElenaWebRegular-subset.52089e95.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/build/ElenaWebBold-subset.bccbf96e.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/build/ElenaWebRegularItalic-subset.f8df7c80.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/build/Mija_Regular-subset.fdae932c.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/static/img/chapters/chapter-1.png" as="image"> <script src="/build/node_modules/courses-ui-components/src/assets/js/app.js" fetchpriority="high" defer></script> <meta name="description" content="100s of real-life examples, 10h-video course for UX designers, with UX checklists and practical takeaways." /> <meta property="og:url" content="https://smart-interface-design-patterns.com" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Smart Interface Design Patterns (35 lessons + live UX training) — 100 Smart Interface Design Patterns & Live Examples. 10h Video + UX Training." /> <meta property="og:description" content="100s of real-life examples, 10h-video course for UX designers, with UX checklists and practical takeaways." /> <meta property="og:image" content="https://smart-interface-design-patterns.com/static/img/open-graph.jpg" /> <meta property="og:image:alt" content="Smart Interface Design Patterns, 10h-video course with Vitaly Friedman" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Smart Interface Design Patterns (35 lessons + live UX training) - 100 Smart Interface Design Patterns & Live Examples. 10h Video + UX Training." /> <meta name="twitter:description" content="100s of real-life examples, 10h-video course for UX designers, with UX checklists and practical takeaways." /> <meta name="twitter:image" content="https://smart-interface-design-patterns.com/static/img/open-graph.jpg" /> <meta name="google-site-verification" content="3dKepg8Oj4afYqeHE3T66ZeouPjFO7G8ab4FCAn66U4" /> <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png"> <link rel="icon" href="/static/icons/favicon.ico" sizes="any"> <link rel="icon" href="/static/icons/favicon.svg" type="image/svg+xml"> <link rel="manifest" href="/static/icons/manifest.json"> <link rel="mask-icon" href="/static/icons/favicon.svg" color="#fff"> <meta name="apple-mobile-web-app-title" content="Smart Interface Design Patterns, with Vitaly Friedman"> <meta name="application-name" content="Smart Interface Design Patterns, with Vitaly Friedman"> <meta name="msapplication-TileColor" content="#0d242f"> <meta name="msapplication-config" content="/static/icons/browserconfig.xml"> <meta name="theme-color" content="#0d242f"> <link rel="alternate" type="application/rss+xml" href="https://smart-interface-design-patterns.com/feed.xml" title="Smart Interface Design Patterns RSS Feed" /> </head> <body class=""> <header class="c-header c-header--sticky" id="header"> <div class="c-header__wrap u-wrap u-wrap--full"> <div class="c-header__logo-wrapper"> <a class="c-header__logo" href="/" aria-label="Home"> <figure class="c-header__logo-smash"> <div class="c-header__logo-aspect"> <svg xmlns="http://www.w3.org/2000/svg" width="44" height="87" viewBox="0 0 44 87"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="99.9%"><stop offset="0%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".3"/><stop offset="2%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".3"/><stop offset="28%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".1"/><stop offset="48%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/><stop offset="60%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".2"/><stop offset="14%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".1"/><stop offset="36%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/><stop offset="50%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/></linearGradient></defs><g fill="none" fill-rule="nonzero"><g fill="var(--smashing-logo, #FFF8EC)"><path d="M25.7 28.2c-2-1.5-4.2-2.7-6.5-3.5-1.8-.8-3.5-1.7-5-2.7-3.8-2.7-5.7-5.9-5.7-9.8A10 10 0 0111.4 5l-8 1.9A4.3 4.3 0 000 11.9l6.7 28.7a4.3 4.3 0 005.1 3.3l3.3-.8H15c-2.2-.7-4.4-1.7-6.4-2.8l3.5-7.7c2.7 2.3 6.2 3.5 9.7 3.5 3.8 0 5.7-1.4 5.7-4a5 5 0 00-1.8-3.9zM43.9 32L37.2 3.5A4.3 4.3 0 0032.1 0l-4.9 1.1a28.5 28.5 0 018 2.6l-2.9 7.5c-2.1-1.8-5-2.7-8.8-2.7-3.4 0-5 1.3-5 4 0 1.1.6 2.2 1.6 2.8 2.2 1.4 4.6 2.6 7.1 3.4 2.2.8 4.2 2 6 3.4.7.5 1.3 1.2 1.9 1.8 1.6 2.2 2.4 4.8 2.4 7.4 0 2.6-.8 5-2.3 7.1l5.4-1.2A4.3 4.3 0 0044 32z"/></g><path fill="url(#a)" d="M21.8 8c-3.5 0-7 1.1-9.7 3.4L8.6 3.7c2-1.2 4.2-2 6.4-2.8h.2L12 0c-2.3-.5-4.6 1-5.1 3.3L0 32c-.5 2.3 1 4.6 3.3 5.2l8 1.8a9.6 9.6 0 01-3-7.3c0-3.9 2-7.1 5.7-9.7 1.6-1.1 3.2-2 5-2.7 2.4-.9 4.6-2 6.6-3.6a5 5 0 001.7-3.8c0-2.7-1.8-4-5.6-4z" transform="translate(0 43)"/><path fill="url(#b)" d="M40.6 6.7l-5.4-1.2c1.5 2 2.4 4.6 2.3 7.1a11.6 11.6 0 01-4.3 9.3 22.2 22.2 0 01-6 3.3c-2.5.9-4.8 2-7 3.4-1 .6-1.6 1.6-1.7 2.8 0 2.6 1.7 4 5 4 3.8 0 6.7-1 8.8-2.7l2.8 7.5a26.4 26.4 0 01-7.8 2.6l4.8 1c2.3.6 4.6-.8 5.2-3.2L43.9 12a4.3 4.3 0 00-3.3-5.2z" transform="translate(0 43)"/></g></svg> </div> </figure> <figure class="c-header__logo-smart"> <div class="c-header__logo-aspect"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142 41" id="smart-logo" fill="none" stroke="none"> <defs> <path id="a" d="M0 0h5.7v8H0z"/> </defs> <g fill="none" fill-rule="evenodd"> <path class="title" d="M3.4 0c.6 0 1 0 1.5.3.4.1.7.3 1 .6.3.2.4.5.5.8.2.3.2.6.2.9 0 .3-.1.4-.5.4h-.3l-.2-.4-.2-.6-.5-.5a2 2 0 00-.6-.4l-1-.1h-.8l-.6.4-.4.4-.1.6V3l.4.4c.2.1.4.3.7.3l1 .3 1.6.3 1 .5.4.6.2.7c0 .3 0 .5-.2.8 0 .3-.3.5-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5C.6 7.4.4 7 .2 6.9L0 6l.1-.3.3-.1h.3L1 6l.2.3.3.4.5.4.4.2.5.2h.7c.7 0 1.2 0 1.5-.3.4-.2.5-.5.5-.9v-.5L5 5.4 4.3 5a37.8 37.8 0 00-2.6-.6L1 4c-.3-.2-.4-.5-.5-.7a2.3 2.3 0 010-1.8l.7-.8 1-.5L3.3 0M11.5.1h.4c.2 0 .2.1.3.2l.2.2.1.4A87.5 87.5 0 0015 6.6l.1-.4A157.2 157.2 0 0017.2.3l.3-.1h1.1l.1.5V5.3l.1 1V8l-.6.1-.4-.1v-.8-1-1.3a695.7 695.7 0 010-2.5v-.6-.2h-.1-.1l-.2.5-2 5.4-.2.4-.5.2c-.2 0-.4 0-.5-.2A44 44 0 0112 2.1l-.1-.3a5.1 5.1 0 00-.1-.3h-.2v.1a8 8 0 000 .6 47 47 0 000 4 66.5 66.5 0 000 1.9h-.9v-.4a34.7 34.7 0 010-2.9v-.6a56.1 56.1 0 000-3V.6l.1-.4.7-.2M24.8 4.4a3.2 3.2 0 000 .2l.1.2h2.3s.2 0 .2-.2l-.1-.2a135 135 0 00-.7-2l-.2-.7-.1-.2h-.5v.2a16.6 16.6 0 00-.4 1l-.2.3a30.7 30.7 0 01-.4 1.4m-2.4 3.4v-.1l.1-.3a12.6 12.6 0 01.6-1.6l.5-1.2A159.8 159.8 0 0125.4.3L26 0c.3 0 .6 0 .7.2l.5.7.2.6a173.2 173.2 0 011.1 3l.4 1.2a170.8 170.8 0 00.7 2.2l-.4.1h-.7l-.2-.4a67.8 67.8 0 01-1-2.2H24.5l-.1.2-.7 2c0 .2-.1.3-.2.3h-.8c-.2 0-.3 0-.3-.2M34.5 4v.2l.3.2h2.5l.8-.5.4-.5a1.7 1.7 0 000-1.4l-.5-.6-.8-.3a4 4 0 00-1-.2h-1l-.5.2s-.2 0-.2.2v.5a19.3 19.3 0 010 2v.1zm4.4 2.4l.5.6.4.2.3.2V8l-.5.1c-.3 0-.6 0-.8-.2l-.6-.5-.4-.7a18.9 18.9 0 01-.6-1l-.2-.3-.4-.1a21.9 21.9 0 01-1.4 0H35l-.2-.1h-.3v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.1.8l-.5.1h-.4l-.1-.4v-1a147.5 147.5 0 010-6.1c0-.2.2-.3.4-.4l.8-.2H36a6 6 0 011.7.2l1.2.6c.3.2.5.5.6.8.2.4.2.7.2 1l-.1 1-.4.5-.4.4a3.6 3.6 0 01-.8.4h-.2v.2c.1 0 .2 0 .3.2l.3.3.5.8zM43.1.1h.4a53 53 0 011.8 0h1.9a84.2 84.2 0 001.6 0c.3 0 .4.2.4.5V1h-2.3l-.2.2-.1.2v.4a81.7 81.7 0 000 2v1a89 89 0 000 3.2l-.2.1h-.8l-.1-.4V4a49.6 49.6 0 010-2.9h-2.3L43 1V.6.2h.2M61 .1c.2 0 .4.2.4.5V8l-.2.1h-.8l-.1-.4v-3a143.2 143.2 0 000-2.5v-.8a41.3 41.3 0 010-1.2H61zM72.3 3.4a121.4 121.4 0 000 2.5v1a53.7 53.7 0 01-.1 1l-.6.2h-.3L71 8l-.2-.2a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.3a3.3 3.3 0 000 .4V8l-.4.1h-.6V6.8a49 49 0 010-1.6V3a80.8 80.8 0 000-1.8V.8l.1-.5.5-.1.5.1.3.3a57.2 57.2 0 012.3 3.6l.9 1.3a43.3 43.3 0 00.9 1 42.6 42.6 0 000-5 39.8 39.8 0 010-1.2h.6c.2 0 .4 0 .4.3v2.8zM76.1.1h.4a53 53 0 011.8 0h1.9a84.2 84.2 0 001.6 0c.3 0 .4.2.4.5V1h-2.4l-.2.2V1.8a81.7 81.7 0 000 2v1a89 89 0 000 3.2l-.2.1h-.8l-.1-.4V4a49.6 49.6 0 010-2.9h-2.3l-.3-.1-.1-.4V.2h.3M91 4.3v.4H87l-.3.2V5a12.3 12.3 0 010 .7v.9l.1.4h1.4a50 50 0 001.6 0h1l.3.2.1.3V8l-.4.1h-.2a21.3 21.3 0 01-1.1 0H88a55.5 55.5 0 00-1.5 0h-.4l-.5-.1v-.4a14.6 14.6 0 010-.8V6v-.8a246.2 246.2 0 010-2.3V2a246.7 246.7 0 000-1.8h.5a37 37 0 003.2 0H91.2V1h-.4a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1V4H90.6l.3.1.1.3M96.3 4v.2l.3.2h2.5l.8-.5.4-.5a1.7 1.7 0 000-1.4l-.5-.6-.7-.3A4 4 0 0098 .9h-1l-.4.2c-.2 0-.2 0-.2.2v.5a19.3 19.3 0 01-.1 2v.1zm4.5 2.4l.4.6.4.2.3.2.1.3-.1.3-.5.1c-.3 0-.5 0-.7-.2-.3-.1-.4-.3-.6-.5l-.5-.7a18.9 18.9 0 01-.6-1l-.2-.3-.3-.1a21.9 21.9 0 01-1.4 0h-.3l-.2-.1h-.2v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.2.8l-.4.1h-.5V6.6a147.5 147.5 0 010-6.1c0-.2.1-.3.3-.4l.8-.2H98a6 6 0 011.7.2l1.1.6.7.8.2 1c0 .4 0 .7-.2 1 0 .2-.2.4-.3.5l-.5.4a3.6 3.6 0 01-.8.4h-.1v.2l.2.2.4.3.5.8zM111.2 4.5v.3l-.4.1h-3.7l-.3.1v2.7l-.1.3-.5.1h-.5v-.4a45.1 45.1 0 010-4.6v-1a455.7 455.7 0 000-1.8l.5-.2a51.9 51.9 0 013.1 0h1.6l.3.1.1.4-.1.4h-.4a19.1 19.1 0 01-1.7 0 30.5 30.5 0 00-2.2.1V3.7c0 .3 0 .4.4.4h3.8l.1.4M116.6 4.4a3.2 3.2 0 000 .2l.1.2h2.3c.1 0 .2 0 .2-.2v-.2a134.8 134.8 0 00-.8-2l-.2-.7v-.2h-.5l-.1.2a16.6 16.6 0 00-.4 1l-.1.3a30.7 30.7 0 01-.5 1.4m-2.3 3.4v-.1-.3a12.6 12.6 0 01.6-1.6l.5-1.2.4-1.1a159.8 159.8 0 011.4-3.2l.7-.2c.4 0 .6 0 .8.2l.4.7.2.6a173.1 173.1 0 011.1 3l.4 1.2a170.8 170.8 0 00.7 2.2l-.3.1h-.8l-.2-.4a67.8 67.8 0 01-1-2.2H116.3l-.1.2-.7 2c0 .2 0 .3-.2.3h-.8c-.1 0-.2 0-.2-.2M131.8 5.6l.3.1.1.3c0 .2 0 .4-.2.6 0 .3-.3.6-.5.8l-1.1.7-1.7.2c-.7 0-1.3 0-1.7-.3a3.3 3.3 0 01-2-2.2 5.8 5.8 0 01.1-3.3c.2-.5.4-.9.8-1.3a3.6 3.6 0 012.8-1.2 4 4 0 011.7.3c.4.2.8.4 1 .7a2.6 2.6 0 01.8 1.7c0 .3-.2.4-.5.4h-.4a1 1 0 01-.2-.5 3 3 0 00-.9-1.2c-.3-.3-.8-.4-1.4-.4-.5 0-1 0-1.3.2a2.8 2.8 0 00-1.5 2.2 5 5 0 00.2 2.2c.1.4.3.7.6 1 .2.3.5.5.9.6.3.2.7.2 1 .2l1-.1c.3 0 .6-.2.7-.3l.5-.4.3-.5.3-.4h.3M141.7 4.3v.4h-4l-.2.2V5a12.2 12.2 0 010 .7v1.3h1.5a50 50 0 001.6 0h1l.3.2.1.3-.1.4-.3.1h-.3a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.5 0h-.4l-.5-.1v-.4a14.6 14.6 0 010-.8V6v-.8a246.4 246.4 0 010-2.3V2a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.2.4c0 .2 0 .3-.2.4h-.3a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1V4H141.3l.3.1v.3M6 21.2c.3-.3.5-.6.6-1l.1-1.5-.1-1-.6-1a3 3 0 00-1-.8l-1.6-.2a13.4 13.4 0 00-1.2 0L2 16v.2a48 48 0 000 5v.5c0 .2.1.3.3.3l1 .1a10.4 10.4 0 001.5-.1c.2 0 .4-.2.5-.3.2 0 .4-.2.6-.4m-3-6.5c1 0 1.7 0 2.3.3l1.6.8c.4.4.6.8.8 1.3.2.5.3 1 .3 1.7v.8a3.4 3.4 0 01-.6 1.4l-.5.7-1.4 1-2 .2a21.6 21.6 0 01-2-.1 1 1 0 01-.4-.2v-.1L.8 22a27.3 27.3 0 010-2.3 96.9 96.9 0 000-4.2V15l.3-.3H2l1-.1M17.2 19v.4h-3.9l-.3.1v.3a12.3 12.3 0 010 .7v1.3h1.5a50 50 0 001.6 0h1l.3.1.1.4-.1.4h-.6a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.5 0h-.9v-.4a14.6 14.6 0 010-.9v-.7-.7a246.2 246.2 0 010-2.3v-1a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.2.3-.1.5H17a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1v2.7l.3.1h3.4l.3.1.1.3M24.4 14.7c.6 0 1 0 1.5.2l1 .7.5.8.2.9c0 .3-.2.4-.5.4l-.3-.1-.2-.3-.3-.6c0-.2-.2-.4-.4-.6a2 2 0 00-.6-.3l-1-.2-.8.1c-.3.1-.5.2-.6.4-.2 0-.3.2-.4.4l-.1.6v.6l.4.4.7.3 1 .3c.6 0 1.1.2 1.5.3l1 .5.5.5.2.8-.2.8-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5-.8-.8-.2-.7.1-.3.3-.1h.3l.2.2.2.3.3.4.4.4.5.2.5.1.7.1c.7 0 1.2-.1 1.5-.3.3-.2.5-.5.5-1l-.1-.4c0-.1-.2-.3-.4-.3l-.7-.3a37.8 37.8 0 00-2.6-.7l-.8-.5c-.3-.2-.4-.4-.5-.6a2.3 2.3 0 010-1.8l.6-.8 1-.5 1.4-.2M32.4 14.8c.3 0 .4.2.4.5V22.7h-.2l-.3.1h-.5v-3.4a143.2 143.2 0 00-.1-2.5V16a41.3 41.3 0 010-1c.1-.2.3-.2.4-.2h.3zM40.8 15.6c-.5 0-1 .1-1.3.3a2.7 2.7 0 00-1.1 1l-.3.5-.2.7v.9c0 .4 0 .9.2 1.2a2.7 2.7 0 001.6 1.6 3.4 3.4 0 002.3 0c.3 0 .6-.2.8-.4l.4-.5.1-.5V20H41l-.2-.1v-.3-.4h2.8l.6.1.2.6a2.9 2.9 0 01-.9 2c-.2.3-.6.5-1 .7-.5.2-1 .3-1.7.3s-1.2-.2-1.7-.4a3.9 3.9 0 01-2.4-3.7c0-.5 0-1 .2-1.5l.6-1.2c.4-.5.8-1 1.3-1.2.6-.2 1.2-.3 2-.3a3.4 3.4 0 012.6.9l.5.8.3.9-.1.4-.4.1-.4-.1a1 1 0 01-.2-.4 3 3 0 00-.9-1.2c-.3-.3-.8-.5-1.4-.5M54.8 18a121.4 121.4 0 000 2.5v1a53.7 53.7 0 010 1.1l-.6.2H54l-.3-.2-.2-.1a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.2a3.3 3.3 0 000 .5v5.4h-1v-1.2a49 49 0 010-1.6v-2.3a80.8 80.8 0 000-1.7v-.4-.5l.6-.1h.5l.3.4a57.2 57.2 0 012.3 3.5l.8 1.3a43.3 43.3 0 001 1.2V21a42.6 42.6 0 00-.1-4.8 39.8 39.8 0 010-1.3l.4-.1h.3c.2 0 .3.1.3.4V18zM69.6 19.2c.5 0 .9 0 1.1-.2.3 0 .6-.2.7-.3l.4-.6.1-.7c0-.6-.2-1-.7-1.3-.4-.3-1-.5-1.9-.5h-.8l-.5.1-.1.2v.5a21.3 21.3 0 01-.1 2.2v.4l.4.1h1.4m3.4-1.8c0 .4 0 .8-.2 1a2 2 0 01-.6 1 3 3 0 01-1 .5l-1.6.1a28.8 28.8 0 01-1.8 0v.3a38.2 38.2 0 000 2.2l-.1.3h-.9l-.1-.3a41 41 0 000-1.4 110.9 110.9 0 010-3.1v-.6a95 95 0 00.1-2.2l.4-.2.7-.2h1.4c.6 0 1.1 0 1.6.2.5 0 .9.3 1.2.5a2.3 2.3 0 011 2M78.2 19a3.2 3.2 0 000 .3c0 .1 0 .2.2.2h2.2l.2-.2V19a134.9 134.9 0 00-.7-2l-.3-.7v-.2l-.3-.1h-.2l-.1.3a16.6 16.6 0 00-.4 1l-.1.3a30.7 30.7 0 01-.5 1.4M76 22.5v-.2-.2a12.6 12.6 0 01.7-1.6l.4-1.3.4-1a159.8 159.8 0 011.4-3.3l.7-.1c.4 0 .6 0 .8.2.2.1.3.4.4.7l.2.6a173.2 173.2 0 011.2 3 170.8 170.8 0 001 3.4H82l-.1-.3a67.8 67.8 0 01-1-2.2H78 78v.2l-.8 2c0 .1 0 .3-.2.3h-.7c-.2 0-.3 0-.3-.2M85.7 14.8h.4a53 53 0 011.7 0h2a84.2 84.2 0 001.6 0c.2 0 .4.2.4.5l-.1.4h-2.3l-.2.1v.7a81.7 81.7 0 000 2v1a89 89 0 00-.1 3.2l-.2.1h-.8v-4.1a49.6 49.6 0 01-.1-2.9h-2.2l-.4-.1v-.4-.4h.3M94.8 14.8h.4a53 53 0 011.7 0h2a84.2 84.2 0 001.6 0c.2 0 .4.2.4.5l-.1.4h-2.3l-.2.1v.7a81.7 81.7 0 000 2v1a89 89 0 00-.1 3.2l-.2.1h-.8v-4.1a49.6 49.6 0 01-.1-2.9h-2.3l-.3-.1v-.4-.4h.3M109.7 19l-.1.4h-3.9l-.2.1v.3a12.2 12.2 0 010 .7v1.3h1.5a50 50 0 001.5 0h1l.4.1v.8h-.6a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.6 0h-.8v-.4a14.6 14.6 0 010-.9v-.7-.7a246.4 246.4 0 010-2.3v-1a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.1.3v.5h-.4a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1l-.1.3V18.5l.4.1h3.4l.3.1v.3M115 18.6v.3l.3.1.5.1h.9l1-.1.8-.4.5-.5a1.7 1.7 0 000-1.4l-.5-.6-.8-.4a4 4 0 00-1-.1h-1l-.5.1-.2.2V16.5a19.3 19.3 0 010 2v.1zm4.4 2.5l.5.5.4.3.3.2v.6h-.5l-.8-.1-.6-.5-.4-.7a18.8 18.8 0 01-.6-1l-.2-.3-.4-.1a21.9 21.9 0 01-1.4 0l-.2-.1h-.5v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.1.8l-.5.1-.4-.1-.1-.3v-1a147.5 147.5 0 010-6.2l.4-.3.8-.2h1.4a6 6 0 011.7.2c.5.1.9.3 1.2.6.3.2.5.5.6.8.2.3.2.7.2 1l-.1.9-.4.6-.4.4a3.6 3.6 0 01-.9.3l-.1.1v.2l.3.1.3.4.5.8zM130.8 18a121.4 121.4 0 000 2.5v1a53.7 53.7 0 010 1.1l-.6.2h-.3l-.3-.2-.2-.1a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.2a3.3 3.3 0 000 .5v5.4h-1v-1.2a49 49 0 010-1.6v-2.3a80.8 80.8 0 000-1.7v-.4-.5l.6-.1h.5l.3.4a57.2 57.2 0 012.3 3.5l.8 1.3a43.3 43.3 0 001 1.2V21a42.6 42.6 0 00-.1-4.8 39.8 39.8 0 010-1.3l.4-.1h.3c.2 0 .3.1.3.4V18zM138.1 14.7c.7 0 1.2 0 1.6.2l1 .7.5.8.2.9c0 .3-.2.4-.5.4l-.3-.1-.2-.3-.3-.6c0-.2-.2-.4-.4-.6a2 2 0 00-.6-.3l-1-.2-.8.1-.7.4-.3.4-.2.6.1.6.4.4.7.3 1 .3c.6 0 1.1.2 1.5.3l1 .5.5.5.1.8-.1.8-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5-.8-.8-.2-.7.1-.3.3-.1h.3l.2.2.2.3.3.4.4.4.5.2.5.1.7.1c.7 0 1.2-.1 1.5-.3.3-.2.5-.5.5-1l-.1-.4c0-.1-.2-.3-.4-.3l-.8-.3a37.8 37.8 0 00-2.5-.7l-.9-.5-.4-.6a2.3 2.3 0 010-1.8l.6-.8 1-.5 1.3-.2" fill="var(--header-logo-primary)"/> <path class="author" d="M6.5 39c.3 0 .5 0 .6-.2l.3-.5.5-2.2.7-2.3v-.3-.2h-.8l-.2.5-.8 3.2a10.4 10.4 0 00-.2 1h-.1V38a8 8 0 00-.3-1 58.7 58.7 0 01-.9-3.3.8.8 0 00-.5-.2c-.2 0-.4 0-.5.2a1 1 0 00-.3.5 24.6 24.6 0 00-.8 3.7l-.1.3L3 38v-.2a10.5 10.5 0 00-.2-.8l-.9-3.3-.1-.3-.3-.1h-.4H1v.5l.2.5 1.1 4c0 .3.2.4.3.5l.6.2h.3l.2-.1.2-.3.2-.4a35.3 35.3 0 00.6-3.5l.2-.2v.2l.2.6.6 2.8c0 .3.2.6.3.7l.6.2zm3.9-6.6c.2 0 .4 0 .5-.2l.1-.5-.1-.5c-.1-.2-.3-.2-.5-.2-.3 0-.5 0-.6.2l-.2.5.2.5.6.2zm0 6.6h.3l.1-.3v-5l-.1-.3H10l-.1.3v.7a102.3 102.3 0 010 3.9V38.9l.4.1zm4.1 0l.9-.1.2-.5v-.3h-.7-.3l-.5-.1-.1-.5v-3.2-.1h1.3c.1 0 .2 0 .3-.2v-.3-.3H15a14 14 0 01-.7-.1H14 14v-1.5l-.1-.3H13V33.2l-.2.2h-.6l-.3.2v.2c0 .2 0 .3.3.3h.6l.1.2a61.4 61.4 0 010 3.8l.3.5c.2.1.3.3.5.3l.7.1zm6.6 0h.3l.1-.4v-1.2a58.6 58.6 0 010-1.5v-.5l-.1-1-.5-.8-.6-.3a3 3 0 00-.8-.1 2 2 0 00-.8.1 2 2 0 00-.5.3l-.3.3v.1h-.1V34a46.5 46.5 0 01-.1-2.8l-.4-.1-.4.1V39l.3.1h.5v-1a68.2 68.2 0 000-1.4v-1l.2-.7a1.4 1.4 0 01.9-.8h.6c.4 0 .7 0 .9.3.2.2.3.6.3 1v1.2a46.6 46.6 0 010 1.2V39h.5zm7.7 0l.4-.1.3-.4a139.5 139.5 0 002.1-6.7c0-.2 0-.3-.3-.3H31c-.2 0-.3.1-.4.4a76.8 76.8 0 00-1.3 4.4 119.3 119.3 0 01-.7 1.6l-.2-.1v-.3a60.7 60.7 0 01-1.6-4.7 210 210 0 00-.4-1.2h-.7c-.2 0-.3 0-.3.2a.8.8 0 000 .3 42.8 42.8 0 011 2.8l.2.6.2.5a386.8 386.8 0 011 2.9h.4a13 13 0 01.7.1zm4.5-6.6c.2 0 .4 0 .5-.2l.2-.5-.2-.5c-.1-.2-.3-.2-.5-.2-.3 0-.4 0-.6.2l-.1.5.1.5.6.2zm0 6.6h.3l.1-.3v-5-.3h-.8l-.1.3v.7a102.3 102.3 0 010 3.9V38.9l.4.1zm4.2 0l.8-.1.2-.5v-.3h-1L37 38l-.1-.5v-3.2-.1h1.4l.2-.2.1-.3-.1-.3H38a14 14 0 01-.8-.1H37 37v-1.5l-.1-.3H36l-.1.4v1.3l-.2.2h-.6l-.2.2-.1.2c0 .2.1.3.3.3h.6l.2.2a61.4 61.4 0 010 3.8c0 .2.1.3.3.5 0 .1.2.3.4.3l.8.1zm3.9.2l1-.2.6-.4.3-.3.2-.2v.1l.2.4.1.3.3.1h.2l.1-.2v-.4a30 30 0 000-2.4v-.4c0-.8-.2-1.4-.5-1.8-.4-.4-1-.6-1.8-.6-.5 0-.8 0-1.2.2-.3 0-.5.3-.7.4a1.7 1.7 0 00-.6 1.3l.1.4.4.2.3-.1.1-.3.2-.5.2-.5.5-.2h.6c.5 0 .8 0 1 .2.3.2.4.6.4 1V35.9l-.2.2-.5.1h-.8l-1.1.2-.7.3a1 1 0 00-.4.5l-.1.6v.5l.4.4.6.3.8.2zm.2-.8c-.4 0-.6-.1-.8-.3a.6.6 0 01-.2-.5c0-.2 0-.3.3-.5l1-.3a19.8 19.8 0 001.3-.1c.2 0 .2 0 .2.2l-.1.6-.4.4a2 2 0 01-.6.3l-.7.2zm5.5.6l.6-.1c.2-.1.3-.2.3-.4l-.1-.2-.2-.1h-.2-.2l-.3-.1v-6.7l-.2-.3-.4-.1-.3.1-.1.4v.8a163.8 163.8 0 000 5v1l.2.4.4.2.5.1zm2.7 1.8c.4 0 .8-.1 1-.4.4-.3.6-.6.7-1l1.7-5.4.1-.2v-.3-.1H52.4l-.1.2-1.2 4.2v.1h-.4v-.1l-1.4-4.3-.1-.1H48.6c-.2 0-.3 0-.3.2v.2a4.8 4.8 0 00.3.6 28 28 0 01.7 2.2 125.4 125.4 0 001.1 2.4l.2.1v.3l-.2.3-.3.2a1 1 0 01-.4 0c-.2 0-.3 0-.4.2l-.1.3.1.3.5.1zm8-1.8h.4v-2.8l.1-.1H62l.2-.1.1-.4v-.3h-3.6c-.3 0-.4-.2-.4-.4v-2.1-.3l.3-.1a21.8 21.8 0 011.8 0 25.3 25.3 0 001.5 0h.4v-.5-.3h-1.7a46.3 46.3 0 01-2.8 0h-.5v.4a39.5 39.5 0 000 3.2v.2a107 107 0 010 3.5l.4.1zm6.2 0h.4l.1-.3V36c0-.5.2-1 .5-1.3.3-.3.8-.4 1.3-.4.3 0 .5-.2.5-.5 0-.1 0-.3-.2-.3l-.4-.2c-.3 0-.6 0-.8.2a2 2 0 00-.5.4c0 .2-.2.3-.3.4l-.1.2v-.3l-.1-.7-.1-.2H64l-.3.1-.1.3v.6a86.3 86.3 0 010 3.8V39h.2l.2.1zm4.3-6.6c.2 0 .4 0 .5-.2l.2-.5c0-.2 0-.4-.2-.5-.1-.2-.3-.2-.5-.2s-.4 0-.5.2l-.2.5c0 .2 0 .3.2.5l.5.2zm0 6.6h.4v-5.3-.3h-.8v1a102.3 102.3 0 01-.1 3.9V38.9l.5.1zm4.5.1l1-.1.7-.4.5-.5v-.4c0-.3 0-.4-.3-.4-.1 0-.2 0-.3.2l-.3.3-.5.4-.8.1-.7-.1a1.6 1.6 0 01-.9-1l-.1-.7v-.2h1.2a55.2 55.2 0 011.5 0h1l.3-.2.2-.6c0-.3 0-.6-.2-.9a2.2 2.2 0 00-1.2-1.2c-.3-.2-.7-.2-1-.2a3 3 0 00-1.1.2c-.3 0-.6.2-.8.4l-.5.7a3 3 0 00-.3.9 4.7 4.7 0 000 2l.6 1 .8.5c.3.2.7.2 1.2.2zm1.3-3.5h-2.9v-.3-.4l.4-.4a1.7 1.7 0 011.2-.5c.3 0 .5 0 .7.2.2 0 .3.1.5.3l.2.4.1.4v.2l-.2.1zm4.5 3.5l1-.1.6-.4.3-.3.2-.2v.1a13.6 13.6 0 01.2.8h.7v-1.3a212 212 0 000-5.6v-.6l-.1-.4-.4-.1-.4.1v.4a46.5 46.5 0 000 2.4v.1h-.2c0-.2-.1-.3-.3-.4l-.5-.3a2.8 2.8 0 00-2 0l-.7.6c-.3.3-.4.6-.6 1l-.2 1.2c0 .5 0 .9.2 1.3l.5 1a2 2 0 001.7.7zm.3-.8c-.3 0-.5 0-.8-.2-.2 0-.4-.2-.5-.4a2 2 0 01-.3-.7l-.1-.8v-.8l.4-.7c.1-.2.3-.4.6-.5a2 2 0 011.5 0c.2 0 .4.2.5.4l.4.6v1c0 .6 0 1.2-.4 1.5-.3.4-.7.6-1.3.6zm4.7.7h.4l.1-.3v-.3a25.7 25.7 0 010-1v-1.5c0-.3 0-.6.2-.8l.3-.6c.1-.1.3-.3.5-.3l.6-.1c.3 0 .5 0 .7.3.2.2.3.6.3 1v1.1a45 45 0 000 1.4v1h.9v-3.6l.2-.5a1.2 1.2 0 01.7-.7h.6c.3 0 .6 0 .8.3.2.2.3.6.3 1v1.1a45 45 0 000 1.4v.7l.1.3h.8l.1-.2v-1.3a13.8 13.8 0 000-.8v-1.3c0-.4 0-.8-.2-1 0-.3-.2-.5-.4-.7-.1-.2-.3-.3-.5-.3l-.7-.1a2 2 0 00-1 .1 2 2 0 00-.7.7l-.2.2-.1-.2-.2-.3-.5-.4-.8-.1a1.6 1.6 0 00-1.3.5l-.3.4-.2.1H84v-.4a56.8 56.8 0 01-.2-.5h-.5l-.1.4a170.9 170.9 0 010 4.2v1l.4.1zm10.7.2l1-.2c.3-.1.5-.2.6-.4.2 0 .3-.2.4-.3l.1-.2.1.1.1.4.1.3.3.1h.3V38.4a30 30 0 000-2.4v-.4c0-.8-.1-1.4-.5-1.8-.3-.4-1-.6-1.7-.6-.5 0-1 0-1.2.2-.3 0-.6.3-.8.4a1.7 1.7 0 00-.6 1.3l.1.4.4.2.3-.1.2-.3.1-.5c0-.2.2-.3.3-.5l.4-.2h.7c.4 0 .8 0 1 .2.2.2.4.6.4 1v.4l-.1.2-.2.2-.5.1h-.8l-1 .2-.8.3a1 1 0 00-.4.5l-.1.6.1.5c0 .2.2.3.4.4.1.2.3.3.5.3l.8.2zm.2-.8c-.3 0-.6-.1-.8-.3a.6.6 0 01-.2-.5c0-.2.1-.3.3-.5l1-.3a19.8 19.8 0 001.4-.1c.1 0 .2 0 .2.2s0 .4-.2.6l-.4.4a2 2 0 01-.5.3l-.8.2zm4.8.6h.4V35.8l.2-.8.4-.6.6-.3.6-.1c.3 0 .6 0 .8.3.2.2.3.6.3 1v1.1a46.2 46.2 0 000 1.4v1l.4.1h.5v-1.6a13.8 13.8 0 000-.8v-1.3l-.1-1-.4-.7c-.2-.2-.4-.3-.7-.3l-.7-.1a2 2 0 00-.8.1 2 2 0 00-.8.7l-.2.2V34l-.1-.4-.1-.3H99l-.1.3v.1a390.2 390.2 0 010 4.2V38.9l.4.1z" fill="var(--header-logo-secondary)" fill-rule="nonzero"/> </g> </svg> </div> </figure> </a> <button type="button" id="siblings-trigger" aria-expanded="false" aria-controls="siblings" aria-label="Courses" class="c-button-circle c-button--shadow"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--chevron "> <use xlink:href="/static/svg/sprite.svg#chevron"></use> </svg> </button> <ul class="c-header__siblings" id="siblings" aria-labelledby="siblings-trigger" hidden> <li> <a href="https://measure-ux.com" class="c-twi c-twi--left"><span>Measure UX & Design Impact</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-tube "> <use xlink:href="/static/svg/sprite.svg#header-tube"></use> </svg> </a> </li> <li> <a href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman/" class="c-twi c-twi--left"><span>UX Live Training</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-hat "> <use xlink:href="/static/svg/sprite.svg#header-hat"></use> </svg> </a> </li> </ul> </div> <a class="c-navicon c-navicon--shadow c-navicon--open u-orange-shadow" href="#header" aria-label="Open Navigation"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--hamburger "> <use xlink:href="/static/svg/sprite.svg#hamburger"></use> </svg> </a> <a class="c-navicon c-navicon--shadow c-navicon--close u-orange-shadow" href="#0" aria-label="Open Navigation"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--hamburger "> <use xlink:href="/static/svg/sprite.svg#hamburger"></use> </svg> </a> <nav class="c-header__nav" id="nav"> <ul> <li> <a href="/#about-the-course" class="" target="_self"> <span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-hat "> <use xlink:href="/static/svg/sprite.svg#header-hat"></use> </svg> </span> <span>About the Course </span> </a> </li> <li> <a href="/#table-of-contents" class="" target="_self"> <span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-cookie "> <use xlink:href="/static/svg/sprite.svg#header-cookie"></use> </svg> </span> <span>Table of Contents </span> </a> </li> <li> <a href="https://www.youtube.com/watch?v=3mwZztmGgbE" class="" target="_blank"> <span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-leaf "> <use xlink:href="/static/svg/sprite.svg#header-leaf"></use> </svg> </span> <span>Free Preview <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--external "> <use xlink:href="/static/svg/sprite.svg#external"></use> </svg> </span> </a> </li> <li> <a href="/articles" class="" target="_self"> <span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-soup "> <use xlink:href="/static/svg/sprite.svg#header-soup"></use> </svg> </span> <span>Blog </span> </a> </li> <li> <a href="https://smart-interface-design-patterns.thinkific.com/users/sign_in" class="" target="_blank"> <span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-key "> <use xlink:href="/static/svg/sprite.svg#header-key"></use> </svg> </span> <span>Login </span> </a> </li> </ul> <a class="c-mobile-cta" href="/#packages"> <figure> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--cutlery-combo "> <use xlink:href="/static/svg/sprite.svg#cutlery-combo"></use> </svg> </figure> <div> <strong>Get the course!</strong> <small>10h video + UX training</small> </div> </a> <button class="c-header__nav-siblings-trigger" type="button" id="siblings-trigger-mobile" aria-expanded="false" aria-controls="siblings-mobile"> <span class="c-twi c-twi--right" ><span>More UX courses from Vitaly</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--chevron "> <use xlink:href="/static/svg/sprite.svg#chevron"></use> </svg> </span> </button> <ol class="c-header__nav-siblings" id="siblings-mobile" aria-labelledby="siblings-trigger-mobile" hidden> <li> <a href="https://measure-ux.com" class="c-twi c-twi--left"><span>Measure UX & Design Impact</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-tube "> <use xlink:href="/static/svg/sprite.svg#header-tube"></use> </svg> </a> </li> <li> <a href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman/" class="c-twi c-twi--left"><span>UX Live Training</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--header-hat "> <use xlink:href="/static/svg/sprite.svg#header-hat"></use> </svg> </a> </li> </ol> </nav> <a class="c-header__cta" href="/#packages"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--cutlery-combo "> <use xlink:href="/static/svg/sprite.svg#cutlery-combo"></use> </svg> <p> <strong>Get the course!</strong> <small>10h video + UX training</small> </p> </a> </div> </header> <a class="c-mobile-cta c-mobile-cta--fixed" href="/#packages"> <figure> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--cutlery-combo "> <use xlink:href="/static/svg/sprite.svg#cutlery-combo"></use> </svg> </figure> <div> <strong>Get the course!</strong> <small>10h video + UX training</small> </div> </a> <figure class="c-hero"> <div class="u-wrap"> <a class="c-circle c-circle--large c-hero__cta anim-cta" href="#packages"> <svg width="105" id="anim-mouth" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 29"> <path id="mouth" d="M70,9c-5.12,9.75-18.57,16.72-34.36,16.72-15.1,0-28.08-6.4-33.64-15.5" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/> <g class="anim-tongue"> <path d="M43.45,23.23l-2.6-5.82A10,10,0,1,1,59.16,9.24l3.58,8" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/> <line x1="49.11" y1="10.95" x2="54.22" y2="21.56" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/> </g> </svg> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--mouth "> <use xlink:href="/static/svg/sprite.svg#mouth"></use> </svg> <h3>Get the course!</h3> <p>10h video + live UX training</p> <h4>Starts at $300</h4> </a> </div> <div class="c-hero__image"> <svg class="hero-anim hero-anim--desktop" viewBox="0 0 1169 520"> <g class="hero-anim-text" fill="#fff8ec"> <path d="M500,172.16c7.46,0,12.88-4.34,12.88-10.31,0-7.45-6.63-9.54-12.52-11.37-5.62-1.77-9-3.14-9-6.7,0-3.26,3.13-5.38,8.09-5.38,3.33,0,6.68,1,8.51,2.43a2.09,2.09,0,0,0,2.93-.37h0l.08-.1a2.2,2.2,0,0,0-.35-2.89c-2.34-2.09-6.86-3.51-11-3.51-7.86,0-13,3.86-13,9.84,0,7,6.43,9,12.11,10.86,5.85,1.88,9.39,3.3,9.39,7.15,0,4.33-4.91,5.91-8.22,5.91a15.79,15.79,0,0,1-10.31-3.31,2.16,2.16,0,0,0-3,.11l-.08.09a2.34,2.34,0,0,0-.55,1.74,2.16,2.16,0,0,0,.67,1.32C489.69,170.53,494.54,172.16,500,172.16Z"/> <path d="M522.8,171.83a2.21,2.21,0,0,0,2.23-2.19h0v-27L537.65,158a2.08,2.08,0,0,0,2.9.49h0A2,2,0,0,0,541,158l12.17-15.27v26.85a2.3,2.3,0,0,0,4.59,0V136.67a2.09,2.09,0,0,0-1.85-2.29h-.31a3,3,0,0,0-2.34,1.49l-13.82,17.4L525.1,135.8a3,3,0,0,0-2.35-1.43,2.21,2.21,0,0,0-2.24,2.16v33.1a2.21,2.21,0,0,0,2.22,2.2h.07Z"/> <path d="M567.62,171.83a2.2,2.2,0,0,0,2-1.28l5.28-11.36h16.9l5.22,11.4a2.3,2.3,0,0,0,3.09,1,2.35,2.35,0,0,0,.91-.83,2.5,2.5,0,0,0,.09-2.43l-15.54-32.89a2.26,2.26,0,0,0-4.18,0l-15.65,33a2.5,2.5,0,0,0,.11,2.36A2.08,2.08,0,0,0,567.62,171.83Zm9.32-17,6.42-13.69,6.36,13.69Z"/> <path d="M610.76,171.83a2.21,2.21,0,0,0,2.23-2.19h0V156.75h6.26L627,166.83c2.61,3.33,5.22,5.06,7.64,5.06a5.55,5.55,0,0,0,1-.09,2.09,2.09,0,0,0,1.65-2.09c0-1.76-1.57-2.08-2.56-2.27s-2.71-1.49-4.06-3.22l-6.47-8.42c5-1.62,8.19-5.62,8.19-10.44,0-9.71-8.86-11.16-14.14-11.16-1.36,0-5.22.07-7.41.13a2.34,2.34,0,0,0-2.36,2.32h0v32.94a2.21,2.21,0,0,0,2.18,2.24h.1ZM613,138.75c1.86-.05,4.28-.09,5.11-.09,9.62,0,9.62,5,9.62,6.7,0,4.18-4.56,6.9-8.82,6.9H613Z"/> <path d="M641.61,138.81h12.14v30.8a2.27,2.27,0,0,0,4.52,0v-30.8H670.4a2.24,2.24,0,0,0,0-4.46H641.61a2.24,2.24,0,0,0,0,4.46Z"/> <path d="M483.13,249.69v32.42a2.59,2.59,0,0,0,2.56,2.57c1.33,0,2.59,0,3.8.06s2.42.06,3.68.06c13.78,0,22.67-7.58,22.67-19.3,0-4.3-1.59-18.31-22.21-18.31-1.64,0-3.07,0-4.44.07s-2.42.06-3.63.06a2.39,2.39,0,0,0-2.43,2.37Zm10.11,30.65h-.41c-.86,0-2.91-.09-5.22-.11V251.76h1.86c1.16,0,2.35-.07,4-.07,11.25,0,17.75,5,17.75,13.85,0,9.11-6.88,14.8-18,14.8Z"/> <path d="M544.11,251.77a2.23,2.23,0,0,0,0-4.45H525.45a2.35,2.35,0,0,0-2.37,2.33h0v32.66a2.35,2.35,0,0,0,2.33,2.37h19.22a2.24,2.24,0,0,0,0-4.47h-17V267.93h14.9a2.23,2.23,0,0,0,0-4.46H527.63v-11.7Z"/> <path d="M567.42,263.45c-5.62-1.76-9-3.13-9-6.69,0-3.26,3.13-5.38,8.09-5.38a14.89,14.89,0,0,1,8.52,2.43,2.07,2.07,0,0,0,2.91-.35v0h0l.08-.1a2.2,2.2,0,0,0-.35-2.89c-2.34-2.09-6.86-3.51-11-3.51-7.87,0-13,3.86-13,9.84,0,7,6.44,9,12.12,10.86,5.85,1.88,9.4,3.3,9.4,7.14,0,4.34-4.92,5.92-8.23,5.92a15.85,15.85,0,0,1-10.31-3.31,2.16,2.16,0,0,0-3,.11l-.08.09a2.39,2.39,0,0,0-.55,1.74,2,2,0,0,0,.67,1.32c3,2.87,7.82,4.5,13.32,4.5,7.46,0,12.88-4.33,12.88-10.3C579.89,267.38,573.26,265.29,567.42,263.45Z"/> <path d="M590,247.31a2.2,2.2,0,0,0-2.29,2.1v33.16a2.27,2.27,0,0,0,4.52,0V249.48A2.21,2.21,0,0,0,590,247.31Z"/> <path d="M634.25,280.53a2.5,2.5,0,0,0,1-1.93V268.08a2.34,2.34,0,0,0-2.32-2.36H621.55a2.16,2.16,0,0,0-2.16,2.16h0a2.2,2.2,0,0,0,2.16,2.23h9.28v7.31A18.85,18.85,0,0,1,620,280.71c-9,0-15-5.92-15-14.72,0-8.58,6.09-14.61,14.84-14.61a16.6,16.6,0,0,1,8.87,2.17,2.18,2.18,0,0,0,3-.53,2.2,2.2,0,0,0-.45-3.09h-.07l-.1-.08c-3.07-2-6.6-2.93-11.43-2.93-11.19,0-19.31,8-19.31,19,0,11.48,7.87,19.17,19.57,19.17C624.26,285.13,630.56,283.69,634.25,280.53Z"/> <path d="M647,282.64V255.5l24.31,28.34.08.07a2.65,2.65,0,0,0,1.91.85,2.2,2.2,0,0,0,2.23-2.16V249.49a2.24,2.24,0,0,0-4.46,0v27.14l-24.38-28.28-.16-.17a2.43,2.43,0,0,0-1.88-.88,2.1,2.1,0,0,0-2.1,2.08h0v33.24a2.23,2.23,0,0,0,4.45,0Z"/> <path d="M452.63,303.46c-1.79,0-5.4.08-7.61.14a2.35,2.35,0,0,0-2.37,2.33v32.92a2.27,2.27,0,0,0,4.53,0V327c1.85.09,3.69.19,5.22.19,4.75,0,8.47-1.23,11.06-3.64a11.23,11.23,0,0,0,3.48-8.35C467,304.61,456.94,303.46,452.63,303.46Zm9.68,11.77c0,4.77-3.62,7.49-9.95,7.49-1.78,0-3.45-.08-5.22-.19V308c1.78,0,4.24-.08,5.65-.08,4.39,0,9.52,1.26,9.52,7.3Z"/> <path d="M488.09,304.72a2.27,2.27,0,0,0-3-1.2h0a2.3,2.3,0,0,0-1.19,1.19l-15.65,33a2.5,2.5,0,0,0,.11,2.36,2.09,2.09,0,0,0,1.8.93,2.25,2.25,0,0,0,2.09-1.28l5.27-11.36h16.86l5.3,11.39a2.26,2.26,0,0,0,3,1,2.18,2.18,0,0,0,.88-.77,2.48,2.48,0,0,0,.08-2.43Zm-8.58,19.33,6.42-13.69,6.37,13.69Z"/> <path d="M534.76,303.6H506a2.24,2.24,0,0,0,0,4.46h12.1v30.79a2.27,2.27,0,0,0,4.53,0V308.06h12.13a2.24,2.24,0,0,0,0-4.46Z"/> <path d="M571.58,303.6H542.77a2.24,2.24,0,0,0,0,4.46H554.9v30.79a2.27,2.27,0,0,0,4.53,0V308.06h12.15a2.23,2.23,0,0,0,0-4.46Z"/> <path d="M602.58,336.49h-17V324.2h14.9a2.23,2.23,0,0,0,0-4.45h-14.9V308.06h16.49a2.23,2.23,0,0,0,0-4.46H583.4a2.35,2.35,0,0,0-2.37,2.33h0v32.66a2.34,2.34,0,0,0,2.32,2.36h19.23a2.23,2.23,0,0,0,0-4.46Z"/> <path d="M679.41,303.6a2.2,2.2,0,0,0-2.24,2.16h0V332.9L652.8,304.64l-.16-.15a2.42,2.42,0,0,0-1.89-.89,2.09,2.09,0,0,0-2.09,2.08v33.24a2.23,2.23,0,0,0,4.45,0V311.78l24.3,28.42.06.08a2.7,2.7,0,0,0,1.93.84,2.19,2.19,0,0,0,2.22-2.16h0v-33.2a2.19,2.19,0,0,0-2.22-2.16h0Z"/> <path d="M703.52,319.74c-5.62-1.77-9-3.14-9-6.69,0-3.27,3.13-5.39,8.09-5.39a14.81,14.81,0,0,1,8.51,2.43,2.07,2.07,0,0,0,2.92-.36h0l.08-.11a2.2,2.2,0,0,0-.35-2.89c-2.34-2.09-6.86-3.51-11-3.51-7.86,0-12.95,3.86-12.95,9.85,0,7,6.43,9,12.12,10.85s9.4,3.29,9.4,7.14c0,4.34-4.92,5.92-8.23,5.92a15.79,15.79,0,0,1-10.31-3.31,2.16,2.16,0,0,0-3,.11l-.08.09a2.34,2.34,0,0,0-.54,1.74,2,2,0,0,0,.66,1.32c3,2.87,7.82,4.51,13.32,4.51,7.46,0,12.89-4.34,12.89-10.31C716,323.65,709.33,321.57,703.52,319.74Z"/> <path d="M614.87,341a2.21,2.21,0,0,0,2.22-2.2h0V325.86h6.26L631.11,336c2.61,3.33,5.22,5.06,7.64,5.06a4.78,4.78,0,0,0,1-.1,2.08,2.08,0,0,0,1.65-2.08c0-1.78-1.57-2.09-2.56-2.29a9,9,0,0,1-4.06-3.21L628.31,325c5-1.61,8.2-5.62,8.2-10.43,0-9.71-8.87-11.16-14.15-11.16-1.36,0-5.22.06-7.41.13a2.35,2.35,0,0,0-2.36,2.3v32.9a2.23,2.23,0,0,0,2.17,2.26Zm2.22-33.11c1.86-.06,4.29-.1,5.12-.1,9.62,0,9.62,5.06,9.62,6.7,0,4.18-4.56,6.91-8.83,6.91h-5.91Z"/> <path d="M437.14,191a2.2,2.2,0,0,0-2.29,2.11h0V226.3a2.27,2.27,0,0,0,4.52,0V193.21a2.2,2.2,0,0,0-2.22-2.17Z"/> <path d="M451.69,228.52a2.21,2.21,0,0,0,2.24-2.16V199.22l24.31,28.42.06.08a2.68,2.68,0,0,0,1.92.84,2.19,2.19,0,0,0,2.22-2.14v0h0V193.21a2.23,2.23,0,0,0-4.45,0v27.14L453.6,192.09l-.14-.17a2.57,2.57,0,0,0-1.9-.88,2.1,2.1,0,0,0-2.1,2.08h0v33.24A2.2,2.2,0,0,0,451.69,228.52Z"/> <path d="M488.79,193.27A2.2,2.2,0,0,0,491,195.5h12.2v30.8a2.27,2.27,0,0,0,4.53,0V195.5h12.13a2.23,2.23,0,0,0,0-4.46H491a2.19,2.19,0,0,0-2.21,2.19Z"/> <path d="M553,226.16a2.19,2.19,0,0,0-2.14-2.22h-17V211.65h14.91a2.24,2.24,0,0,0,.3-4.47,1.5,1.5,0,0,0-.3,0H533.81V195.5h16.5a2.23,2.23,0,1,0,0-4.46H531.65a2.33,2.33,0,0,0-2.36,2.3h0V226a2.32,2.32,0,0,0,2.27,2.37h19.28A2.2,2.2,0,0,0,553,226.16Z"/> <path d="M562.16,228.52a2.19,2.19,0,0,0,2.22-2.16h0V213.44h6.26l7.76,10.08c2.61,3.33,5.22,5.06,7.64,5.06a5.55,5.55,0,0,0,1-.09,2.09,2.09,0,0,0,1.65-2.09c0-1.76-1.57-2.09-2.56-2.27s-2.71-1.49-4.06-3.22l-6.47-8.41c5-1.62,8.19-5.63,8.19-10.44,0-9.71-8.86-11.16-14.14-11.16-1.36,0-5.22.06-7.41.13a2.33,2.33,0,0,0-2.36,2.3h0v32.95a2.2,2.2,0,0,0,2.17,2.23h.11Zm2.22-33.06c1.86-.05,4.29-.09,5.13-.09,9.61,0,9.61,5,9.61,6.7,0,4.18-4.56,6.91-8.82,6.91h-5.92Z"/> <path d="M600.55,226.3V212.64h15.17a2.23,2.23,0,0,0,0-4.45H600.55V195.5h16.83a2.23,2.23,0,1,0,0-4.46h-19a2.33,2.33,0,0,0-2.36,2.3h0v33a2.27,2.27,0,0,0,4.52,0Z"/> <path d="M639.08,190.78a2.24,2.24,0,0,0-2.08,1.41l-15.66,33a2.5,2.5,0,0,0,.12,2.36,2.09,2.09,0,0,0,1.8.93,2.24,2.24,0,0,0,2.09-1.28l5.27-11.36h16.87l5.29,11.4a2.28,2.28,0,0,0,3.06,1,2.25,2.25,0,0,0,.84-.75,2.5,2.5,0,0,0,.1-2.44l-15.57-32.92A2.24,2.24,0,0,0,639.08,190.78ZM632.6,211.5l6.4-13.69,6.36,13.69Z"/> <path d="M692.19,222.19a2.23,2.23,0,0,0-3.08-.64l-.13.1a16.22,16.22,0,0,1-9.13,2.75c-9.15,0-15.3-5.92-15.3-14.72,0-8.58,6.05-14.61,14.71-14.61a16.05,16.05,0,0,1,8.81,2.08,2.24,2.24,0,0,0,3-.45l.07-.08a2.2,2.2,0,0,0,.36-1.74,2.1,2.1,0,0,0-.94-1.38,21.06,21.06,0,0,0-11.33-2.91c-11.19,0-19.31,8-19.31,19,0,11.48,8,19.17,19.83,19.17A19.8,19.8,0,0,0,691.69,225,2.23,2.23,0,0,0,692.19,222.19Z"/> <path d="M723.77,226.16a2.19,2.19,0,0,0-2.16-2.22H704.56V211.65h14.93a2.24,2.24,0,0,0,0-4.47H704.56V195.5h16.5a2.23,2.23,0,1,0,0-4.46H702.41a2.33,2.33,0,0,0-2.36,2.3h0V226a2.33,2.33,0,0,0,2.29,2.37h19.27A2.2,2.2,0,0,0,723.77,226.16Z"/> </g> <g class="hero-anim-vitaly" fill="#fff8ec" opacity="0"> <path d="M480.6,429.15c.24.77.44,1.44.63,2s.35,1,.49,1.51a7.13,7.13,0,0,0,.36,1l.25.75a.57.57,0,0,0,.11.22.34.34,0,0,0,.24.07.37.37,0,0,0,.25-.07.57.57,0,0,0,.11-.22q.13-.37.33-1c.14-.44.32-1,.52-1.69l.79-2.49c.31-1,.68-2.09,1.1-3.46a1.38,1.38,0,0,1,.46-.74,2.13,2.13,0,0,1,1.05-.21,1.56,1.56,0,0,1,.9.19.61.61,0,0,1,.23.5,1.77,1.77,0,0,1-.09.56c-.06.21-.13.38-.19.56s-.13.42-.29.88-.35,1-.58,1.63l-.71,2c-.24.71-.48,1.38-.7,2l-.59,1.65c-.17.47-.26.77-.31.9a4.41,4.41,0,0,1-.38.86,1.61,1.61,0,0,1-.48.56,1.81,1.81,0,0,1-.65.29,3.71,3.71,0,0,1-.88.1,2.38,2.38,0,0,1-1.55-.43,3,3,0,0,1-.81-1.26l-.28-.77c-.11-.27-.22-.6-.36-1l-.47-1.36c-.17-.54-.39-1.19-.64-2q-.51-1.5-.84-2.43l-.53-1.47c-.13-.36-.23-.63-.28-.82a2,2,0,0,1-.09-.48A.67.67,0,0,1,477,425a1.82,1.82,0,0,1,1.05-.2,4.14,4.14,0,0,1,.7.06,1.12,1.12,0,0,1,.43.16,1,1,0,0,1,.27.3,2.05,2.05,0,0,1,.16.41Z"/> <path d="M494.26,437.53a.94.94,0,0,1-.76-.27,1.09,1.09,0,0,1-.21-.7V425.88c0-.61.34-.92,1-.92H495a.93.93,0,0,1,.69.24,1.11,1.11,0,0,1,.2.68v10.61a1.13,1.13,0,0,1-.25.83,1,1,0,0,1-.72.24Z"/> <path d="M504.56,428a1.21,1.21,0,0,0-.06-.38c0-.1-.16-.15-.36-.15h-2.3a.79.79,0,0,1-.71-.3,1.68,1.68,0,0,1-.19-.91c0-.88.29-1.32.86-1.32h8.11a.93.93,0,0,1,.74.26,1.82,1.82,0,0,1,.23,1,1.61,1.61,0,0,1-.22,1.05.66.66,0,0,1-.47.23h-2.42c-.19,0-.31,0-.35.11a.63.63,0,0,0-.06.33v8.83a2.16,2.16,0,0,1,0,.36.48.48,0,0,1-.17.29.93.93,0,0,1-.41.2,3.25,3.25,0,0,1-.76.06,1.75,1.75,0,0,1-1.14-.25,1,1,0,0,1-.27-.74Z"/> <path d="M518,434a.85.85,0,0,0-.49.12.54.54,0,0,0-.19.28l-.75,2.19a2.74,2.74,0,0,1-.15.4,1,1,0,0,1-.24.29,1.15,1.15,0,0,1-.41.17,3.49,3.49,0,0,1-.65.06,1.63,1.63,0,0,1-.92-.19.65.65,0,0,1-.26-.54v-.21a2,2,0,0,1,.07-.26,1.87,1.87,0,0,1,.13-.4,2.62,2.62,0,0,1,.23-.6c.24-.62.51-1.35.82-2.19l.89-2.44.82-2.18c.24-.66.42-1.12.51-1.39.17-.46.31-.83.45-1.14a2.36,2.36,0,0,1,.46-.7,1.35,1.35,0,0,1,.59-.34,3.32,3.32,0,0,1,.89-.09,2.54,2.54,0,0,1,.82.11,1.28,1.28,0,0,1,.57.37,2.65,2.65,0,0,1,.4.69c.12.27.24.61.38,1,.56,1.64,1.1,3.13,1.62,4.45s.95,2.43,1.29,3.34c.21.57.37,1,.46,1.28a2.16,2.16,0,0,1,.14.67,1.13,1.13,0,0,1,0,.26.51.51,0,0,1-.18.25,1.38,1.38,0,0,1-.39.18,3.79,3.79,0,0,1-.67.06,5,5,0,0,1-.67-.05,2,2,0,0,1-.41-.13.59.59,0,0,1-.25-.22,2.75,2.75,0,0,1-.17-.29l-.2-.48-.24-.64-.25-.67c-.08-.22-.15-.42-.2-.6a.7.7,0,0,0-.23-.35,1.58,1.58,0,0,0-.57-.08Zm2.77-1.76a.23.23,0,0,0,.26-.2h0v0a2.59,2.59,0,0,0-.13-.55c-.09-.25-.23-.64-.43-1.17l-.56-1.52c-.08-.22-.17-.33-.3-.33a.25.25,0,0,0-.19.09.66.66,0,0,0-.11.24c-.07.21-.15.41-.21.61s-.17.47-.29.84l-.29.91a5.08,5.08,0,0,0-.17.51,2,2,0,0,1-.08.26.38.38,0,0,0,0,.15c0,.13.09.21.27.21Z"/> <path d="M537.72,435.25a.87.87,0,0,1,.61.22,1.29,1.29,0,0,1,.25,1,2.16,2.16,0,0,1-.08.67.69.69,0,0,1-.18.35.71.71,0,0,1-.32.14h-6.6a1,1,0,0,1-1.11-.76,1.31,1.31,0,0,1,0-.28V425.88a.91.91,0,0,1,.3-.74,2,2,0,0,1,1.14-.23,2.17,2.17,0,0,1,1.15.21.87.87,0,0,1,.3.79v8.59a.94.94,0,0,0,.14.63,1.07,1.07,0,0,0,.7.13Z"/> <path d="M548.8,425.85a3,3,0,0,1,.26-.46,1.18,1.18,0,0,1,.31-.28,1.08,1.08,0,0,1,.45-.17,3.86,3.86,0,0,1,.68,0,2,2,0,0,1,1,.15.44.44,0,0,1,.22.39v.19a.79.79,0,0,1-.05.22c0,.08-.09.19-.14.3l-.26.48-1.13,2.09-1,1.82-.77,1.36c-.21.38-.35.62-.39.71s-.25.46-.32.64a1.92,1.92,0,0,0-.11.71v2.76a.77.77,0,0,1-.28.68,2,2,0,0,1-1,.2,1.73,1.73,0,0,1-1-.22.82.82,0,0,1-.26-.66v-2.82a2.76,2.76,0,0,0-.06-.57,3.92,3.92,0,0,0-.23-.6c-.12-.23-.27-.54-.47-.9l-.78-1.41c-.23-.43-.47-.86-.71-1.28s-.47-.85-.69-1.21l-.57-1.05-.38-.67c-.1-.14-.18-.31-.25-.42a.92.92,0,0,1-.11-.43c0-.37.43-.54,1.3-.54a2.81,2.81,0,0,1,.65.05,1.45,1.45,0,0,1,.46.14,1.3,1.3,0,0,1,.31.26,2.3,2.3,0,0,1,.23.4L545.1,429l.52,1c.12.27.22.47.29.61a1.35,1.35,0,0,0,.15.26.2.2,0,0,0,.25,0h0a.8.8,0,0,0,.18-.27l.31-.62.54-1.13Z"/> <path d="M568.87,432.94a.57.57,0,0,0-.34.08.34.34,0,0,0-.07.24v3.5a.64.64,0,0,1-.3.64,2.82,2.82,0,0,1-1,.15,3.43,3.43,0,0,1-1.1-.14c-.25-.08-.38-.3-.38-.67V425.66a1,1,0,0,1,.18-.62,1.15,1.15,0,0,1,.81-.16c1.22,0,2.26,0,3.14.05H574a.7.7,0,0,1,.61.22,1.66,1.66,0,0,1,.17,1c0,.8-.25,1.2-.76,1.2H569.1a.5.5,0,0,0-.6.61v2.38a.61.61,0,0,0,.51.69h4.6a1,1,0,0,1,.72.23,1.2,1.2,0,0,1,.18.76,1.58,1.58,0,0,1-.14.77c-.11.17-.35.26-.74.26Z"/> <path d="M584,432.8a1.27,1.27,0,0,0-.72.13.54.54,0,0,0-.18.46v3.37a.6.6,0,0,1-.37.6,3.53,3.53,0,0,1-1.16.19,3.39,3.39,0,0,1-.78,0,1,1,0,0,1-.44-.19.7.7,0,0,1-.19-.29,1,1,0,0,1,0-.35V426.16a1.67,1.67,0,0,1,.14-.73,1,1,0,0,1,.61-.46,6.52,6.52,0,0,1,1.39-.24c.62,0,1.43-.06,2.46-.06a11.6,11.6,0,0,1,2.82.29,5.74,5.74,0,0,1,1.94.82,3.41,3.41,0,0,1,1.11,1.33,4.2,4.2,0,0,1,.36,1.78,4.08,4.08,0,0,1-.22,1.43,2.74,2.74,0,0,1-1.32,1.48,6.21,6.21,0,0,1-.75.31l-.56.2c-.15.05-.23.11-.23.21s.07.16.2.24a3.27,3.27,0,0,1,.5.32,5.11,5.11,0,0,1,.57.57,2.94,2.94,0,0,1,.5,1,2.18,2.18,0,0,0,.46.91,3.71,3.71,0,0,0,.5.47,4.12,4.12,0,0,1,.4.33.52.52,0,0,1,.16.44.78.78,0,0,1-.31.56,1.78,1.78,0,0,1-1.19.28,4.14,4.14,0,0,1-1.16-.14,2.05,2.05,0,0,1-.87-.44,2.92,2.92,0,0,1-.65-.87,6.69,6.69,0,0,1-.5-1.38,5,5,0,0,0-.38-1,1.81,1.81,0,0,0-.49-.61,1.9,1.9,0,0,0-.69-.28A5.25,5.25,0,0,0,584,432.8Zm4.08-3.65a1.79,1.79,0,0,0-.78-1.52,4.39,4.39,0,0,0-2.51-.55H584a1.69,1.69,0,0,0-.49.13.55.55,0,0,0-.25.29,1.29,1.29,0,0,0-.06.48v2.56a.81.81,0,0,0,.06.31.51.51,0,0,0,.24.22,1.84,1.84,0,0,0,.56.14,8.34,8.34,0,0,0,1,0,3.69,3.69,0,0,0,2.33-.59,2,2,0,0,0,.68-1.47Z"/> <path d="M597.31,437.53a.9.9,0,0,1-.75-.27,1.1,1.1,0,0,1-.22-.7V425.88c0-.61.35-.92,1-.92h.71a.85.85,0,0,1,.69.24,1,1,0,0,1,.21.68v10.61a1.13,1.13,0,0,1-.25.83,1,1,0,0,1-.72.24Z"/> <path d="M607.91,432.55a.37.37,0,0,0-.35.14.76.76,0,0,0-.08.33v1.43c0,.3.07.52.23.61a1.23,1.23,0,0,0,.7.16h5a.75.75,0,0,1,.66.26,1.92,1.92,0,0,1,.18,1,1.73,1.73,0,0,1-.16.84.65.65,0,0,1-.61.25h-7.72a1.24,1.24,0,0,1-.47-.06.59.59,0,0,1-.27-.17.62.62,0,0,1-.12-.26,1.61,1.61,0,0,1,0-.31v-11a.91.91,0,0,1,.18-.64,1.05,1.05,0,0,1,.78-.23h7.25a.77.77,0,0,1,.62.24,1.59,1.59,0,0,1,.2.93,1.48,1.48,0,0,1-.22.89,1,1,0,0,1-.76.29h-4.79a.54.54,0,0,0-.61.46h0a.33.33,0,0,0,0,.14V430a.63.63,0,0,0,.12.46.62.62,0,0,0,.49.15H613a.7.7,0,0,1,.6.21,1.32,1.32,0,0,1,.18.8,1.35,1.35,0,0,1-.15.74.63.63,0,0,1-.58.24Z"/> <path d="M619.67,426.16a2.26,2.26,0,0,1,.1-.73.83.83,0,0,1,.47-.45,3.45,3.45,0,0,1,1-.22c.45,0,1-.05,1.72-.05a13,13,0,0,1,3.72.48,7,7,0,0,1,2.52,1.35,5.13,5.13,0,0,1,1.45,2.08,7.28,7.28,0,0,1,.45,2.61,7.72,7.72,0,0,1-.21,1.91,7.08,7.08,0,0,1-.58,1.53,6.11,6.11,0,0,1-.9,1.19,7,7,0,0,1-1.16.93,5.91,5.91,0,0,1-2.09.83,14.14,14.14,0,0,1-2.43.19H622a7.77,7.77,0,0,1-1.18-.15,2,2,0,0,1-.71-.26.65.65,0,0,1-.3-.39,3.15,3.15,0,0,1-.06-.61v-6.93C619.81,428.53,619.68,427.38,619.67,426.16Zm7,8.66a3.31,3.31,0,0,0,1.14-1.4,5,5,0,0,0,.48-2.32,4.56,4.56,0,0,0-.28-1.64,3,3,0,0,0-.86-1.23,3.83,3.83,0,0,0-1.45-.8,7,7,0,0,0-2.08-.28,2.82,2.82,0,0,0-1,.15.48.48,0,0,0-.3.45v7.05a.57.57,0,0,0,.27.49,1.75,1.75,0,0,0,1,.19h1.1c.28,0,.55-.07.82-.12a3.72,3.72,0,0,0,1.12-.48Z"/> <path d="M647.24,429.7v-.78c0-.07,0-.1-.08-.11h-.1c-.08,0-.15.08-.22.25s-.19.47-.33.91c-.08.21-.16.42-.22.64l-.33,1c-.12.38-.25.77-.38,1.2s-.27.84-.41,1.23-.25.79-.36,1.13-.19.64-.26.86-.19.57-.27.77a1.43,1.43,0,0,1-.27.46,1,1,0,0,1-.35.24,2.22,2.22,0,0,1-.51.06,1.59,1.59,0,0,1-.53-.08,1.11,1.11,0,0,1-.37-.27,2.29,2.29,0,0,1-.3-.5c-.08-.2-.17-.47-.29-.77s-.2-.57-.31-.94l-.4-1.14-.42-1.22c-.14-.4-.28-.79-.39-1.15s-.24-.68-.34-1-.15-.5-.2-.64-.14-.43-.19-.58-.09-.2-.14-.3a.27.27,0,0,0-.09-.12.07.07,0,0,0-.09,0c-.06,0-.1,0-.12.17a3.42,3.42,0,0,0,0,.64v6.93a.86.86,0,0,1-.38.79,1.83,1.83,0,0,1-1,.21,1.28,1.28,0,0,1-.89-.24.86.86,0,0,1-.28-.67V426.37a1.32,1.32,0,0,1,.43-1,2.28,2.28,0,0,1,1.46-.35h.87a1.71,1.71,0,0,1,.63.15,1,1,0,0,1,.44.36,2.65,2.65,0,0,1,.33.65,6.44,6.44,0,0,0,.25.74c.12.39.27.81.44,1.32l.52,1.6c.18.57.36,1.05.52,1.59s.3.91.43,1.25l.21.62c.06.19.14.28.24.28a.21.21,0,0,0,.15-.07.18.18,0,0,1,.08-.18l2.08-6.8a3.71,3.71,0,0,1,.27-.65,1.15,1.15,0,0,1,.41-.49,1.77,1.77,0,0,1,.69-.3A4.28,4.28,0,0,1,648,425a2.35,2.35,0,0,1,1.46.34,1.4,1.4,0,0,1,.43,1.11v10.21a.91.91,0,0,1-.34.78,1.75,1.75,0,0,1-1,.24,1.42,1.42,0,0,1-1-.24,1,1,0,0,1-.3-.76Z"/> <path d="M658.77,434a.85.85,0,0,0-.49.12.45.45,0,0,0-.2.28l-.75,2.19a2,2,0,0,1-.16.4,1,1,0,0,1-.24.29,1.13,1.13,0,0,1-.39.17,3.68,3.68,0,0,1-.66.06,1.6,1.6,0,0,1-.91-.19.61.61,0,0,1-.26-.54.74.74,0,0,1,0-.21,1.1,1.1,0,0,1,.06-.26l.13-.4c.06-.16.13-.35.24-.6.23-.62.5-1.35.8-2.19s.61-1.65.91-2.44.56-1.53.8-2.18l.52-1.39c.16-.46.31-.83.44-1.14a2.5,2.5,0,0,1,.46-.7,1.38,1.38,0,0,1,.6-.34,3.25,3.25,0,0,1,.88-.09,2.6,2.6,0,0,1,.83.11,1.25,1.25,0,0,1,.56.37,2.11,2.11,0,0,1,.41.69,8.63,8.63,0,0,1,.39,1c.55,1.64,1.09,3.13,1.6,4.45s.95,2.43,1.3,3.34c.21.57.36,1,.46,1.28a2.15,2.15,0,0,1,.13.67,1.13,1.13,0,0,1,0,.26.53.53,0,0,1-.17.25,1.44,1.44,0,0,1-.4.18,2.57,2.57,0,0,1-.68.06,4.89,4.89,0,0,1-.66-.05,1.87,1.87,0,0,1-.4-.13.58.58,0,0,1-.27-.22c0-.08-.11-.19-.16-.29a4.78,4.78,0,0,1-.19-.48c-.07-.21-.17-.42-.25-.64s-.16-.45-.25-.67a4.69,4.69,0,0,1-.2-.6.58.58,0,0,0-.24-.35,1.52,1.52,0,0,0-.56-.08Zm2.76-1.76a.23.23,0,0,0,.26-.2V432a2.1,2.1,0,0,0-.13-.55l-.44-1.17-.55-1.52c-.07-.22-.18-.33-.3-.33a.21.21,0,0,0-.18.09.55.55,0,0,0-.12.24l-.21.61c-.07.18-.17.47-.29.84l-.3.91c-.07.21-.12.39-.17.51a2.5,2.5,0,0,0-.07.26V432c0,.13.09.21.28.21Z"/> <path d="M672.31,437.55a1.07,1.07,0,0,1-.69-.24.86.86,0,0,1-.26-.64v-10a1.93,1.93,0,0,1,.33-1.21,1.49,1.49,0,0,1,1.25-.43,2.13,2.13,0,0,1,.75.11,1.32,1.32,0,0,1,.52.28,1.86,1.86,0,0,1,.37.42,3.58,3.58,0,0,1,.34.52c.07.13.23.37.45.73s.48.77.77,1.26l.94,1.55c.33.54.66,1,.95,1.59a11.31,11.31,0,0,0,.68,1.16l.39.7c.07.12.14.24.22.35a.18.18,0,0,0,.13.09c.08,0,.12-.07.12-.23V426a1,1,0,0,1,.22-.66,1.07,1.07,0,0,1,.75-.24h.5a1.09,1.09,0,0,1,.7.21.86.86,0,0,1,.25.71v9.91a1.84,1.84,0,0,1-.37,1.26,1.79,1.79,0,0,1-1.4.44,1.85,1.85,0,0,1-1.26-.42,4.75,4.75,0,0,1-.86-1.09c-.1-.16-.27-.44-.5-.84s-.5-.83-.78-1.32-.58-1-.87-1.48-.54-.91-.74-1.28-.5-.92-.66-1.23l-.35-.71a2.31,2.31,0,0,0-.18-.35.22.22,0,0,0-.13-.08c-.06,0-.09.06-.09.19v7.73a.75.75,0,0,1-.32.67,1.43,1.43,0,0,1-.78.21Z"/> </g> <g class="hero-anim-video" opacity="0"> <path fill="#fff8ec" d="M523.34,29.35c.16.52.3,1,.43,1.35a9.45,9.45,0,0,1,.31,1.05,6.13,6.13,0,0,0,.25.72c.07.19.13.36.17.5a.27.27,0,0,0,.07.14.22.22,0,0,0,.16,0,.22.22,0,0,0,.16,0A.57.57,0,0,0,525,33l.22-.69c.09-.28.21-.66.34-1.12s.31-1,.52-1.66l.73-2.3a.94.94,0,0,1,.32-.49,1.33,1.33,0,0,1,.71-.14,1,1,0,0,1,.59.12.44.44,0,0,1,.16.34,2.2,2.2,0,0,1-.06.37l-.13.37a4,4,0,0,1-.2.58,9.63,9.63,0,0,1-.38,1l-.47,1.33c-.17.47-.33.91-.47,1.34s-.28.78-.39,1.09l-.21.6a2.41,2.41,0,0,1-.25.57,1,1,0,0,1-.31.38,1.35,1.35,0,0,1-.44.2,2.88,2.88,0,0,1-.59.06,1.49,1.49,0,0,1-1-.29,1.93,1.93,0,0,1-.54-.84c-.06-.15-.13-.33-.19-.51s-.15-.4-.24-.65-.2-.56-.31-.91l-.43-1.3-.55-1.63c-.15-.41-.28-.74-.36-1s-.13-.35-.19-.53a1.61,1.61,0,0,1,0-.31.48.48,0,0,1,.15-.36,1.1,1.1,0,0,1,.69-.13,1.85,1.85,0,0,1,.47,0,.65.65,0,0,1,.29.11.52.52,0,0,1,.17.19,1,1,0,0,1,.11.28Z"/> <path fill="#fff8ec" d="M532.42,34.93a.61.61,0,0,1-.5-.18.72.72,0,0,1-.14-.47V27.16c0-.4.24-.6.7-.6H533a.59.59,0,0,1,.46.14.68.68,0,0,1,.14.46v7.06a.84.84,0,0,1-.17.55.7.7,0,0,1-.48.16Z"/> <path fill="#fff8ec" d="M537.47,27.37a1.37,1.37,0,0,1,.09-.49.48.48,0,0,1,.3-.29,2,2,0,0,1,.68-.15h1.14a8.67,8.67,0,0,1,2.48.33,4.65,4.65,0,0,1,1.67.89,3.37,3.37,0,0,1,1,1.36,4.64,4.64,0,0,1,.3,1.73A5.83,5.83,0,0,1,545,32a4.54,4.54,0,0,1-.4,1,3.3,3.3,0,0,1-.6.79,4.12,4.12,0,0,1-.76.62,3.81,3.81,0,0,1-1.42.56,11,11,0,0,1-1.62.12H539a4.17,4.17,0,0,1-.79-.1,1.31,1.31,0,0,1-.47-.16.4.4,0,0,1-.19-.27,1.41,1.41,0,0,1,0-.41v-4.6C537.57,29,537.48,28.19,537.47,27.37Zm4.68,5.76a2.29,2.29,0,0,0,.76-.93,3.4,3.4,0,0,0,.31-1.54,2.86,2.86,0,0,0-.19-1,2,2,0,0,0-.56-.83,2.52,2.52,0,0,0-1-.52,4.47,4.47,0,0,0-1.36-.19,1.66,1.66,0,0,0-.66.1.33.33,0,0,0-.2.3v4.64a.43.43,0,0,0,.17.33,1.28,1.28,0,0,0,.64.11h.74a3.31,3.31,0,0,0,.55-.08,2,2,0,0,0,.41-.14,2.59,2.59,0,0,0,.39-.25Z"/> <path fill="#fff8ec" d="M550.68,31.62c-.13,0-.2,0-.23.09a.34.34,0,0,0-.07.22v.93a.45.45,0,0,0,.16.41.82.82,0,0,0,.46.1h3.32a.51.51,0,0,1,.45.17,1.4,1.4,0,0,1,.11.67,1,1,0,0,1-.1.55.44.44,0,0,1-.41.17h-5.45a.36.36,0,0,1-.25-.29.74.74,0,0,1,0-.21V27.08a.67.67,0,0,1,.12-.43c.08-.1.26-.14.53-.14h4.81a.54.54,0,0,1,.42.16,1,1,0,0,1,.13.62.88.88,0,0,1-.15.59.59.59,0,0,1-.5.19h-3.22a.37.37,0,0,0-.41.29v1.53a.56.56,0,0,0,.09.31.38.38,0,0,0,.32.09H554a.49.49,0,0,1,.4.15,1.24,1.24,0,0,1,0,1,.4.4,0,0,1-.38.16Z"/> <path fill="#fff8ec" d="M562.39,35.18a4.44,4.44,0,0,1-1.8-.35,3.52,3.52,0,0,1-1.29-1,4.29,4.29,0,0,1-.78-1.42,6,6,0,0,1-.26-1.74,5.66,5.66,0,0,1,.14-1.23,3.78,3.78,0,0,1,.47-1.16,4.76,4.76,0,0,1,.65-.83,3.25,3.25,0,0,1,.78-.6,4,4,0,0,1,1-.35,6.12,6.12,0,0,1,1.21-.11,4.84,4.84,0,0,1,1.69.28,3.36,3.36,0,0,1,1.29.84,3.48,3.48,0,0,1,.8,1.36,5.54,5.54,0,0,1,.28,1.85,5.84,5.84,0,0,1-.23,1.66,3.89,3.89,0,0,1-.74,1.41,3.48,3.48,0,0,1-1.28,1A4.6,4.6,0,0,1,562.39,35.18Zm.07-1.59a2,2,0,0,0,1.72-.75,3.3,3.3,0,0,0,.57-2.09,3.77,3.77,0,0,0-.14-1,2.28,2.28,0,0,0-1.14-1.46,2.15,2.15,0,0,0-1-.22,2.46,2.46,0,0,0-1,.21,1.75,1.75,0,0,0-.72.6c-.07.12-.14.22-.19.33a1.73,1.73,0,0,0-.16.37,2.11,2.11,0,0,0-.1.5,4.09,4.09,0,0,0,0,.7,3.13,3.13,0,0,0,.59,2.09,2,2,0,0,0,1.66.76Z"/> <path fill="#fff8ec" d="M583.48,32.09a.84.84,0,0,1,.55.17.62.62,0,0,1,.2.56,1.56,1.56,0,0,1-.22.76,2.39,2.39,0,0,1-.68.77,3.92,3.92,0,0,1-1.15.59,5.05,5.05,0,0,1-1.64.24,4.83,4.83,0,0,1-1.84-.33,3.52,3.52,0,0,1-2-2.3,6,6,0,0,1-.26-1.79,5.66,5.66,0,0,1,.14-1.23,5,5,0,0,1,.45-1.16,3.63,3.63,0,0,1,1.49-1.54,4.78,4.78,0,0,1,2-.44,5,5,0,0,1,1.67.25,3.45,3.45,0,0,1,1.15.65,2.55,2.55,0,0,1,.66.87,2.15,2.15,0,0,1,.22,1,.91.91,0,0,1-.21.63.77.77,0,0,1-.64.25.8.8,0,0,1-.65-.25,2.65,2.65,0,0,1-.43-.62,2.82,2.82,0,0,0-.26-.44,1.34,1.34,0,0,0-.77-.59,2.48,2.48,0,0,0-.66-.08,2,2,0,0,0-1,.22,2.35,2.35,0,0,0-1,1.46,3.93,3.93,0,0,0-.13,1.13A2.94,2.94,0,0,0,579,33a2.08,2.08,0,0,0,1.64.67,2.71,2.71,0,0,0,.85-.1,2.07,2.07,0,0,0,1-.63c.09-.12.2-.24.3-.35a1.14,1.14,0,0,1,.31-.27A.78.78,0,0,1,583.48,32.09Z"/> <path fill="#fff8ec" d="M591.83,35.18a4.44,4.44,0,0,1-1.8-.35,3.6,3.6,0,0,1-1.29-1,4,4,0,0,1-.77-1.42,5.4,5.4,0,0,1-.26-1.74,6.41,6.41,0,0,1,.12-1.23,4.07,4.07,0,0,1,.48-1.16,5.29,5.29,0,0,1,.65-.83,3.25,3.25,0,0,1,.78-.6,4,4,0,0,1,1-.35,6.12,6.12,0,0,1,1.21-.11,4.84,4.84,0,0,1,1.69.28,3.52,3.52,0,0,1,1.28.84,3.6,3.6,0,0,1,.8,1.36,5.55,5.55,0,0,1,.29,1.85,5.85,5.85,0,0,1-.24,1.66,4,4,0,0,1-.73,1.41,3.63,3.63,0,0,1-1.3,1A4.48,4.48,0,0,1,591.83,35.18Zm.07-1.59a2,2,0,0,0,1.73-.75,3.37,3.37,0,0,0,.56-2.09,4.22,4.22,0,0,0-.13-1,2.83,2.83,0,0,0-.43-.87,2.42,2.42,0,0,0-.72-.59,2.28,2.28,0,0,0-1-.22,2.46,2.46,0,0,0-1,.21,1.75,1.75,0,0,0-.72.6c-.07.12-.15.22-.2.33a1.73,1.73,0,0,0-.16.37,2.11,2.11,0,0,0-.1.5,4.09,4.09,0,0,0,0,.7,3.13,3.13,0,0,0,.59,2.09,2,2,0,0,0,1.6.76Z"/> <path fill="#fff8ec" d="M599.55,27.27a.86.86,0,0,1,0-.32.47.47,0,0,1,.13-.24.73.73,0,0,1,.31-.14,2.09,2.09,0,0,1,.56-.05,1.11,1.11,0,0,1,.79.19.67.67,0,0,1,.2.48v4.13a2.78,2.78,0,0,0,.46,1.77,1.67,1.67,0,0,0,1.32.57,1.51,1.51,0,0,0,1.29-.6,3.13,3.13,0,0,0,.43-1.74v-4.1a.69.69,0,0,1,.19-.51,1.22,1.22,0,0,1,.81-.18.92.92,0,0,1,.68.19.77.77,0,0,1,.18.56V31a6.55,6.55,0,0,1-.19,1.71,3.31,3.31,0,0,1-.63,1.29,2.71,2.71,0,0,1-1.13.82,4.83,4.83,0,0,1-1.73.28,4.51,4.51,0,0,1-1.63-.28,2.77,2.77,0,0,1-1.13-.81,3.25,3.25,0,0,1-.66-1.26,5.62,5.62,0,0,1-.22-1.68Z"/> <path fill="#fff8ec" d="M613.33,31.79a.89.89,0,0,0-.48.08.36.36,0,0,0-.12.31v2.27a.37.37,0,0,1-.24.38,2.28,2.28,0,0,1-.77.14h-.52a.81.81,0,0,1-.29-.12.46.46,0,0,1-.13-.2.89.89,0,0,1,0-.23v-7a1,1,0,0,1,.09-.49.66.66,0,0,1,.41-.3,4.13,4.13,0,0,1,.92-.16h1.63a8,8,0,0,1,1.88.2,3.77,3.77,0,0,1,1.29.54,2.2,2.2,0,0,1,.74.89,2.87,2.87,0,0,1,.23,1.19,2.51,2.51,0,0,1-.15.94,1.86,1.86,0,0,1-.37.62,1.92,1.92,0,0,1-.5.36,4.4,4.4,0,0,1-.5.21l-.37.14a.14.14,0,0,0-.16.12h0c0,.06.05.12.14.16a2.27,2.27,0,0,1,.32.22,2.72,2.72,0,0,1,.39.37,2.1,2.1,0,0,1,.33.65,1.74,1.74,0,0,0,.3.61,3.17,3.17,0,0,0,.34.3l.27.22a.34.34,0,0,1,.1.3.49.49,0,0,1-.2.37,1.25,1.25,0,0,1-.8.18,3.22,3.22,0,0,1-.76-.08,1.61,1.61,0,0,1-.58-.3,2.12,2.12,0,0,1-.44-.59,5.85,5.85,0,0,1-.34-.91,4.23,4.23,0,0,0-.24-.68,1.16,1.16,0,0,0-.33-.4,1.12,1.12,0,0,0-.46-.2A3.5,3.5,0,0,0,613.33,31.79ZM616,29.35a1.16,1.16,0,0,0-.51-1,2.87,2.87,0,0,0-1.67-.37,2.53,2.53,0,0,0-.55,0,.82.82,0,0,0-.27,0,.35.35,0,0,0-.17.19.81.81,0,0,0,0,.31v1.71a.67.67,0,0,0,0,.2.44.44,0,0,0,.17.16,1.55,1.55,0,0,0,.36.08H614a2.4,2.4,0,0,0,1.56-.4A1.3,1.3,0,0,0,616,29.35Z"/> <path fill="#fff8ec" d="M622.1,32a.76.76,0,0,1,.46.12,1.57,1.57,0,0,1,.32.31l.31.41a2.46,2.46,0,0,0,.38.41,1.72,1.72,0,0,0,.6.31,2.88,2.88,0,0,0,.92.13,1.92,1.92,0,0,0,1-.21.64.64,0,0,0,.29-.57,1,1,0,0,0-.08-.41.71.71,0,0,0-.32-.32,4.76,4.76,0,0,0-.7-.3c-.3-.09-.69-.21-1.19-.32a5.34,5.34,0,0,1-1.22-.42,2.72,2.72,0,0,1-.78-.56,1.54,1.54,0,0,1-.4-.67,2.45,2.45,0,0,1-.11-.76,3,3,0,0,1,.25-1.25,2.47,2.47,0,0,1,.69-.85,2.91,2.91,0,0,1,1-.49,5.14,5.14,0,0,1,1.3-.16,4.76,4.76,0,0,1,1.54.23,3,3,0,0,1,1,.59,2.08,2.08,0,0,1,.56.75,2,2,0,0,1,.18.77.89.89,0,0,1-.19.57.85.85,0,0,1-.71.24.71.71,0,0,1-.57-.2,1.31,1.31,0,0,1-.31-.43,2.08,2.08,0,0,0-.24-.47,1.08,1.08,0,0,0-.31-.33,1.57,1.57,0,0,0-.46-.2,3.68,3.68,0,0,0-.66-.06,1.48,1.48,0,0,0-1,.28.94.94,0,0,0-.32.77,1.54,1.54,0,0,0,.06.43.9.9,0,0,0,.25.38,1.85,1.85,0,0,0,.56.32,5.42,5.42,0,0,0,1,.28,7.08,7.08,0,0,1,1.49.44,2.93,2.93,0,0,1,.9.57,1.7,1.7,0,0,1,.44.7,2.72,2.72,0,0,1,.12.8,2.1,2.1,0,0,1-.21.92,2,2,0,0,1-.62.74,3.18,3.18,0,0,1-1,.5,5.27,5.27,0,0,1-1.48.19,4.68,4.68,0,0,1-1.57-.24,4.22,4.22,0,0,1-1-.6,2.41,2.41,0,0,1-.65-.77,2.06,2.06,0,0,1-.21-.76C621.38,32.27,621.59,32,622.1,32Z"/> <path fill="#fff8ec" d="M633.91,31.62c-.13,0-.2,0-.23.09a.34.34,0,0,0-.07.22v.93a.45.45,0,0,0,.16.41.82.82,0,0,0,.46.1h3.33a.52.52,0,0,1,.44.17,1.4,1.4,0,0,1,.11.67,1,1,0,0,1-.1.55.44.44,0,0,1-.41.17h-5.45a.3.3,0,0,1-.17-.12.38.38,0,0,1-.08-.17v-7.5a.67.67,0,0,1,.12-.43c.08-.1.26-.14.53-.14h4.82a.53.53,0,0,1,.41.16,1,1,0,0,1,.13.62,1,1,0,0,1-.14.6.63.63,0,0,1-.51.18h-3.17a.35.35,0,0,0-.4.29h0a.21.21,0,0,0,0,.11v1.35a.48.48,0,0,0,.08.31.38.38,0,0,0,.32.09h3.2a.53.53,0,0,1,.41.15.86.86,0,0,1,.11.52,1.08,1.08,0,0,1-.09.5.42.42,0,0,1-.39.16Z"/> <path fill="#fff8ec" d="M543.65,61.11a1.15,1.15,0,0,1,.08-.41,4.5,4.5,0,0,0,.15-.73c.06-.28.12-.58.19-.89s.12-.62.18-.91.11-.54.15-.76.09-.39.1-.49a.68.68,0,0,1,.28-.47,1.32,1.32,0,0,1,.75-.17,1.15,1.15,0,0,1,.63.14.4.4,0,0,1,.16.32,1.61,1.61,0,0,1-.06.44l-.09.37a3.16,3.16,0,0,0-.13.53,3.12,3.12,0,0,1-.18.73c-.07.28-.15.63-.25,1s-.22.84-.34,1.36-.24.94-.32,1.24l-.2.74a1.76,1.76,0,0,1-.12.45l-.09.37a3.62,3.62,0,0,1-.13.35.39.39,0,0,1-.19.23.76.76,0,0,1-.32.11h-.53a1.38,1.38,0,0,1-.86-.2,1.24,1.24,0,0,1-.34-.72L542,62.8c-.08-.37-.17-.76-.25-1.17s-.18-.81-.25-1.22l-.22-1a2.66,2.66,0,0,0-.12-.56c0-.08-.1-.12-.16-.12s-.07,0-.11.07a.92.92,0,0,0-.08.27c-.08.51-.18,1-.27,1.54L540.26,62c-.09.43-.15.79-.21,1s-.09.5-.12.59a1.5,1.5,0,0,1-.4.85,1.41,1.41,0,0,1-.95.26h-.45a.83.83,0,0,1-.35-.14.78.78,0,0,1-.24-.27,2.16,2.16,0,0,1-.16-.49l-.13-.48a3.63,3.63,0,0,0-.16-.65l-.24-1c-.11-.39-.23-.87-.38-1.44s-.32-1.26-.44-1.68-.2-.75-.26-1-.1-.42-.13-.53v-.31a.42.42,0,0,1,.2-.35,1.69,1.69,0,0,1,.67-.11,1.15,1.15,0,0,1,.63.15.79.79,0,0,1,.28.49,5.33,5.33,0,0,0,.17.66l.25,1.11c.08.4.17.82.27,1.25s.17.79.23,1.1l.16.74a1.36,1.36,0,0,0,.11.38.59.59,0,0,0,.1.17h.14c.1,0,.19-.13.23-.38s.1-.57.17-1a1.13,1.13,0,0,1,.06-.36,4.21,4.21,0,0,0,.11-.6c.05-.23.1-.47.14-.73s.09-.5.13-.74.1-.47.13-.68.07-.37.09-.5a1.43,1.43,0,0,1,.35-.85,1,1,0,0,1,.73-.23,2,2,0,0,1,.49,0,.61.61,0,0,1,.31.18.79.79,0,0,1,.2.31,3.74,3.74,0,0,1,.12.45c.06.31.15.76.28,1.32l.45,2.17c.06.32.1.58.14.78s.06.33.1.49a1.17,1.17,0,0,0,.09.24.16.16,0,0,0,.13.06q.12,0,.18-.36A4,4,0,0,0,543.65,61.11Z"/> <path fill="#fff8ec" d="M553.66,64.94a4.22,4.22,0,0,1-1.79-.36,3.4,3.4,0,0,1-1.3-.95,4.09,4.09,0,0,1-.77-1.42,5.69,5.69,0,0,1-.26-1.74,5.09,5.09,0,0,1,.13-1.23,3.78,3.78,0,0,1,.47-1.16,5.89,5.89,0,0,1,.65-.84,3.48,3.48,0,0,1,.78-.59,4.42,4.42,0,0,1,1-.36,7.09,7.09,0,0,1,1.22-.1,4.93,4.93,0,0,1,1.7.28,3.28,3.28,0,0,1,1.27.84,3.8,3.8,0,0,1,.81,1.35,6.2,6.2,0,0,1,0,3.52,3.92,3.92,0,0,1-.75,1.41,3.57,3.57,0,0,1-1.28,1A4.72,4.72,0,0,1,553.66,64.94Zm.08-1.59a2,2,0,0,0,1.72-.75,3.37,3.37,0,0,0,.56-2.09,3.77,3.77,0,0,0-.14-1A2.13,2.13,0,0,0,554.75,58a2.28,2.28,0,0,0-1-.22,2.46,2.46,0,0,0-1,.21,1.75,1.75,0,0,0-.72.6l-.2.33a2.43,2.43,0,0,0-.16.37,2.77,2.77,0,0,0-.1.5v.7a3.19,3.19,0,0,0,.58,2.09A2.09,2.09,0,0,0,553.74,63.35Z"/> <path fill="#fff8ec" d="M564.1,61.51a.89.89,0,0,0-.48.1.34.34,0,0,0-.13.3v2.28a.38.38,0,0,1-.24.38,2.27,2.27,0,0,1-.77.13H562a1.08,1.08,0,0,1-.29-.13.39.39,0,0,1-.13-.2.89.89,0,0,1,0-.23v-7a1,1,0,0,1,.1-.49.64.64,0,0,1,.4-.3,4.21,4.21,0,0,1,.93-.16h1.63a7.47,7.47,0,0,1,1.88.2,3.77,3.77,0,0,1,1.29.54,2,2,0,0,1,.73.89,2.7,2.7,0,0,1,.24,1.19,2.51,2.51,0,0,1-.15.94,1.78,1.78,0,0,1-.87,1,4.4,4.4,0,0,1-.5.21l-.38.13a.14.14,0,0,0-.14.14h0c0,.06,0,.11.13.16a1.9,1.9,0,0,1,.33.22,2.22,2.22,0,0,1,.38.37,2.38,2.38,0,0,1,.34.65,1.48,1.48,0,0,0,.3.6,1.93,1.93,0,0,0,.33.31l.26.22a.35.35,0,0,1,.12.29.51.51,0,0,1-.21.37,1.21,1.21,0,0,1-.79.19,3.94,3.94,0,0,1-.77-.08,1.48,1.48,0,0,1-.59-.32,1.86,1.86,0,0,1-.43-.57,3.74,3.74,0,0,1-.33-.92,3.48,3.48,0,0,0-.25-.68,1.23,1.23,0,0,0-.33-.39,1.08,1.08,0,0,0-.45-.2A3.16,3.16,0,0,0,564.1,61.51Zm2.68-2.4a1.16,1.16,0,0,0-.51-1,3,3,0,0,0-1.67-.38h-.55a1.26,1.26,0,0,0-.33.1.24.24,0,0,0-.15.19.81.81,0,0,0-.06.31V60a.67.67,0,0,0,0,.2.25.25,0,0,0,.16.14,1.2,1.2,0,0,0,.37.1h.66a2.49,2.49,0,0,0,1.55-.4,1.24,1.24,0,0,0,.53-.93Z"/> <path fill="#fff8ec" d="M573,64.7a1.13,1.13,0,0,1-.57-.12.57.57,0,0,1-.18-.48V56.86a.51.51,0,0,1,.19-.46,1.71,1.71,0,0,1,.74-.11,1.49,1.49,0,0,1,.66.12.49.49,0,0,1,.21.46V60c0,.15.06.21.18.21a.37.37,0,0,0,.18-.08,2.39,2.39,0,0,0,.22-.23l.22-.28.21-.26.52-.58.65-.71.63-.69.43-.47a2.48,2.48,0,0,1,.58-.49,1.14,1.14,0,0,1,.63-.13h.59a.42.42,0,0,1,.34.1.33.33,0,0,1,.1.23,1,1,0,0,1-.08.29,1.44,1.44,0,0,1-.18.4l-.5.53c-.24.24-.51.49-.78.77l-.81.79-.67.67-.08.12a.21.21,0,0,0,0,.11.17.17,0,0,0,.13.16l.35.09.45.13a2.23,2.23,0,0,1,.49.24,1.85,1.85,0,0,1,.41.47,2.2,2.2,0,0,1,.27.78,2.24,2.24,0,0,0,.3,1,2,2,0,0,0,.38.48,2.88,2.88,0,0,0,.34.27.33.33,0,0,1,.14.3.49.49,0,0,1-.21.37,1.25,1.25,0,0,1-.8.18,2,2,0,0,1-1.4-.47,3.23,3.23,0,0,1-.82-1.6,3.82,3.82,0,0,0-.45-1.13.58.58,0,0,0-.48-.33h-.29a1.07,1.07,0,0,0-.28.19,3.65,3.65,0,0,0-.36.31l-.23.24a.94.94,0,0,0-.12.22.57.57,0,0,0,0,.26V64a.86.86,0,0,1-.12.44.65.65,0,0,1-.52.15Z"/> <path fill="#fff8ec" d="M583.58,61.75a.89.89,0,0,1,.45.12,1.67,1.67,0,0,1,.33.32l.3.41a2.16,2.16,0,0,0,.39.41,2.22,2.22,0,0,0,.59.31,2.88,2.88,0,0,0,.92.12,1.82,1.82,0,0,0,1-.2.71.71,0,0,0,.31-.58,1,1,0,0,0-.09-.41.82.82,0,0,0-.32-.32,3.56,3.56,0,0,0-.7-.29,10,10,0,0,0-1.19-.32,5.34,5.34,0,0,1-1.22-.42,2.53,2.53,0,0,1-.77-.57,1.57,1.57,0,0,1-.41-.66,2.52,2.52,0,0,1-.11-.77,2.79,2.79,0,0,1,.26-1.24,2.12,2.12,0,0,1,.69-.85,2.91,2.91,0,0,1,1-.49,5.07,5.07,0,0,1,1.29-.16,4.78,4.78,0,0,1,1.55.23,3.21,3.21,0,0,1,1,.57,2.37,2.37,0,0,1,.57.76,2.27,2.27,0,0,1,.17.77.93.93,0,0,1-.18.58.89.89,0,0,1-.71.24.75.75,0,0,1-.59-.2,1.09,1.09,0,0,1-.29-.44,4,4,0,0,0-.24-.46,1.22,1.22,0,0,0-.31-.33,1.34,1.34,0,0,0-.46-.2,3.68,3.68,0,0,0-.66-.06,1.48,1.48,0,0,0-1,.28,1,1,0,0,0-.32.76,1.61,1.61,0,0,0,.06.44,1.19,1.19,0,0,0,.25.38,1.78,1.78,0,0,0,.57.32,4.35,4.35,0,0,0,1,.27,7.75,7.75,0,0,1,1.49.45,2.65,2.65,0,0,1,.9.57,1.52,1.52,0,0,1,.44.7,2.5,2.5,0,0,1,.09.77,2.24,2.24,0,0,1-.2.92,2,2,0,0,1-.63.74,3.75,3.75,0,0,1-1,.5,5.8,5.8,0,0,1-1.49.19,4.84,4.84,0,0,1-1.56-.24,4.2,4.2,0,0,1-1-.6,2.51,2.51,0,0,1-.64-.77,1.66,1.66,0,0,1-.21-.76C582.88,62,583.1,61.75,583.58,61.75Z"/> <path fill="#fff8ec" d="M598.71,61.9c0-.22,0-.34-.08-.39a.74.74,0,0,0-.36-.06h-2.72a.29.29,0,0,0-.2.07.45.45,0,0,0-.06.28v.36a.81.81,0,0,0,0,.22.43.43,0,0,0,0,.16v1.64a.42.42,0,0,1-.23.4,1.74,1.74,0,0,1-.71.12,1,1,0,0,1-.62-.14.53.53,0,0,1-.18-.42V56.87a.47.47,0,0,1,.23-.47,2,2,0,0,1,.69-.11,1.34,1.34,0,0,1,.68.13.52.52,0,0,1,.18.44v3a.39.39,0,0,0,0,.26.33.33,0,0,0,.24,0h2.88a.36.36,0,0,0,.17-.07.23.23,0,0,0,.06-.16,1.22,1.22,0,0,0,0-.27V56.8a.44.44,0,0,1,.24-.47,1.53,1.53,0,0,1,.67-.12,1.14,1.14,0,0,1,.63.13.44.44,0,0,1,.19.42v7.35a.41.41,0,0,1-.24.43,1.45,1.45,0,0,1-.65.12,1,1,0,0,1-.65-.15.46.46,0,0,1-.18-.38Z"/> <path fill="#fff8ec" d="M608.45,64.94a4.34,4.34,0,0,1-1.81-.36,3.65,3.65,0,0,1-1.24-1,4.09,4.09,0,0,1-.77-1.42,5.51,5.51,0,0,1-.27-1.71,6.41,6.41,0,0,1,.12-1.23,4.07,4.07,0,0,1,.48-1.16,4.39,4.39,0,0,1,.65-.84,3.46,3.46,0,0,1,1.76-1,6.94,6.94,0,0,1,1.2-.1,5,5,0,0,1,1.71.28,3.52,3.52,0,0,1,1.28.84,3.78,3.78,0,0,1,.8,1.35,5.35,5.35,0,0,1,.28,1.86,5.85,5.85,0,0,1-.24,1.66,3.65,3.65,0,0,1-.74,1.42,3.6,3.6,0,0,1-1.29,1A4.39,4.39,0,0,1,608.45,64.94Zm.07-1.59a2,2,0,0,0,1.71-.75,3.3,3.3,0,0,0,.57-2.09,3.77,3.77,0,0,0-.14-1,2.34,2.34,0,0,0-.42-.87,2.07,2.07,0,0,0-1.71-.74,2.49,2.49,0,0,0-1,.21,1.9,1.9,0,0,0-.72.6c-.07.11-.13.22-.19.33a2.16,2.16,0,0,0-.14.43,2.11,2.11,0,0,0-.1.5,4.09,4.09,0,0,0,0,.7,3.15,3.15,0,0,0,.59,2.08,2,2,0,0,0,1.6.64Z"/> <path fill="#fff8ec" d="M616.39,60.07V57.18a1.06,1.06,0,0,1,.08-.43.72.72,0,0,1,.38-.33,3.47,3.47,0,0,1,.89-.2,12.09,12.09,0,0,1,1.59-.07,6.17,6.17,0,0,1,1.81.24,3.55,3.55,0,0,1,1.22.63,2.3,2.3,0,0,1,.69.91,2.89,2.89,0,0,1,.21,1,2.36,2.36,0,0,1-.87,2,4,4,0,0,1-2.46.66h-1.4a.31.31,0,0,0-.19,0,.43.43,0,0,0,0,.16V64.1a.56.56,0,0,1-.2.45,1.26,1.26,0,0,1-.74.16,1.22,1.22,0,0,1-.77-.17.57.57,0,0,1-.2-.44Zm1.92,0a.42.42,0,0,0,.27.39,2.81,2.81,0,0,0,1,.12,2.17,2.17,0,0,0,1.42-.36,1.18,1.18,0,0,0,.46-1,1.2,1.2,0,0,0-.56-1.12,3.18,3.18,0,0,0-1.57-.33,2.26,2.26,0,0,0-.52,0,.76.76,0,0,0-.32.11.43.43,0,0,0-.15.2.66.66,0,0,0,0,.28Z"/> <line x1="579.44" x2="579.44" y1="42.82" y2="47.33" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round"/> <line x1="581.7" x2="577.19" y1="45.07" y2="45.07" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round"/> </g> <g class="hero-anim-with" opacity="0"> <path fill="#fff8ec" d="M576.62,403.11c.33-.54,1.12,0,.79.57-1.25,2.16-2.93,3.39-4.9,2.77a.73.73,0,0,0-.91.26,4.61,4.61,0,0,1-3.27,2,1.56,1.56,0,0,1-1.62-1.2c-.08-.35-.24-.39-.48-.15a3.57,3.57,0,0,1-2.46,1.35c-1.5,0-2.4-1-1-4.58L565,398.8a1.05,1.05,0,0,1,1.09-.74h.14c.52,0,.7.26.5.74l-2.5,6.19c-1,2.42-.34,2.4-.26,2.4,1.4,0,3-2.6,3.67-3.93l1.87-4.66a1.05,1.05,0,0,1,1-.74h.13c.53,0,.7.26.51.74l-2.49,6.2c-.92,2.3-.37,2.4-.06,2.4a2.48,2.48,0,0,0,1.64-1c.6-.64.38-.75.38-1.46a1.12,1.12,0,0,1,1-1.1c.43-.06.5-.09.7-.5a22.61,22.61,0,0,0,1.66-4.65.88.88,0,0,1,.81-.77c.39-.07.57.11.48.5a25.46,25.46,0,0,1-2.34,6.36.42.42,0,0,0,.06.59.5.5,0,0,0,.24.09C574.24,405.67,575.53,405,576.62,403.11Z"/> <path fill="#fff8ec" d="M581.66,403.11c.32-.54,1.12,0,.78.57-1.64,2.79-3.34,5-5.22,5-1.56,0-2.41-1.05-1-4.58l2.15-5.32a1,1,0,0,1,1.1-.74h.14c.52,0,.7.26.5.74l-2.5,6.19c-.88,2.16-.5,2.58,0,2.58C578.68,407.57,580.35,405.4,581.66,403.11Zm-1.18-6.4a1,1,0,1,1,1-1A1,1,0,0,1,580.48,396.71Z"/> <path fill="#fff8ec" d="M587,403.11c.32-.54,1.13,0,.78.57-1.53,2.68-3.43,5-5.53,5-1.61,0-2.48-1.05-1-4.58l2.24-5.46c.14-.36,0-.56-.38-.56h-.84c-.3,0-.41-.16-.28-.46a.59.59,0,0,1,.64-.43h.86a.79.79,0,0,0,.82-.57l.72-1.76a1,1,0,0,1,1.09-.73h.15c.52,0,.7.25.5.73l-.72,1.76c-.15.36,0,.57.37.57h.77c.3,0,.39.15.28.45a.62.62,0,0,1-.65.44h-.75a.77.77,0,0,0-.82.56L582.66,405c-.94,2.29-.46,2.56,0,2.56C583.9,407.55,585.63,405.49,587,403.11Z"/> <path fill="#fff8ec" d="M596.55,403.11c.31-.54,1.12,0,.77.57-1.59,2.75-3.33,5-5.22,5-1.46,0-2.5-.95-1-4.56l1-2.38a10.92,10.92,0,0,0,.7-2.09c0-.3-.26-.46-.58-.46a3.5,3.5,0,0,0-2,1.1,3.11,3.11,0,0,0-.61.87l-2.6,6.46a1,1,0,0,1-1.11.74h-.14c-.52,0-.7-.26-.5-.74l5.22-12.86a1,1,0,0,1,1-.73h.15c.52,0,.7.25.5.73l-1.5,3.73c-.11.24,0,.31.22.14a3.54,3.54,0,0,1,2.09-.9A1.43,1.43,0,0,1,594.5,399v.2a7.62,7.62,0,0,1-.69,2.52l-1.31,3.19c-1,2.38-.33,2.58,0,2.58C593.54,407.57,595.2,405.4,596.55,403.11Z"/> <line x1="517.5" x2="548.54" y1="402.16" y2="402.16" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10"/> <polyline fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" points="527.68 395.93 533.92 402.16 527.68 408.39"/> <polyline fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" points="535.35 395.93 541.58 402.16 535.35 408.39"/> <polyline fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" points="522.08 398.28 525.96 402.16 522.08 406.04"/> <line x1="640.98" x2="609.95" y1="402.16" y2="402.16" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10"/> <polyline fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" points="630.8 395.93 624.57 402.16 630.8 408.39"/> <polyline fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" points="623.13 395.93 616.89 402.16 623.13 408.39"/> <polyline fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" points="636.41 398.28 632.53 402.16 636.41 406.04"/> </g> <g class="hero-anim-white"> <path fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" d="M403.22,213a37,37,0,1,1-11.41-70.73c15.84,1.52,27.25,14,35.07,22.15l-3.23,4.49c-8.93,9.75-19.75,7-27.84,3-10.78-5.37-24.22.35-26.3,12.21a14.51,14.51,0,0,0-.23,1.61,18.65,18.65,0,0,0,16.5,20.56h0a19.15,19.15,0,0,0,3.86,0L409,204.88h0A10,10,0,0,1,403.22,213Z"/> <line x1="395.81" x2="409.57" y1="171.9" y2="149" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> <line x1="387.46" x2="389.24" y1="175.28" y2="142.05" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> <polyline fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" points="366.99 148.92 379.32 170.5 381.81 175.74"/> <line x1="353.33" x2="371.28" y1="168.4" y2="177.12" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> <line x1="353.72" x2="368.36" y1="189.23" y2="188.83" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> <line x1="373.48" x2="361.84" y1="199.7" y2="204.61" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> <line x1="381.34" x2="377.18" y1="205.68" y2="213.68" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> <path fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" d="M425,162.47s25.95,23.7,57.26,5.14"/> <path fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" d="M423.3,169.5a30.43,30.43,0,0,0,12.35,11.85"/> <circle cx="412.35" cy="161.66" r="2.19" fill="#fff8ec"/> <g fill="none"> <path d="M472.6,136.28a1.42,1.42,0,0,0-1.65-1.14h-.13a4,4,0,0,1-3.22-7.2,1.43,1.43,0,0,0,.65-1,1.41,1.41,0,0,0-.28-1.12,23.1,23.1,0,0,0-4.76-4.5,1.38,1.38,0,0,0-1.95.21l-.05.06a1.48,1.48,0,0,0-.13.21,4,4,0,0,1-4.93,1.85,4.1,4.1,0,0,1-2.44-4.67,1.41,1.41,0,0,0-.21-1.13,1.37,1.37,0,0,0-1-.59,23,23,0,0,0-6.57.17,1.42,1.42,0,0,0-1.12,1.67h0v.12a4,4,0,0,1-7.21,3.21,1.41,1.41,0,0,0-1.94-.45l-.12.08a23.2,23.2,0,0,0-4.51,4.77,1.37,1.37,0,0,0-.22,1.11,1.4,1.4,0,0,0,.7.91,4.13,4.13,0,0,1,1.86,4.94,4,4,0,0,1-4.68,2.44,1.4,1.4,0,0,0-1.69,1l0,.16a23.27,23.27,0,0,0,.18,6.56,2.07,2.07,0,0,0,.1.33,1.41,1.41,0,0,0,1.68.77,4,4,0,0,1,3.22,7.2,1.41,1.41,0,0,0-.46,1.94l.09.13a23.09,23.09,0,0,0,4.75,4.51,1.41,1.41,0,0,0,1.13.21,1.39,1.39,0,0,0,.91-.69,4,4,0,0,1,4.95-1.86A4.1,4.1,0,0,1,446,161.2a1.39,1.39,0,0,0,1,1.69h.17a23.19,23.19,0,0,0,6.55-.18,1.42,1.42,0,0,0,1.14-1.65v-.13a4,4,0,0,1,7.2-3.22,1.41,1.41,0,0,0,1.94.46l.13-.09a23.14,23.14,0,0,0,4.51-4.76,1.39,1.39,0,0,0-.39-1.94l-.09-.06a4.07,4.07,0,0,1-1.86-4.92A4,4,0,0,1,471,144a1.4,1.4,0,0,0,1.7-1v-.16A23.25,23.25,0,0,0,472.6,136.28Z"/> <path stroke="#fff8ec" stroke-miterlimit="10" d="M472.6,136.28a1.42,1.42,0,0,0-1.65-1.14h-.13a4,4,0,0,1-3.22-7.2,1.43,1.43,0,0,0,.65-1,1.41,1.41,0,0,0-.28-1.12,23.1,23.1,0,0,0-4.76-4.5,1.38,1.38,0,0,0-1.95.21l-.05.06a1.48,1.48,0,0,0-.13.21,4,4,0,0,1-4.93,1.85,4.1,4.1,0,0,1-2.44-4.67,1.41,1.41,0,0,0-.21-1.13,1.37,1.37,0,0,0-1-.59,23,23,0,0,0-6.57.17,1.42,1.42,0,0,0-1.12,1.67h0v.12a4,4,0,0,1-7.21,3.21,1.41,1.41,0,0,0-1.94-.45l-.12.08a23.2,23.2,0,0,0-4.51,4.77,1.37,1.37,0,0,0-.22,1.11,1.4,1.4,0,0,0,.7.91,4.13,4.13,0,0,1,1.86,4.94,4,4,0,0,1-4.68,2.44,1.4,1.4,0,0,0-1.69,1l0,.16a23.27,23.27,0,0,0,.18,6.56,2.07,2.07,0,0,0,.1.33,1.41,1.41,0,0,0,1.68.77,4,4,0,0,1,3.22,7.2,1.41,1.41,0,0,0-.46,1.94l.09.13a23.09,23.09,0,0,0,4.75,4.51,1.41,1.41,0,0,0,1.13.21,1.39,1.39,0,0,0,.91-.69,4,4,0,0,1,4.95-1.86A4.1,4.1,0,0,1,446,161.2a1.39,1.39,0,0,0,1,1.69h.17a23.19,23.19,0,0,0,6.55-.18,1.42,1.42,0,0,0,1.14-1.65v-.13a4,4,0,0,1,7.2-3.22,1.41,1.41,0,0,0,1.94.46l.13-.09a23.14,23.14,0,0,0,4.51-4.76,1.39,1.39,0,0,0-.39-1.94l-.09-.06a4.07,4.07,0,0,1-1.86-4.92A4,4,0,0,1,471,144a1.4,1.4,0,0,0,1.7-1v-.16A23.25,23.25,0,0,0,472.6,136.28Z"/> <path stroke="#fff8ec" stroke-miterlimit="10" d="M454.27,137.51a4.89,4.89,0,0,0-6.79,1.2,5,5,0,0,0-.87,3c.15,2.59,2.91,4.37,5.22,5.13,6.56,2.2,11.32-3.58,10.65-8.79-1.27-9.59-10.85-11.68-18.06-8.65-6.26,2.64-10.51,11.21-4.24,19.17,3.13,3.92,9.92,6.41,14.52,3.57"/> </g> <g fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10"> <line x1="701.95" x2="701.95" y1="153.46" y2="157.44"/> <line x1="710.1" x2="706.14" y1="161.62" y2="161.62"/> </g> <g fill="none" stroke="#fff8ec" stroke-miterlimit="10"> <path d="M712.14,250.54c-5.69,0-11.74,4.18-11.74,4.18s6.05,4.17,11.74,4.17a11.75,11.75,0,0,0,8.86-4.17A11.74,11.74,0,0,0,712.14,250.54Z"/> <polyline points="696.62 257.3 699.79 254.72 696.62 252.13"/> </g> <g fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"> <path d="M364.07,305.61a2.95,2.95,0,0,0-3.31-4.17l-2.42.52a.75.75,0,0,1-.67-.18l-1.82-1.7a2.9,2.9,0,0,0-3-.58h0a3,3,0,0,0-2,2.5l-.25,2.47a.76.76,0,0,1-.38.58l-2.17,1.2a3,3,0,0,0,.24,5.3l2.27,1a.73.73,0,0,1,.43.55l.47,2.44A2.93,2.93,0,0,0,356.6,317l1.65-1.86a.76.76,0,0,1,.65-.24l2.46.3a3,3,0,0,0,2.93-4.42L363,308.59a.76.76,0,0,1,0-.69Z"/> <path stroke-width=".5" d="M350.64,304.45s1.05,7.81,13.52,7.81"/> <path d="M395,288.22a1.73,1.73,0,0,0,.9-2.26v0a1.7,1.7,0,0,0-.8-.85l-1.3-.68a.49.49,0,0,1-.23-.33l-.16-1.45a1.74,1.74,0,0,0-1.15-1.43h0a1.73,1.73,0,0,0-1.8.4l-1,1a.43.43,0,0,1-.39.11l-1.43-.28a1.73,1.73,0,0,0-2,1.35,1.76,1.76,0,0,0,.14,1.13l.65,1.3a.43.43,0,0,1,0,.41l-.71,1.27a1.75,1.75,0,0,0,.09,1.84,1.67,1.67,0,0,0,.85.65,1.8,1.8,0,0,0,.83.08l1.44-.21a.43.43,0,0,1,.38.14l1,1a1.74,1.74,0,0,0,2.45.1,1.68,1.68,0,0,0,.54-1l.25-1.43a.42.42,0,0,1,.24-.32Z"/> <path stroke-width=".5" d="M393.78,284.43s-1.23,2.4-7.46,2.22"/> <path d="M427.08,311.3a2.47,2.47,0,0,0,1.14-3.3,2.43,2.43,0,0,0-1.14-1.14l-1.86-.94a.64.64,0,0,1-.34-.47l-.27-2.09a2.51,2.51,0,0,0-1.67-2h0a2.51,2.51,0,0,0-2.55.61,15.06,15.06,0,0,1-2,1.66l-2.09-.38a2.47,2.47,0,0,0-2.88,2,2.5,2.5,0,0,0,.24,1.59l.95,1.86a.58.58,0,0,1,0,.57l-1,1.84a2.46,2.46,0,0,0,.16,2.61,2.45,2.45,0,0,0,2.41,1l2.09-.33a.63.63,0,0,1,.55.19l1.43,1.5a2.49,2.49,0,0,0,3.51.09,2.45,2.45,0,0,0,.74-1.43l.32-2.08a.62.62,0,0,1,.34-.46Z"/> <path stroke-width=".5" d="M418.41,303.67s-2.09,3.62,6.79,8.58"/> </g> <g fill="none" stroke="#fff8ec"> <path stroke-linecap="round" stroke-linejoin="round" d="M448.23,249.31a19,19,0,0,0-24.1,2.43c-4.85,4.79,0,5.83,5.69,8.79a2.29,2.29,0,0,1,1,3.09,2.42,2.42,0,0,1-.79.86l-5.22,3.39A7.09,7.09,0,0,0,432.09,280a7.17,7.17,0,0,0,2.12-2l3.54-4.6a2.28,2.28,0,0,1,3.19-.43,2.25,2.25,0,0,1,.71.93c2.51,5.88,3.81,10.43,9.07,5.59a19.3,19.3,0,0,0-2.46-30.27Z"/> <path stroke-miterlimit="10" stroke-width=".5" d="M427.17,266.65s21.51-11.57,27.86,7"/> <g stroke-linecap="round" stroke-linejoin="round"> <path d="M368.46,241.45a16.6,16.6,0,0,0,.61,21.17c3.87,4.5,5.06.39,8-4.42a2,2,0,0,1,2.75-.64,2,2,0,0,1,.69.71l2.38,4.29a6.81,6.81,0,0,0,2.67,3,6.18,6.18,0,0,0,7-10.08l-3.79-3.36a2,2,0,0,1-.13-2.83,2.08,2.08,0,0,1,.81-.53c5.22-1.82,9.32-2.67,5.41-7.55a16.81,16.81,0,0,0-23.63-2.58A17.18,17.18,0,0,0,368.46,241.45Z"/> <path stroke-width=".5" d="M390.26,237.17a16.84,16.84,0,0,0-21.8,4.28,16.6,16.6,0,0,0,.61,21.17c3.87,4.5,5.06.39,8-4.42a2,2,0,0,1,2.75-.64,2,2,0,0,1,.69.71l.22.4s-7.12-17,9.39-21.42"/> </g> </g> <g stroke="#fff8ec"> <circle cx="742.12" cy="143.91" r="44.68" fill="#4b4b4b" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="753.51" cy="119.83" r="7" fill="none" stroke-miterlimit="10"/> <circle cx="776.83" cy="140.16" r="3.55" fill="none" stroke-miterlimit="10"/> <circle cx="754.68" cy="140.18" r="1.88" fill="none" stroke-miterlimit="10"/> <circle cx="772.72" cy="122.27" r="1.88" fill="none" stroke-miterlimit="10"/> <circle cx="763.26" cy="158.18" r="5.18" fill="none" stroke-miterlimit="10"/> </g> <g> <path fill="none" stroke="#fff8ec" stroke-miterlimit="10" d="M777.11,336.13h0a11.8,11.8,0,0,1-4.48-13.57l4.23-13.25c2.76-10.26,14.76-10,21.22-5.4l1,.71c6.46,4.62,10.69,13.35,2.18,22.09l-9,8.28a12.16,12.16,0,0,1-14.43,1.68Z"/> <path fill="none" stroke="#fff8ec" stroke-miterlimit="10" d="M790.34,336.46c4.06-4.18.51-9.31-3.53-12.19l-.68-.48c-4.33-3.14-13-5.31-14,1.66,0,0-1.17,6.09,3.76,9.84C784,341.45,790.34,336.46,790.34,336.46Z"/> <circle cx="783.43" cy="327.36" r=".64" fill="#fff8ec"/> <circle cx="777.96" cy="327.99" r=".64" fill="#fff8ec"/> <circle cx="784.89" cy="332.77" r=".64" fill="#fff8ec"/> <circle cx="779.59" cy="333.13" r=".64" fill="#fff8ec"/> </g> <g> <path fill="none" stroke="#fff8ec" stroke-miterlimit="10" d="M752.9,363.67h0a11.87,11.87,0,0,1-14.17-2.27l-9.8-9.71c-7.87-7.14-2.15-17.75,4.9-21.35l1-.55c7-3.65,16.75-3.43,20.65,8.14l3.32,11.8a12.09,12.09,0,0,1-3.06,11.9A11.91,11.91,0,0,1,752.9,363.67Z"/> <path fill="none" stroke="#fff8ec" stroke-miterlimit="10" d="M759.3,352.67c-.42-5.81-8.11-5.33-12.53-3.05L746,350c-4.73,2.44-11.16,8.93-5.42,13a11.16,11.16,0,0,0,8.73,2.15A14.47,14.47,0,0,0,758,359,9.86,9.86,0,0,0,759.3,352.67Z"/> <circle cx="750.55" cy="358.11" r="1.34" fill="#fff8ec"/> </g> <circle class="hero-anim-fade" cx="579.23" cy="253.84" r="247.5" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> </g> <g class="hero-anim-color" opacity="0"> <path class="hero-anim-draw" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" d="M409.71,73.06A246.79,246.79,0,0,1,579.31,5.89c129.12,0,235.17,98.81,246.65,225"/> <path class="hero-anim-draw-2" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" d="M822.16,302.49C799.45,415.86,699.34,501.25,579.31,501.25c-136.74,0-247.68-110.89-247.68-247.68A246.52,246.52,0,0,1,373.24,116.1" class="hero-anim-draw"/> <g class="hero-anim-prawn"> <path fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" d="M403.22,213a37,37,0,1,1-11.41-70.73c15.84,1.52,27.25,14,35.07,22.15l-3.23,4.49c-8.93,9.75-19.75,7-27.84,3-10.78-5.37-24.22.35-26.3,12.21a14.51,14.51,0,0,0-.23,1.61,18.65,18.65,0,0,0,16.5,20.56h0a19.15,19.15,0,0,0,3.86,0L409,204.88h0A10,10,0,0,1,403.22,213Z"/> <line x1="395.81" x2="409.57" y1="171.9" y2="149" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round"/> <line x1="387.46" x2="389.24" y1="175.28" y2="142.05" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round"/> <polyline fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" points="366.99 148.92 379.32 170.5 381.81 175.74"/> <line x1="353.33" x2="371.28" y1="168.4" y2="177.12" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round"/> <line x1="353.72" x2="368.36" y1="189.23" y2="188.83" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round"/> <line x1="373.48" x2="361.84" y1="199.7" y2="204.61" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round"/> <line x1="381.34" x2="377.18" y1="205.68" y2="213.68" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round"/> <path fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" class="hero-anim-feeler" d="M425,162.47s25.95,23.7,57.26,5.14"/> <path fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" class="hero-anim-feeler" d="M423.3,169.5a30.43,30.43,0,0,0,12.35,11.85"/> <circle cx="412.35" cy="161.66" r="2.19" fill="#ee5b68"/> </g> <g class="hero-anim-fishcake"> <g class="hero-anim-f0d7d68b-e1e1-4e17-9564-09581cd5b414"> <path fill="#ffe895" d="M472.6,136.28a1.42,1.42,0,0,0-1.65-1.14h-.13a4,4,0,0,1-3.22-7.2,1.43,1.43,0,0,0,.65-1,1.41,1.41,0,0,0-.28-1.12,23.1,23.1,0,0,0-4.76-4.5,1.38,1.38,0,0,0-1.95.21l-.05.06a1.48,1.48,0,0,0-.13.21,4,4,0,0,1-4.93,1.85,4.1,4.1,0,0,1-2.44-4.67,1.41,1.41,0,0,0-.21-1.13,1.37,1.37,0,0,0-1-.59,23,23,0,0,0-6.57.17,1.42,1.42,0,0,0-1.12,1.67h0v.12a4,4,0,0,1-7.21,3.21,1.41,1.41,0,0,0-1.94-.45l-.12.08a23.2,23.2,0,0,0-4.51,4.77,1.37,1.37,0,0,0-.22,1.11,1.4,1.4,0,0,0,.7.91,4.13,4.13,0,0,1,1.86,4.94,4,4,0,0,1-4.68,2.44,1.4,1.4,0,0,0-1.69,1l0,.16a23.27,23.27,0,0,0,.18,6.56,2.07,2.07,0,0,0,.1.33,1.41,1.41,0,0,0,1.68.77,4,4,0,0,1,3.22,7.2,1.41,1.41,0,0,0-.46,1.94l.09.13a23.09,23.09,0,0,0,4.75,4.51,1.41,1.41,0,0,0,1.13.21,1.39,1.39,0,0,0,.91-.69,4,4,0,0,1,4.95-1.86A4.1,4.1,0,0,1,446,161.2a1.39,1.39,0,0,0,1,1.69h.17a23.19,23.19,0,0,0,6.55-.18,1.42,1.42,0,0,0,1.14-1.65v-.13a4,4,0,0,1,7.2-3.22,1.41,1.41,0,0,0,1.94.46l.13-.09a23.14,23.14,0,0,0,4.51-4.76,1.39,1.39,0,0,0-.39-1.94l-.09-.06a4.07,4.07,0,0,1-1.86-4.92A4,4,0,0,1,471,144a1.4,1.4,0,0,0,1.7-1v-.16A23.25,23.25,0,0,0,472.6,136.28Z"/> <path fill="none" stroke="#f4b67f" stroke-miterlimit="10" d="M472.6,136.28a1.42,1.42,0,0,0-1.65-1.14h-.13a4,4,0,0,1-3.22-7.2,1.43,1.43,0,0,0,.65-1,1.41,1.41,0,0,0-.28-1.12,23.1,23.1,0,0,0-4.76-4.5,1.38,1.38,0,0,0-1.95.21l-.05.06a1.48,1.48,0,0,0-.13.21,4,4,0,0,1-4.93,1.85,4.1,4.1,0,0,1-2.44-4.67,1.41,1.41,0,0,0-.21-1.13,1.37,1.37,0,0,0-1-.59,23,23,0,0,0-6.57.17,1.42,1.42,0,0,0-1.12,1.67h0v.12a4,4,0,0,1-7.21,3.21,1.41,1.41,0,0,0-1.94-.45l-.12.08a23.2,23.2,0,0,0-4.51,4.77,1.37,1.37,0,0,0-.22,1.11,1.4,1.4,0,0,0,.7.91,4.13,4.13,0,0,1,1.86,4.94,4,4,0,0,1-4.68,2.44,1.4,1.4,0,0,0-1.69,1l0,.16a23.27,23.27,0,0,0,.18,6.56,2.07,2.07,0,0,0,.1.33,1.41,1.41,0,0,0,1.68.77,4,4,0,0,1,3.22,7.2,1.41,1.41,0,0,0-.46,1.94l.09.13a23.09,23.09,0,0,0,4.75,4.51,1.41,1.41,0,0,0,1.13.21,1.39,1.39,0,0,0,.91-.69,4,4,0,0,1,4.95-1.86A4.1,4.1,0,0,1,446,161.2a1.39,1.39,0,0,0,1,1.69h.17a23.19,23.19,0,0,0,6.55-.18,1.42,1.42,0,0,0,1.14-1.65v-.13a4,4,0,0,1,7.2-3.22,1.41,1.41,0,0,0,1.94.46l.13-.09a23.14,23.14,0,0,0,4.51-4.76,1.39,1.39,0,0,0-.39-1.94l-.09-.06a4.07,4.07,0,0,1-1.86-4.92A4,4,0,0,1,471,144a1.4,1.4,0,0,0,1.7-1v-.16A23.25,23.25,0,0,0,472.6,136.28Z"/> </g> <path fill="none" stroke="#f4b67f" stroke-miterlimit="10" d="M454.27,137.51a4.89,4.89,0,0,0-6.79,1.2,5,5,0,0,0-.87,3c.15,2.59,2.91,4.37,5.22,5.13,6.56,2.2,11.32-3.58,10.65-8.79-1.27-9.59-10.85-11.68-18.06-8.65-6.26,2.64-10.51,11.21-4.24,19.17,3.13,3.92,9.92,6.41,14.52,3.57"/> </g> <g class="hero-anim-sparkles" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10"> <g> <line x1="701.95" x2="701.95" y1="153.46" y2="157.44"/> <line x1="701.95" x2="701.95" y1="165.8" y2="169.78"/> <line x1="710.1" x2="706.14" y1="161.62" y2="161.62"/> <line x1="697.77" x2="693.8" y1="161.62" y2="161.62"/> </g> <g> <line x1="797.71" x2="797.71" y1="201.96" y2="205.93"/> <line x1="797.71" x2="797.71" y1="214.29" y2="218.27"/> <line x1="805.86" x2="801.88" y1="210.11" y2="210.11"/> <line x1="793.52" x2="789.56" y1="210.11" y2="210.11"/> </g> <g> <line x1="666.5" x2="666.5" y1="104.8" y2="108.23"/> <line x1="666.5" x2="666.5" y1="115.45" y2="118.88"/> <line x1="673.55" x2="670.12" y1="111.85" y2="111.85"/> <line x1="662.9" x2="659.47" y1="111.85" y2="111.85"/> </g> <g> <line x1="755.54" x2="755.54" y1="220.73" y2="223.55"/> <line x1="755.54" x2="755.54" y1="229.49" y2="232.31"/> <line x1="761.33" x2="758.51" y1="226.53" y2="226.53"/> <line x1="752.57" x2="749.75" y1="226.53" y2="226.53"/> </g> </g> <g class="hero-anim-fishes" stroke="#ee5b68" stroke-miterlimit="10"> <g class="hero-anim-fish"> <path fill="#f2b29c" d="M838.52,250.54c5.69,0,11.74,4.18,11.74,4.18s-6,4.17-11.74,4.17a11.7,11.7,0,0,1-8.86-4.17A11.74,11.74,0,0,1,838.52,250.54Z"/> <polyline fill="none" points="854.04 257.3 850.88 254.72 854.04 252.13"/> </g> <path fill="#f2b29c" d="M712.14,250.54c-5.69,0-11.74,4.18-11.74,4.18s6.05,4.17,11.74,4.17a11.75,11.75,0,0,0,8.86-4.17A11.74,11.74,0,0,0,712.14,250.54Z"/> <polyline fill="none" points="696.62 257.3 699.79 254.72 696.62 252.13"/> </g> <g class="hero-anim-flowers" stroke="#f4b67f" stroke-linecap="round" stroke-linejoin="round"> <path fill="#fff6b3" d="M364.07,305.61a2.95,2.95,0,0,0-3.31-4.17l-2.42.52a.75.75,0,0,1-.67-.18l-1.82-1.7a2.9,2.9,0,0,0-3-.58h0a3,3,0,0,0-2,2.5l-.25,2.47a.76.76,0,0,1-.38.58l-2.17,1.2a3,3,0,0,0,.24,5.3l2.27,1a.73.73,0,0,1,.43.55l.47,2.44A2.93,2.93,0,0,0,356.6,317l1.65-1.86a.76.76,0,0,1,.65-.24l2.46.3a3,3,0,0,0,2.93-4.42L363,308.59a.76.76,0,0,1,0-.69Z"/> <path fill="none" stroke-width=".5" d="M350.64,304.45s1.05,7.81,13.52,7.81"/> <path fill="#fff6b3" d="M395,288.22a1.73,1.73,0,0,0,.9-2.26v0a1.7,1.7,0,0,0-.8-.85l-1.3-.68a.49.49,0,0,1-.23-.33l-.16-1.45a1.74,1.74,0,0,0-1.15-1.43h0a1.73,1.73,0,0,0-1.8.4l-1,1a.43.43,0,0,1-.39.11l-1.43-.28a1.73,1.73,0,0,0-2,1.35,1.76,1.76,0,0,0,.14,1.13l.65,1.3a.43.43,0,0,1,0,.41l-.71,1.27a1.75,1.75,0,0,0,.09,1.84,1.67,1.67,0,0,0,.85.65,1.8,1.8,0,0,0,.83.08l1.44-.21a.43.43,0,0,1,.38.14l1,1a1.74,1.74,0,0,0,2.45.1,1.68,1.68,0,0,0,.54-1l.25-1.43a.42.42,0,0,1,.24-.32Z"/> <path fill="none" stroke-width=".5" d="M393.78,284.43s-1.23,2.4-7.46,2.22"/> <path fill="#fff6b3" d="M427.08,311.3a2.47,2.47,0,0,0,1.14-3.3,2.43,2.43,0,0,0-1.14-1.14l-1.86-.94a.64.64,0,0,1-.34-.47l-.27-2.09a2.51,2.51,0,0,0-1.67-2h0a2.51,2.51,0,0,0-2.55.61,15.06,15.06,0,0,1-2,1.66l-2.09-.38a2.47,2.47,0,0,0-2.88,2,2.5,2.5,0,0,0,.24,1.59l.95,1.86a.58.58,0,0,1,0,.57l-1,1.84a2.46,2.46,0,0,0,.16,2.61,2.45,2.45,0,0,0,2.41,1l2.09-.33a.63.63,0,0,1,.55.19l1.43,1.5a2.49,2.49,0,0,0,3.51.09,2.45,2.45,0,0,0,.74-1.43l.32-2.08a.62.62,0,0,1,.34-.46Z"/> <path fill="none" stroke-width=".5" d="M418.41,303.67s-2.09,3.62,6.79,8.58"/> </g> <g class="hero-anim-shrooms"> <g stroke="#c9bde0"> <path fill="#9683ba" stroke-linecap="round" stroke-linejoin="round" d="M448.23,249.31a19,19,0,0,0-24.1,2.43c-4.85,4.79,0,5.83,5.69,8.79a2.29,2.29,0,0,1,1,3.09,2.42,2.42,0,0,1-.79.86l-5.22,3.39A7.09,7.09,0,0,0,432.09,280a7.17,7.17,0,0,0,2.12-2l3.54-4.6a2.28,2.28,0,0,1,3.19-.43,2.25,2.25,0,0,1,.71.93c2.51,5.88,3.81,10.43,9.07,5.59a19.3,19.3,0,0,0-2.46-30.27Z"/> <path fill="none" stroke-miterlimit="10" stroke-width=".5" d="M427.17,266.65s21.51-11.57,27.86,7"/> </g> <g stroke="#9683ba" stroke-linecap="round" stroke-linejoin="round"> <path fill="#c9bde0" d="M368.46,241.45a16.6,16.6,0,0,0,.61,21.17c3.87,4.5,5.06.39,8-4.42a2,2,0,0,1,2.75-.64,2,2,0,0,1,.69.71l2.38,4.29a6.81,6.81,0,0,0,2.67,3,6.18,6.18,0,0,0,7-10.08l-3.79-3.36a2,2,0,0,1-.13-2.83,2.08,2.08,0,0,1,.81-.53c5.22-1.82,9.32-2.67,5.41-7.55a16.81,16.81,0,0,0-23.63-2.58A17.18,17.18,0,0,0,368.46,241.45Z"/> <path fill="none" stroke-width=".5" d="M390.26,237.17a16.84,16.84,0,0,0-21.8,4.28,16.6,16.6,0,0,0,.61,21.17c3.87,4.5,5.06.39,8-4.42a2,2,0,0,1,2.75-.64,2,2,0,0,1,.69.71l.22.4s-7.12-17,9.39-21.42"/> </g> </g> <g class="hero-anim-fork" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"> <path class="hero-anim-Stroke-1" d="M181,293.76,103.79,614.22"/> <path class="hero-anim-Stroke-3" d="M162.13,165.71c-.35,1.2-13.92,57.24-14.19,58.36-7.75,32.2,7.38,63.49,33.84,69.89s54.18-14.53,61.94-46.72C244,246.1,257.4,190,257.63,188.8"/> <path class="hero-anim-Stroke-5" d="M209.89,177.26l-11.13,44"/> <path class="hero-anim-Stroke-7" d="M151.49,211l94.8,21.69"/> </g> <g class="hero-anim-knife" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"> <path class="hero-anim-Stroke-1-2" d="M1010.38,369.13,1167.5,636.4"/> <path class="hero-anim-Stroke-3-2" d="M916.82,327c-24.28-44-15.28-95.43,9.71-109.82L1015,377.43C989.42,390.85,941.09,371,916.82,327Z"/> </g> <path class="hero-anim-draw-fish" fill="none" stroke="#fff6b3" stroke-miterlimit="10" d="M852.26,261.92a23.2,23.2,0,0,1-46.38,0,21.42,21.42,0,0,1,.32-3.75c1.95-11.11,17.86-10.77,19.48.4a23.71,23.71,0,0,1,.24,3.57v-.22a23.19,23.19,0,0,1-46.37,0,22.42,22.42,0,0,1,.32-3.75c1.94-11.11,17.86-10.77,19.48.4a23.19,23.19,0,0,1-19.61,26.3c-.52.07-1,.13-1.57.17a23.19,23.19,0,0,1-24.89-21.36h0c0-.59-.07-1.17-.07-1.76v-.82a20.64,20.64,0,0,1,.3-2.93c2-11.11,17.87-10.77,19.48.4a22.4,22.4,0,0,1,.23,4.25v-.9a23.19,23.19,0,0,1-46.37,0,21.42,21.42,0,0,1,.32-3.75c2-11.11,17.87-10.77,19.49.4a23.86,23.86,0,0,1,.19,4.78,23.19,23.19,0,0,1-46.3-1.43"/> <ellipse class="hero-anim-draw-pretzel" cx="571.79" cy="478.89" fill="none" stroke="#82cdb2" stroke-miterlimit="10" stroke-width="1" rx="17.33" ry="25.2" transform="rotate(-43.73 571.796196 478.88323)"/> <ellipse class="hero-anim-draw-pretzel-2" cx="586.63" cy="478.77" fill="none" stroke="#82cdb2" stroke-miterlimit="10" stroke-width="1" class="hero-anim-draw-pretzel" rx="25.2" ry="17.33" transform="rotate(-46.27 586.631577 478.776072)"/> <line class="hero-anim-draw-center" x1="449.79" x2="321.7" y1="84.12" y2="84.12" fill="none" stroke="#bfe6c7" stroke-linecap="round" stroke-linejoin="round"/> <line x1="305.17" x2="466.33" y1="94.17" y2="94.17" fill="none" stroke="#bfe6c7" stroke-linecap="round" stroke-linejoin="round" class="hero-anim-draw-center"/> <line x1="321.7" x2="449.79" y1="104.24" y2="104.24" fill="none" stroke="#bfe6c7" stroke-linecap="round" stroke-linejoin="round" class="hero-anim-draw-center"/> <path fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" d="M749,73.06S615.4,53.51,579.43,105.21c-35.94-51.7-169.57-32.15-169.57-32.15" class="hero-anim-draw-center"/> <line class="hero-anim-draw-stagger" x1="579.38" x2="579.38" y1="80.37" y2="105.14" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10"/> <polyline fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" points="573.15 90.56 579.38 96.79 585.61 90.56" class="hero-anim-draw-stagger"/> <polyline fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" points="575.51 84.95 579.38 88.83 583.26 84.95" class="hero-anim-draw-stagger"/> <path class="hero-anim-draw-left" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width=".5" d="M409.71,73.06s45.85-26.57,109.06-28"/> <path class="hero-anim-draw-right" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width=".5" d="M748.9,73.06s-45.84-26.57-109-28"/> <g class="hero-anim-cookie" stroke="#a48872"> <path fill="#ffca6c" stroke-linecap="round" stroke-linejoin="round" d="M783.56,158.4a44.93,44.93,0,0,0,2-19.5,44,44,0,0,0-85.73-7.44l-.41,1.27a12.35,12.35,0,0,1,17-3.81c5.47,3.47,5.35,10.84,2.28,16.54,0,0,11.16-4.55,16.32,2.39,4.13,6.2,1.48,13.6,1.48,13.6s14.81.34,17.89,12.34c2.39,9.3-3.94,13.47-3.94,13.47S775.22,183.14,783.56,158.4Z"/> <path class="hero-anim-munch" fill="#ffca6c" stroke-linecap="round" stroke-linejoin="round" d="M741.85,99.46a44.29,44.29,0,0,0-39.31,64.75,27.83,27.83,0,0,1,6.16-11.36c7.73-8.78,18.88-11.59,24.91-6.29,3.75,3.3,4.64,9,2.92,14.89,10.17.25,18.33,7.18,18.33,15.72a14.26,14.26,0,0,1-4.38,10.09,44.32,44.32,0,0,0-8.63-87.8Z"/> <path class="hero-anim-munch" fill="#ffca6c" stroke-linecap="round" stroke-linejoin="round" d="M741.85,99.46a44.32,44.32,0,0,0-24.21,81.44,13.26,13.26,0,0,1-.56-3.73c0-8.69,8.46-15.74,18.89-15.74s18.89,7,18.89,15.74a14.26,14.26,0,0,1-4.38,10.09,44.32,44.32,0,0,0-8.63-87.8Z"/> <circle class="hero-anim-munch" cx="741.85" cy="143.71" r="44.32" fill="#ffca6c" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="753.51" cy="119.83" r="7" fill="none" stroke-miterlimit="10"/> <circle cx="776.83" cy="140.16" r="3.55" fill="none" stroke-miterlimit="10"/> <circle cx="754.68" cy="140.18" r="1.88" fill="none" stroke-miterlimit="10"/> <circle cx="772.72" cy="122.27" r="1.88" fill="none" stroke-miterlimit="10"/> <circle cx="763.26" cy="158.18" r="5.18" fill="none" stroke-miterlimit="10"/> </g> <g class="hero-anim-pepper"> <path fill="#9da2a7" stroke="#d9dacb" stroke-miterlimit="10" d="M777.11,336.13h0a11.8,11.8,0,0,1-4.48-13.57l4.23-13.25c2.76-10.26,14.76-10,21.22-5.4l1,.71c6.46,4.62,10.69,13.35,2.18,22.09l-9,8.28a12.16,12.16,0,0,1-14.43,1.68Z"/> <path fill="#d9dacb" d="M790.34,336.46c4.06-4.18.51-9.31-3.53-12.19l-.68-.48c-4.33-3.14-13-5.31-14,1.66,0,0-1.17,6.09,3.76,9.84C784,341.45,790.34,336.46,790.34,336.46Z"/> <circle cx="783.43" cy="327.36" r=".64" fill="#4b4b4b"/> <circle cx="777.96" cy="327.99" r=".64" fill="#4b4b4b"/> <circle cx="784.89" cy="332.77" r=".64" fill="#4b4b4b"/> <circle cx="779.59" cy="333.13" r=".64" fill="#4b4b4b"/> </g> <g class="hero-anim-salt"> <path fill="#9da2a7" stroke="#d9dacb" stroke-miterlimit="10" d="M752.9,363.67h0a11.87,11.87,0,0,1-14.17-2.27l-9.8-9.71c-7.87-7.14-2.15-17.75,4.9-21.35l1-.55c7-3.65,16.75-3.43,20.65,8.14l3.32,11.8a12.09,12.09,0,0,1-3.06,11.9A11.91,11.91,0,0,1,752.9,363.67Z"/> <path fill="#d9dacb" d="M759.3,352.67c-.42-5.81-8.11-5.33-12.53-3.05L746,350c-4.73,2.44-11.16,8.93-5.42,13a11.16,11.16,0,0,0,8.73,2.15A14.47,14.47,0,0,0,758,359,9.86,9.86,0,0,0,759.3,352.67Z"/> <circle cx="750.55" cy="358.11" r="1.34" fill="#4b4b4b"/> </g> <g class="hero-anim-salts" fill="#fff8ec"> <circle opacity="0" cx="770.72" cy="343.48" r="1.02"/> <circle opacity="0" cx="785.75" cy="350.31" r="1.02"/> <circle opacity="0" cx="771.06" cy="358.5" r="1.02"/> <circle opacity="0" cx="750.31" cy="379.66" r="1.02"/> <circle opacity="0" cx="750.27" cy="392.02" r="1.02"/> <circle opacity="0" cx="762.34" cy="386.85" r="1.02"/> <circle opacity="0" cx="771.67" cy="375.18" r="1.02"/> <circle opacity="0" cx="718.46" cy="376.27" r="1.02"/> <circle opacity="0" cx="765.25" cy="402.31" r="1.02"/> <circle opacity="0" cx="734.88" cy="378.1" r="1.02"/> <circle opacity="0" cx="720.72" cy="364.45" r="1.02"/> <circle opacity="0" cx="783.87" cy="362.77" r="1.02"/> <circle opacity="0" cx="758.76" cy="369.43" r="1.02"/> </g> <g class="hero-anim-leaf" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round"> <path fill="#bfe6c7" d="M407.45,353.56l7.82,2.59h0L412.68,364a14.1,14.1,0,0,1-17.79,9h0L387,370.34h0l2.59-7.82a14.1,14.1,0,0,1,17.79-9h0Z"/> <path fill="none" stroke-width=".5" d="M414.58,356.44s-7.69,13.76-27.19,13.81c0,0,9.58-4.43,13.56-12.28"/> </g> <g class="hero-anim-leaf-2" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" class="hero-anim-leaf"> <path fill="#bfe6c7" d="M661.82,360.37l2.23-5.79h0l5.8,2.23a10.62,10.62,0,0,1,6.08,13.73h0l-2.23,5.79h0l-5.8-2.23A10.62,10.62,0,0,1,661.82,360.37Z"/> <path fill="none" stroke-width=".5" d="M664.25,355.14s10.06,6.26,9.39,20.94c0,0-3-7.36-8.73-10.63"/> </g> <g class="hero-anim-leaf-3" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" class="hero-anim-leaf"> <path fill="#bfe6c7" d="M381.07,329.38l4.27-7.06h0l7.05,4.27A14.11,14.11,0,0,1,397.2,346l0,0-4.27,7h0l-7-4.27a14.1,14.1,0,0,1-4.83-19.35Z"/> <path fill="none" stroke-width=".5" d="M385.36,323s11.65,10.44,7.31,29.47c0,0-2-10.12-8.79-15.73"/> </g> <path class="hero-anim-draw-plant" fill="none" stroke="#82cdb2" stroke-miterlimit="10" d="M765.62,416.63c-39.31-31.07-109.07-49.51-186.13-49.51-77.56,0-148.57,17.14-187.88,48.24-18.22-38.29,4.68-82,30.88-88.92"/> <path class="hero-anim-draw-plant-2" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" d="M625.23,339.88c8.62,16.62,27.35,30.88,62.17,40.37" class="hero-anim-draw-plant"/> <g class="hero-anim-decorations" fill="none" stroke="#fff8ec"> <g stroke-linecap="round" stroke-linejoin="round"> <path stroke-width="1.96" d="M1030.2,697.86a4.45,4.45,0,0,0,3.3,5.34,4.51,4.51,0,0,0,2.83-.27l3.41-1.53a1.1,1.1,0,0,1,1,.07l3.19,1.93a4.42,4.42,0,0,0,4.67,0h0a4.4,4.4,0,0,0,2-4.22l-.4-3.71a1.18,1.18,0,0,1,.36-1l2.83-2.42a4.45,4.45,0,0,0-2-7.73l-3.64-.76a1.09,1.09,0,0,1-.8-.66l-1.43-3.42a4.44,4.44,0,0,0-5.81-2.38,4.12,4.12,0,0,0-.66.34,4.31,4.31,0,0,0-1.45,1.52l-1.86,3.22a1.1,1.1,0,0,1-.88.54l-3.72.3a4.44,4.44,0,0,0-3,7.43l2.52,2.79a1.08,1.08,0,0,1,.26,1Z"/> <path stroke-width=".98" d="M1050.25,695.41s-3.92-11.12-22.22-7.29"/> <path stroke-width="3" d="M1030.2,697.86a4.45,4.45,0,0,0,3.3,5.34,4.51,4.51,0,0,0,2.83-.27l3.41-1.53a1.1,1.1,0,0,1,1,.07l3.19,1.93a4.42,4.42,0,0,0,4.67,0h0a4.4,4.4,0,0,0,2-4.22l-.4-3.71a1.18,1.18,0,0,1,.36-1l2.83-2.42a4.45,4.45,0,0,0-2-7.73l-3.64-.76a1.09,1.09,0,0,1-.8-.66l-1.43-3.42a4.44,4.44,0,0,0-5.81-2.38,4.12,4.12,0,0,0-.66.34,4.31,4.31,0,0,0-1.45,1.52l-1.86,3.22a1.1,1.1,0,0,1-.88.54l-3.72.3a4.44,4.44,0,0,0-3,7.43l2.52,2.79a1.08,1.08,0,0,1,.26,1Z"/> <path d="M1050.25,695.41s-3.92-11.12-22.22-7.29"/> </g> <g stroke-linecap="round" stroke-linejoin="round"> <path stroke-width="1.96" d="M864.68,456.67a4.44,4.44,0,0,0,7-3.74l-.12-3.73a1.09,1.09,0,0,1,.46-.92l3-2.22a4.38,4.38,0,0,0,1.73-4.32h0a4.38,4.38,0,0,0-3.13-3.49L870,437.2a1.13,1.13,0,0,1-.74-.69L868.15,433a4.45,4.45,0,0,0-5.6-2.85,4.52,4.52,0,0,0-2.28,1.71l-2.09,3.08a1.1,1.1,0,0,1-.91.48h-3.71a4.46,4.46,0,0,0-4.42,4.47,4.53,4.53,0,0,0,.07.74,4.27,4.27,0,0,0,.85,1.92l2.28,2.95a1.15,1.15,0,0,1,.16,1l-1.14,3.55a4.44,4.44,0,0,0,5.75,5.55l3.54-1.26a1.11,1.11,0,0,1,1,.13Z"/> <path stroke-width=".98" d="M870,437.2s-11.77-.6-15.19,17.77"/> <path stroke-width="2" d="M864.68,456.67a4.44,4.44,0,0,0,7-3.74l-.12-3.73a1.09,1.09,0,0,1,.46-.92l3-2.22a4.38,4.38,0,0,0,1.73-4.32h0a4.38,4.38,0,0,0-3.13-3.49L870,437.2a1.13,1.13,0,0,1-.74-.69L868.15,433a4.45,4.45,0,0,0-5.6-2.85,4.52,4.52,0,0,0-2.28,1.71l-2.09,3.08a1.1,1.1,0,0,1-.91.48h-3.71a4.46,4.46,0,0,0-4.42,4.47,4.53,4.53,0,0,0,.07.74,4.27,4.27,0,0,0,.85,1.92l2.28,2.95a1.15,1.15,0,0,1,.16,1l-1.14,3.55a4.44,4.44,0,0,0,5.75,5.55l3.54-1.26a1.11,1.11,0,0,1,1,.13Z"/> <path d="M870,437.2s-11.77-.6-15.19,17.77"/> </g> <g stroke-linecap="round" stroke-linejoin="round"> <path stroke-width="2" d="M966.38,479.32l13.83-3.67h0l3.5,13.32c3.3,12.57-4.62,25.57-17.69,29h0l-13.85,3.67h0l-3.5-13.32c-3.3-12.57,4.62-25.57,17.7-29Z"/> <path d="M979.44,476.45s1.64,26.1-26.78,44.27c0,0,9.81-14.63,8.3-29.25"/> </g> <g> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M257.21,437.69a24.55,24.55,0,0,0-3.6,31.18c4.78,7.31,7.46,1.45,12.85-5.08a3,3,0,0,1,4.21-.48h0a2.85,2.85,0,0,1,.88,1.18l2.9,7.47a9.11,9.11,0,0,0,11.7,5.39l.14-.05a9.36,9.36,0,0,0,5.7-11.81,8.75,8.75,0,0,0-1.83-3l-4.9-5.62a3,3,0,0,1,.38-4.18A3.16,3.16,0,0,1,287,452c8.23-1.73,14.45-2.28,9.69-10.14-7.08-11.7-22.57-15.27-34.6-8A26.59,26.59,0,0,0,257.21,437.69Z"/> <path stroke-miterlimit="10" d="M273.57,468.65s-8.81-30.14,16.79-33.64"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M1102.57,231.37c-14.1-1.63-27,6.28-30.67,18.88-2.88,9.4,4.42,7.61,14.41,7.75a3.67,3.67,0,0,1,3.67,3.38,3,3,0,0,1-.39,1.62l-4.46,7.85c-2.94,4.84-1,11.21,4.3,14.22s12,1.53,15-3.32a9.38,9.38,0,0,0,1.3-3.76l1.28-8.3a3.34,3.34,0,0,1,3.91-2.63l.09,0a3.84,3.84,0,0,1,1.65.73c7.87,6,13.13,11.13,16.52,1.37,5-14.52-3.65-30.72-19.4-36.19A33,33,0,0,0,1102.57,231.37Z"/> <path stroke-miterlimit="10" d="M1087.42,267.72s20.21-29.1,43-9"/> </g> <g stroke-linecap="round" stroke-linejoin="round"> <path stroke-width="1.96" d="M203.91,635.38a5.54,5.54,0,0,0,2.19-9.7l-3.62-2.94a1.41,1.41,0,0,1-.51-1.18l.36-4.66a5.51,5.51,0,0,0-2.68-5.18h0a5.53,5.53,0,0,0-5.87.12l-3.91,2.53a1.44,1.44,0,0,1-1.26.14l-4.3-1.78a5.55,5.55,0,0,0-7.52,6.53l1.2,4.51a1.35,1.35,0,0,1-.28,1.25l-3,3.53a5.56,5.56,0,0,0,.62,7.84h0a6.46,6.46,0,0,0,.75.54,5.34,5.34,0,0,0,2.52.76l4.65.25a1.44,1.44,0,0,1,1.1.68l2.43,4a5.54,5.54,0,0,0,10-.91l1.69-4.38a1.33,1.33,0,0,1,1-.85Z"/> <path stroke-width=".98" d="M189.85,614.39s-10.2,10.66,4.41,28.92"/> <path stroke-width="2" d="M203.91,635.38a5.54,5.54,0,0,0,2.19-9.7l-3.62-2.94a1.41,1.41,0,0,1-.51-1.18l.36-4.66a5.51,5.51,0,0,0-2.68-5.18h0a5.53,5.53,0,0,0-5.87.12l-3.91,2.53a1.44,1.44,0,0,1-1.26.14l-4.3-1.78a5.55,5.55,0,0,0-7.52,6.53l1.2,4.51a1.35,1.35,0,0,1-.28,1.25l-3,3.53a5.56,5.56,0,0,0,.62,7.84h0a6.46,6.46,0,0,0,.75.54,5.34,5.34,0,0,0,2.52.76l4.65.25a1.44,1.44,0,0,1,1.1.68l2.43,4a5.54,5.54,0,0,0,10-.91l1.69-4.38a1.33,1.33,0,0,1,1-.85Z"/> <path d="M189.85,614.39s-10.2,10.66,4.41,28.92"/> </g> <g stroke-linecap="round" stroke-linejoin="round"> <path stroke-width="1.96" d="M16.14,365.34a4.44,4.44,0,0,0,3.31,5.34,4.49,4.49,0,0,0,2.82-.27l3.41-1.52a1.1,1.1,0,0,1,1,.06l3.2,1.94a4.4,4.4,0,0,0,4.66,0h0a4.42,4.42,0,0,0,2-4.23L36.15,363a1.11,1.11,0,0,1,.35-.94l2.83-2.43a4.44,4.44,0,0,0-2-7.72l-3.64-.77a1.09,1.09,0,0,1-.8-.66L31.56,347a4.43,4.43,0,0,0-5.79-2.4h0a5.13,5.13,0,0,0-.66.34,4.31,4.31,0,0,0-1.45,1.52l-1.86,3.23a1.15,1.15,0,0,1-.88.54l-3.72.29A4.43,4.43,0,0,0,14.24,358l2.51,2.79a1.08,1.08,0,0,1,.26,1Z"/> <path stroke-width=".98" d="M36.19,362.89S32.27,351.77,14,355.6"/> <path stroke-width="2" d="M16.14,365.34a4.44,4.44,0,0,0,3.31,5.34,4.49,4.49,0,0,0,2.82-.27l3.41-1.52a1.1,1.1,0,0,1,1,.06l3.2,1.94a4.4,4.4,0,0,0,4.66,0h0a4.42,4.42,0,0,0,2-4.23L36.15,363a1.11,1.11,0,0,1,.35-.94l2.83-2.43a4.44,4.44,0,0,0-2-7.72l-3.64-.77a1.09,1.09,0,0,1-.8-.66L31.56,347a4.43,4.43,0,0,0-5.79-2.4h0a5.13,5.13,0,0,0-.66.34,4.31,4.31,0,0,0-1.45,1.52l-1.86,3.23a1.15,1.15,0,0,1-.88.54l-3.72.29A4.43,4.43,0,0,0,14.24,358l2.51,2.79a1.08,1.08,0,0,1,.26,1Z"/> <path d="M36.19,362.89S32.27,351.77,14,355.6"/> </g> <g stroke-linecap="round" stroke-linejoin="round"> <path stroke-width="2" d="M52.13,120.45,52.52,104h0l15.78.41c14.91.38,26.69,13.26,26.33,28.77h0l-.39,16.42h0l-15.79-.4c-14.9-.38-26.69-13.26-26.32-28.77Z"/> <path d="M53.15,105.14s29.27,6.53,40.2,43.65c0,0-13-15.48-29.56-18.49"/> </g> </g> </g> </svg> <svg class="hero-anim hero-anim--mobile" preserveAspectRatio="xMidYMid slice" viewBox="50 0 540 500"> <g class="hero-anim-text"> <path d="M241.06,172c7.15,0,12.34-4.15,12.34-9.87,0-7.14-6.35-9.14-12-10.9-5.38-1.69-8.65-3-8.65-6.41,0-3.13,3-5.16,7.75-5.16,3.19,0,6.4.92,8.16,2.33a2,2,0,0,0,2.81-.35v0l.08-.1a2.09,2.09,0,0,0-.34-2.77c-2.24-2-6.57-3.36-10.53-3.36-7.53,0-12.4,3.7-12.4,9.43,0,6.68,6.16,8.66,11.6,10.4,5.6,1.8,9,3.16,9,6.85,0,4.15-4.71,5.66-7.88,5.66a15.14,15.14,0,0,1-9.88-3.17,2.08,2.08,0,0,0-2.92.11l-.08.08a2.27,2.27,0,0,0-.52,1.67,2,2,0,0,0,.64,1.26C231.14,170.44,235.79,172,241.06,172Z" fill="#fff8ec"/> <path d="M262.86,171.69a2.12,2.12,0,0,0,2.14-2.1V143.7l12.09,14.77a2,2,0,0,0,3.25,0L292,143.84v25.72a2.2,2.2,0,0,0,4.4,0V138a2,2,0,0,0-1.79-2.19h-.28a2.93,2.93,0,0,0-2.25,1.43L278.84,153.9l-13.77-16.73a2.83,2.83,0,0,0-2.25-1.37,2.11,2.11,0,0,0-2.15,2.07c0,.07,0,.13,0,.2v31.51a2.12,2.12,0,0,0,2.13,2.11Z" fill="#fff8ec"/> <path d="M305.8,171.69a2.11,2.11,0,0,0,1.95-1.23l5.06-10.88H329l5,10.92a2.2,2.2,0,0,0,3.8.19,2.41,2.41,0,0,0,.09-2.33L323,136.85a2.14,2.14,0,0,0-2-1.32,2.18,2.18,0,0,0-2,1.35l-15,31.66a2.41,2.41,0,0,0,.11,2.26A2,2,0,0,0,305.8,171.69Zm8.93-16.32,6.15-13.11,6.1,13.11Z" fill="#fff8ec"/> <path d="M347.13,171.69a2.12,2.12,0,0,0,2.14-2.1V157.24h6l7.43,9.66c2.5,3.19,5,4.85,7.32,4.85a4.91,4.91,0,0,0,.94-.09,2,2,0,0,0,1.58-2c0-1.69-1.5-2-2.45-2.18s-2.6-1.42-3.89-3.08l-6.2-8.07c4.77-1.55,7.85-5.38,7.85-10,0-9.3-8.49-10.69-13.55-10.69-1.3,0-5,.06-7.1.12a2.24,2.24,0,0,0-2.26,2.22v31.56a2.12,2.12,0,0,0,2.09,2.15ZM349.27,140c1.78-.05,4.1-.09,4.9-.09,9.21,0,9.21,4.83,9.21,6.42,0,4-4.37,6.61-8.45,6.61h-5.66Z" fill="#fff8ec"/> <path d="M376.69,140.05h11.63v29.51a2.17,2.17,0,0,0,4.33,0V140.05h11.62a2.14,2.14,0,0,0,0-4.27H376.69a2.14,2.14,0,0,0,0,4.27Z" fill="#fff8ec"/> <path d="M225.45,246.28v31.06a2.47,2.47,0,0,0,2.45,2.46c1.27,0,2.48,0,3.64.06s2.32.06,3.53.06c13.2,0,21.72-7.26,21.72-18.49,0-4.12-1.53-17.54-21.28-17.54-1.57,0-2.94,0-4.26.06s-2.31.06-3.47.06a2.3,2.3,0,0,0-2.33,2.27Zm9.68,29.37h-.39c-.82,0-2.79-.09-5-.11V248.27h1.79c1.11,0,2.25-.07,3.81-.07,10.77,0,17,4.83,17,13.27C252.33,270.2,245.74,275.65,235.13,275.65Z" fill="#fff8ec"/> <path d="M283.87,248.28a2.14,2.14,0,0,0,0-4.27H266a2.25,2.25,0,0,0-2.27,2.23v31.29A2.25,2.25,0,0,0,266,279.8h18.42a2.14,2.14,0,0,0,0-4.28H268.06V263.76h14.28a2.14,2.14,0,1,0,0-4.28H268.06v-11.2Z" fill="#fff8ec"/> <path d="M306.2,259.47c-5.38-1.69-8.65-3-8.65-6.41,0-3.13,3-5.16,7.75-5.16,3.19,0,6.4.92,8.16,2.33a2,2,0,0,0,2.81-.35v0l.08-.1A2.11,2.11,0,0,0,316,247c-2.24-2-6.57-3.36-10.53-3.36-7.54,0-12.41,3.7-12.41,9.43,0,6.68,6.17,8.66,11.61,10.4,5.6,1.8,9,3.16,9,6.84,0,4.16-4.71,5.67-7.88,5.67a15.14,15.14,0,0,1-9.88-3.17,2.08,2.08,0,0,0-2.92.11l-.08.08a2.27,2.27,0,0,0-.52,1.67,1.86,1.86,0,0,0,.64,1.26c2.84,2.75,7.49,4.32,12.76,4.32,7.15,0,12.34-4.15,12.34-9.87C318.15,263.23,311.8,261.23,306.2,259.47Z" fill="#fff8ec"/> <path d="M327.43,244a2.13,2.13,0,0,0-2.2,2v31.74a2.17,2.17,0,0,0,4.34,0v-31.7a2.1,2.1,0,0,0-2.14-2.08Z" fill="#fff8ec"/> <path d="M369.05,275.83a2.39,2.39,0,0,0,1-1.85V263.9a2.24,2.24,0,0,0-2.22-2.26H356.88a2.07,2.07,0,0,0-2.07,2.07h0a2.11,2.11,0,0,0,2.07,2.14h8.89v7A17.87,17.87,0,0,1,355.44,276c-8.58,0-14.34-5.67-14.34-14.1,0-8.22,5.84-14,14.22-14a15.9,15.9,0,0,1,8.5,2.08,2.07,2.07,0,0,0,2.85-.51,2.1,2.1,0,0,0-.43-2.95l-.06-.05-.09-.07c-2.95-1.94-6.33-2.81-11-2.81-10.72,0-18.5,7.67-18.5,18.24,0,11,7.54,18.37,18.75,18.37C359.48,280.24,365.51,278.86,369.05,275.83Z" fill="#fff8ec"/> <path d="M381.22,277.85v-26L404.52,279l.06.07a2.55,2.55,0,0,0,1.83.81,2.11,2.11,0,0,0,2.14-2.07V246.09a2.14,2.14,0,0,0-4.27,0v26L380.92,245l-.15-.16A2.38,2.38,0,0,0,379,244a2,2,0,0,0-2,2,.65.65,0,0,0,0,.14v31.7a2.14,2.14,0,0,0,4.27,0Z" fill="#fff8ec"/> <path d="M195.64,297.8c-1.72,0-5.18.07-7.29.13a2.25,2.25,0,0,0-2.27,2.23V331.7a2.17,2.17,0,0,0,4.34,0V320.35c1.77.09,3.53.18,5,.18,4.55,0,8.11-1.18,10.59-3.49a10.73,10.73,0,0,0,3.34-8C209.38,298.9,199.77,297.8,195.64,297.8Zm9.27,11.27c0,4.57-3.47,7.18-9.53,7.18-1.71,0-3.31-.08-5-.18V302.16c1.7,0,4.06-.08,5.41-.08,4.21,0,9.12,1.21,9.12,7Z" fill="#fff8ec"/> <path d="M229.61,299a2.18,2.18,0,0,0-4,0l-15,31.66a2.41,2.41,0,0,0,.11,2.26,2,2,0,0,0,1.72.89,2.15,2.15,0,0,0,2-1.23l5.05-10.88h16.16l5.07,10.91a2.17,2.17,0,0,0,2.91,1,2.14,2.14,0,0,0,.84-.74,2.39,2.39,0,0,0,.08-2.33Zm-8.22,18.52,6.15-13.11,6.1,13.11Z" fill="#fff8ec"/> <path d="M274.32,297.93H246.74a2.14,2.14,0,0,0,0,4.27h11.62v29.5a2.17,2.17,0,0,0,4.34,0V302.2h11.62a2.14,2.14,0,0,0,0-4.27Z" fill="#fff8ec"/> <path d="M309.6,297.93H282a2.14,2.14,0,0,0,0,4.27h11.62v29.5a2.17,2.17,0,0,0,4.34,0V302.2H309.6a2.14,2.14,0,0,0,0-4.27Z" fill="#fff8ec"/> <path d="M339.3,329.44H323V317.67h14.28a2.14,2.14,0,0,0,0-4.27H323V302.2h15.8a2.14,2.14,0,0,0,0-4.27H320.92a2.25,2.25,0,0,0-2.27,2.23v31.29a2.24,2.24,0,0,0,2.22,2.26H339.3a2.14,2.14,0,0,0,0-4.27Z" fill="#fff8ec"/> <path d="M412.9,297.93a2.11,2.11,0,0,0-2.14,2.07v26l-23.35-27.07-.15-.15a2.35,2.35,0,0,0-1.81-.85,2,2,0,0,0-2,2,.65.65,0,0,0,0,.14v31.7a2.14,2.14,0,0,0,4.27,0v-26L411,333l.06.07a2.57,2.57,0,0,0,1.84.81,2.1,2.1,0,0,0,2.13-2.07h0V300a2.1,2.1,0,0,0-2.13-2.07Z" fill="#fff8ec"/> <path d="M436,313.39c-5.38-1.69-8.65-3-8.65-6.41,0-3.13,3-5.16,7.75-5.16,3.2,0,6.4.92,8.16,2.33a2,2,0,0,0,2.81-.35v0l.08-.1a2.09,2.09,0,0,0-.34-2.77c-2.24-2-6.57-3.36-10.53-3.36-7.53,0-12.4,3.7-12.4,9.43,0,6.68,6.16,8.66,11.61,10.4s9,3.15,9,6.84c0,4.16-4.71,5.67-7.88,5.67a15.14,15.14,0,0,1-9.88-3.17,2.08,2.08,0,0,0-2.92.11l-.08.08a2.26,2.26,0,0,0-.51,1.67,1.89,1.89,0,0,0,.63,1.26c2.84,2.75,7.49,4.32,12.76,4.32,7.15,0,12.35-4.15,12.35-9.87C447.92,317.14,441.57,315.15,436,313.39Z" fill="#fff8ec"/> <path d="M351.07,333.72a2.12,2.12,0,0,0,2.13-2.11V319.26h6l7.43,9.66c2.5,3.19,5,4.85,7.32,4.85a4.91,4.91,0,0,0,.94-.09,2,2,0,0,0,1.58-2c0-1.7-1.5-2-2.45-2.19a8.63,8.63,0,0,1-3.89-3.08l-6.2-8.06c4.77-1.55,7.85-5.39,7.85-10,0-9.3-8.49-10.69-13.55-10.69-1.3,0-5,.06-7.1.13a2.23,2.23,0,0,0-2.26,2.2v31.57a2.12,2.12,0,0,0,2.08,2.16ZM353.2,302c1.78-.05,4.11-.09,4.9-.09,9.22,0,9.22,4.84,9.22,6.42,0,4-4.37,6.62-8.46,6.62H353.2Z" fill="#fff8ec"/> <path d="M180.8,190.09a2.13,2.13,0,0,0-2.2,2v31.74a2.17,2.17,0,0,0,4.33,0v-31.7a2.1,2.1,0,0,0-2.12-2.08Z" fill="#fff8ec"/> <path d="M194.74,226a2.11,2.11,0,0,0,2.14-2.07v-26l23.29,27.23.06.07a2.57,2.57,0,0,0,1.84.81A2.1,2.1,0,0,0,224.2,224h0v-31.8a2.14,2.14,0,0,0-4.27,0v26L196.57,191.1l-.14-.16a2.46,2.46,0,0,0-1.82-.85,2,2,0,0,0-2,2,.65.65,0,0,0,0,.14v31.7A2.11,2.11,0,0,0,194.74,226Z" fill="#fff8ec"/> <path d="M230.28,192.23a2.11,2.11,0,0,0,2.07,2.14H244v29.5a2.17,2.17,0,1,0,4.34,0v-29.5H260a2.14,2.14,0,1,0,0-4.28H232.35A2.11,2.11,0,0,0,230.28,192.23Z" fill="#fff8ec"/> <path d="M291.8,223.74a2.1,2.1,0,0,0-2.07-2.13H273.41V209.84H287.7a2.14,2.14,0,1,0,0-4.28H273.41V194.37h15.81a2.14,2.14,0,1,0,0-4.28H271.34a2.24,2.24,0,0,0-2.26,2.22v31.3a2.24,2.24,0,0,0,2.21,2.27h18.44A2.11,2.11,0,0,0,291.8,223.74Z" fill="#fff8ec"/> <path d="M300.57,226a2.1,2.1,0,0,0,2.13-2.07V211.55h6l7.43,9.66c2.5,3.19,5,4.85,7.32,4.85a4.91,4.91,0,0,0,.94-.09,2,2,0,0,0,1.58-2c0-1.69-1.5-2-2.45-2.18s-2.6-1.42-3.89-3.08l-6.2-8.06c4.77-1.55,7.85-5.39,7.85-10,0-9.3-8.49-10.69-13.55-10.69-1.3,0-5,.06-7.1.12a2.24,2.24,0,0,0-2.26,2.22v31.56a2.1,2.1,0,0,0,2.08,2.14Zm2.13-31.67c1.78-.05,4.11-.09,4.91-.09,9.21,0,9.21,4.83,9.21,6.42,0,4-4.37,6.62-8.45,6.62H302.7Z" fill="#fff8ec"/> <path d="M337.35,223.87V210.79h14.54a2.14,2.14,0,0,0,0-4.27H337.35V194.37h16.13a2.14,2.14,0,0,0,0-4.28h-18.2a2.24,2.24,0,0,0-2.26,2.22v31.56a2.17,2.17,0,0,0,4.33,0Z" fill="#fff8ec"/> <path d="M374.27,189.84a2.15,2.15,0,0,0-2,1.35l-15,31.66a2.41,2.41,0,0,0,.12,2.26,2,2,0,0,0,1.72.89,2.13,2.13,0,0,0,2-1.23l5.05-10.88h16.16l5.07,10.92a2.17,2.17,0,0,0,2.92.95,2.21,2.21,0,0,0,.82-.73,2.36,2.36,0,0,0,.09-2.33l-14.91-31.54A2.15,2.15,0,0,0,374.27,189.84Zm-6.21,19.85,6.15-13.11,6.09,13.11Z" fill="#fff8ec"/> <path d="M425.15,219.94a2.13,2.13,0,0,0-2.95-.61l-.13.09a15.53,15.53,0,0,1-8.74,2.63c-8.77,0-14.66-5.67-14.66-14.1,0-8.22,5.79-14,14.09-14a15.36,15.36,0,0,1,8.44,2,2.16,2.16,0,0,0,2.85-.43l.06-.08a2.11,2.11,0,0,0,.35-1.67,2,2,0,0,0-.9-1.32,20.1,20.1,0,0,0-10.86-2.79c-10.72,0-18.5,7.67-18.5,18.24,0,11,7.64,18.37,19,18.37a19.06,19.06,0,0,0,11.44-3.57A2.14,2.14,0,0,0,425.15,219.94Z" fill="#fff8ec"/> <path d="M455.4,223.74a2.1,2.1,0,0,0-2.07-2.13H437V209.84h14.3a2.14,2.14,0,0,0,0-4.28H437V194.37h15.81a2.14,2.14,0,0,0,0-4.28H434.94a2.24,2.24,0,0,0-2.26,2.22v31.3a2.24,2.24,0,0,0,2.21,2.27h18.44A2.11,2.11,0,0,0,455.4,223.74Z" fill="#fff8ec"/> </g> <g class="hero-anim-vitaly" opacity="0"> <path d="M209.78,419.9c.25.84.48,1.57.69,2.2l.52,1.64c.15.46.28.86.4,1.18s.2.59.27.81a.55.55,0,0,0,.12.24.35.35,0,0,0,.26.08.36.36,0,0,0,.27-.08.55.55,0,0,0,.12-.24l.36-1.11.57-1.83c.23-.75.51-1.66.85-2.72s.73-2.31,1.19-3.75a1.52,1.52,0,0,1,.51-.8,2.17,2.17,0,0,1,1.15-.23,1.65,1.65,0,0,1,1,.2.69.69,0,0,1,.26.55,2.43,2.43,0,0,1-.1.6c-.07.22-.14.42-.21.61s-.14.45-.32.95-.38,1.09-.63,1.77l-.77,2.18c-.27.77-.52,1.5-.77,2.18l-.62,1.79c-.18.51-.29.84-.35,1a5.43,5.43,0,0,1-.4.93,1.9,1.9,0,0,1-.53.6,1.85,1.85,0,0,1-.71.33,3.79,3.79,0,0,1-.95.1,2.58,2.58,0,0,1-1.68-.47,3.29,3.29,0,0,1-.89-1.37c-.09-.26-.19-.54-.3-.83l-.39-1.06c-.14-.42-.32-.91-.51-1.49s-.43-1.29-.7-2.13c-.36-1.09-.67-2-.91-2.65s-.44-1.2-.58-1.6-.24-.68-.3-.88a1.48,1.48,0,0,1-.09-.51.71.71,0,0,1,.25-.58,2,2,0,0,1,1.12-.21,3.25,3.25,0,0,1,.76.06,1.4,1.4,0,0,1,.48.18.84.84,0,0,1,.28.31,2,2,0,0,1,.18.46Z" fill="#fff8ec"/> <path d="M224.61,429a1,1,0,0,1-.82-.29,1.22,1.22,0,0,1-.23-.76V416.31c0-.66.38-1,1.13-1h.77a1,1,0,0,1,.75.25,1.08,1.08,0,0,1,.22.74v11.54a1.24,1.24,0,0,1-.27.89,1.12,1.12,0,0,1-.78.26Z" fill="#fff8ec"/> <path d="M235.8,418.61a1.4,1.4,0,0,0-.06-.41c0-.11-.17-.16-.38-.16h-2.51a.82.82,0,0,1-.77-.32,1.82,1.82,0,0,1-.2-1c0-1,.31-1.43.93-1.43h8.78a1,1,0,0,1,.8.28,2.73,2.73,0,0,1,0,2.24.7.7,0,0,1-.52.25h-2.63c-.2,0-.33,0-.37.13a.75.75,0,0,0-.07.36v9.59a2.54,2.54,0,0,1,0,.39.59.59,0,0,1-.19.32,1.06,1.06,0,0,1-.44.21,3.73,3.73,0,0,1-.82.07,2,2,0,0,1-1.25-.27,1.07,1.07,0,0,1-.29-.8Z" fill="#fff8ec"/> <path d="M250.39,425.22a.89.89,0,0,0-.53.13.61.61,0,0,0-.22.3l-.81,2.39a3.69,3.69,0,0,1-.17.42,1,1,0,0,1-.26.32,1.16,1.16,0,0,1-.44.19,2.76,2.76,0,0,1-.7.06,1.82,1.82,0,0,1-1-.2.69.69,0,0,1-.28-.59.89.89,0,0,1,0-.23c0-.1,0-.19.07-.29a1.7,1.7,0,0,1,.14-.42c.06-.17.15-.39.26-.66.25-.67.55-1.46.88-2.37s.65-1.79,1-2.66.61-1.66.88-2.37.45-1.21.55-1.5c.18-.5.34-.91.49-1.24a2.57,2.57,0,0,1,.5-.76,1.39,1.39,0,0,1,.64-.37,3.74,3.74,0,0,1,1-.1,2.81,2.81,0,0,1,.91.12,1.44,1.44,0,0,1,.6.4,2.67,2.67,0,0,1,.45.74c.13.31.26.67.41,1.11.61,1.78,1.2,3.39,1.75,4.82l1.41,3.63c.23.63.39,1.09.5,1.4a2.26,2.26,0,0,1,.15.73,1.31,1.31,0,0,1,0,.28.6.6,0,0,1-.2.27,1.14,1.14,0,0,1-.42.19,3,3,0,0,1-.74.07,4.33,4.33,0,0,1-.72,0,1.73,1.73,0,0,1-.44-.14.72.72,0,0,1-.28-.24,2,2,0,0,1-.18-.32l-.21-.52c-.09-.22-.18-.45-.26-.69s-.18-.49-.28-.73a5,5,0,0,1-.22-.65.61.61,0,0,0-.25-.38,1.32,1.32,0,0,0-.62-.09Zm3-1.92c.19,0,.28-.09.28-.26a2.39,2.39,0,0,0-.14-.6c-.1-.27-.25-.7-.47-1.26l-.6-1.66c-.08-.24-.19-.37-.33-.37a.23.23,0,0,0-.2.11.68.68,0,0,0-.12.26l-.23.66c-.08.2-.18.51-.32.92s-.24.74-.32,1-.14.42-.18.55a2.83,2.83,0,0,0-.08.29.43.43,0,0,0,0,.16c0,.15.1.22.3.22Z" fill="#fff8ec"/> <path d="M271.82,426.54a1,1,0,0,1,.67.23,1.48,1.48,0,0,1,.26,1,2.55,2.55,0,0,1-.07.73.71.71,0,0,1-.21.39.67.67,0,0,1-.33.15H265a1.3,1.3,0,0,1-.93-.28,1.21,1.21,0,0,1-.28-.89v-11.6a1,1,0,0,1,.32-.8,2.14,2.14,0,0,1,1.24-.25,2.34,2.34,0,0,1,1.25.22,1,1,0,0,1,.32.87v9.33a1,1,0,0,0,.16.68,1.23,1.23,0,0,0,.75.15Z" fill="#fff8ec"/> <path d="M283.86,416.32a3.1,3.1,0,0,1,.29-.5,1.22,1.22,0,0,1,.33-.31,1.25,1.25,0,0,1,.49-.17,4.57,4.57,0,0,1,.74,0,2.15,2.15,0,0,1,1,.16.5.5,0,0,1,.24.43.74.74,0,0,1,0,.21,1,1,0,0,1-.06.23,2.41,2.41,0,0,1-.15.33c-.07.13-.16.3-.29.52-.41.76-.82,1.5-1.22,2.23l-1.09,2-.84,1.49c-.23.4-.37.66-.43.77a6.16,6.16,0,0,0-.34.68,2,2,0,0,0-.12.77v3.06a.81.81,0,0,1-.32.74,2.31,2.31,0,0,1-1.16.21,1.86,1.86,0,0,1-1.13-.24.9.9,0,0,1-.29-.71v-3a2.48,2.48,0,0,0-.07-.61,3.74,3.74,0,0,0-.25-.66c-.12-.26-.29-.58-.51-1l-.85-1.54c-.25-.46-.51-.93-.78-1.4l-.73-1.31c-.23-.41-.44-.77-.62-1.1s-.32-.56-.42-.72-.2-.35-.27-.47a.86.86,0,0,1-.11-.47c0-.39.46-.58,1.4-.58a5.52,5.52,0,0,1,.71.05,1.82,1.82,0,0,1,.5.16,1,1,0,0,1,.33.28,2.43,2.43,0,0,1,.26.44l1.68,3.54c.24.49.43.87.56,1.16s.24.51.32.66a1,1,0,0,0,.17.28.17.17,0,0,0,.14.07.21.21,0,0,0,.15-.07.81.81,0,0,0,.19-.29c.09-.15.2-.38.34-.68l.57-1.21Z" fill="#fff8ec"/> <path d="M305.7,424a.59.59,0,0,0-.37.08.35.35,0,0,0-.08.26v3.81a.69.69,0,0,1-.32.69,2.8,2.8,0,0,1-1.11.16,4.07,4.07,0,0,1-1.2-.14c-.27-.1-.4-.34-.4-.73v-12a1,1,0,0,1,.19-.67,1.23,1.23,0,0,1,.88-.18l3.38.06h4.53a.85.85,0,0,1,.66.23,1.83,1.83,0,0,1,.19,1c0,.87-.27,1.3-.83,1.3h-5.3a.55.55,0,0,0-.65.45.41.41,0,0,0,0,.22v2.59a.66.66,0,0,0,.57.74h5a1,1,0,0,1,.79.26,1.37,1.37,0,0,1,.2.82,1.69,1.69,0,0,1-.16.83c-.11.19-.38.28-.81.28Z" fill="#fff8ec"/> <path d="M322.13,423.87a1.44,1.44,0,0,0-.79.15.6.6,0,0,0-.2.5v3.7a.63.63,0,0,1-.4.64,3.87,3.87,0,0,1-1.26.21,3.39,3.39,0,0,1-.84-.05,1.44,1.44,0,0,1-.48-.2.75.75,0,0,1-.21-.32,1.58,1.58,0,0,1-.05-.38V416.71a1.84,1.84,0,0,1,.15-.8,1.09,1.09,0,0,1,.67-.5,6,6,0,0,1,1.51-.25c.66-.05,1.55-.07,2.67-.07a13.23,13.23,0,0,1,3.07.31,6.22,6.22,0,0,1,2.1.9,3.43,3.43,0,0,1,1.2,1.44,4.61,4.61,0,0,1,.39,1.94,4.3,4.3,0,0,1-.24,1.55,3.05,3.05,0,0,1-.62,1,3,3,0,0,1-.81.6,7.27,7.27,0,0,1-.81.34l-.62.21c-.16.06-.24.13-.24.23s.07.18.22.26a3.74,3.74,0,0,1,.53.35,4.61,4.61,0,0,1,.63.62,3.49,3.49,0,0,1,.54,1.05,2.48,2.48,0,0,0,.5,1,3.78,3.78,0,0,0,.55.51l.43.35a.64.64,0,0,1,.18.49.85.85,0,0,1-.34.61,2,2,0,0,1-1.3.3A5.27,5.27,0,0,1,327,429a2.29,2.29,0,0,1-.95-.5,2.85,2.85,0,0,1-.71-.94,7.29,7.29,0,0,1-.55-1.5,5.45,5.45,0,0,0-.4-1.11,1.92,1.92,0,0,0-.54-.66,1.84,1.84,0,0,0-.75-.31A5.36,5.36,0,0,0,322.13,423.87Zm4.41-4a1.92,1.92,0,0,0-.83-1.64,4.73,4.73,0,0,0-2.73-.6,6.61,6.61,0,0,0-.89,0,1.44,1.44,0,0,0-.54.14.59.59,0,0,0-.26.3,1.58,1.58,0,0,0-.07.53v2.79a.87.87,0,0,0,.06.32.53.53,0,0,0,.26.25,2,2,0,0,0,.6.15,9.76,9.76,0,0,0,1.08.05,4,4,0,0,0,2.53-.65,2,2,0,0,0,.79-1.61Z" fill="#fff8ec"/> <path d="M336.56,429a1,1,0,0,1-.82-.29,1.22,1.22,0,0,1-.23-.76V416.31c0-.66.38-1,1.13-1h.77a1,1,0,0,1,.75.25,1.08,1.08,0,0,1,.22.74v11.54a1.24,1.24,0,0,1-.27.89,1.17,1.17,0,0,1-.78.26Z" fill="#fff8ec"/> <path d="M348.07,423.61a.41.41,0,0,0-.37.15.73.73,0,0,0-.09.35v1.56a.75.75,0,0,0,.25.67,1.43,1.43,0,0,0,.76.16H354a.82.82,0,0,1,.72.28,2.18,2.18,0,0,1,.19,1.1,1.75,1.75,0,0,1-.17.9.71.71,0,0,1-.66.27h-8.4a1.4,1.4,0,0,1-.5-.06.53.53,0,0,1-.28-.18.61.61,0,0,1-.14-.29,1.93,1.93,0,0,1,0-.34V416.26a1.07,1.07,0,0,1,.2-.71c.12-.16.41-.24.86-.24h7.9a.84.84,0,0,1,.67.26,1.73,1.73,0,0,1,.22,1,1.6,1.6,0,0,1-.24,1,1,1,0,0,1-.83.3h-5.16a.59.59,0,0,0-.67.5.48.48,0,0,0,0,.17v2.22a.77.77,0,0,0,.13.51.67.67,0,0,0,.54.16h5.22a.85.85,0,0,1,.66.23,1.51,1.51,0,0,1,.19.86,1.61,1.61,0,0,1-.16.81.68.68,0,0,1-.63.27Z" fill="#fff8ec"/> <path d="M360.84,416.66a2.19,2.19,0,0,1,.12-.8.89.89,0,0,1,.51-.48,3.18,3.18,0,0,1,1.1-.23c.48,0,1.11-.06,1.87-.06a13.53,13.53,0,0,1,4,.52,7.56,7.56,0,0,1,2.74,1.46,5.53,5.53,0,0,1,1.57,2.22,7.87,7.87,0,0,1,.5,2.84,8.48,8.48,0,0,1-.23,2.07,6.89,6.89,0,0,1-.64,1.65,6,6,0,0,1-1,1.3,7.59,7.59,0,0,1-1.26,1,6.54,6.54,0,0,1-2.32.91,15.57,15.57,0,0,1-2.64.2h-1.87a9.12,9.12,0,0,1-1.28-.15,2.38,2.38,0,0,1-.77-.28.77.77,0,0,1-.33-.44,3,3,0,0,1-.07-.66v-7.51C360.84,419.21,360.86,418,360.84,416.66Zm7.63,9.41a3.6,3.6,0,0,0,1.25-1.51,5.79,5.79,0,0,0,.51-2.53,4.9,4.9,0,0,0-.3-1.78,3.31,3.31,0,0,0-.93-1.35,4.35,4.35,0,0,0-1.58-.86,7.64,7.64,0,0,0-2.23-.3,2.7,2.7,0,0,0-1.09.16.51.51,0,0,0-.32.48v7.67a.58.58,0,0,0,.29.53,1.82,1.82,0,0,0,1,.2q.6,0,1.2,0a6.6,6.6,0,0,0,.89-.14,3.34,3.34,0,0,0,1.21-.52Z" fill="#fff8ec"/> <path d="M390.79,420.51V420a1.5,1.5,0,0,0,0-.3c0-.07,0-.11-.07-.12h-.11q-.12,0-.24.27c-.08.18-.21.51-.37,1a4.16,4.16,0,0,1-.23.7l-.35,1.09-.43,1.31-.43,1.34c-.15.44-.28.85-.4,1.23s-.21.69-.28.93-.21.61-.3.83a1.44,1.44,0,0,1-.29.51.9.9,0,0,1-.38.25,1.7,1.7,0,0,1-.55.07,1.64,1.64,0,0,1-.58-.09,1,1,0,0,1-.4-.3,2.2,2.2,0,0,1-.32-.53c-.09-.22-.2-.5-.32-.84s-.21-.62-.34-1l-.43-1.24q-.23-.65-.45-1.32c-.15-.45-.3-.88-.44-1.27l-.35-1.05c-.1-.31-.18-.55-.24-.71s-.14-.46-.2-.62a2.33,2.33,0,0,0-.14-.33.41.41,0,0,0-.1-.13H382c-.07,0-.11.07-.13.2s0,.46,0,.69V428a.92.92,0,0,1-.41.86,2,2,0,0,1-1,.23,1.54,1.54,0,0,1-1-.26.93.93,0,0,1-.31-.73V416.82a1.43,1.43,0,0,1,.46-1.15,2.53,2.53,0,0,1,1.59-.37h.94a2,2,0,0,1,.69.16,1.24,1.24,0,0,1,.48.4,3.09,3.09,0,0,1,.36.7,5.89,5.89,0,0,0,.26.8q.19.61.48,1.44l.57,1.74c.21.61.39,1.19.57,1.72s.33,1,.45,1.37a6.79,6.79,0,0,0,.24.66c0,.06.15.31.26.31a.17.17,0,0,0,.16-.08,1.08,1.08,0,0,0,.08-.19l2.25-7.38a3.7,3.7,0,0,1,.28-.72,1.56,1.56,0,0,1,.46-.53,1.92,1.92,0,0,1,.75-.32,5.19,5.19,0,0,1,1.18-.11,2.58,2.58,0,0,1,1.58.37,1.49,1.49,0,0,1,.46,1.21v11a1,1,0,0,1-.37.85,2,2,0,0,1-1.09.26,1.72,1.72,0,0,1-1.06-.26,1,1,0,0,1-.32-.83Z" fill="#fff8ec"/> <path d="M403.32,425.22a.85.85,0,0,0-.54.13.63.63,0,0,0-.21.3l-.81,2.39a3.69,3.69,0,0,1-.17.42,1,1,0,0,1-.26.32,1.16,1.16,0,0,1-.44.19,2.8,2.8,0,0,1-.71.06,1.82,1.82,0,0,1-1-.2.69.69,0,0,1-.28-.59.89.89,0,0,1,0-.23,1.37,1.37,0,0,1,.07-.29,1.7,1.7,0,0,1,.14-.42c.06-.17.14-.39.25-.66.26-.67.55-1.46.88-2.37l1-2.66c.33-.87.62-1.66.88-2.37s.45-1.21.56-1.5c.18-.5.34-.91.49-1.24a2.54,2.54,0,0,1,.49-.76,1.37,1.37,0,0,1,.65-.37,3.74,3.74,0,0,1,1-.1,2.75,2.75,0,0,1,.9.12,1.54,1.54,0,0,1,.61.4,2.42,2.42,0,0,1,.44.74c.13.31.27.67.42,1.11.61,1.78,1.2,3.39,1.75,4.82l1.41,3.63c.22.63.39,1.09.49,1.4a2.26,2.26,0,0,1,.15.73,1.31,1.31,0,0,1,0,.28.52.52,0,0,1-.19.27,1.14,1.14,0,0,1-.42.19,3,3,0,0,1-.74.07,4.33,4.33,0,0,1-.72,0,2.15,2.15,0,0,1-.45-.14.78.78,0,0,1-.27-.24,2,2,0,0,1-.18-.32,4.71,4.71,0,0,1-.21-.52q-.14-.33-.27-.69l-.27-.73a5,5,0,0,1-.22-.65.67.67,0,0,0-.26-.38,1.26,1.26,0,0,0-.61-.09Zm3-1.92c.19,0,.29-.09.29-.26a2.39,2.39,0,0,0-.14-.6c-.1-.27-.25-.7-.47-1.26l-.61-1.66c-.08-.24-.19-.37-.32-.37a.23.23,0,0,0-.2.11.58.58,0,0,0-.13.26c-.08.23-.15.45-.23.66s-.18.51-.31.92-.24.74-.33,1-.14.42-.18.55-.06.23-.08.29v.16c0,.15.1.22.31.22Z" fill="#fff8ec"/> <path d="M418,429a1.09,1.09,0,0,1-.75-.26.9.9,0,0,1-.28-.69V417.16a2.12,2.12,0,0,1,.35-1.32,1.62,1.62,0,0,1,1.37-.46,2.78,2.78,0,0,1,.81.11,1.83,1.83,0,0,1,.55.3,2.3,2.3,0,0,1,.42.46q.18.25.36.57l.49.8.84,1.36,1,1.68c.36.59.71,1.18,1,1.74l.73,1.26.44.75a3,3,0,0,0,.23.38c.05.07.1.1.14.1s.14-.08.14-.24v-8.23a1,1,0,0,1,.24-.72,1.09,1.09,0,0,1,.81-.25h.55a1.15,1.15,0,0,1,.76.22,1,1,0,0,1,.27.77v10.77a2,2,0,0,1-.4,1.36,1.92,1.92,0,0,1-1.52.48,2,2,0,0,1-1.38-.46,4.85,4.85,0,0,1-.93-1.18l-.54-.91c-.26-.43-.54-.91-.85-1.44s-.63-1.06-.94-1.6-.59-1-.8-1.39c-.32-.56-.55-1-.72-1.34L420,420c-.09-.18-.15-.3-.19-.36a.17.17,0,0,0-.14-.09c-.07,0-.1.07-.1.2v8.39a.81.81,0,0,1-.35.73,1.59,1.59,0,0,1-.85.22Z" fill="#fff8ec"/> </g> <g class="hero-anim-video" opacity="0"> <path d="M244.79,39.84c.2.66.39,1.23.55,1.73l.41,1.29c.12.37.22.68.31.94l.22.64a.34.34,0,0,0,.09.19.39.39,0,0,0,.21.06.26.26,0,0,0,.21-.06.5.5,0,0,0,.1-.19c.07-.22.17-.51.28-.88s.27-.86.45-1.45.4-1.3.67-2.14.58-1.82.94-3a1.15,1.15,0,0,1,.4-.63,1.6,1.6,0,0,1,.91-.19,1.41,1.41,0,0,1,.78.16.54.54,0,0,1,.2.43,1.61,1.61,0,0,1-.08.48c-.06.17-.11.33-.16.48s-.12.36-.26.75l-.49,1.4c-.19.54-.4,1.11-.61,1.72s-.42,1.18-.61,1.72l-.49,1.42-.27.77a5.33,5.33,0,0,1-.32.74,1.62,1.62,0,0,1-.42.48,1.66,1.66,0,0,1-.56.25,2.74,2.74,0,0,1-.75.08,2,2,0,0,1-1.32-.37,2.46,2.46,0,0,1-.71-1.08l-.24-.66-.3-.84c-.12-.32-.25-.71-.41-1.17s-.34-1-.55-1.68c-.29-.86-.53-1.56-.72-2.09l-.45-1.26c-.11-.31-.19-.54-.24-.7a1.34,1.34,0,0,1-.07-.4.54.54,0,0,1,.2-.46,1.5,1.5,0,0,1,.88-.17,3,3,0,0,1,.6.05,1.09,1.09,0,0,1,.38.14.75.75,0,0,1,.22.25,2.67,2.67,0,0,1,.14.36Z" fill="#fff8ec"/> <path d="M256.5,47a.79.79,0,0,1-.65-.23.93.93,0,0,1-.18-.6V37q0-.78.9-.78h.6a.76.76,0,0,1,.59.19A.87.87,0,0,1,258,37v9.11a.92.92,0,0,1-.22.71.9.9,0,0,1-.61.2Z" fill="#fff8ec"/> <path d="M263,37.28a1.69,1.69,0,0,1,.09-.63.73.73,0,0,1,.4-.39,2.87,2.87,0,0,1,.87-.18h1.48a10.76,10.76,0,0,1,3.19.42,5.93,5.93,0,0,1,2.16,1.15,4.29,4.29,0,0,1,1.24,1.76,6.06,6.06,0,0,1,.39,2.23,6.5,6.5,0,0,1-.18,1.64,5.55,5.55,0,0,1-.5,1.3,4.44,4.44,0,0,1-.77,1,6,6,0,0,1-1,.8,4.84,4.84,0,0,1-1.83.72,12.07,12.07,0,0,1-2.08.16H265a5.58,5.58,0,0,1-1-.12,1.89,1.89,0,0,1-.6-.22.58.58,0,0,1-.26-.35,2.31,2.31,0,0,1-.06-.52v-6C263.06,39.24,263,38.32,263,37.28Zm6,7.43a2.91,2.91,0,0,0,1-1.2,4.46,4.46,0,0,0,.41-2,3.72,3.72,0,0,0-.24-1.4,2.63,2.63,0,0,0-.73-1.07,3.37,3.37,0,0,0-1.25-.67,5.8,5.8,0,0,0-1.76-.24,2.11,2.11,0,0,0-.86.12.42.42,0,0,0-.26.39v6a.5.5,0,0,0,.23.42,1.59,1.59,0,0,0,.83.16h.94a4.1,4.1,0,0,0,.7-.12,2.43,2.43,0,0,0,.54-.17A3.35,3.35,0,0,0,269,44.71Z" fill="#fff8ec"/> <path d="M280,42.76c-.15,0-.25,0-.29.12a.54.54,0,0,0-.08.28v1.23a.59.59,0,0,0,.2.53,1.24,1.24,0,0,0,.6.12h4.28a.68.68,0,0,1,.57.22,1.71,1.71,0,0,1,.15.86,1.35,1.35,0,0,1-.14.71.55.55,0,0,1-.52.22h-6.63a1.34,1.34,0,0,1-.4,0,.44.44,0,0,1-.32-.37,1.22,1.22,0,0,1,0-.27V37a.85.85,0,0,1,.15-.56c.1-.13.33-.19.68-.19h6.21a.62.62,0,0,1,.53.21,1.25,1.25,0,0,1,.18.8,1.2,1.2,0,0,1-.2.76.76.76,0,0,1-.65.24h-4a.46.46,0,0,0-.53.38.38.38,0,0,0,0,.15v1.75a.63.63,0,0,0,.1.4c.07.09.21.13.43.13h4.12a.67.67,0,0,1,.52.18,1.16,1.16,0,0,1,.15.68,1.29,1.29,0,0,1-.13.64.57.57,0,0,1-.5.21Z" fill="#fff8ec"/> <path d="M295.14,47.34a5.57,5.57,0,0,1-2.32-.44,4.59,4.59,0,0,1-1.66-1.23,5.36,5.36,0,0,1-1-1.83,7.49,7.49,0,0,1-.34-2.25A7.11,7.11,0,0,1,290,40a4.61,4.61,0,0,1,.62-1.48,5.82,5.82,0,0,1,.83-1.09,3.89,3.89,0,0,1,1-.76,4.31,4.31,0,0,1,1.26-.45,8.17,8.17,0,0,1,1.56-.15,6.26,6.26,0,0,1,2.19.37,4.42,4.42,0,0,1,1.65,1.08,4.57,4.57,0,0,1,1,1.75,7.51,7.51,0,0,1,.36,2.4,7.66,7.66,0,0,1-.3,2.13,5.29,5.29,0,0,1-.95,1.82,4.67,4.67,0,0,1-1.66,1.26A5.73,5.73,0,0,1,295.14,47.34Zm.1-2a2.56,2.56,0,0,0,2.21-1,4.24,4.24,0,0,0,.73-2.63A4.87,4.87,0,0,0,298,40.4a3.27,3.27,0,0,0-.54-1.11,2.57,2.57,0,0,0-.93-.77,2.85,2.85,0,0,0-1.31-.29,3,3,0,0,0-1.32.27,2.31,2.31,0,0,0-.93.79,3.45,3.45,0,0,0-.25.41,2,2,0,0,0-.2.48,2.9,2.9,0,0,0-.14.65,6.76,6.76,0,0,0,0,.9,4.12,4.12,0,0,0,.76,2.65,2.64,2.64,0,0,0,2.1.92Z" fill="#fff8ec"/> <path d="M322.32,43.37a1.21,1.21,0,0,1,.72.2.93.93,0,0,1,.26.74,2.07,2.07,0,0,1-.29,1,3.24,3.24,0,0,1-.88,1,5.12,5.12,0,0,1-1.49.76,6.8,6.8,0,0,1-2.1.3,6.07,6.07,0,0,1-2.38-.42,4.6,4.6,0,0,1-1.66-1.17,4.77,4.77,0,0,1-1-1.8,7.73,7.73,0,0,1-.32-2.29,7,7,0,0,1,.18-1.59,5.8,5.8,0,0,1,.57-1.5,4.6,4.6,0,0,1,1.93-2,5.9,5.9,0,0,1,2.64-.6,6.27,6.27,0,0,1,2.15.32,4.56,4.56,0,0,1,1.49.83A3.34,3.34,0,0,1,323,38.3a3,3,0,0,1,.28,1.25,1.24,1.24,0,0,1-.27.83,1,1,0,0,1-.83.32,1.1,1.1,0,0,1-.84-.32,3.46,3.46,0,0,1-.55-.82,6.42,6.42,0,0,0-.34-.56,1.81,1.81,0,0,0-.41-.46,1.91,1.91,0,0,0-.59-.29,2.6,2.6,0,0,0-.83-.11,2.67,2.67,0,0,0-1.33.29,2.93,2.93,0,0,0-.93.89,3.38,3.38,0,0,0-.42,1,5.55,5.55,0,0,0-.17,1.46,3.81,3.81,0,0,0,.78,2.61,2.68,2.68,0,0,0,2.11.87,3.33,3.33,0,0,0,1.09-.14,2.24,2.24,0,0,0,.73-.35,2.42,2.42,0,0,0,.51-.45l.39-.46a2,2,0,0,1,.41-.35A1,1,0,0,1,322.32,43.37Z" fill="#fff8ec"/> <path d="M333,47.34a5.57,5.57,0,0,1-2.32-.44A4.59,4.59,0,0,1,329,45.67a5.36,5.36,0,0,1-1-1.83,7.18,7.18,0,0,1-.34-2.25,7.83,7.83,0,0,1,.17-1.6,5,5,0,0,1,.61-1.48,6.33,6.33,0,0,1,.84-1.09,3.89,3.89,0,0,1,1-.76,4.31,4.31,0,0,1,1.26-.45,6.82,6.82,0,0,1,1.56-.15,6.26,6.26,0,0,1,2.19.37A4.49,4.49,0,0,1,337,37.51a4.93,4.93,0,0,1,1,1.75,7.85,7.85,0,0,1,.05,4.53,4.92,4.92,0,0,1-1,1.82,4.56,4.56,0,0,1-1.66,1.26A5.61,5.61,0,0,1,333,47.34Zm.1-2a2.56,2.56,0,0,0,2.21-1,4.31,4.31,0,0,0,.73-2.63,4.87,4.87,0,0,0-.18-1.31,3.27,3.27,0,0,0-.54-1.11,2.89,2.89,0,0,0-.93-.77,2.85,2.85,0,0,0-1.31-.29,3,3,0,0,0-1.33.27,2.35,2.35,0,0,0-.92.79,3.54,3.54,0,0,0-.26.41,4.89,4.89,0,0,0-.2.48,3.56,3.56,0,0,0-.13.65,6.76,6.76,0,0,0,0,.9,4.12,4.12,0,0,0,.76,2.65,2.59,2.59,0,0,0,2.14.92Z" fill="#fff8ec"/> <path d="M343.06,37.15a1.41,1.41,0,0,1,0-.41.53.53,0,0,1,.17-.31,1,1,0,0,1,.4-.19,2.8,2.8,0,0,1,.71-.06,1.48,1.48,0,0,1,1,.25.82.82,0,0,1,.26.63v5.23a3.71,3.71,0,0,0,.59,2.29,2.07,2.07,0,0,0,1.71.73,1.89,1.89,0,0,0,1.64-.77,3.71,3.71,0,0,0,.56-2.25V37.06a.85.85,0,0,1,.26-.66,1.6,1.6,0,0,1,1-.24,1.2,1.2,0,0,1,.87.26,1,1,0,0,1,.24.72V42a8.51,8.51,0,0,1-.25,2.19,4.06,4.06,0,0,1-.81,1.67A3.54,3.54,0,0,1,350,46.93a6,6,0,0,1-2.23.37,5.56,5.56,0,0,1-2.1-.36,3.67,3.67,0,0,1-1.46-1,4.29,4.29,0,0,1-.85-1.64,7.49,7.49,0,0,1-.28-2.16Z" fill="#fff8ec"/> <path d="M360.84,43a1.13,1.13,0,0,0-.63.12.48.48,0,0,0-.16.39v2.92a.49.49,0,0,1-.31.5,3.09,3.09,0,0,1-1,.17,2.43,2.43,0,0,1-.66,0,1,1,0,0,1-.38-.16.53.53,0,0,1-.17-.25,1.5,1.5,0,0,1,0-.3V37.3a1.41,1.41,0,0,1,.12-.64.91.91,0,0,1,.53-.39,5.39,5.39,0,0,1,1.19-.2h2.1a10.92,10.92,0,0,1,2.42.24,5.07,5.07,0,0,1,1.67.72,2.75,2.75,0,0,1,.95,1.13,3.64,3.64,0,0,1,.3,1.53,3.41,3.41,0,0,1-.19,1.23,2.49,2.49,0,0,1-.49.79,2.3,2.3,0,0,1-.64.47c-.21.1-.42.19-.64.27l-.48.17a.19.19,0,0,0-.2.17c0,.07.06.15.18.21a3.07,3.07,0,0,1,.42.28,2.84,2.84,0,0,1,.49.49,2.63,2.63,0,0,1,.43.83,2.08,2.08,0,0,0,.39.77,2.79,2.79,0,0,0,.44.4l.34.28a.49.49,0,0,1,.14.38.69.69,0,0,1-.27.48,1.6,1.6,0,0,1-1,.24,3.74,3.74,0,0,1-1-.11,1.64,1.64,0,0,1-.75-.39,2.54,2.54,0,0,1-.56-.74,5.56,5.56,0,0,1-.43-1.18,4.63,4.63,0,0,0-.32-.88,1.45,1.45,0,0,0-.43-.52,1.41,1.41,0,0,0-.59-.25A4.45,4.45,0,0,0,360.84,43Zm3.48-3.13a1.5,1.5,0,0,0-.66-1.3,3.67,3.67,0,0,0-2.15-.48c-.24,0-.47,0-.71,0a1.2,1.2,0,0,0-.42.12.45.45,0,0,0-.21.24,1.4,1.4,0,0,0-.05.41v2.21a.53.53,0,0,0,0,.25.36.36,0,0,0,.21.19,1.31,1.31,0,0,0,.47.12,6,6,0,0,0,.85,0,3.15,3.15,0,0,0,2-.51,1.62,1.62,0,0,0,.67-1.28Z" fill="#fff8ec"/> <path d="M372.08,43.24a1,1,0,0,1,.59.16,1.81,1.81,0,0,1,.42.41c.13.16.26.34.39.52a2.52,2.52,0,0,0,.5.53,2.48,2.48,0,0,0,.77.41,3.91,3.91,0,0,0,1.18.16,2.33,2.33,0,0,0,1.34-.28.84.84,0,0,0,.39-.73,1.4,1.4,0,0,0-.11-.53,1,1,0,0,0-.42-.41,4.71,4.71,0,0,0-.89-.39c-.39-.12-.9-.26-1.54-.41a7.19,7.19,0,0,1-1.58-.54,3.75,3.75,0,0,1-1-.72,2.35,2.35,0,0,1-.52-.87,3.36,3.36,0,0,1-.14-1,3.63,3.63,0,0,1,.33-1.59,2.92,2.92,0,0,1,.89-1.11,3.93,3.93,0,0,1,1.34-.63,7.26,7.26,0,0,1,1.67-.2,5.65,5.65,0,0,1,2,.3,4,4,0,0,1,1.31.74,2.59,2.59,0,0,1,.73,1,2.47,2.47,0,0,1,.22,1,1.15,1.15,0,0,1-.24.74,1.09,1.09,0,0,1-.91.31,1,1,0,0,1-.75-.25,1.51,1.51,0,0,1-.38-.56,3.5,3.5,0,0,0-.31-.61,1.64,1.64,0,0,0-.41-.42,1.62,1.62,0,0,0-.59-.25,4,4,0,0,0-.85-.08,2,2,0,0,0-1.29.36,1.2,1.2,0,0,0-.42,1,2.1,2.1,0,0,0,.08.56,1.1,1.1,0,0,0,.33.49,2.47,2.47,0,0,0,.72.42,8.31,8.31,0,0,0,1.3.35,9.21,9.21,0,0,1,1.92.57,3.79,3.79,0,0,1,1.16.73,2.17,2.17,0,0,1,.57.91,3.37,3.37,0,0,1,.15,1,2.82,2.82,0,0,1-.26,1.18,2.55,2.55,0,0,1-.81,1,4.24,4.24,0,0,1-1.36.64,6.86,6.86,0,0,1-1.91.24,5.89,5.89,0,0,1-2-.31,4.9,4.9,0,0,1-1.4-.77,3,3,0,0,1-.83-1,2.2,2.2,0,0,1-.27-1C371.16,43.59,371.46,43.24,372.08,43.24Z" fill="#fff8ec"/> <path d="M387.35,42.76a.3.3,0,0,0-.29.12.53.53,0,0,0-.07.28v1.23a.62.62,0,0,0,.2.53,1.24,1.24,0,0,0,.6.12h4.28a.62.62,0,0,1,.57.22,1.71,1.71,0,0,1,.15.86,1.35,1.35,0,0,1-.14.71.54.54,0,0,1-.51.22h-6.63a1.34,1.34,0,0,1-.4,0,.49.49,0,0,1-.23-.14.52.52,0,0,1-.1-.23,1.22,1.22,0,0,1,0-.27V37a.85.85,0,0,1,.15-.56c.1-.13.33-.19.68-.19h6.22a.63.63,0,0,1,.52.21,1.72,1.72,0,0,1,0,1.56.82.82,0,0,1-.66.24h-4a.46.46,0,0,0-.53.4.29.29,0,0,0,0,.13v1.75a.7.7,0,0,0,.1.4.56.56,0,0,0,.43.13h4.12a.67.67,0,0,1,.52.18,1.16,1.16,0,0,1,.15.68,1.19,1.19,0,0,1-.13.64.52.52,0,0,1-.49.21Z" fill="#fff8ec"/> <path d="M271,75.68a1.51,1.51,0,0,1,.09-.53,7.74,7.74,0,0,0,.19-.94c.07-.36.16-.74.24-1.15s.17-.8.24-1.16.14-.7.2-1,.1-.51.12-.63a1,1,0,0,1,.36-.61,1.65,1.65,0,0,1,1-.21,1.25,1.25,0,0,1,.8.18.48.48,0,0,1,.22.41,2.1,2.1,0,0,1-.07.56q-.08.25-.12.48a4,4,0,0,1-.17.68c-.06.26-.13.58-.22,1s-.2.81-.33,1.31l-.45,1.76c-.17.67-.31,1.2-.41,1.59s-.19.72-.26,1l-.15.58q-.06.23-.12.48a4,4,0,0,1-.16.45.57.57,0,0,1-.24.29,1,1,0,0,1-.41.14,4,4,0,0,1-.69,0,1.73,1.73,0,0,1-1.11-.26,1.53,1.53,0,0,1-.44-.92c-.06-.33-.15-.73-.25-1.21l-.32-1.51-.33-1.58-.27-1.42a3.5,3.5,0,0,0-.17-.71.2.2,0,0,0-.19-.15.17.17,0,0,0-.14.09,1,1,0,0,0-.1.34L267,75l-.33,1.8c-.1.55-.2,1-.27,1.39s-.13.64-.15.76a1.9,1.9,0,0,1-.53,1.1,1.83,1.83,0,0,1-1.22.33,5.81,5.81,0,0,1-.59,0,1.33,1.33,0,0,1-.43-.17,1.19,1.19,0,0,1-.31-.36,2.36,2.36,0,0,1-.22-.63c-.06-.19-.11-.4-.16-.62s-.13-.49-.21-.83-.19-.75-.32-1.25l-.48-1.86c-.23-.9-.42-1.62-.57-2.17l-.33-1.28c-.08-.32-.14-.55-.16-.69a2.54,2.54,0,0,1,0-.39.5.5,0,0,1,.25-.46,2,2,0,0,1,.9-.15,1.44,1.44,0,0,1,.81.18,1.07,1.07,0,0,1,.37.64,7.44,7.44,0,0,0,.21.85c.1.42.2.89.32,1.42s.23,1.07.35,1.62.22,1,.3,1.43l.21.94a4.1,4.1,0,0,0,.14.5.6.6,0,0,0,.14.21.25.25,0,0,0,.17,0c.14,0,.23-.16.29-.49l.22-1.22a1.23,1.23,0,0,1,.08-.46,6.38,6.38,0,0,0,.15-.78q.09-.44.18-.93c.06-.33.11-.65.17-1s.11-.6.16-.87l.12-.64a2,2,0,0,1,.44-1.11,1.34,1.34,0,0,1,1-.29,2.26,2.26,0,0,1,.63.07.88.88,0,0,1,.41.23,1,1,0,0,1,.25.4,3,3,0,0,1,.15.57c.08.41.21,1,.37,1.72s.35,1.67.57,2.79c.08.4.14.74.19,1l.12.63a.91.91,0,0,0,.12.31.22.22,0,0,0,.16.09c.11,0,.19-.16.24-.47A11.18,11.18,0,0,1,271,75.68Z" fill="#fff8ec"/> <path d="M283.89,80.61a5.58,5.58,0,0,1-2.32-.45,4.37,4.37,0,0,1-1.66-1.23,5.36,5.36,0,0,1-1-1.83,7.37,7.37,0,0,1-.34-2.24,7.83,7.83,0,0,1,.17-1.6,4.61,4.61,0,0,1,.62-1.48,5.82,5.82,0,0,1,.83-1.09,4.17,4.17,0,0,1,1-.77,4.39,4.39,0,0,1,1.26-.44,8.17,8.17,0,0,1,1.56-.15,6.26,6.26,0,0,1,2.19.37,4.42,4.42,0,0,1,1.65,1.08,4.57,4.57,0,0,1,1,1.75,7.45,7.45,0,0,1,.36,2.39,7.79,7.79,0,0,1-.3,2.14,5.32,5.32,0,0,1-1,1.82,4.67,4.67,0,0,1-1.66,1.26A5.82,5.82,0,0,1,283.89,80.61Zm.1-2a2.6,2.6,0,0,0,2.21-1,4.24,4.24,0,0,0,.73-2.63,4.89,4.89,0,0,0-.18-1.32,3.27,3.27,0,0,0-.54-1.11,2.73,2.73,0,0,0-.93-.76A2.85,2.85,0,0,0,284,71.5a3,3,0,0,0-1.32.27,2.21,2.21,0,0,0-.93.78,2.91,2.91,0,0,0-.25.42,2,2,0,0,0-.2.48,2.9,2.9,0,0,0-.14.65,6.76,6.76,0,0,0,0,.9,4.12,4.12,0,0,0,.76,2.65,2.59,2.59,0,0,0,2.11.92Z" fill="#fff8ec"/> <path d="M297.34,76.23a1.12,1.12,0,0,0-.62.12.44.44,0,0,0-.16.4v2.92a.5.5,0,0,1-.31.5,3.09,3.09,0,0,1-1,.17,2.51,2.51,0,0,1-.67,0,1,1,0,0,1-.37-.16.49.49,0,0,1-.17-.25.76.76,0,0,1,0-.3V70.56a1.36,1.36,0,0,1,.12-.63.89.89,0,0,1,.52-.39,5.39,5.39,0,0,1,1.19-.2H298a10.92,10.92,0,0,1,2.42.24,4.88,4.88,0,0,1,1.66.71,2.71,2.71,0,0,1,.95,1.14,4,4,0,0,1,.12,2.75A2.34,2.34,0,0,1,302,75.45c-.21.1-.42.19-.64.27l-.49.17a.19.19,0,0,0-.19.17q0,.1.18.21a3.71,3.71,0,0,1,.41.28,2.9,2.9,0,0,1,.5.49,2.63,2.63,0,0,1,.43.83,2.08,2.08,0,0,0,.39.77,4.07,4.07,0,0,0,.43.4c.12.09.24.18.35.28a.49.49,0,0,1,.14.38.69.69,0,0,1-.27.48,1.6,1.6,0,0,1-1,.24,4.2,4.2,0,0,1-1-.11,1.84,1.84,0,0,1-.76-.39,2.69,2.69,0,0,1-.55-.74,6.3,6.3,0,0,1-.44-1.19,4,4,0,0,0-.32-.87,1.26,1.26,0,0,0-.42-.52,1.29,1.29,0,0,0-.59-.25A5.59,5.59,0,0,0,297.34,76.23Zm3.49-3.13a1.54,1.54,0,0,0-.66-1.29,3.78,3.78,0,0,0-2.16-.48c-.23,0-.47,0-.7,0a1.19,1.19,0,0,0-.42.11.49.49,0,0,0-.21.24,1.52,1.52,0,0,0-.06.42v2.2a.57.57,0,0,0,0,.26.41.41,0,0,0,.2.19,2,2,0,0,0,.48.12,6,6,0,0,0,.85,0,3.15,3.15,0,0,0,2-.51A1.63,1.63,0,0,0,300.83,73.1Z" fill="#fff8ec"/> <path d="M308.93,80.31a1.39,1.39,0,0,1-.75-.15.73.73,0,0,1-.23-.62V70.23c0-.3.08-.5.24-.59a2,2,0,0,1,1-.15,1.78,1.78,0,0,1,.85.15.65.65,0,0,1,.27.6v4c0,.18.07.28.22.28a.42.42,0,0,0,.25-.12,2.68,2.68,0,0,0,.28-.3l.29-.36q.13-.18.27-.33l.66-.74.84-.93.81-.88c.26-.28.45-.48.56-.61a2.79,2.79,0,0,1,.74-.63,1.82,1.82,0,0,1,.83-.17h.75a.58.58,0,0,1,.44.13.42.42,0,0,1,.12.3,1,1,0,0,1-.09.38,2.1,2.1,0,0,1-.34.5c-.13.15-.35.38-.65.69l-1,1-1.06,1.07-.87.88a1.3,1.3,0,0,0-.1.15.33.33,0,0,0,0,.14.21.21,0,0,0,.17.21l.44.13a5.5,5.5,0,0,1,.58.16,1.85,1.85,0,0,1,.63.31,2.06,2.06,0,0,1,.54.6,2.76,2.76,0,0,1,.34,1,3.2,3.2,0,0,0,.38,1.24,3,3,0,0,0,.5.62c.17.15.31.26.43.35a.41.41,0,0,1,.19.38.69.69,0,0,1-.27.48,1.6,1.6,0,0,1-1,.24,2.6,2.6,0,0,1-1.81-.62,4.14,4.14,0,0,1-1.06-2,5.18,5.18,0,0,0-.58-1.47.82.82,0,0,0-.62-.41,1.21,1.21,0,0,0-.38,0,1.41,1.41,0,0,0-.35.23l-.46.41a2.91,2.91,0,0,0-.3.31,1.18,1.18,0,0,0-.16.29,1,1,0,0,0-.06.34v2.07a.84.84,0,0,1-.16.57.83.83,0,0,1-.66.2Z" fill="#fff8ec"/> <path d="M322.46,76.51a1,1,0,0,1,.59.16,1.56,1.56,0,0,1,.41.4l.4.53a2.44,2.44,0,0,0,1.26.93,3.72,3.72,0,0,0,1.19.16,2.4,2.4,0,0,0,1.34-.27.85.85,0,0,0,.38-.73,1.22,1.22,0,0,0-.1-.53,1,1,0,0,0-.43-.41,4.71,4.71,0,0,0-.89-.39c-.38-.13-.9-.26-1.53-.41a7,7,0,0,1-1.59-.55,3.71,3.71,0,0,1-1-.71,2.15,2.15,0,0,1-.52-.87,3.37,3.37,0,0,1-.15-1,3.67,3.67,0,0,1,.33-1.6,3.1,3.1,0,0,1,.9-1.1,3.52,3.52,0,0,1,1.34-.63,6.75,6.75,0,0,1,1.67-.2,5.65,5.65,0,0,1,2,.3,4,4,0,0,1,1.31.74,2.84,2.84,0,0,1,.72,1,2.61,2.61,0,0,1,.23,1,1.2,1.2,0,0,1-.24.75,1.1,1.1,0,0,1-.91.31,1,1,0,0,1-.75-.25,1.49,1.49,0,0,1-.39-.57,3.41,3.41,0,0,0-.31-.6,1.68,1.68,0,0,0-.41-.43,1.55,1.55,0,0,0-.58-.24,3.45,3.45,0,0,0-.85-.08,2,2,0,0,0-1.29.36,1.2,1.2,0,0,0-.42,1,1.52,1.52,0,0,0,.08.56,1,1,0,0,0,.32.48,2.34,2.34,0,0,0,.73.43,8.19,8.19,0,0,0,1.29.35,9.3,9.3,0,0,1,1.93.57,3.79,3.79,0,0,1,1.16.73,2.17,2.17,0,0,1,.56.9,3.37,3.37,0,0,1,.16,1,2.62,2.62,0,0,1-1.07,2.14,4.24,4.24,0,0,1-1.36.64,6.93,6.93,0,0,1-1.92.24,5.66,5.66,0,0,1-2-.31,4.51,4.51,0,0,1-1.41-.77,3,3,0,0,1-.83-1,2.2,2.2,0,0,1-.27-1C321.53,76.85,321.84,76.51,322.46,76.51Z" fill="#fff8ec"/> <path d="M342,76.7c0-.28,0-.44-.11-.5a1,1,0,0,0-.45-.08H337.9a.34.34,0,0,0-.25.09.51.51,0,0,0-.08.36v3.07a.56.56,0,0,1-.29.52,2.07,2.07,0,0,1-.92.15,1.36,1.36,0,0,1-.79-.18.65.65,0,0,1-.24-.54v-3.1l.06-6.31q0-.48.3-.6a2.19,2.19,0,0,1,.88-.13,1.67,1.67,0,0,1,.88.16.64.64,0,0,1,.23.56V74a.63.63,0,0,0,.06.33.85.85,0,0,0,.32.07h3.32a2.54,2.54,0,0,0,.39,0,.4.4,0,0,0,.21-.09.37.37,0,0,0,.09-.2V70.15a.58.58,0,0,1,.3-.61,2,2,0,0,1,.86-.14,1.59,1.59,0,0,1,.83.16.62.62,0,0,1,.24.55v9.44a.55.55,0,0,1-.31.56,2,2,0,0,1-.84.15,1.38,1.38,0,0,1-.84-.19.56.56,0,0,1-.23-.48Z" fill="#fff8ec"/> <path d="M354.53,80.61a5.58,5.58,0,0,1-2.32-.45,4.37,4.37,0,0,1-1.66-1.23,5.36,5.36,0,0,1-1-1.83,7.08,7.08,0,0,1-.34-2.24,7.83,7.83,0,0,1,.17-1.6,4.61,4.61,0,0,1,.62-1.48,5.82,5.82,0,0,1,.83-1.09,3.93,3.93,0,0,1,1-.77,4.39,4.39,0,0,1,1.26-.44,8.17,8.17,0,0,1,1.56-.15,6.26,6.26,0,0,1,2.19.37,4.42,4.42,0,0,1,1.65,1.08,4.78,4.78,0,0,1,1,1.75,7.45,7.45,0,0,1,.36,2.39,7.79,7.79,0,0,1-.3,2.14,5.32,5.32,0,0,1-1,1.82A4.61,4.61,0,0,1,357,80.14,5.81,5.81,0,0,1,354.53,80.61Zm.1-2a2.6,2.6,0,0,0,2.21-1,4.31,4.31,0,0,0,.73-2.63,4.89,4.89,0,0,0-.18-1.32,3.27,3.27,0,0,0-.54-1.11,2.73,2.73,0,0,0-.93-.76,2.85,2.85,0,0,0-1.31-.29,3,3,0,0,0-1.32.27,2.21,2.21,0,0,0-.93.78c-.09.14-.18.28-.26.42a4.89,4.89,0,0,0-.2.48,4.67,4.67,0,0,0-.13.65,6.76,6.76,0,0,0,0,.9,4.12,4.12,0,0,0,.76,2.65,2.64,2.64,0,0,0,2.1.92Z" fill="#fff8ec"/> <path d="M364.77,74.35V70.61a1.46,1.46,0,0,1,.11-.55.85.85,0,0,1,.49-.42,3.72,3.72,0,0,1,1.14-.27,20.07,20.07,0,0,1,2.05-.08,7.72,7.72,0,0,1,2.34.3,4.43,4.43,0,0,1,1.57.81,3.16,3.16,0,0,1,.89,1.19,3.72,3.72,0,0,1,.28,1.4,3,3,0,0,1-1.12,2.61,5.12,5.12,0,0,1-3.18.86h-1.8a.34.34,0,0,0-.24.07.29.29,0,0,0-.07.2v2.84a.67.67,0,0,1-.27.57,1.54,1.54,0,0,1-.94.21,1.59,1.59,0,0,1-1-.22.67.67,0,0,1-.25-.56Zm2.48-.06a.54.54,0,0,0,.36.5,3.28,3.28,0,0,0,1.28.17,3,3,0,0,0,1.84-.47,1.72,1.72,0,0,0,.17-2.43,1.93,1.93,0,0,0-.3-.27,4.08,4.08,0,0,0-2-.43,3.86,3.86,0,0,0-.68,0,1,1,0,0,0-.4.15.46.46,0,0,0-.19.26.9.9,0,0,0-.05.36Z" fill="#fff8ec"/> <line x1="317.13" y1="55.58" x2="317.13" y2="60.71" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.19"/> <line x1="319.69" y1="58.14" x2="314.56" y2="58.14" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.19"/> </g> <g class="hero-anim-with" opacity="0"> <path d="M314.09,391.63c.35-.59,1.21,0,.84.61-1.34,2.34-3.17,3.69-5.31,3a.77.77,0,0,0-1,.29,5,5,0,0,1-3.56,2.15,1.68,1.68,0,0,1-1.76-1.31c-.09-.37-.26-.41-.52-.15a3.86,3.86,0,0,1-2.67,1.46c-1.63,0-2.61-1.09-1.05-5l2.35-5.77a1.1,1.1,0,0,1,1.19-.8h.16c.56,0,.76.28.54.8l-2.72,6.73c-1.08,2.63-.36,2.6-.28,2.6,1.52,0,3.28-2.82,4-4.27l2-5.06a1.1,1.1,0,0,1,1.19-.8h.15c.57,0,.76.28.55.8l-2.74,6.73c-1,2.5-.39,2.6-.07,2.6a2.64,2.64,0,0,0,1.79-1.08c.65-.7.41-.83.41-1.59a1.22,1.22,0,0,1,1.06-1.19c.46-.06.54-.11.76-.54a26.06,26.06,0,0,0,1.8-5.06,1,1,0,0,1,.87-.83c.44-.08.63.11.52.55a27.52,27.52,0,0,1-2.54,6.9.46.46,0,0,0,.08.65.54.54,0,0,0,.25.09C311.5,394.41,312.89,393.69,314.09,391.63Z" fill="#fff8ec"/> <path d="M319.56,391.63c.34-.59,1.21,0,.84.61-1.78,3-3.62,5.45-5.69,5.45-1.69,0-2.62-1.11-1.08-5l2.34-5.77a1.11,1.11,0,0,1,1.2-.8h.15c.56,0,.76.28.54.8l-2.71,6.73c-1,2.34-.55,2.8,0,2.8C316.32,396.47,318.1,394.1,319.56,391.63Zm-1.29-6.95a1.14,1.14,0,0,1-1.12-1.16h0a1.11,1.11,0,0,1,1.09-1.13h0a1.14,1.14,0,0,1,1.15,1.13h0a1.16,1.16,0,0,1-1.15,1.17Z" fill="#fff8ec"/> <path d="M325.39,391.63c.35-.59,1.22,0,.85.61-1.67,2.91-3.73,5.45-6,5.45-1.74,0-2.7-1.09-1.13-5l2.43-6c.15-.39,0-.6-.41-.6h-.91c-.33,0-.44-.18-.31-.5a.66.66,0,0,1,.7-.48h.91a.84.84,0,0,0,.89-.61l.78-1.91a1.1,1.1,0,0,1,1.19-.8h.16c.56,0,.76.28.54.8l-.78,1.91c-.15.39,0,.61.41.61h.82c.33,0,.44.17.31.5a.66.66,0,0,1-.7.48h-.82a.83.83,0,0,0-.89.6l-2.8,6.93c-1,2.48-.5,2.78,0,2.78C322,396.45,323.88,394.21,325.39,391.63Z" fill="#fff8ec"/> <path d="M335.73,391.63c.34-.59,1.21,0,.84.61-1.73,3-3.62,5.45-5.64,5.45-1.59,0-2.71-1-1.15-4.95l1.06-2.59a11.54,11.54,0,0,0,.76-2.21c0-.33-.28-.5-.63-.5a3.86,3.86,0,0,0-2.21,1.19,3.14,3.14,0,0,0-.65,1l-2.85,7a1.1,1.1,0,0,1-1.19.8h-.15c-.57,0-.76-.28-.55-.8l5.65-14a1.1,1.1,0,0,1,1.19-.8h.15c.57,0,.76.28.55.8l-1.63,4c-.11.26,0,.35.24.15a3.77,3.77,0,0,1,2.26-1,1.54,1.54,0,0,1,1.68,1.4,1.48,1.48,0,0,1,0,.21,8.38,8.38,0,0,1-.74,2.74l-1.43,3.47c-1,2.58-.35,2.8,0,2.8C332.47,396.47,334.27,394.1,335.73,391.63Z" fill="#fff8ec"/> <line x1="249.87" y1="390.59" x2="283.57" y2="390.59" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <polyline points="260.93 383.82 267.7 390.59 260.93 397.36" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <polyline points="269.26 383.82 276.03 390.59 269.26 397.36" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <polyline points="254.83 386.38 259.04 390.59 254.83 394.81" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="383.99" y1="390.59" x2="350.29" y2="390.59" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <polyline points="372.93 383.82 366.16 390.59 372.93 397.36" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <polyline points="364.6 383.82 357.83 390.59 364.6 397.36" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <polyline points="379.03 386.38 374.81 390.59 379.03 394.81" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> </g> <g class="hero-anim-color" opacity="0"> <path class="hero-anim-draw-plant" d="M495.5,406.22c-37.66-29.77-104.5-47.43-178.32-47.43-74.31,0-142.34,16.42-180,46.21-17.46-36.68,4.48-78.59,29.58-85.19" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <g class="hero-anim-prawn"> <path d="M149,209.34a33.49,33.49,0,1,1-10.32-64c14.32,1.37,24.64,12.67,31.71,20l-2.92,4.06c-8.08,8.81-17.87,6.31-25.18,2.67-9.75-4.86-21.87.32-23.82,11-.08.48-.15,1-.2,1.47a16.85,16.85,0,0,0,14.92,18.59,16.67,16.67,0,0,0,3.53,0L154.27,202h0A9.1,9.1,0,0,1,149,209.34Z" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line x1="142.32" y1="172.14" x2="154.76" y2="151.43" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line x1="134.76" y1="175.19" x2="136.38" y2="145.14" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <polyline points="116.25 151.35 127.4 170.87 129.66 175.61" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line x1="103.89" y1="168.98" x2="120.13" y2="176.86" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line x1="104.25" y1="187.82" x2="117.49" y2="187.46" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line x1="122.12" y1="197.29" x2="111.6" y2="201.73" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line x1="129.23" y1="202.69" x2="125.46" y2="209.93" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path class="hero-anim-feeler" d="M168.7,163.62s23.48,21.43,51.76,4.65" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path class="hero-anim-feeler" d="M167.19,170a27.52,27.52,0,0,0,11.17,10.72" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <circle cx="158.05" cy="162.95" r="2.1" fill="#ee5b68"/> </g> <g class="hero-anim-fishcake"> <g class="hero-anim-a58c5a3e-76bf-4ba6-9abd-271a6ca17239"> <path d="M212.35,138a1.18,1.18,0,0,0-.54-.81,1.21,1.21,0,0,0-1-.13A3.39,3.39,0,0,1,208.1,131a1.17,1.17,0,0,0,.55-.8,1.2,1.2,0,0,0-.24-.95,19.42,19.42,0,0,0-4-3.84,1.23,1.23,0,0,0-1.77.41,3.41,3.41,0,0,1-4.21,1.58,3.48,3.48,0,0,1-2.07-4,1.2,1.2,0,0,0-.88-1.45l-.12,0a19.69,19.69,0,0,0-5.58.16,1.15,1.15,0,0,0-.81.54,1.21,1.21,0,0,0-.13,1,3.39,3.39,0,0,1-6.14,2.74,1.17,1.17,0,0,0-.8-.55,1.2,1.2,0,0,0-1,.23,19.46,19.46,0,0,0-3.84,4.06,1.19,1.19,0,0,0,.29,1.66l.12.07a3.48,3.48,0,0,1,1.58,4.2,3.41,3.41,0,0,1-4,2.08,1.2,1.2,0,0,0-1.44.9.36.36,0,0,0,0,.1,19.69,19.69,0,0,0,.16,5.58.9.9,0,0,0,.08.28,1.25,1.25,0,0,0,.46.53,1.21,1.21,0,0,0,1,.13,3.38,3.38,0,0,1,2.74,6.13,1.22,1.22,0,0,0-.55.81,1.16,1.16,0,0,0,.24.95,19.41,19.41,0,0,0,4.05,3.84,1.23,1.23,0,0,0,1.77-.41,3.41,3.41,0,0,1,4.2-1.58,3.48,3.48,0,0,1,2.08,4,1.2,1.2,0,0,0,.88,1.44l.12,0a19.32,19.32,0,0,0,5.58-.15,1.17,1.17,0,0,0,1-1.34,1,1,0,0,0,0-.17,3.39,3.39,0,0,1,6.15-2.74,1.18,1.18,0,0,0,1.62.4l.13-.09a19.42,19.42,0,0,0,3.84-4,1.22,1.22,0,0,0,.18-1,1.18,1.18,0,0,0-.59-.77,3.49,3.49,0,0,1-1.58-4.21,3.41,3.41,0,0,1,4-2.07,1.22,1.22,0,0,0,1-.18,1.18,1.18,0,0,0,.5-.84A19.33,19.33,0,0,0,212.35,138Z" fill="#ffe895"/> <path d="M212.35,138a1.18,1.18,0,0,0-.54-.81,1.21,1.21,0,0,0-1-.13A3.39,3.39,0,0,1,208.1,131a1.17,1.17,0,0,0,.55-.8,1.2,1.2,0,0,0-.24-.95,19.42,19.42,0,0,0-4-3.84,1.23,1.23,0,0,0-1.77.41,3.41,3.41,0,0,1-4.21,1.58,3.48,3.48,0,0,1-2.07-4,1.2,1.2,0,0,0-.88-1.45l-.12,0a19.69,19.69,0,0,0-5.58.16,1.15,1.15,0,0,0-.81.54,1.21,1.21,0,0,0-.13,1,3.39,3.39,0,0,1-6.14,2.74,1.17,1.17,0,0,0-.8-.55,1.2,1.2,0,0,0-1,.23,19.46,19.46,0,0,0-3.84,4.06,1.19,1.19,0,0,0,.29,1.66l.12.07a3.48,3.48,0,0,1,1.58,4.2,3.41,3.41,0,0,1-4,2.08,1.2,1.2,0,0,0-1.44.9.36.36,0,0,0,0,.1,19.69,19.69,0,0,0,.16,5.58.9.9,0,0,0,.08.28,1.25,1.25,0,0,0,.46.53,1.21,1.21,0,0,0,1,.13,3.38,3.38,0,0,1,2.74,6.13,1.22,1.22,0,0,0-.55.81,1.16,1.16,0,0,0,.24.95,19.41,19.41,0,0,0,4.05,3.84,1.23,1.23,0,0,0,1.77-.41,3.41,3.41,0,0,1,4.2-1.58,3.48,3.48,0,0,1,2.08,4,1.2,1.2,0,0,0,.88,1.44l.12,0a19.32,19.32,0,0,0,5.58-.15,1.17,1.17,0,0,0,1-1.34,1,1,0,0,0,0-.17,3.39,3.39,0,0,1,6.15-2.74,1.18,1.18,0,0,0,1.62.4l.13-.09a19.42,19.42,0,0,0,3.84-4,1.22,1.22,0,0,0,.18-1,1.18,1.18,0,0,0-.59-.77,3.49,3.49,0,0,1-1.58-4.21,3.41,3.41,0,0,1,4-2.07,1.22,1.22,0,0,0,1-.18,1.18,1.18,0,0,0,.5-.84A19.33,19.33,0,0,0,212.35,138Z" fill="none" stroke="#ffa18f" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> </g> <path d="M196.75,139.1a4.16,4.16,0,0,0-6.53,3.6c.13,2.2,2.48,3.71,4.43,4.37,5.59,1.86,9.65-3.06,9.06-7.5-1.07-8.16-9.23-9.94-15.37-7.35-5.32,2.24-9,9.54-3.61,16.31,2.64,3.35,8.45,5.46,12.36,3" fill="none" stroke="#ffa18f" stroke-miterlimit="10" stroke-width="1.2"/> </g> <g class="hero-anim-sparkles"> <g> <line x1="434.5" y1="154.09" x2="434.5" y2="157.9" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="434.5" y1="165.91" x2="434.5" y2="169.72" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="442.31" y1="161.91" x2="438.51" y2="161.91" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="430.49" y1="161.91" x2="426.69" y2="161.91" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> </g> <g> <line x1="526.24" y1="200.55" x2="526.24" y2="204.36" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="526.24" y1="212.37" x2="526.24" y2="216.18" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="534.05" y1="208.36" x2="530.24" y2="208.36" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="522.23" y1="208.36" x2="518.43" y2="208.36" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> </g> <g> <line x1="414.54" y1="106.47" x2="414.54" y2="109.76" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="414.54" y1="116.67" x2="414.54" y2="119.96" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="421.29" y1="113.22" x2="418" y2="113.22" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="411.09" y1="113.22" x2="407.8" y2="113.22" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> </g> <g> <line x1="485.84" y1="218.54" x2="485.84" y2="221.24" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="485.84" y1="226.93" x2="485.84" y2="229.63" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="491.39" y1="224.09" x2="488.69" y2="224.09" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <line x1="483" y1="224.09" x2="480.29" y2="224.09" fill="none" stroke="#fff6b3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> </g> </g> <g class="hero-anim-fishes"> <g class="hero-anim-fish"> <path d="M551.13,243.45c6.38,0,13.15,4.66,13.15,4.66s-6.77,4.66-13.15,4.66a13.17,13.17,0,0,1-9.92-4.66A13.17,13.17,0,0,1,551.13,243.45Z" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <polyline points="568.51 251 564.97 248.12 568.51 245.22" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> </g> <g> <path d="M465.18,243.45c-6.37,0-13.14,4.66-13.14,4.66s6.77,4.66,13.14,4.66a13.21,13.21,0,0,0,9.93-4.66A13.21,13.21,0,0,0,465.18,243.45Z" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <polyline points="447.81 251 451.35 248.12 447.81 245.22" fill="none" stroke="#ee5b68" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> </g> </g> <path class="hero-anim-draw-fish" d="M563.79,256.28v2.56a26,26,0,0,1-51.88-1.61v-.92a24,24,0,0,1,.34-3.28c2.18-12.44,20-12.05,21.82.45a27.09,27.09,0,0,1,.25,4.76v-1a26,26,0,0,1-51.92,2.88,27.67,27.67,0,0,1,0-2.88,24.64,24.64,0,0,1,.36-4.2c2.18-12.44,20-12,21.81.45a26.68,26.68,0,0,1,.22,5.36,26,26,0,0,1-51.88-1.61" fill="none" stroke="#fff6b3" stroke-miterlimit="10" stroke-width="1.2"/> <g class="hero-anim-flowers"> <g> <path d="M154.77,295.67a2.84,2.84,0,0,0-3.17-4l-2.32.51a.72.72,0,0,1-.64-.18l-1.74-1.62a2.8,2.8,0,0,0-2.93-.59h0a2.82,2.82,0,0,0-1.83,2.38l-.23,2.37a.74.74,0,0,1-.37.55l-2.08,1.15a2.83,2.83,0,0,0,.23,5.07l2.18,1a.72.72,0,0,1,.41.52l.45,2.33a2.85,2.85,0,0,0,3.34,2.25,3.17,3.17,0,0,0,.44-.12,2.74,2.74,0,0,0,1.12-.78l1.58-1.77a.7.7,0,0,1,.62-.24l2.36.3a2.84,2.84,0,0,0,3.17-2.47,2.91,2.91,0,0,0-.37-1.78l-1.2-2a.7.7,0,0,1,0-.66Z" fill="#ffe895" stroke="#ffca6c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path d="M141.91,294.56s1,7.48,12.94,7.48" fill="#ffe895" stroke="#ffca6c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> </g> <g> <path d="M122.5,253.89a3,3,0,0,0,1.37-4,3,3,0,0,0-1.24-1.31l-2.2-1.16a.73.73,0,0,1-.39-.57l-.3-2.47a2.93,2.93,0,0,0-2-2.45h0a3,3,0,0,0-3.06.67l-1.79,1.74a.73.73,0,0,1-.66.2l-2.44-.48a3,3,0,0,0-3.24,4.22l1.1,2.24a.71.71,0,0,1,0,.69l-1.21,2.17a3,3,0,0,0,3,4.39l2.46-.36a.78.78,0,0,1,.66.23l1.69,1.83a3,3,0,0,0,5.11-1.52l.42-2.45a.74.74,0,0,1,.42-.55Z" fill="#ffe895" stroke="#ffca6c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path d="M120.43,247.41s-2.11,4.09-12.76,3.79" fill="#ffe895" stroke="#ffca6c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> </g> </g> <g class="hero-anim-mushroom"> <path d="M178.42,244.92a18.22,18.22,0,0,0-23.09,2.33c-4.64,4.59,0,5.58,5.45,8.42a2.19,2.19,0,0,1,.93,3,2.14,2.14,0,0,1-.75.83l-5,3.25a6.79,6.79,0,1,0,7,11.65,6.68,6.68,0,0,0,2-1.86l3.39-4.41a2.18,2.18,0,0,1,3.06-.41,2.28,2.28,0,0,1,.68.89c2.4,5.64,3.65,10,8.69,5.36a18.47,18.47,0,0,0,1.05-26.1A18.18,18.18,0,0,0,178.42,244.92Z" fill="#9683ba" stroke="#c9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path d="M158.25,261.53s20.6-11.08,26.69,6.73" fill="none" stroke="#c9bde0" stroke-miterlimit="10" stroke-width="1"/> </g> <ellipse class="hero-anim-draw-2" class="hero-anim-draw" cx="310.82" cy="469.86" rx="14.22" ry="20.68" transform="translate(-238.57 345.19) rotate(-43.73)" fill="none" stroke="#82cdb2" stroke-miterlimit="10" stroke-width="1.2"/> <ellipse class="hero-anim-draw-3" class="hero-anim-draw" cx="323" cy="469.77" rx="20.68" ry="14.22" transform="translate(-239.74 378.44) rotate(-46.27)" fill="none" stroke="#82cdb2" stroke-miterlimit="10" stroke-width="1.2"/> <line class="hero-anim-draw-4" class="hero-anim-draw" x1="85.36" y1="97.29" x2="208.76" y2="97.29" fill="none" stroke="#bfe6c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line class="hero-anim-draw-5" class="hero-anim-draw" x1="101.2" y1="106.93" x2="192.92" y2="106.93" fill="none" stroke="#bfe6c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path class="hero-anim-draw-6" class="hero-anim-draw" d="M553.31,228.22C542.31,107.37,440.71,12.71,317,12.71c-62.86,0-119.63,24.68-162.09,64.58l-11,10.86S280.4,68.15,317.1,121c36.71-52.8,173.19-32.84,173.19-32.84" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line class="hero-anim-draw-7" class="hero-anim-draw" x1="317.07" y1="95.64" x2="317.07" y2="120.93" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <polyline class="hero-anim-draw-8" class="hero-anim-draw" points="310.71 106.03 317.07 112.4 323.44 106.03" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <path class="hero-anim-draw-9" class="hero-anim-draw" d="M549.67,296.87C527.91,405.48,432,487.29,317,487.29,186,487.29,79.71,381.05,79.71,250a236.14,236.14,0,0,1,39.87-131.7" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <polyline class="hero-anim-draw-10" class="hero-anim-draw" points="313.11 100.3 317.07 104.27 321.03 100.3" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <g class="hero-anim-cookie"> <path d="M511.64,157.17a40.7,40.7,0,0,0,1.79-17.73,40,40,0,0,0-77.94-6.77l-.38,1.16a11.21,11.21,0,1,1,19.35,11.34h0l.26.05a11.22,11.22,0,0,1,12.79,16.44s13.62-1.84,16.44,9.12c2.17,8.46-4.81,13.47-4.81,13.47l.5-.09C494.4,181.6,506.92,171.38,511.64,157.17Z" fill="#ffca6c" stroke="#a48872" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <circle cx="483.41" cy="123.01" r="6.37" fill="none" stroke="#a48872" stroke-miterlimit="10" stroke-width="1.2"/> <circle cx="504.61" cy="141.5" r="3.22" fill="none" stroke="#a48872" stroke-miterlimit="10" stroke-width="1.2"/> <circle cx="484.48" cy="141.52" r="1.71" fill="none" stroke="#a48872" stroke-miterlimit="10" stroke-width="1.2"/> <circle cx="500.88" cy="125.23" r="1.71" fill="none" stroke="#a48872" stroke-miterlimit="10" stroke-width="1.2"/> <circle cx="492.28" cy="157.88" r="4.71" fill="none" stroke="#a48872" stroke-miterlimit="10" stroke-width="1.2"/> </g> <g class="hero-anim-salts"> <circle opacity="0" cx="514.78" cy="342.68" r="1.85" fill="#fff8ec"/> <circle opacity="0" cx="498.12" cy="351.19" r="1.85" fill="#fff8ec"/> <circle opacity="0" cx="512.54" cy="362.98" r="1.85" fill="#fff8ec"/> <circle opacity="0" cx="499.96" cy="382.9" r="1.85" fill="#fff8ec"/> <circle opacity="0" cx="465.98" cy="367.98" r="1.85" fill="#fff8ec"/> <circle opacity="0" cx="448.07" cy="355.38" r="1.85" fill="#fff8ec"/> <circle opacity="0" cx="478.99" cy="383.16" r="1.85" fill="#fff8ec"/> <circle opacity="0" cx="451.21" cy="372.16" r="1.85" fill="#fff8ec"/> <circle opacity="0" cx="486.85" cy="367.18" r="1.85" fill="#fff8ec"/> </g> <g class="hero-anim-pepper"> <path d="M506.51,329.1h0a11.31,11.31,0,0,1-4.3-13l4.06-12.7c2.64-9.83,14.14-9.58,20.33-5.17l.95.68c6.19,4.42,10.25,12.79,2.09,21.16L521,328a11.63,11.63,0,0,1-13.82,1.61Z" fill="#9da2a7" stroke="#d9dacb" stroke-miterlimit="10"/> <path d="M519.18,329.41c3.89-4,.49-8.92-3.38-11.68l-.65-.46c-4.15-3-12.46-5.08-13.4,1.59,0,0-1.12,5.84,3.61,9.43C513.13,334.19,519.18,329.41,519.18,329.41Z" fill="#d9dacb"/> <circle cx="508.88" cy="326.22" r="0.8" fill="#4b4b4b"/> <circle cx="513.96" cy="325.88" r="0.8" fill="#4b4b4b"/> <circle cx="512.56" cy="320.69" r="0.8" fill="#4b4b4b"/> <circle cx="507.39" cy="321.35" r="0.8" fill="#4b4b4b"/> </g> <g class="hero-anim-salt"> <path d="M483.31,355.48h0a11.38,11.38,0,0,1-13.57-2.17L460.35,344c-7.54-6.84-2.06-17,4.69-20.45l1-.53c6.75-3.49,16-3.28,19.78,7.8L489,342.13a11.21,11.21,0,0,1-5.69,13.35Z" fill="#9da2a7" stroke="#d9dacb" stroke-miterlimit="10"/> <path d="M489.44,344.94c-.4-5.56-7.77-5.1-12-2.92l-.71.37c-4.53,2.34-10.69,8.56-5.19,12.44a10.66,10.66,0,0,0,8.36,2.06,13.91,13.91,0,0,0,8.25-5.9A9.43,9.43,0,0,0,489.44,344.94Z" fill="#d9dacb"/> <circle cx="481.06" cy="350.15" r="1.28" fill="#4b4b4b"/> </g> <g class="hero-anim-leaf"> <path d="M152.35,345.79l7.49,2.48h0l-2.48,7.5a13.5,13.5,0,0,1-17.07,8.58h0l-7.49-2.47h0l2.48-7.5a13.51,13.51,0,0,1,17.07-8.59Z" fill="#bfe6c7" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M159.18,348.55s-7.36,13.19-26.05,13.24c0,0,9.18-4.25,13-11.77" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> </g> <g class="hero-anim-leaf-2"> <path d="M127.08,322.63l4.09-6.76h0l6.76,4.09a13.51,13.51,0,0,1,4.58,18.54l-4.1,6.76h0l-6.75-4.09A13.5,13.5,0,0,1,127.08,322.63Z" fill="#bfe6c7" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path d="M131.19,316.5s11.16,10,7,28.23c0,0-1.93-9.69-8.42-15.07" fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> </g> <g class="hero-anim-decor"> <g> <path d="M9.47,118.12l.31-12.55h0l12.57.31a21.48,21.48,0,0,1,20.95,22h0L43,140.45h0l-12.57-.31a21.49,21.49,0,0,1-21-22Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M10.28,106.41s23.3,5,32,33.4c0,0-10.33-11.85-23.53-14.15" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> </g> <g> <path d="M587.56,385.08l12.55-.4h0l.4,12.56a21.48,21.48,0,0,1-20.8,22.16h0l-12.56.4h0l-.4-12.56a21.49,21.49,0,0,1,20.8-22.16Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M599.3,385.23s-3.68,23.54-31.55,33.82c0,0,11.25-11,12.8-24.28" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> </g> <g> <path d="M575.74,42.53A18.23,18.23,0,0,0,555,52.94c-2.7,5.94,2,5.23,8.09,5.93a2.19,2.19,0,0,1,1.52,3.46l-3.51,4.83a6.79,6.79,0,1,0,11.94,5.91l1.6-5.32a2.18,2.18,0,0,1,3.67-.88c4.24,4.41,7,8,10,1.9A18.46,18.46,0,0,0,580,44,18.26,18.26,0,0,0,575.74,42.53Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M562.85,65.26s15.29-17.7,27.31-3.21" fill="none" stroke="#fff8ec" stroke-miterlimit="10"/> </g> <g> <path d="M83.75,382a5.54,5.54,0,0,0-3.23-9.41l-4.63-.6a1.4,1.4,0,0,1-1-.74l-2.14-4.15a5.47,5.47,0,0,0-5-3h0a5.52,5.52,0,0,0-4.93,3.18l-2,4.21a1.45,1.45,0,0,1-1,.78l-4.6.74a5.56,5.56,0,0,0-3,9.51l3.39,3.2A1.33,1.33,0,0,1,56,387l-.71,4.58A5.56,5.56,0,0,0,60,397.9a5.36,5.36,0,0,0,3.46-.6l4.09-2.23a1.4,1.4,0,0,1,1.29,0L73,397.18a5.55,5.55,0,0,0,7.48-2.38,5.47,5.47,0,0,0,.52-3.62l-.86-4.62a1.36,1.36,0,0,1,.37-1.23Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M60.76,371.56S57.68,386,79.7,393.85" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M83.75,382a5.54,5.54,0,0,0-3.23-9.41l-4.63-.6a1.4,1.4,0,0,1-1-.74l-2.14-4.15a5.47,5.47,0,0,0-5-3h0a5.52,5.52,0,0,0-4.93,3.18l-2,4.21a1.45,1.45,0,0,1-1,.78l-4.6.74a5.56,5.56,0,0,0-3,9.51l3.39,3.2A1.33,1.33,0,0,1,56,387l-.71,4.58A5.56,5.56,0,0,0,60,397.9a5.36,5.36,0,0,0,3.46-.6l4.09-2.23a1.4,1.4,0,0,1,1.29,0L73,397.18a5.55,5.55,0,0,0,7.48-2.38,5.47,5.47,0,0,0,.52-3.62l-.86-4.62a1.36,1.36,0,0,1,.37-1.23Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M60.76,371.56S57.68,386,79.7,393.85" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> </g> <g class="hero-anim-decor-2" class="hero-anim-decor"> <path d="M48.57,441.44a4.65,4.65,0,0,0,6-5.84l-1.22-3.72a1.16,1.16,0,0,1,.18-1.06l2.36-3.11a4.62,4.62,0,0,0,.46-4.87h0a4.6,4.6,0,0,0-4.18-2.57H48.21a1.23,1.23,0,0,1-1-.48L45,416.59a4.66,4.66,0,0,0-8.26,1.19l-1.19,3.72a1.17,1.17,0,0,1-.77.76l-3.72,1.12a4.65,4.65,0,0,0-3.12,5.8,5,5,0,0,0,.28.73,4.52,4.52,0,0,0,1.43,1.67l3.16,2.29a1.16,1.16,0,0,1,.47,1l-.09,3.91a4.64,4.64,0,0,0,7.42,3.88l3.18-2.32a1.17,1.17,0,0,1,1.07-.17Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M48.19,420.28s-12,2.88-10,22.37" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M48.57,441.44a4.65,4.65,0,0,0,6-5.84l-1.22-3.72a1.16,1.16,0,0,1,.18-1.06l2.36-3.11a4.62,4.62,0,0,0,.46-4.87h0a4.6,4.6,0,0,0-4.18-2.57H48.21a1.23,1.23,0,0,1-1-.48L45,416.59a4.66,4.66,0,0,0-8.26,1.19l-1.19,3.72a1.17,1.17,0,0,1-.77.76l-3.72,1.12a4.65,4.65,0,0,0-3.12,5.8,5,5,0,0,0,.28.73,4.52,4.52,0,0,0,1.43,1.67l3.16,2.29a1.16,1.16,0,0,1,.47,1l-.09,3.91a4.64,4.64,0,0,0,7.42,3.88l3.18-2.32a1.17,1.17,0,0,1,1.07-.17Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M48.19,420.28s-12,2.88-10,22.37" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> </g> </g> </g> <g class="hero-anim-white"> <g class="hero-anim-prawn"> <path d="M149,209.34a33.49,33.49,0,1,1-10.32-64c14.32,1.37,24.64,12.67,31.71,20l-2.92,4.06c-8.08,8.81-17.87,6.31-25.18,2.67-9.75-4.86-21.87.32-23.82,11-.08.48-.15,1-.2,1.47a16.85,16.85,0,0,0,14.92,18.59,16.67,16.67,0,0,0,3.53,0L154.27,202h0A9.1,9.1,0,0,1,149,209.34Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line x1="142.32" y1="172.14" x2="154.76" y2="151.43" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line x1="134.76" y1="175.19" x2="136.38" y2="145.14" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <polyline points="116.25 151.35 127.4 170.87 129.66 175.61" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line x1="103.89" y1="168.98" x2="120.13" y2="176.86" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line x1="104.25" y1="187.82" x2="117.49" y2="187.46" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line x1="122.12" y1="197.29" x2="111.6" y2="201.73" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line x1="129.23" y1="202.69" x2="125.46" y2="209.93" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path d="M168.7,163.62s23.48,21.43,51.76,4.65" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path d="M167.19,170a27.52,27.52,0,0,0,11.17,10.72" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <circle cx="158.05" cy="162.95" r="2.1" fill="#fff8ec"/> </g> <g class="hero-anim-fishcake"> <g class="hero-anim-a58c5a3e-76bf-4ba6-9abd-271a6ca17239"> <path d="M212.35,138a1.18,1.18,0,0,0-.54-.81,1.21,1.21,0,0,0-1-.13A3.39,3.39,0,0,1,208.1,131a1.17,1.17,0,0,0,.55-.8,1.2,1.2,0,0,0-.24-.95,19.42,19.42,0,0,0-4-3.84,1.23,1.23,0,0,0-1.77.41,3.41,3.41,0,0,1-4.21,1.58,3.48,3.48,0,0,1-2.07-4,1.2,1.2,0,0,0-.88-1.45l-.12,0a19.69,19.69,0,0,0-5.58.16,1.15,1.15,0,0,0-.81.54,1.21,1.21,0,0,0-.13,1,3.39,3.39,0,0,1-6.14,2.74,1.17,1.17,0,0,0-.8-.55,1.2,1.2,0,0,0-1,.23,19.46,19.46,0,0,0-3.84,4.06,1.19,1.19,0,0,0,.29,1.66l.12.07a3.48,3.48,0,0,1,1.58,4.2,3.41,3.41,0,0,1-4,2.08,1.2,1.2,0,0,0-1.44.9.36.36,0,0,0,0,.1,19.69,19.69,0,0,0,.16,5.58.9.9,0,0,0,.08.28,1.25,1.25,0,0,0,.46.53,1.21,1.21,0,0,0,1,.13,3.38,3.38,0,0,1,2.74,6.13,1.22,1.22,0,0,0-.55.81,1.16,1.16,0,0,0,.24.95,19.41,19.41,0,0,0,4.05,3.84,1.23,1.23,0,0,0,1.77-.41,3.41,3.41,0,0,1,4.2-1.58,3.48,3.48,0,0,1,2.08,4,1.2,1.2,0,0,0,.88,1.44l.12,0a19.32,19.32,0,0,0,5.58-.15,1.17,1.17,0,0,0,1-1.34,1,1,0,0,0,0-.17,3.39,3.39,0,0,1,6.15-2.74,1.18,1.18,0,0,0,1.62.4l.13-.09a19.42,19.42,0,0,0,3.84-4,1.22,1.22,0,0,0,.18-1,1.18,1.18,0,0,0-.59-.77,3.49,3.49,0,0,1-1.58-4.21,3.41,3.41,0,0,1,4-2.07,1.22,1.22,0,0,0,1-.18,1.18,1.18,0,0,0,.5-.84A19.33,19.33,0,0,0,212.35,138Z" fill="none"/> <path d="M212.35,138a1.18,1.18,0,0,0-.54-.81,1.21,1.21,0,0,0-1-.13A3.39,3.39,0,0,1,208.1,131a1.17,1.17,0,0,0,.55-.8,1.2,1.2,0,0,0-.24-.95,19.42,19.42,0,0,0-4-3.84,1.23,1.23,0,0,0-1.77.41,3.41,3.41,0,0,1-4.21,1.58,3.48,3.48,0,0,1-2.07-4,1.2,1.2,0,0,0-.88-1.45l-.12,0a19.69,19.69,0,0,0-5.58.16,1.15,1.15,0,0,0-.81.54,1.21,1.21,0,0,0-.13,1,3.39,3.39,0,0,1-6.14,2.74,1.17,1.17,0,0,0-.8-.55,1.2,1.2,0,0,0-1,.23,19.46,19.46,0,0,0-3.84,4.06,1.19,1.19,0,0,0,.29,1.66l.12.07a3.48,3.48,0,0,1,1.58,4.2,3.41,3.41,0,0,1-4,2.08,1.2,1.2,0,0,0-1.44.9.36.36,0,0,0,0,.1,19.69,19.69,0,0,0,.16,5.58.9.9,0,0,0,.08.28,1.25,1.25,0,0,0,.46.53,1.21,1.21,0,0,0,1,.13,3.38,3.38,0,0,1,2.74,6.13,1.22,1.22,0,0,0-.55.81,1.16,1.16,0,0,0,.24.95,19.41,19.41,0,0,0,4.05,3.84,1.23,1.23,0,0,0,1.77-.41,3.41,3.41,0,0,1,4.2-1.58,3.48,3.48,0,0,1,2.08,4,1.2,1.2,0,0,0,.88,1.44l.12,0a19.32,19.32,0,0,0,5.58-.15,1.17,1.17,0,0,0,1-1.34,1,1,0,0,0,0-.17,3.39,3.39,0,0,1,6.15-2.74,1.18,1.18,0,0,0,1.62.4l.13-.09a19.42,19.42,0,0,0,3.84-4,1.22,1.22,0,0,0,.18-1,1.18,1.18,0,0,0-.59-.77,3.49,3.49,0,0,1-1.58-4.21,3.41,3.41,0,0,1,4-2.07,1.22,1.22,0,0,0,1-.18,1.18,1.18,0,0,0,.5-.84A19.33,19.33,0,0,0,212.35,138Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> </g> <path d="M196.75,139.1a4.16,4.16,0,0,0-6.53,3.6c.13,2.2,2.48,3.71,4.43,4.37,5.59,1.86,9.65-3.06,9.06-7.5-1.07-8.16-9.23-9.94-15.37-7.35-5.32,2.24-9,9.54-3.61,16.31,2.64,3.35,8.45,5.46,12.36,3" fill="none" stroke="#fff8ec" stroke-miterlimit="10" stroke-width="1.2"/> </g> <g class="hero-anim-fishes"> <g> <path d="M465.18,243.45c-6.37,0-13.14,4.66-13.14,4.66s6.77,4.66,13.14,4.66a13.21,13.21,0,0,0,9.93-4.66A13.21,13.21,0,0,0,465.18,243.45Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <polyline points="447.81 251 451.35 248.12 447.81 245.22" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> </g> </g> <g class="hero-anim-flowers"> <g> <path d="M154.77,295.67a2.84,2.84,0,0,0-3.17-4l-2.32.51a.72.72,0,0,1-.64-.18l-1.74-1.62a2.8,2.8,0,0,0-2.93-.59h0a2.82,2.82,0,0,0-1.83,2.38l-.23,2.37a.74.74,0,0,1-.37.55l-2.08,1.15a2.83,2.83,0,0,0,.23,5.07l2.18,1a.72.72,0,0,1,.41.52l.45,2.33a2.85,2.85,0,0,0,3.34,2.25,3.17,3.17,0,0,0,.44-.12,2.74,2.74,0,0,0,1.12-.78l1.58-1.77a.7.7,0,0,1,.62-.24l2.36.3a2.84,2.84,0,0,0,3.17-2.47,2.91,2.91,0,0,0-.37-1.78l-1.2-2a.7.7,0,0,1,0-.66Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path d="M141.91,294.56s1,7.48,12.94,7.48" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> </g> <g> <path d="M122.5,253.89a3,3,0,0,0,1.37-4,3,3,0,0,0-1.24-1.31l-2.2-1.16a.73.73,0,0,1-.39-.57l-.3-2.47a2.93,2.93,0,0,0-2-2.45h0a3,3,0,0,0-3.06.67l-1.79,1.74a.73.73,0,0,1-.66.2l-2.44-.48a3,3,0,0,0-3.24,4.22l1.1,2.24a.71.71,0,0,1,0,.69l-1.21,2.17a3,3,0,0,0,3,4.39l2.46-.36a.78.78,0,0,1,.66.23l1.69,1.83a3,3,0,0,0,5.11-1.52l.42-2.45a.74.74,0,0,1,.42-.55Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path d="M120.43,247.41s-2.11,4.09-12.76,3.79" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> </g> </g> <g class="hero-anim-mushroom"> <path d="M178.42,244.92a18.22,18.22,0,0,0-23.09,2.33c-4.64,4.59,0,5.58,5.45,8.42a2.19,2.19,0,0,1,.93,3,2.14,2.14,0,0,1-.75.83l-5,3.25a6.79,6.79,0,1,0,7,11.65,6.68,6.68,0,0,0,2-1.86l3.39-4.41a2.18,2.18,0,0,1,3.06-.41,2.28,2.28,0,0,1,.68.89c2.4,5.64,3.65,10,8.69,5.36a18.47,18.47,0,0,0,1.05-26.1A18.18,18.18,0,0,0,178.42,244.92Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path d="M158.25,261.53s20.6-11.08,26.69,6.73" fill="none" stroke="#fff8ec" stroke-miterlimit="10" stroke-width="1"/> </g> <ellipse class="hero-anim-draw-2" class="hero-anim-draw" cx="310.82" cy="469.86" rx="14.22" ry="20.68" transform="translate(-238.57 345.19) rotate(-43.73)" fill="none" stroke="#fff8ec" stroke-miterlimit="10" stroke-width="1.2"/> <ellipse class="hero-anim-draw-3" class="hero-anim-draw" cx="323" cy="469.77" rx="20.68" ry="14.22" transform="translate(-239.74 378.44) rotate(-46.27)" fill="none" stroke="#fff8ec" stroke-miterlimit="10" stroke-width="1.2"/> <line class="hero-anim-draw-4" class="hero-anim-draw" x1="85.36" y1="97.29" x2="208.76" y2="97.29" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line class="hero-anim-draw-5" class="hero-anim-draw" x1="101.2" y1="106.93" x2="192.92" y2="106.93" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <path class="hero-anim-draw-6" class="hero-anim-draw" d="M553.31,228.22C542.31,107.37,440.71,12.71,317,12.71c-62.86,0-119.63,24.68-162.09,64.58l-11,10.86S280.4,68.15,317.1,121c36.71-52.8,173.19-32.84,173.19-32.84" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <line class="hero-anim-draw-7" class="hero-anim-draw" x1="317.07" y1="95.64" x2="317.07" y2="120.93" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <polyline class="hero-anim-draw-8" class="hero-anim-draw" points="310.71 106.03 317.07 112.4 323.44 106.03" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <path class="hero-anim-draw-9" class="hero-anim-draw" d="M549.67,296.87C527.91,405.48,432,487.29,317,487.29,186,487.29,79.71,381.05,79.71,250a236.14,236.14,0,0,1,39.87-131.7" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <polyline class="hero-anim-draw-10" class="hero-anim-draw" points="313.11 100.3 317.07 104.27 321.03 100.3" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"/> <g class="hero-anim-cookie"> <path d="M511.64,157.17a40.7,40.7,0,0,0,1.79-17.73,40,40,0,0,0-77.94-6.77l-.38,1.16a11.21,11.21,0,1,1,19.35,11.34h0l.26.05a11.22,11.22,0,0,1,12.79,16.44s13.62-1.84,16.44,9.12c2.17,8.46-4.81,13.47-4.81,13.47l.5-.09C494.4,181.6,506.92,171.38,511.64,157.17Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/> <circle cx="483.41" cy="123.01" r="6.37" fill="none" stroke="#fff8ec" stroke-miterlimit="10" stroke-width="1.2"/> <circle cx="504.61" cy="141.5" r="3.22" fill="none" stroke="#fff8ec" stroke-miterlimit="10" stroke-width="1.2"/> <circle cx="484.48" cy="141.52" r="1.71" fill="none" stroke="#fff8ec" stroke-miterlimit="10" stroke-width="1.2"/> <circle cx="500.88" cy="125.23" r="1.71" fill="none" stroke="#fff8ec" stroke-miterlimit="10" stroke-width="1.2"/> <circle cx="492.28" cy="157.88" r="4.71" fill="none" stroke="#fff8ec" stroke-miterlimit="10" stroke-width="1.2"/> </g> <g class="hero-anim-pepper"> <path d="M506.51,329.1h0a11.31,11.31,0,0,1-4.3-13l4.06-12.7c2.64-9.83,14.14-9.58,20.33-5.17l.95.68c6.19,4.42,10.25,12.79,2.09,21.16L521,328a11.63,11.63,0,0,1-13.82,1.61Z" fill="none" stroke="#fff8ec" stroke-miterlimit="10"/> <path d="M519.18,329.41c3.89-4,.49-8.92-3.38-11.68l-.65-.46c-4.15-3-12.46-5.08-13.4,1.59,0,0-1.12,5.84,3.61,9.43C513.13,334.19,519.18,329.41,519.18,329.41Z" fill="none" stroke="#fff8ec"/> <circle cx="508.88" cy="326.22" r="0.8" fill="#fff8ec"/> <circle cx="513.96" cy="325.88" r="0.8" fill="#fff8ec"/> <circle cx="512.56" cy="320.69" r="0.8" fill="#fff8ec"/> <circle cx="507.39" cy="321.35" r="0.8" fill="#fff8ec"/> </g> <g class="hero-anim-salt"> <path d="M483.31,355.48h0a11.38,11.38,0,0,1-13.57-2.17L460.35,344c-7.54-6.84-2.06-17,4.69-20.45l1-.53c6.75-3.49,16-3.28,19.78,7.8L489,342.13a11.21,11.21,0,0,1-5.69,13.35Z" fill="none" stroke="#fff8ec" stroke-miterlimit="10"/> <path d="M489.44,344.94c-.4-5.56-7.77-5.1-12-2.92l-.71.37c-4.53,2.34-10.69,8.56-5.19,12.44a10.66,10.66,0,0,0,8.36,2.06,13.91,13.91,0,0,0,8.25-5.9A9.43,9.43,0,0,0,489.44,344.94Z" stroke="#fff8ec" fill="none"/> <circle cx="481.06" cy="350.15" r="1.28" fill="#fff8ec"/> </g> <g class="hero-anim-decor"> <g> <path d="M9.47,118.12l.31-12.55h0l12.57.31a21.48,21.48,0,0,1,20.95,22h0L43,140.45h0l-12.57-.31a21.49,21.49,0,0,1-21-22Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M10.28,106.41s23.3,5,32,33.4c0,0-10.33-11.85-23.53-14.15" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> </g> <g> <path d="M587.56,385.08l12.55-.4h0l.4,12.56a21.48,21.48,0,0,1-20.8,22.16h0l-12.56.4h0l-.4-12.56a21.49,21.49,0,0,1,20.8-22.16Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M599.3,385.23s-3.68,23.54-31.55,33.82c0,0,11.25-11,12.8-24.28" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> </g> <g> <path d="M575.74,42.53A18.23,18.23,0,0,0,555,52.94c-2.7,5.94,2,5.23,8.09,5.93a2.19,2.19,0,0,1,1.52,3.46l-3.51,4.83a6.79,6.79,0,1,0,11.94,5.91l1.6-5.32a2.18,2.18,0,0,1,3.67-.88c4.24,4.41,7,8,10,1.9A18.46,18.46,0,0,0,580,44,18.26,18.26,0,0,0,575.74,42.53Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M562.85,65.26s15.29-17.7,27.31-3.21" fill="none" stroke="#fff8ec" stroke-miterlimit="10"/> </g> <g> <path d="M83.75,382a5.54,5.54,0,0,0-3.23-9.41l-4.63-.6a1.4,1.4,0,0,1-1-.74l-2.14-4.15a5.47,5.47,0,0,0-5-3h0a5.52,5.52,0,0,0-4.93,3.18l-2,4.21a1.45,1.45,0,0,1-1,.78l-4.6.74a5.56,5.56,0,0,0-3,9.51l3.39,3.2A1.33,1.33,0,0,1,56,387l-.71,4.58A5.56,5.56,0,0,0,60,397.9a5.36,5.36,0,0,0,3.46-.6l4.09-2.23a1.4,1.4,0,0,1,1.29,0L73,397.18a5.55,5.55,0,0,0,7.48-2.38,5.47,5.47,0,0,0,.52-3.62l-.86-4.62a1.36,1.36,0,0,1,.37-1.23Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M60.76,371.56S57.68,386,79.7,393.85" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M83.75,382a5.54,5.54,0,0,0-3.23-9.41l-4.63-.6a1.4,1.4,0,0,1-1-.74l-2.14-4.15a5.47,5.47,0,0,0-5-3h0a5.52,5.52,0,0,0-4.93,3.18l-2,4.21a1.45,1.45,0,0,1-1,.78l-4.6.74a5.56,5.56,0,0,0-3,9.51l3.39,3.2A1.33,1.33,0,0,1,56,387l-.71,4.58A5.56,5.56,0,0,0,60,397.9a5.36,5.36,0,0,0,3.46-.6l4.09-2.23a1.4,1.4,0,0,1,1.29,0L73,397.18a5.55,5.55,0,0,0,7.48-2.38,5.47,5.47,0,0,0,.52-3.62l-.86-4.62a1.36,1.36,0,0,1,.37-1.23Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M60.76,371.56S57.68,386,79.7,393.85" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> </g> <g class="hero-anim-decor-2" class="hero-anim-decor"> <path d="M48.57,441.44a4.65,4.65,0,0,0,6-5.84l-1.22-3.72a1.16,1.16,0,0,1,.18-1.06l2.36-3.11a4.62,4.62,0,0,0,.46-4.87h0a4.6,4.6,0,0,0-4.18-2.57H48.21a1.23,1.23,0,0,1-1-.48L45,416.59a4.66,4.66,0,0,0-8.26,1.19l-1.19,3.72a1.17,1.17,0,0,1-.77.76l-3.72,1.12a4.65,4.65,0,0,0-3.12,5.8,5,5,0,0,0,.28.73,4.52,4.52,0,0,0,1.43,1.67l3.16,2.29a1.16,1.16,0,0,1,.47,1l-.09,3.91a4.64,4.64,0,0,0,7.42,3.88l3.18-2.32a1.17,1.17,0,0,1,1.07-.17Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M48.19,420.28s-12,2.88-10,22.37" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M48.57,441.44a4.65,4.65,0,0,0,6-5.84l-1.22-3.72a1.16,1.16,0,0,1,.18-1.06l2.36-3.11a4.62,4.62,0,0,0,.46-4.87h0a4.6,4.6,0,0,0-4.18-2.57H48.21a1.23,1.23,0,0,1-1-.48L45,416.59a4.66,4.66,0,0,0-8.26,1.19l-1.19,3.72a1.17,1.17,0,0,1-.77.76l-3.72,1.12a4.65,4.65,0,0,0-3.12,5.8,5,5,0,0,0,.28.73,4.52,4.52,0,0,0,1.43,1.67l3.16,2.29a1.16,1.16,0,0,1,.47,1l-.09,3.91a4.64,4.64,0,0,0,7.42,3.88l3.18-2.32a1.17,1.17,0,0,1,1.07-.17Z" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/> <path d="M48.19,420.28s-12,2.88-10,22.37" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-linejoin="round"/> </g> </g> </g> </svg> </div> <header class="c-section-header c-section-header--large u-wrap u-flow--m"> <h1 class="c-h c-h-7">100 Smart Interface Design Patterns & Live Examples. 10h Video + UX Training.</h1> <div class="o-prose"> <p><strong>35 video lessons</strong> + <strong>4-weeks UX training</strong>.<br />For <strong>UI/UX designers</strong> and <strong>front-end developers</strong>.</p> </div> <p> <a class="c-section-header__scroll" href="#newsletter"> <span>Jump to details ↓</span> </a> </p> </header> </figure> <aside class="o-slat c-newsletter" id="newsletter"> <div class="u-wrap"> <form class="c-newsletter__content js-newsletter"> <figure class="c-newsletter__image"> <svg id="newsletter-svg" viewBox="0 0 183 136"> <mask id="newsletter-mask"> <polygon class="newsletter-mask" stroke="#000" fill="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="129.41 145.74 53.57 146.02 53.57 84.69 91.93 107.76 129.41 84.69 129.41 145.74"/> <rect fill="#fff" x="0" y="0" width='183' height="136"/> <rect fill="#000" x="0" y="130" width='183' height="136"/> </mask> <g class="newsletter-sparkles" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10"> <line x1="150.99" x2="150.99" y1="47.92" y2="49.28" stroke-width=".8"/> <line x1="150.99" x2="150.99" y1="52.14" y2="53.5" stroke-width=".8"/> <line x1="153.78" x2="152.42" y1="50.71" y2="50.71" stroke-width=".8"/> <line x1="149.56" x2="148.2" y1="50.71" y2="50.71" stroke-width=".8"/> <line x1="29.3" x2="29.3" y1="59.8" y2="63.63" stroke-width="1.71"/> <line x1="29.3" x2="29.3" y1="71.68" y2="75.5" stroke-width="1.71"/> <line x1="37.15" x2="33.32" y1="67.65" y2="67.65" stroke-width="1.71"/> <line x1="25.27" x2="21.45" y1="67.65" y2="67.65" stroke-width="1.71"/> <line x1="169.35" x2="169.35" y1="44.22" y2="48.04" stroke-width="1.71"/> <line x1="169.35" x2="169.35" y1="56.09" y2="59.91" stroke-width="1.71"/> <line x1="177.2" x2="173.37" y1="52.07" y2="52.07" stroke-width="1.71"/> <line x1="165.33" x2="161.5" y1="52.07" y2="52.07" stroke-width="1.71"/> <line x1="12.99" x2="12.99" y1="50.92" y2="52.28" stroke-width=".8"/> <line x1="12.99" x2="12.99" y1="55.14" y2="56.5" stroke-width=".8"/> <line x1="15.78" x2="14.42" y1="53.71" y2="53.71" stroke-width=".8"/> <line x1="11.56" x2="10.2" y1="53.71" y2="53.71" stroke-width=".8"/> <line x1="9.99" x2="9.99" y1="72.92" y2="74.28" stroke-width=".8"/> <line x1="9.99" x2="9.99" y1="77.14" y2="78.5" stroke-width=".8"/> <line x1="12.78" x2="11.42" y1="75.71" y2="75.71" stroke-width=".8"/> <line x1="8.56" x2="7.2" y1="75.71" y2="75.71" stroke-width=".8"/> <line x1="157.92" x2="157.92" y1="32.87" y2="34.23" stroke-width=".8"/> <line x1="157.92" x2="157.92" y1="37.09" y2="38.45" stroke-width=".8"/> <line x1="160.71" x2="159.35" y1="35.66" y2="35.66" stroke-width=".8"/> <line x1="156.49" x2="155.13" y1="35.66" y2="35.66" stroke-width=".8"/> </g> <polygon class="newsletter-open" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="129.42 84.44 91.5 58.64 53.58 84.44 91.5 107.5 129.42 84.44"/> <polygon class="newsletter-closed" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="129.42 84.44 91.5 84.44 53.58 84.44 91.5 107.5 129.42 84.44"/> <line x1="53.58" x2="128.02" y1="84.44" y2="84.44" fill="#ffa18f" stroke="#ee5b68" stroke-linejoin="round" stroke-width="2"/> <g mask="url(#newsletter-mask)"> <g class="newsletter-letter"> <rect width="60.74" height="77.3" x="61.13" y="40.65" fill="#bfe6c7" stroke="#82cdb2" stroke-miterlimit="10" stroke-width="2"/> <g fill="none" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.23"> <path d="M86.39,71.27c1.94-1.37,2.41-5.61.23-9.1s-5.28-5.27-7.35-4.34"/> <path d="M99.45,57.18c-.06.1-2.47,4.62-2.51,4.71-1.39,2.6-.77,5.62,1.36,6.76s5-.05,6.37-2.65l2.49-4.72"/> <line x1="103.31" x2="101.74" y1="59.23" y2="62.18"/> <line x1="97.91" x2="105.21" y1="60.93" y2="64.8"/> <line x1="99.32" x2="107.15" y1="80.59" y2="80.59"/> <line x1="83.67" x2="75.84" y1="80.59" y2="80.59"/> <line x1="79.15" x2="98.9" y1="57.86" y2="95.51"/> <path d="M98.17,68.56l-14.08,27"/> </g> </g> </g> <polygon fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="129.42 132.64 53.58 132.64 53.58 84.44 91.94 107.51 129.42 84.44 129.42 132.64"/> <path class="newsletter-line" fill="#fff6b3" d="M45.23,48.34,34.05,44.45a1.09,1.09,0,0,1-.71-1.37l0-.08c.07-.2.14-.4.22-.59a1.11,1.11,0,0,1,1.41-.6l11,4.41a1.12,1.12,0,0,1,.62,1.43h0A1.11,1.11,0,0,1,45.23,48.34Z"/> <path class="newsletter-line" fill="#fff6b3" d="M136.78,46.85h0a1.12,1.12,0,0,1,.5-1.48L147.84,40a1.1,1.1,0,0,1,1.48.48v0l.27.56a1.11,1.11,0,0,1-.56,1.47h0l-10.8,4.84A1.11,1.11,0,0,1,136.78,46.85Z"/> <path class="newsletter-line" fill="#fff6b3" d="M53.27,36,44,28.64a1.09,1.09,0,0,1-.18-1.54v0l.39-.48a1.1,1.1,0,0,1,1.56-.12h0l8.94,7.77a1.11,1.11,0,0,1,.11,1.55h0A1.09,1.09,0,0,1,53.3,36Z"/> <path class="newsletter-line" fill="#fff6b3" d="M127.44,32.75h0a1.09,1.09,0,0,1,0-1.54h0l8.25-8.49a1.12,1.12,0,0,1,1.57,0h0l.43.44a1.1,1.1,0,0,1,0,1.56h0L129,32.79a1.09,1.09,0,0,1-1.54,0Z"/> <path class="newsletter-line" fill="#fff6b3" d="M65.65,24.83l-6.37-10a1.12,1.12,0,0,1,.35-1.54l.52-.31a1.11,1.11,0,0,1,1.52.39h0l5.91,10.26a1.11,1.11,0,0,1-.4,1.5h0a1.11,1.11,0,0,1-1.54-.31Z"/> <path class="newsletter-line" fill="#fff6b3" d="M114.23,23.18h0a1.12,1.12,0,0,1-.53-1.47l5-10.73a1.11,1.11,0,0,1,1.46-.54h0l.56.28a1.09,1.09,0,0,1,.5,1.46l0,0-5.5,10.49A1.11,1.11,0,0,1,114.23,23.18Z"/> <path class="newsletter-line" fill="#fff6b3" d="M81,18.35,78.27,6.83a1.12,1.12,0,0,1,.84-1.34l.6-.12A1.09,1.09,0,0,1,81,6.21v0l2.2,11.63a1.11,1.11,0,0,1-.87,1.29h0A1.11,1.11,0,0,1,81,18.35Z"/> <path class="newsletter-line" fill="#fff6b3" d="M98.65,18.49h0a1.09,1.09,0,0,1-1-1.19v0L98.81,5.5a1.11,1.11,0,0,1,1.21-1h0l.61.07a1.11,1.11,0,0,1,.95,1.25h0L99.88,17.56a1.11,1.11,0,0,1-1.25.93Z"/> </svg> </figure> <h2 class="c-h c-h-4">Sign up for short design tips, and get 3 lessons for free!</h2> <div class="with-js"> <div class="c-input-inline-button"> <div> <label class="c-label" for="inline-newsletter-email">Your email</label> <input type="email" class="c-input" name="email" autocomplete="email" inputmode="email" placeholder="e.g. meow@garfield.com" id="inline-newsletter-email" required /> </div> <input type="submit" value="Subscribe" class="c-button u-link u-sans u-strong u-link-highlight c-button--shadow c-button--shadow-orange" /> </div> </div> <div class="without-js"> <a href="#newsletter-modal" class="c-button c-button--inline">Subscribe</a> </div> </form> </div> </aside> <section class="o-slat c-image-bleed" id="about-the-course"> <div class="u-wrap c-image-bleed__wrapper"> <div class="c-image-bleed__content u-flow"> <svg id="svg-tea" width="147" height="100"><g id="ef6dc2b2-320c-4d3d-b4bc-0ef0cbb74a2b" data-name="mug"><path fill="#c9bde0" stroke="#9683ba" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M36.17 29.39h52.46v68.37H36.17z"/><path fill="none" stroke="#9683ba" stroke-miterlimit="10" stroke-width="3" d="M35.39 41.56h-8.82a10.11 10.11 0 00-10.28 9.94v20.24a10.11 10.11 0 0010.28 9.94h9.64"/><g class="teabag"><path fill="#4b4b4b" stroke="#9683ba" stroke-linecap="round" stroke-linejoin="round" d="M53.73 29.58v22.36"/><path fill="#fff6b3" stroke="#9683ba" stroke-linecap="round" stroke-linejoin="round" d="M47.56 52.42h11.87v15.67H47.56z"/></g><g class="biscuit"><circle cx="96.03" cy="77.15" r="20.89" fill="#ffca6c" stroke="#c29c87" stroke-miterlimit="10" stroke-width="3"/><circle cx="104.25" cy="67.27" r="2.85" fill="#c29c87" class="a99dc85c-f3d4-4af6-8e43-3619c8f342da"/><circle cx="94.71" cy="61.96" r=".91" fill="#c29c87" class="a99dc85c-f3d4-4af6-8e43-3619c8f342da"/><circle cx="100.11" cy="77.35" r=".91" fill="#c29c87" class="a99dc85c-f3d4-4af6-8e43-3619c8f342da"/><circle cx="108.91" cy="77.62" r="1.84" fill="#c29c87" class="a99dc85c-f3d4-4af6-8e43-3619c8f342da"/><circle cx="92" cy="70.03" r="1.64" fill="#c29c87" class="a99dc85c-f3d4-4af6-8e43-3619c8f342da"/></g><path d="M133.38 98.25h11.75" class="bbf3470f-3fdc-40d2-a104-74de2e0b5fde"/></g><g id="tea-sparks" data-name="sparks" stroke="#fff8ec"><g><path d="M106.08 3.32v5.29M106.08 19.72V25M116.92 14.16h-5.28M100.52 14.16h-5.28" class="a1bba4b0-287f-4b4c-8a53-eb53467cbb39"/><path d="M106.08 3.32v5.29M106.08 19.72V25M116.92 14.16h-5.28M100.52 14.16h-5.28" class="eeb394a6-5cb3-4d6c-a778-4c41345df218"/></g><g><path d="M131.08 27.32v3.34M131.08 37.67V41M137.92 34.16h-3.33M127.57 34.16h-3.33" class="a08545e3-b7fe-47ac-a46b-45efa4c59c12"/><path d="M131.08 27.32v3.34M131.08 37.67V41M137.92 34.16h-3.33M127.57 34.16h-3.33" class="eeb394a6-5cb3-4d6c-a778-4c41345df218"/></g></g><path stroke="#9683ba" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M133.38,98.25h11.75"/><path stroke="#9683ba" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M1.98 98.25h120" id="e6c84628-788a-4076-8812-eac770b60636" data-name="baseline"/></svg> <h1 class="c-h c-h-6">Guidelines & best practices for common components in modern interfaces.</h1> <div class="o-prose o-prose--primary-links"> <p>Inventing a new solution for every problem takes time, and too often it’s just unnecessary. We can rely on <strong>bulletproof design patterns</strong> to avoid issues down the line. This course helps with just that.</p><p>We’ll study <strong>100s of hand-picked examples</strong> — from <strong>complex navigation</strong> to filters, tables and forms. We’ll dive into actual real-life challenges. And: we’ll design and review each other’s work, together, <strong>live</strong>.</p><p class="u-pad-top-xs"><a href="#table-of-contents" class="c-button c-button--inline c-button--blue c-button--shadow c-button--shadow-blue">Jump to the table of contents ↓</a></p> </div> </div> <figure class="c-image-bleed__image"> <picture> <source type="image/avif" srcset="/static/img/vitaly-stage--mobile.avif 540w" media="(max-width: 750px)" sizes="(max-width: 750px) 100vw, 100vw"> <source type="image/avif" srcset="/static/img/vitaly-stage.avif 940w" media="(min-width: 750px)" sizes="(min-width: 750px) 100vw, 100vw"> <source srcset="/static/img/vitaly-stage--mobile.jpg 540w" media="(max-width: 750px)" sizes="(max-width: 750px) 100vw, 100vw"> <source srcset="/static/img/vitaly-stage.jpg 940w" media="(min-width: 750px)" sizes="(min-width: 750px) 100vw, 100vw"> <img src="/static/img/vitaly-stage--mobile.jpg" width="987" height="580" decoding="async" loading="lazy" alt="Vitaly on stage, presenting at Nordic.js in 2019." /> </picture> <a href="#video-modal-678683072" id="video-modal-trigger-678683072" class="c-button c-button--split c-image-bleed__trigger"> <span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--play "> <use xlink:href="/static/svg/sprite.svg#play"></use> </svg> </span> <span>Watch the intro + sample</span> </a> </figure> </div> </section> <section class="c-modal" id="video-modal-678683072"> <div class="c-modal__wrapper"> <header class="c-header"> <div class="c-header__wrap u-wrap"> <a class="c-header__logo" href="/" alt="Home"> <figure class="c-header__logo-smash"> <div class="c-header__logo-aspect"> <svg xmlns="http://www.w3.org/2000/svg" width="44" height="87" viewBox="0 0 44 87"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="99.9%"><stop offset="0%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".3"/><stop offset="2%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".3"/><stop offset="28%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".1"/><stop offset="48%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/><stop offset="60%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".2"/><stop offset="14%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".1"/><stop offset="36%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/><stop offset="50%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/></linearGradient></defs><g fill="none" fill-rule="nonzero"><g fill="var(--smashing-logo, #FFF8EC)"><path d="M25.7 28.2c-2-1.5-4.2-2.7-6.5-3.5-1.8-.8-3.5-1.7-5-2.7-3.8-2.7-5.7-5.9-5.7-9.8A10 10 0 0111.4 5l-8 1.9A4.3 4.3 0 000 11.9l6.7 28.7a4.3 4.3 0 005.1 3.3l3.3-.8H15c-2.2-.7-4.4-1.7-6.4-2.8l3.5-7.7c2.7 2.3 6.2 3.5 9.7 3.5 3.8 0 5.7-1.4 5.7-4a5 5 0 00-1.8-3.9zM43.9 32L37.2 3.5A4.3 4.3 0 0032.1 0l-4.9 1.1a28.5 28.5 0 018 2.6l-2.9 7.5c-2.1-1.8-5-2.7-8.8-2.7-3.4 0-5 1.3-5 4 0 1.1.6 2.2 1.6 2.8 2.2 1.4 4.6 2.6 7.1 3.4 2.2.8 4.2 2 6 3.4.7.5 1.3 1.2 1.9 1.8 1.6 2.2 2.4 4.8 2.4 7.4 0 2.6-.8 5-2.3 7.1l5.4-1.2A4.3 4.3 0 0044 32z"/></g><path fill="url(#a)" d="M21.8 8c-3.5 0-7 1.1-9.7 3.4L8.6 3.7c2-1.2 4.2-2 6.4-2.8h.2L12 0c-2.3-.5-4.6 1-5.1 3.3L0 32c-.5 2.3 1 4.6 3.3 5.2l8 1.8a9.6 9.6 0 01-3-7.3c0-3.9 2-7.1 5.7-9.7 1.6-1.1 3.2-2 5-2.7 2.4-.9 4.6-2 6.6-3.6a5 5 0 001.7-3.8c0-2.7-1.8-4-5.6-4z" transform="translate(0 43)"/><path fill="url(#b)" d="M40.6 6.7l-5.4-1.2c1.5 2 2.4 4.6 2.3 7.1a11.6 11.6 0 01-4.3 9.3 22.2 22.2 0 01-6 3.3c-2.5.9-4.8 2-7 3.4-1 .6-1.6 1.6-1.7 2.8 0 2.6 1.7 4 5 4 3.8 0 6.7-1 8.8-2.7l2.8 7.5a26.4 26.4 0 01-7.8 2.6l4.8 1c2.3.6 4.6-.8 5.2-3.2L43.9 12a4.3 4.3 0 00-3.3-5.2z" transform="translate(0 43)"/></g></svg> </div> </figure> <figure class="c-header__logo-smart"> <div class="c-header__logo-aspect"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142 41" id="smart-logo" fill="none" stroke="none"> <defs> <path id="a" d="M0 0h5.7v8H0z"/> </defs> <g fill="none" fill-rule="evenodd"> <path class="title" d="M3.4 0c.6 0 1 0 1.5.3.4.1.7.3 1 .6.3.2.4.5.5.8.2.3.2.6.2.9 0 .3-.1.4-.5.4h-.3l-.2-.4-.2-.6-.5-.5a2 2 0 00-.6-.4l-1-.1h-.8l-.6.4-.4.4-.1.6V3l.4.4c.2.1.4.3.7.3l1 .3 1.6.3 1 .5.4.6.2.7c0 .3 0 .5-.2.8 0 .3-.3.5-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5C.6 7.4.4 7 .2 6.9L0 6l.1-.3.3-.1h.3L1 6l.2.3.3.4.5.4.4.2.5.2h.7c.7 0 1.2 0 1.5-.3.4-.2.5-.5.5-.9v-.5L5 5.4 4.3 5a37.8 37.8 0 00-2.6-.6L1 4c-.3-.2-.4-.5-.5-.7a2.3 2.3 0 010-1.8l.7-.8 1-.5L3.3 0M11.5.1h.4c.2 0 .2.1.3.2l.2.2.1.4A87.5 87.5 0 0015 6.6l.1-.4A157.2 157.2 0 0017.2.3l.3-.1h1.1l.1.5V5.3l.1 1V8l-.6.1-.4-.1v-.8-1-1.3a695.7 695.7 0 010-2.5v-.6-.2h-.1-.1l-.2.5-2 5.4-.2.4-.5.2c-.2 0-.4 0-.5-.2A44 44 0 0112 2.1l-.1-.3a5.1 5.1 0 00-.1-.3h-.2v.1a8 8 0 000 .6 47 47 0 000 4 66.5 66.5 0 000 1.9h-.9v-.4a34.7 34.7 0 010-2.9v-.6a56.1 56.1 0 000-3V.6l.1-.4.7-.2M24.8 4.4a3.2 3.2 0 000 .2l.1.2h2.3s.2 0 .2-.2l-.1-.2a135 135 0 00-.7-2l-.2-.7-.1-.2h-.5v.2a16.6 16.6 0 00-.4 1l-.2.3a30.7 30.7 0 01-.4 1.4m-2.4 3.4v-.1l.1-.3a12.6 12.6 0 01.6-1.6l.5-1.2A159.8 159.8 0 0125.4.3L26 0c.3 0 .6 0 .7.2l.5.7.2.6a173.2 173.2 0 011.1 3l.4 1.2a170.8 170.8 0 00.7 2.2l-.4.1h-.7l-.2-.4a67.8 67.8 0 01-1-2.2H24.5l-.1.2-.7 2c0 .2-.1.3-.2.3h-.8c-.2 0-.3 0-.3-.2M34.5 4v.2l.3.2h2.5l.8-.5.4-.5a1.7 1.7 0 000-1.4l-.5-.6-.8-.3a4 4 0 00-1-.2h-1l-.5.2s-.2 0-.2.2v.5a19.3 19.3 0 010 2v.1zm4.4 2.4l.5.6.4.2.3.2V8l-.5.1c-.3 0-.6 0-.8-.2l-.6-.5-.4-.7a18.9 18.9 0 01-.6-1l-.2-.3-.4-.1a21.9 21.9 0 01-1.4 0H35l-.2-.1h-.3v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.1.8l-.5.1h-.4l-.1-.4v-1a147.5 147.5 0 010-6.1c0-.2.2-.3.4-.4l.8-.2H36a6 6 0 011.7.2l1.2.6c.3.2.5.5.6.8.2.4.2.7.2 1l-.1 1-.4.5-.4.4a3.6 3.6 0 01-.8.4h-.2v.2c.1 0 .2 0 .3.2l.3.3.5.8zM43.1.1h.4a53 53 0 011.8 0h1.9a84.2 84.2 0 001.6 0c.3 0 .4.2.4.5V1h-2.3l-.2.2-.1.2v.4a81.7 81.7 0 000 2v1a89 89 0 000 3.2l-.2.1h-.8l-.1-.4V4a49.6 49.6 0 010-2.9h-2.3L43 1V.6.2h.2M61 .1c.2 0 .4.2.4.5V8l-.2.1h-.8l-.1-.4v-3a143.2 143.2 0 000-2.5v-.8a41.3 41.3 0 010-1.2H61zM72.3 3.4a121.4 121.4 0 000 2.5v1a53.7 53.7 0 01-.1 1l-.6.2h-.3L71 8l-.2-.2a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.3a3.3 3.3 0 000 .4V8l-.4.1h-.6V6.8a49 49 0 010-1.6V3a80.8 80.8 0 000-1.8V.8l.1-.5.5-.1.5.1.3.3a57.2 57.2 0 012.3 3.6l.9 1.3a43.3 43.3 0 00.9 1 42.6 42.6 0 000-5 39.8 39.8 0 010-1.2h.6c.2 0 .4 0 .4.3v2.8zM76.1.1h.4a53 53 0 011.8 0h1.9a84.2 84.2 0 001.6 0c.3 0 .4.2.4.5V1h-2.4l-.2.2V1.8a81.7 81.7 0 000 2v1a89 89 0 000 3.2l-.2.1h-.8l-.1-.4V4a49.6 49.6 0 010-2.9h-2.3l-.3-.1-.1-.4V.2h.3M91 4.3v.4H87l-.3.2V5a12.3 12.3 0 010 .7v.9l.1.4h1.4a50 50 0 001.6 0h1l.3.2.1.3V8l-.4.1h-.2a21.3 21.3 0 01-1.1 0H88a55.5 55.5 0 00-1.5 0h-.4l-.5-.1v-.4a14.6 14.6 0 010-.8V6v-.8a246.2 246.2 0 010-2.3V2a246.7 246.7 0 000-1.8h.5a37 37 0 003.2 0H91.2V1h-.4a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1V4H90.6l.3.1.1.3M96.3 4v.2l.3.2h2.5l.8-.5.4-.5a1.7 1.7 0 000-1.4l-.5-.6-.7-.3A4 4 0 0098 .9h-1l-.4.2c-.2 0-.2 0-.2.2v.5a19.3 19.3 0 01-.1 2v.1zm4.5 2.4l.4.6.4.2.3.2.1.3-.1.3-.5.1c-.3 0-.5 0-.7-.2-.3-.1-.4-.3-.6-.5l-.5-.7a18.9 18.9 0 01-.6-1l-.2-.3-.3-.1a21.9 21.9 0 01-1.4 0h-.3l-.2-.1h-.2v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.2.8l-.4.1h-.5V6.6a147.5 147.5 0 010-6.1c0-.2.1-.3.3-.4l.8-.2H98a6 6 0 011.7.2l1.1.6.7.8.2 1c0 .4 0 .7-.2 1 0 .2-.2.4-.3.5l-.5.4a3.6 3.6 0 01-.8.4h-.1v.2l.2.2.4.3.5.8zM111.2 4.5v.3l-.4.1h-3.7l-.3.1v2.7l-.1.3-.5.1h-.5v-.4a45.1 45.1 0 010-4.6v-1a455.7 455.7 0 000-1.8l.5-.2a51.9 51.9 0 013.1 0h1.6l.3.1.1.4-.1.4h-.4a19.1 19.1 0 01-1.7 0 30.5 30.5 0 00-2.2.1V3.7c0 .3 0 .4.4.4h3.8l.1.4M116.6 4.4a3.2 3.2 0 000 .2l.1.2h2.3c.1 0 .2 0 .2-.2v-.2a134.8 134.8 0 00-.8-2l-.2-.7v-.2h-.5l-.1.2a16.6 16.6 0 00-.4 1l-.1.3a30.7 30.7 0 01-.5 1.4m-2.3 3.4v-.1-.3a12.6 12.6 0 01.6-1.6l.5-1.2.4-1.1a159.8 159.8 0 011.4-3.2l.7-.2c.4 0 .6 0 .8.2l.4.7.2.6a173.1 173.1 0 011.1 3l.4 1.2a170.8 170.8 0 00.7 2.2l-.3.1h-.8l-.2-.4a67.8 67.8 0 01-1-2.2H116.3l-.1.2-.7 2c0 .2 0 .3-.2.3h-.8c-.1 0-.2 0-.2-.2M131.8 5.6l.3.1.1.3c0 .2 0 .4-.2.6 0 .3-.3.6-.5.8l-1.1.7-1.7.2c-.7 0-1.3 0-1.7-.3a3.3 3.3 0 01-2-2.2 5.8 5.8 0 01.1-3.3c.2-.5.4-.9.8-1.3a3.6 3.6 0 012.8-1.2 4 4 0 011.7.3c.4.2.8.4 1 .7a2.6 2.6 0 01.8 1.7c0 .3-.2.4-.5.4h-.4a1 1 0 01-.2-.5 3 3 0 00-.9-1.2c-.3-.3-.8-.4-1.4-.4-.5 0-1 0-1.3.2a2.8 2.8 0 00-1.5 2.2 5 5 0 00.2 2.2c.1.4.3.7.6 1 .2.3.5.5.9.6.3.2.7.2 1 .2l1-.1c.3 0 .6-.2.7-.3l.5-.4.3-.5.3-.4h.3M141.7 4.3v.4h-4l-.2.2V5a12.2 12.2 0 010 .7v1.3h1.5a50 50 0 001.6 0h1l.3.2.1.3-.1.4-.3.1h-.3a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.5 0h-.4l-.5-.1v-.4a14.6 14.6 0 010-.8V6v-.8a246.4 246.4 0 010-2.3V2a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.2.4c0 .2 0 .3-.2.4h-.3a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1V4H141.3l.3.1v.3M6 21.2c.3-.3.5-.6.6-1l.1-1.5-.1-1-.6-1a3 3 0 00-1-.8l-1.6-.2a13.4 13.4 0 00-1.2 0L2 16v.2a48 48 0 000 5v.5c0 .2.1.3.3.3l1 .1a10.4 10.4 0 001.5-.1c.2 0 .4-.2.5-.3.2 0 .4-.2.6-.4m-3-6.5c1 0 1.7 0 2.3.3l1.6.8c.4.4.6.8.8 1.3.2.5.3 1 .3 1.7v.8a3.4 3.4 0 01-.6 1.4l-.5.7-1.4 1-2 .2a21.6 21.6 0 01-2-.1 1 1 0 01-.4-.2v-.1L.8 22a27.3 27.3 0 010-2.3 96.9 96.9 0 000-4.2V15l.3-.3H2l1-.1M17.2 19v.4h-3.9l-.3.1v.3a12.3 12.3 0 010 .7v1.3h1.5a50 50 0 001.6 0h1l.3.1.1.4-.1.4h-.6a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.5 0h-.9v-.4a14.6 14.6 0 010-.9v-.7-.7a246.2 246.2 0 010-2.3v-1a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.2.3-.1.5H17a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1v2.7l.3.1h3.4l.3.1.1.3M24.4 14.7c.6 0 1 0 1.5.2l1 .7.5.8.2.9c0 .3-.2.4-.5.4l-.3-.1-.2-.3-.3-.6c0-.2-.2-.4-.4-.6a2 2 0 00-.6-.3l-1-.2-.8.1c-.3.1-.5.2-.6.4-.2 0-.3.2-.4.4l-.1.6v.6l.4.4.7.3 1 .3c.6 0 1.1.2 1.5.3l1 .5.5.5.2.8-.2.8-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5-.8-.8-.2-.7.1-.3.3-.1h.3l.2.2.2.3.3.4.4.4.5.2.5.1.7.1c.7 0 1.2-.1 1.5-.3.3-.2.5-.5.5-1l-.1-.4c0-.1-.2-.3-.4-.3l-.7-.3a37.8 37.8 0 00-2.6-.7l-.8-.5c-.3-.2-.4-.4-.5-.6a2.3 2.3 0 010-1.8l.6-.8 1-.5 1.4-.2M32.4 14.8c.3 0 .4.2.4.5V22.7h-.2l-.3.1h-.5v-3.4a143.2 143.2 0 00-.1-2.5V16a41.3 41.3 0 010-1c.1-.2.3-.2.4-.2h.3zM40.8 15.6c-.5 0-1 .1-1.3.3a2.7 2.7 0 00-1.1 1l-.3.5-.2.7v.9c0 .4 0 .9.2 1.2a2.7 2.7 0 001.6 1.6 3.4 3.4 0 002.3 0c.3 0 .6-.2.8-.4l.4-.5.1-.5V20H41l-.2-.1v-.3-.4h2.8l.6.1.2.6a2.9 2.9 0 01-.9 2c-.2.3-.6.5-1 .7-.5.2-1 .3-1.7.3s-1.2-.2-1.7-.4a3.9 3.9 0 01-2.4-3.7c0-.5 0-1 .2-1.5l.6-1.2c.4-.5.8-1 1.3-1.2.6-.2 1.2-.3 2-.3a3.4 3.4 0 012.6.9l.5.8.3.9-.1.4-.4.1-.4-.1a1 1 0 01-.2-.4 3 3 0 00-.9-1.2c-.3-.3-.8-.5-1.4-.5M54.8 18a121.4 121.4 0 000 2.5v1a53.7 53.7 0 010 1.1l-.6.2H54l-.3-.2-.2-.1a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.2a3.3 3.3 0 000 .5v5.4h-1v-1.2a49 49 0 010-1.6v-2.3a80.8 80.8 0 000-1.7v-.4-.5l.6-.1h.5l.3.4a57.2 57.2 0 012.3 3.5l.8 1.3a43.3 43.3 0 001 1.2V21a42.6 42.6 0 00-.1-4.8 39.8 39.8 0 010-1.3l.4-.1h.3c.2 0 .3.1.3.4V18zM69.6 19.2c.5 0 .9 0 1.1-.2.3 0 .6-.2.7-.3l.4-.6.1-.7c0-.6-.2-1-.7-1.3-.4-.3-1-.5-1.9-.5h-.8l-.5.1-.1.2v.5a21.3 21.3 0 01-.1 2.2v.4l.4.1h1.4m3.4-1.8c0 .4 0 .8-.2 1a2 2 0 01-.6 1 3 3 0 01-1 .5l-1.6.1a28.8 28.8 0 01-1.8 0v.3a38.2 38.2 0 000 2.2l-.1.3h-.9l-.1-.3a41 41 0 000-1.4 110.9 110.9 0 010-3.1v-.6a95 95 0 00.1-2.2l.4-.2.7-.2h1.4c.6 0 1.1 0 1.6.2.5 0 .9.3 1.2.5a2.3 2.3 0 011 2M78.2 19a3.2 3.2 0 000 .3c0 .1 0 .2.2.2h2.2l.2-.2V19a134.9 134.9 0 00-.7-2l-.3-.7v-.2l-.3-.1h-.2l-.1.3a16.6 16.6 0 00-.4 1l-.1.3a30.7 30.7 0 01-.5 1.4M76 22.5v-.2-.2a12.6 12.6 0 01.7-1.6l.4-1.3.4-1a159.8 159.8 0 011.4-3.3l.7-.1c.4 0 .6 0 .8.2.2.1.3.4.4.7l.2.6a173.2 173.2 0 011.2 3 170.8 170.8 0 001 3.4H82l-.1-.3a67.8 67.8 0 01-1-2.2H78 78v.2l-.8 2c0 .1 0 .3-.2.3h-.7c-.2 0-.3 0-.3-.2M85.7 14.8h.4a53 53 0 011.7 0h2a84.2 84.2 0 001.6 0c.2 0 .4.2.4.5l-.1.4h-2.3l-.2.1v.7a81.7 81.7 0 000 2v1a89 89 0 00-.1 3.2l-.2.1h-.8v-4.1a49.6 49.6 0 01-.1-2.9h-2.2l-.4-.1v-.4-.4h.3M94.8 14.8h.4a53 53 0 011.7 0h2a84.2 84.2 0 001.6 0c.2 0 .4.2.4.5l-.1.4h-2.3l-.2.1v.7a81.7 81.7 0 000 2v1a89 89 0 00-.1 3.2l-.2.1h-.8v-4.1a49.6 49.6 0 01-.1-2.9h-2.3l-.3-.1v-.4-.4h.3M109.7 19l-.1.4h-3.9l-.2.1v.3a12.2 12.2 0 010 .7v1.3h1.5a50 50 0 001.5 0h1l.4.1v.8h-.6a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.6 0h-.8v-.4a14.6 14.6 0 010-.9v-.7-.7a246.4 246.4 0 010-2.3v-1a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.1.3v.5h-.4a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1l-.1.3V18.5l.4.1h3.4l.3.1v.3M115 18.6v.3l.3.1.5.1h.9l1-.1.8-.4.5-.5a1.7 1.7 0 000-1.4l-.5-.6-.8-.4a4 4 0 00-1-.1h-1l-.5.1-.2.2V16.5a19.3 19.3 0 010 2v.1zm4.4 2.5l.5.5.4.3.3.2v.6h-.5l-.8-.1-.6-.5-.4-.7a18.8 18.8 0 01-.6-1l-.2-.3-.4-.1a21.9 21.9 0 01-1.4 0l-.2-.1h-.5v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.1.8l-.5.1-.4-.1-.1-.3v-1a147.5 147.5 0 010-6.2l.4-.3.8-.2h1.4a6 6 0 011.7.2c.5.1.9.3 1.2.6.3.2.5.5.6.8.2.3.2.7.2 1l-.1.9-.4.6-.4.4a3.6 3.6 0 01-.9.3l-.1.1v.2l.3.1.3.4.5.8zM130.8 18a121.4 121.4 0 000 2.5v1a53.7 53.7 0 010 1.1l-.6.2h-.3l-.3-.2-.2-.1a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.2a3.3 3.3 0 000 .5v5.4h-1v-1.2a49 49 0 010-1.6v-2.3a80.8 80.8 0 000-1.7v-.4-.5l.6-.1h.5l.3.4a57.2 57.2 0 012.3 3.5l.8 1.3a43.3 43.3 0 001 1.2V21a42.6 42.6 0 00-.1-4.8 39.8 39.8 0 010-1.3l.4-.1h.3c.2 0 .3.1.3.4V18zM138.1 14.7c.7 0 1.2 0 1.6.2l1 .7.5.8.2.9c0 .3-.2.4-.5.4l-.3-.1-.2-.3-.3-.6c0-.2-.2-.4-.4-.6a2 2 0 00-.6-.3l-1-.2-.8.1-.7.4-.3.4-.2.6.1.6.4.4.7.3 1 .3c.6 0 1.1.2 1.5.3l1 .5.5.5.1.8-.1.8-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5-.8-.8-.2-.7.1-.3.3-.1h.3l.2.2.2.3.3.4.4.4.5.2.5.1.7.1c.7 0 1.2-.1 1.5-.3.3-.2.5-.5.5-1l-.1-.4c0-.1-.2-.3-.4-.3l-.8-.3a37.8 37.8 0 00-2.5-.7l-.9-.5-.4-.6a2.3 2.3 0 010-1.8l.6-.8 1-.5 1.3-.2" fill="var(--header-logo-primary)"/> <path class="author" d="M6.5 39c.3 0 .5 0 .6-.2l.3-.5.5-2.2.7-2.3v-.3-.2h-.8l-.2.5-.8 3.2a10.4 10.4 0 00-.2 1h-.1V38a8 8 0 00-.3-1 58.7 58.7 0 01-.9-3.3.8.8 0 00-.5-.2c-.2 0-.4 0-.5.2a1 1 0 00-.3.5 24.6 24.6 0 00-.8 3.7l-.1.3L3 38v-.2a10.5 10.5 0 00-.2-.8l-.9-3.3-.1-.3-.3-.1h-.4H1v.5l.2.5 1.1 4c0 .3.2.4.3.5l.6.2h.3l.2-.1.2-.3.2-.4a35.3 35.3 0 00.6-3.5l.2-.2v.2l.2.6.6 2.8c0 .3.2.6.3.7l.6.2zm3.9-6.6c.2 0 .4 0 .5-.2l.1-.5-.1-.5c-.1-.2-.3-.2-.5-.2-.3 0-.5 0-.6.2l-.2.5.2.5.6.2zm0 6.6h.3l.1-.3v-5l-.1-.3H10l-.1.3v.7a102.3 102.3 0 010 3.9V38.9l.4.1zm4.1 0l.9-.1.2-.5v-.3h-.7-.3l-.5-.1-.1-.5v-3.2-.1h1.3c.1 0 .2 0 .3-.2v-.3-.3H15a14 14 0 01-.7-.1H14 14v-1.5l-.1-.3H13V33.2l-.2.2h-.6l-.3.2v.2c0 .2 0 .3.3.3h.6l.1.2a61.4 61.4 0 010 3.8l.3.5c.2.1.3.3.5.3l.7.1zm6.6 0h.3l.1-.4v-1.2a58.6 58.6 0 010-1.5v-.5l-.1-1-.5-.8-.6-.3a3 3 0 00-.8-.1 2 2 0 00-.8.1 2 2 0 00-.5.3l-.3.3v.1h-.1V34a46.5 46.5 0 01-.1-2.8l-.4-.1-.4.1V39l.3.1h.5v-1a68.2 68.2 0 000-1.4v-1l.2-.7a1.4 1.4 0 01.9-.8h.6c.4 0 .7 0 .9.3.2.2.3.6.3 1v1.2a46.6 46.6 0 010 1.2V39h.5zm7.7 0l.4-.1.3-.4a139.5 139.5 0 002.1-6.7c0-.2 0-.3-.3-.3H31c-.2 0-.3.1-.4.4a76.8 76.8 0 00-1.3 4.4 119.3 119.3 0 01-.7 1.6l-.2-.1v-.3a60.7 60.7 0 01-1.6-4.7 210 210 0 00-.4-1.2h-.7c-.2 0-.3 0-.3.2a.8.8 0 000 .3 42.8 42.8 0 011 2.8l.2.6.2.5a386.8 386.8 0 011 2.9h.4a13 13 0 01.7.1zm4.5-6.6c.2 0 .4 0 .5-.2l.2-.5-.2-.5c-.1-.2-.3-.2-.5-.2-.3 0-.4 0-.6.2l-.1.5.1.5.6.2zm0 6.6h.3l.1-.3v-5-.3h-.8l-.1.3v.7a102.3 102.3 0 010 3.9V38.9l.4.1zm4.2 0l.8-.1.2-.5v-.3h-1L37 38l-.1-.5v-3.2-.1h1.4l.2-.2.1-.3-.1-.3H38a14 14 0 01-.8-.1H37 37v-1.5l-.1-.3H36l-.1.4v1.3l-.2.2h-.6l-.2.2-.1.2c0 .2.1.3.3.3h.6l.2.2a61.4 61.4 0 010 3.8c0 .2.1.3.3.5 0 .1.2.3.4.3l.8.1zm3.9.2l1-.2.6-.4.3-.3.2-.2v.1l.2.4.1.3.3.1h.2l.1-.2v-.4a30 30 0 000-2.4v-.4c0-.8-.2-1.4-.5-1.8-.4-.4-1-.6-1.8-.6-.5 0-.8 0-1.2.2-.3 0-.5.3-.7.4a1.7 1.7 0 00-.6 1.3l.1.4.4.2.3-.1.1-.3.2-.5.2-.5.5-.2h.6c.5 0 .8 0 1 .2.3.2.4.6.4 1V35.9l-.2.2-.5.1h-.8l-1.1.2-.7.3a1 1 0 00-.4.5l-.1.6v.5l.4.4.6.3.8.2zm.2-.8c-.4 0-.6-.1-.8-.3a.6.6 0 01-.2-.5c0-.2 0-.3.3-.5l1-.3a19.8 19.8 0 001.3-.1c.2 0 .2 0 .2.2l-.1.6-.4.4a2 2 0 01-.6.3l-.7.2zm5.5.6l.6-.1c.2-.1.3-.2.3-.4l-.1-.2-.2-.1h-.2-.2l-.3-.1v-6.7l-.2-.3-.4-.1-.3.1-.1.4v.8a163.8 163.8 0 000 5v1l.2.4.4.2.5.1zm2.7 1.8c.4 0 .8-.1 1-.4.4-.3.6-.6.7-1l1.7-5.4.1-.2v-.3-.1H52.4l-.1.2-1.2 4.2v.1h-.4v-.1l-1.4-4.3-.1-.1H48.6c-.2 0-.3 0-.3.2v.2a4.8 4.8 0 00.3.6 28 28 0 01.7 2.2 125.4 125.4 0 001.1 2.4l.2.1v.3l-.2.3-.3.2a1 1 0 01-.4 0c-.2 0-.3 0-.4.2l-.1.3.1.3.5.1zm8-1.8h.4v-2.8l.1-.1H62l.2-.1.1-.4v-.3h-3.6c-.3 0-.4-.2-.4-.4v-2.1-.3l.3-.1a21.8 21.8 0 011.8 0 25.3 25.3 0 001.5 0h.4v-.5-.3h-1.7a46.3 46.3 0 01-2.8 0h-.5v.4a39.5 39.5 0 000 3.2v.2a107 107 0 010 3.5l.4.1zm6.2 0h.4l.1-.3V36c0-.5.2-1 .5-1.3.3-.3.8-.4 1.3-.4.3 0 .5-.2.5-.5 0-.1 0-.3-.2-.3l-.4-.2c-.3 0-.6 0-.8.2a2 2 0 00-.5.4c0 .2-.2.3-.3.4l-.1.2v-.3l-.1-.7-.1-.2H64l-.3.1-.1.3v.6a86.3 86.3 0 010 3.8V39h.2l.2.1zm4.3-6.6c.2 0 .4 0 .5-.2l.2-.5c0-.2 0-.4-.2-.5-.1-.2-.3-.2-.5-.2s-.4 0-.5.2l-.2.5c0 .2 0 .3.2.5l.5.2zm0 6.6h.4v-5.3-.3h-.8v1a102.3 102.3 0 01-.1 3.9V38.9l.5.1zm4.5.1l1-.1.7-.4.5-.5v-.4c0-.3 0-.4-.3-.4-.1 0-.2 0-.3.2l-.3.3-.5.4-.8.1-.7-.1a1.6 1.6 0 01-.9-1l-.1-.7v-.2h1.2a55.2 55.2 0 011.5 0h1l.3-.2.2-.6c0-.3 0-.6-.2-.9a2.2 2.2 0 00-1.2-1.2c-.3-.2-.7-.2-1-.2a3 3 0 00-1.1.2c-.3 0-.6.2-.8.4l-.5.7a3 3 0 00-.3.9 4.7 4.7 0 000 2l.6 1 .8.5c.3.2.7.2 1.2.2zm1.3-3.5h-2.9v-.3-.4l.4-.4a1.7 1.7 0 011.2-.5c.3 0 .5 0 .7.2.2 0 .3.1.5.3l.2.4.1.4v.2l-.2.1zm4.5 3.5l1-.1.6-.4.3-.3.2-.2v.1a13.6 13.6 0 01.2.8h.7v-1.3a212 212 0 000-5.6v-.6l-.1-.4-.4-.1-.4.1v.4a46.5 46.5 0 000 2.4v.1h-.2c0-.2-.1-.3-.3-.4l-.5-.3a2.8 2.8 0 00-2 0l-.7.6c-.3.3-.4.6-.6 1l-.2 1.2c0 .5 0 .9.2 1.3l.5 1a2 2 0 001.7.7zm.3-.8c-.3 0-.5 0-.8-.2-.2 0-.4-.2-.5-.4a2 2 0 01-.3-.7l-.1-.8v-.8l.4-.7c.1-.2.3-.4.6-.5a2 2 0 011.5 0c.2 0 .4.2.5.4l.4.6v1c0 .6 0 1.2-.4 1.5-.3.4-.7.6-1.3.6zm4.7.7h.4l.1-.3v-.3a25.7 25.7 0 010-1v-1.5c0-.3 0-.6.2-.8l.3-.6c.1-.1.3-.3.5-.3l.6-.1c.3 0 .5 0 .7.3.2.2.3.6.3 1v1.1a45 45 0 000 1.4v1h.9v-3.6l.2-.5a1.2 1.2 0 01.7-.7h.6c.3 0 .6 0 .8.3.2.2.3.6.3 1v1.1a45 45 0 000 1.4v.7l.1.3h.8l.1-.2v-1.3a13.8 13.8 0 000-.8v-1.3c0-.4 0-.8-.2-1 0-.3-.2-.5-.4-.7-.1-.2-.3-.3-.5-.3l-.7-.1a2 2 0 00-1 .1 2 2 0 00-.7.7l-.2.2-.1-.2-.2-.3-.5-.4-.8-.1a1.6 1.6 0 00-1.3.5l-.3.4-.2.1H84v-.4a56.8 56.8 0 01-.2-.5h-.5l-.1.4a170.9 170.9 0 010 4.2v1l.4.1zm10.7.2l1-.2c.3-.1.5-.2.6-.4.2 0 .3-.2.4-.3l.1-.2.1.1.1.4.1.3.3.1h.3V38.4a30 30 0 000-2.4v-.4c0-.8-.1-1.4-.5-1.8-.3-.4-1-.6-1.7-.6-.5 0-1 0-1.2.2-.3 0-.6.3-.8.4a1.7 1.7 0 00-.6 1.3l.1.4.4.2.3-.1.2-.3.1-.5c0-.2.2-.3.3-.5l.4-.2h.7c.4 0 .8 0 1 .2.2.2.4.6.4 1v.4l-.1.2-.2.2-.5.1h-.8l-1 .2-.8.3a1 1 0 00-.4.5l-.1.6.1.5c0 .2.2.3.4.4.1.2.3.3.5.3l.8.2zm.2-.8c-.3 0-.6-.1-.8-.3a.6.6 0 01-.2-.5c0-.2.1-.3.3-.5l1-.3a19.8 19.8 0 001.4-.1c.1 0 .2 0 .2.2s0 .4-.2.6l-.4.4a2 2 0 01-.5.3l-.8.2zm4.8.6h.4V35.8l.2-.8.4-.6.6-.3.6-.1c.3 0 .6 0 .8.3.2.2.3.6.3 1v1.1a46.2 46.2 0 000 1.4v1l.4.1h.5v-1.6a13.8 13.8 0 000-.8v-1.3l-.1-1-.4-.7c-.2-.2-.4-.3-.7-.3l-.7-.1a2 2 0 00-.8.1 2 2 0 00-.8.7l-.2.2V34l-.1-.4-.1-.3H99l-.1.3v.1a390.2 390.2 0 010 4.2V38.9l.4.1z" fill="var(--header-logo-secondary)" fill-rule="nonzero"/> </g> </svg> </div> </figure> </a> <a href="#video-modal-trigger-678683072" class="c-modal__close"></a> </div> </header> <div class="u-wrap"> <figure class="c-embed"> <div class="c-embed__wrapper"> <iframe title="Course trailer" width="1920" height="1080" loading="lazy" decoding="async" data-src="https://player.vimeo.com/video/678683072?texttrack=en&quality=1080p&autoplay=0&loop=0&autopause=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> </div> </figure> </div> </div> <button type="button" class="c-modal__wing"></button> <button type="button" class="c-modal__wing"></button> </section> <div class="c-lessons" id="table-of-contents"> <section class="c-modal c-modal--lessons" id="lessons-modal"> <div class="c-modal__wrapper"> <header class="c-header"> <div class="c-header__wrap u-wrap"> <a class="c-header__logo" href="/" alt="Home"> <figure class="c-header__logo-smash"> <div class="c-header__logo-aspect"> <svg xmlns="http://www.w3.org/2000/svg" width="44" height="87" viewBox="0 0 44 87"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="99.9%"><stop offset="0%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".3"/><stop offset="2%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".3"/><stop offset="28%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".1"/><stop offset="48%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/><stop offset="60%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".2"/><stop offset="14%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".1"/><stop offset="36%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/><stop offset="50%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/></linearGradient></defs><g fill="none" fill-rule="nonzero"><g fill="var(--smashing-logo, #FFF8EC)"><path d="M25.7 28.2c-2-1.5-4.2-2.7-6.5-3.5-1.8-.8-3.5-1.7-5-2.7-3.8-2.7-5.7-5.9-5.7-9.8A10 10 0 0111.4 5l-8 1.9A4.3 4.3 0 000 11.9l6.7 28.7a4.3 4.3 0 005.1 3.3l3.3-.8H15c-2.2-.7-4.4-1.7-6.4-2.8l3.5-7.7c2.7 2.3 6.2 3.5 9.7 3.5 3.8 0 5.7-1.4 5.7-4a5 5 0 00-1.8-3.9zM43.9 32L37.2 3.5A4.3 4.3 0 0032.1 0l-4.9 1.1a28.5 28.5 0 018 2.6l-2.9 7.5c-2.1-1.8-5-2.7-8.8-2.7-3.4 0-5 1.3-5 4 0 1.1.6 2.2 1.6 2.8 2.2 1.4 4.6 2.6 7.1 3.4 2.2.8 4.2 2 6 3.4.7.5 1.3 1.2 1.9 1.8 1.6 2.2 2.4 4.8 2.4 7.4 0 2.6-.8 5-2.3 7.1l5.4-1.2A4.3 4.3 0 0044 32z"/></g><path fill="url(#a)" d="M21.8 8c-3.5 0-7 1.1-9.7 3.4L8.6 3.7c2-1.2 4.2-2 6.4-2.8h.2L12 0c-2.3-.5-4.6 1-5.1 3.3L0 32c-.5 2.3 1 4.6 3.3 5.2l8 1.8a9.6 9.6 0 01-3-7.3c0-3.9 2-7.1 5.7-9.7 1.6-1.1 3.2-2 5-2.7 2.4-.9 4.6-2 6.6-3.6a5 5 0 001.7-3.8c0-2.7-1.8-4-5.6-4z" transform="translate(0 43)"/><path fill="url(#b)" d="M40.6 6.7l-5.4-1.2c1.5 2 2.4 4.6 2.3 7.1a11.6 11.6 0 01-4.3 9.3 22.2 22.2 0 01-6 3.3c-2.5.9-4.8 2-7 3.4-1 .6-1.6 1.6-1.7 2.8 0 2.6 1.7 4 5 4 3.8 0 6.7-1 8.8-2.7l2.8 7.5a26.4 26.4 0 01-7.8 2.6l4.8 1c2.3.6 4.6-.8 5.2-3.2L43.9 12a4.3 4.3 0 00-3.3-5.2z" transform="translate(0 43)"/></g></svg> </div> </figure> <figure class="c-header__logo-smart"> <div class="c-header__logo-aspect"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142 41" id="smart-logo" fill="none" stroke="none"> <defs> <path id="a" d="M0 0h5.7v8H0z"/> </defs> <g fill="none" fill-rule="evenodd"> <path class="title" d="M3.4 0c.6 0 1 0 1.5.3.4.1.7.3 1 .6.3.2.4.5.5.8.2.3.2.6.2.9 0 .3-.1.4-.5.4h-.3l-.2-.4-.2-.6-.5-.5a2 2 0 00-.6-.4l-1-.1h-.8l-.6.4-.4.4-.1.6V3l.4.4c.2.1.4.3.7.3l1 .3 1.6.3 1 .5.4.6.2.7c0 .3 0 .5-.2.8 0 .3-.3.5-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5C.6 7.4.4 7 .2 6.9L0 6l.1-.3.3-.1h.3L1 6l.2.3.3.4.5.4.4.2.5.2h.7c.7 0 1.2 0 1.5-.3.4-.2.5-.5.5-.9v-.5L5 5.4 4.3 5a37.8 37.8 0 00-2.6-.6L1 4c-.3-.2-.4-.5-.5-.7a2.3 2.3 0 010-1.8l.7-.8 1-.5L3.3 0M11.5.1h.4c.2 0 .2.1.3.2l.2.2.1.4A87.5 87.5 0 0015 6.6l.1-.4A157.2 157.2 0 0017.2.3l.3-.1h1.1l.1.5V5.3l.1 1V8l-.6.1-.4-.1v-.8-1-1.3a695.7 695.7 0 010-2.5v-.6-.2h-.1-.1l-.2.5-2 5.4-.2.4-.5.2c-.2 0-.4 0-.5-.2A44 44 0 0112 2.1l-.1-.3a5.1 5.1 0 00-.1-.3h-.2v.1a8 8 0 000 .6 47 47 0 000 4 66.5 66.5 0 000 1.9h-.9v-.4a34.7 34.7 0 010-2.9v-.6a56.1 56.1 0 000-3V.6l.1-.4.7-.2M24.8 4.4a3.2 3.2 0 000 .2l.1.2h2.3s.2 0 .2-.2l-.1-.2a135 135 0 00-.7-2l-.2-.7-.1-.2h-.5v.2a16.6 16.6 0 00-.4 1l-.2.3a30.7 30.7 0 01-.4 1.4m-2.4 3.4v-.1l.1-.3a12.6 12.6 0 01.6-1.6l.5-1.2A159.8 159.8 0 0125.4.3L26 0c.3 0 .6 0 .7.2l.5.7.2.6a173.2 173.2 0 011.1 3l.4 1.2a170.8 170.8 0 00.7 2.2l-.4.1h-.7l-.2-.4a67.8 67.8 0 01-1-2.2H24.5l-.1.2-.7 2c0 .2-.1.3-.2.3h-.8c-.2 0-.3 0-.3-.2M34.5 4v.2l.3.2h2.5l.8-.5.4-.5a1.7 1.7 0 000-1.4l-.5-.6-.8-.3a4 4 0 00-1-.2h-1l-.5.2s-.2 0-.2.2v.5a19.3 19.3 0 010 2v.1zm4.4 2.4l.5.6.4.2.3.2V8l-.5.1c-.3 0-.6 0-.8-.2l-.6-.5-.4-.7a18.9 18.9 0 01-.6-1l-.2-.3-.4-.1a21.9 21.9 0 01-1.4 0H35l-.2-.1h-.3v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.1.8l-.5.1h-.4l-.1-.4v-1a147.5 147.5 0 010-6.1c0-.2.2-.3.4-.4l.8-.2H36a6 6 0 011.7.2l1.2.6c.3.2.5.5.6.8.2.4.2.7.2 1l-.1 1-.4.5-.4.4a3.6 3.6 0 01-.8.4h-.2v.2c.1 0 .2 0 .3.2l.3.3.5.8zM43.1.1h.4a53 53 0 011.8 0h1.9a84.2 84.2 0 001.6 0c.3 0 .4.2.4.5V1h-2.3l-.2.2-.1.2v.4a81.7 81.7 0 000 2v1a89 89 0 000 3.2l-.2.1h-.8l-.1-.4V4a49.6 49.6 0 010-2.9h-2.3L43 1V.6.2h.2M61 .1c.2 0 .4.2.4.5V8l-.2.1h-.8l-.1-.4v-3a143.2 143.2 0 000-2.5v-.8a41.3 41.3 0 010-1.2H61zM72.3 3.4a121.4 121.4 0 000 2.5v1a53.7 53.7 0 01-.1 1l-.6.2h-.3L71 8l-.2-.2a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.3a3.3 3.3 0 000 .4V8l-.4.1h-.6V6.8a49 49 0 010-1.6V3a80.8 80.8 0 000-1.8V.8l.1-.5.5-.1.5.1.3.3a57.2 57.2 0 012.3 3.6l.9 1.3a43.3 43.3 0 00.9 1 42.6 42.6 0 000-5 39.8 39.8 0 010-1.2h.6c.2 0 .4 0 .4.3v2.8zM76.1.1h.4a53 53 0 011.8 0h1.9a84.2 84.2 0 001.6 0c.3 0 .4.2.4.5V1h-2.4l-.2.2V1.8a81.7 81.7 0 000 2v1a89 89 0 000 3.2l-.2.1h-.8l-.1-.4V4a49.6 49.6 0 010-2.9h-2.3l-.3-.1-.1-.4V.2h.3M91 4.3v.4H87l-.3.2V5a12.3 12.3 0 010 .7v.9l.1.4h1.4a50 50 0 001.6 0h1l.3.2.1.3V8l-.4.1h-.2a21.3 21.3 0 01-1.1 0H88a55.5 55.5 0 00-1.5 0h-.4l-.5-.1v-.4a14.6 14.6 0 010-.8V6v-.8a246.2 246.2 0 010-2.3V2a246.7 246.7 0 000-1.8h.5a37 37 0 003.2 0H91.2V1h-.4a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1V4H90.6l.3.1.1.3M96.3 4v.2l.3.2h2.5l.8-.5.4-.5a1.7 1.7 0 000-1.4l-.5-.6-.7-.3A4 4 0 0098 .9h-1l-.4.2c-.2 0-.2 0-.2.2v.5a19.3 19.3 0 01-.1 2v.1zm4.5 2.4l.4.6.4.2.3.2.1.3-.1.3-.5.1c-.3 0-.5 0-.7-.2-.3-.1-.4-.3-.6-.5l-.5-.7a18.9 18.9 0 01-.6-1l-.2-.3-.3-.1a21.9 21.9 0 01-1.4 0h-.3l-.2-.1h-.2v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.2.8l-.4.1h-.5V6.6a147.5 147.5 0 010-6.1c0-.2.1-.3.3-.4l.8-.2H98a6 6 0 011.7.2l1.1.6.7.8.2 1c0 .4 0 .7-.2 1 0 .2-.2.4-.3.5l-.5.4a3.6 3.6 0 01-.8.4h-.1v.2l.2.2.4.3.5.8zM111.2 4.5v.3l-.4.1h-3.7l-.3.1v2.7l-.1.3-.5.1h-.5v-.4a45.1 45.1 0 010-4.6v-1a455.7 455.7 0 000-1.8l.5-.2a51.9 51.9 0 013.1 0h1.6l.3.1.1.4-.1.4h-.4a19.1 19.1 0 01-1.7 0 30.5 30.5 0 00-2.2.1V3.7c0 .3 0 .4.4.4h3.8l.1.4M116.6 4.4a3.2 3.2 0 000 .2l.1.2h2.3c.1 0 .2 0 .2-.2v-.2a134.8 134.8 0 00-.8-2l-.2-.7v-.2h-.5l-.1.2a16.6 16.6 0 00-.4 1l-.1.3a30.7 30.7 0 01-.5 1.4m-2.3 3.4v-.1-.3a12.6 12.6 0 01.6-1.6l.5-1.2.4-1.1a159.8 159.8 0 011.4-3.2l.7-.2c.4 0 .6 0 .8.2l.4.7.2.6a173.1 173.1 0 011.1 3l.4 1.2a170.8 170.8 0 00.7 2.2l-.3.1h-.8l-.2-.4a67.8 67.8 0 01-1-2.2H116.3l-.1.2-.7 2c0 .2 0 .3-.2.3h-.8c-.1 0-.2 0-.2-.2M131.8 5.6l.3.1.1.3c0 .2 0 .4-.2.6 0 .3-.3.6-.5.8l-1.1.7-1.7.2c-.7 0-1.3 0-1.7-.3a3.3 3.3 0 01-2-2.2 5.8 5.8 0 01.1-3.3c.2-.5.4-.9.8-1.3a3.6 3.6 0 012.8-1.2 4 4 0 011.7.3c.4.2.8.4 1 .7a2.6 2.6 0 01.8 1.7c0 .3-.2.4-.5.4h-.4a1 1 0 01-.2-.5 3 3 0 00-.9-1.2c-.3-.3-.8-.4-1.4-.4-.5 0-1 0-1.3.2a2.8 2.8 0 00-1.5 2.2 5 5 0 00.2 2.2c.1.4.3.7.6 1 .2.3.5.5.9.6.3.2.7.2 1 .2l1-.1c.3 0 .6-.2.7-.3l.5-.4.3-.5.3-.4h.3M141.7 4.3v.4h-4l-.2.2V5a12.2 12.2 0 010 .7v1.3h1.5a50 50 0 001.6 0h1l.3.2.1.3-.1.4-.3.1h-.3a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.5 0h-.4l-.5-.1v-.4a14.6 14.6 0 010-.8V6v-.8a246.4 246.4 0 010-2.3V2a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.2.4c0 .2 0 .3-.2.4h-.3a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1V4H141.3l.3.1v.3M6 21.2c.3-.3.5-.6.6-1l.1-1.5-.1-1-.6-1a3 3 0 00-1-.8l-1.6-.2a13.4 13.4 0 00-1.2 0L2 16v.2a48 48 0 000 5v.5c0 .2.1.3.3.3l1 .1a10.4 10.4 0 001.5-.1c.2 0 .4-.2.5-.3.2 0 .4-.2.6-.4m-3-6.5c1 0 1.7 0 2.3.3l1.6.8c.4.4.6.8.8 1.3.2.5.3 1 .3 1.7v.8a3.4 3.4 0 01-.6 1.4l-.5.7-1.4 1-2 .2a21.6 21.6 0 01-2-.1 1 1 0 01-.4-.2v-.1L.8 22a27.3 27.3 0 010-2.3 96.9 96.9 0 000-4.2V15l.3-.3H2l1-.1M17.2 19v.4h-3.9l-.3.1v.3a12.3 12.3 0 010 .7v1.3h1.5a50 50 0 001.6 0h1l.3.1.1.4-.1.4h-.6a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.5 0h-.9v-.4a14.6 14.6 0 010-.9v-.7-.7a246.2 246.2 0 010-2.3v-1a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.2.3-.1.5H17a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1v2.7l.3.1h3.4l.3.1.1.3M24.4 14.7c.6 0 1 0 1.5.2l1 .7.5.8.2.9c0 .3-.2.4-.5.4l-.3-.1-.2-.3-.3-.6c0-.2-.2-.4-.4-.6a2 2 0 00-.6-.3l-1-.2-.8.1c-.3.1-.5.2-.6.4-.2 0-.3.2-.4.4l-.1.6v.6l.4.4.7.3 1 .3c.6 0 1.1.2 1.5.3l1 .5.5.5.2.8-.2.8-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5-.8-.8-.2-.7.1-.3.3-.1h.3l.2.2.2.3.3.4.4.4.5.2.5.1.7.1c.7 0 1.2-.1 1.5-.3.3-.2.5-.5.5-1l-.1-.4c0-.1-.2-.3-.4-.3l-.7-.3a37.8 37.8 0 00-2.6-.7l-.8-.5c-.3-.2-.4-.4-.5-.6a2.3 2.3 0 010-1.8l.6-.8 1-.5 1.4-.2M32.4 14.8c.3 0 .4.2.4.5V22.7h-.2l-.3.1h-.5v-3.4a143.2 143.2 0 00-.1-2.5V16a41.3 41.3 0 010-1c.1-.2.3-.2.4-.2h.3zM40.8 15.6c-.5 0-1 .1-1.3.3a2.7 2.7 0 00-1.1 1l-.3.5-.2.7v.9c0 .4 0 .9.2 1.2a2.7 2.7 0 001.6 1.6 3.4 3.4 0 002.3 0c.3 0 .6-.2.8-.4l.4-.5.1-.5V20H41l-.2-.1v-.3-.4h2.8l.6.1.2.6a2.9 2.9 0 01-.9 2c-.2.3-.6.5-1 .7-.5.2-1 .3-1.7.3s-1.2-.2-1.7-.4a3.9 3.9 0 01-2.4-3.7c0-.5 0-1 .2-1.5l.6-1.2c.4-.5.8-1 1.3-1.2.6-.2 1.2-.3 2-.3a3.4 3.4 0 012.6.9l.5.8.3.9-.1.4-.4.1-.4-.1a1 1 0 01-.2-.4 3 3 0 00-.9-1.2c-.3-.3-.8-.5-1.4-.5M54.8 18a121.4 121.4 0 000 2.5v1a53.7 53.7 0 010 1.1l-.6.2H54l-.3-.2-.2-.1a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.2a3.3 3.3 0 000 .5v5.4h-1v-1.2a49 49 0 010-1.6v-2.3a80.8 80.8 0 000-1.7v-.4-.5l.6-.1h.5l.3.4a57.2 57.2 0 012.3 3.5l.8 1.3a43.3 43.3 0 001 1.2V21a42.6 42.6 0 00-.1-4.8 39.8 39.8 0 010-1.3l.4-.1h.3c.2 0 .3.1.3.4V18zM69.6 19.2c.5 0 .9 0 1.1-.2.3 0 .6-.2.7-.3l.4-.6.1-.7c0-.6-.2-1-.7-1.3-.4-.3-1-.5-1.9-.5h-.8l-.5.1-.1.2v.5a21.3 21.3 0 01-.1 2.2v.4l.4.1h1.4m3.4-1.8c0 .4 0 .8-.2 1a2 2 0 01-.6 1 3 3 0 01-1 .5l-1.6.1a28.8 28.8 0 01-1.8 0v.3a38.2 38.2 0 000 2.2l-.1.3h-.9l-.1-.3a41 41 0 000-1.4 110.9 110.9 0 010-3.1v-.6a95 95 0 00.1-2.2l.4-.2.7-.2h1.4c.6 0 1.1 0 1.6.2.5 0 .9.3 1.2.5a2.3 2.3 0 011 2M78.2 19a3.2 3.2 0 000 .3c0 .1 0 .2.2.2h2.2l.2-.2V19a134.9 134.9 0 00-.7-2l-.3-.7v-.2l-.3-.1h-.2l-.1.3a16.6 16.6 0 00-.4 1l-.1.3a30.7 30.7 0 01-.5 1.4M76 22.5v-.2-.2a12.6 12.6 0 01.7-1.6l.4-1.3.4-1a159.8 159.8 0 011.4-3.3l.7-.1c.4 0 .6 0 .8.2.2.1.3.4.4.7l.2.6a173.2 173.2 0 011.2 3 170.8 170.8 0 001 3.4H82l-.1-.3a67.8 67.8 0 01-1-2.2H78 78v.2l-.8 2c0 .1 0 .3-.2.3h-.7c-.2 0-.3 0-.3-.2M85.7 14.8h.4a53 53 0 011.7 0h2a84.2 84.2 0 001.6 0c.2 0 .4.2.4.5l-.1.4h-2.3l-.2.1v.7a81.7 81.7 0 000 2v1a89 89 0 00-.1 3.2l-.2.1h-.8v-4.1a49.6 49.6 0 01-.1-2.9h-2.2l-.4-.1v-.4-.4h.3M94.8 14.8h.4a53 53 0 011.7 0h2a84.2 84.2 0 001.6 0c.2 0 .4.2.4.5l-.1.4h-2.3l-.2.1v.7a81.7 81.7 0 000 2v1a89 89 0 00-.1 3.2l-.2.1h-.8v-4.1a49.6 49.6 0 01-.1-2.9h-2.3l-.3-.1v-.4-.4h.3M109.7 19l-.1.4h-3.9l-.2.1v.3a12.2 12.2 0 010 .7v1.3h1.5a50 50 0 001.5 0h1l.4.1v.8h-.6a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.6 0h-.8v-.4a14.6 14.6 0 010-.9v-.7-.7a246.4 246.4 0 010-2.3v-1a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.1.3v.5h-.4a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1l-.1.3V18.5l.4.1h3.4l.3.1v.3M115 18.6v.3l.3.1.5.1h.9l1-.1.8-.4.5-.5a1.7 1.7 0 000-1.4l-.5-.6-.8-.4a4 4 0 00-1-.1h-1l-.5.1-.2.2V16.5a19.3 19.3 0 010 2v.1zm4.4 2.5l.5.5.4.3.3.2v.6h-.5l-.8-.1-.6-.5-.4-.7a18.8 18.8 0 01-.6-1l-.2-.3-.4-.1a21.9 21.9 0 01-1.4 0l-.2-.1h-.5v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.1.8l-.5.1-.4-.1-.1-.3v-1a147.5 147.5 0 010-6.2l.4-.3.8-.2h1.4a6 6 0 011.7.2c.5.1.9.3 1.2.6.3.2.5.5.6.8.2.3.2.7.2 1l-.1.9-.4.6-.4.4a3.6 3.6 0 01-.9.3l-.1.1v.2l.3.1.3.4.5.8zM130.8 18a121.4 121.4 0 000 2.5v1a53.7 53.7 0 010 1.1l-.6.2h-.3l-.3-.2-.2-.1a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.2a3.3 3.3 0 000 .5v5.4h-1v-1.2a49 49 0 010-1.6v-2.3a80.8 80.8 0 000-1.7v-.4-.5l.6-.1h.5l.3.4a57.2 57.2 0 012.3 3.5l.8 1.3a43.3 43.3 0 001 1.2V21a42.6 42.6 0 00-.1-4.8 39.8 39.8 0 010-1.3l.4-.1h.3c.2 0 .3.1.3.4V18zM138.1 14.7c.7 0 1.2 0 1.6.2l1 .7.5.8.2.9c0 .3-.2.4-.5.4l-.3-.1-.2-.3-.3-.6c0-.2-.2-.4-.4-.6a2 2 0 00-.6-.3l-1-.2-.8.1-.7.4-.3.4-.2.6.1.6.4.4.7.3 1 .3c.6 0 1.1.2 1.5.3l1 .5.5.5.1.8-.1.8-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5-.8-.8-.2-.7.1-.3.3-.1h.3l.2.2.2.3.3.4.4.4.5.2.5.1.7.1c.7 0 1.2-.1 1.5-.3.3-.2.5-.5.5-1l-.1-.4c0-.1-.2-.3-.4-.3l-.8-.3a37.8 37.8 0 00-2.5-.7l-.9-.5-.4-.6a2.3 2.3 0 010-1.8l.6-.8 1-.5 1.3-.2" fill="var(--header-logo-primary)"/> <path class="author" d="M6.5 39c.3 0 .5 0 .6-.2l.3-.5.5-2.2.7-2.3v-.3-.2h-.8l-.2.5-.8 3.2a10.4 10.4 0 00-.2 1h-.1V38a8 8 0 00-.3-1 58.7 58.7 0 01-.9-3.3.8.8 0 00-.5-.2c-.2 0-.4 0-.5.2a1 1 0 00-.3.5 24.6 24.6 0 00-.8 3.7l-.1.3L3 38v-.2a10.5 10.5 0 00-.2-.8l-.9-3.3-.1-.3-.3-.1h-.4H1v.5l.2.5 1.1 4c0 .3.2.4.3.5l.6.2h.3l.2-.1.2-.3.2-.4a35.3 35.3 0 00.6-3.5l.2-.2v.2l.2.6.6 2.8c0 .3.2.6.3.7l.6.2zm3.9-6.6c.2 0 .4 0 .5-.2l.1-.5-.1-.5c-.1-.2-.3-.2-.5-.2-.3 0-.5 0-.6.2l-.2.5.2.5.6.2zm0 6.6h.3l.1-.3v-5l-.1-.3H10l-.1.3v.7a102.3 102.3 0 010 3.9V38.9l.4.1zm4.1 0l.9-.1.2-.5v-.3h-.7-.3l-.5-.1-.1-.5v-3.2-.1h1.3c.1 0 .2 0 .3-.2v-.3-.3H15a14 14 0 01-.7-.1H14 14v-1.5l-.1-.3H13V33.2l-.2.2h-.6l-.3.2v.2c0 .2 0 .3.3.3h.6l.1.2a61.4 61.4 0 010 3.8l.3.5c.2.1.3.3.5.3l.7.1zm6.6 0h.3l.1-.4v-1.2a58.6 58.6 0 010-1.5v-.5l-.1-1-.5-.8-.6-.3a3 3 0 00-.8-.1 2 2 0 00-.8.1 2 2 0 00-.5.3l-.3.3v.1h-.1V34a46.5 46.5 0 01-.1-2.8l-.4-.1-.4.1V39l.3.1h.5v-1a68.2 68.2 0 000-1.4v-1l.2-.7a1.4 1.4 0 01.9-.8h.6c.4 0 .7 0 .9.3.2.2.3.6.3 1v1.2a46.6 46.6 0 010 1.2V39h.5zm7.7 0l.4-.1.3-.4a139.5 139.5 0 002.1-6.7c0-.2 0-.3-.3-.3H31c-.2 0-.3.1-.4.4a76.8 76.8 0 00-1.3 4.4 119.3 119.3 0 01-.7 1.6l-.2-.1v-.3a60.7 60.7 0 01-1.6-4.7 210 210 0 00-.4-1.2h-.7c-.2 0-.3 0-.3.2a.8.8 0 000 .3 42.8 42.8 0 011 2.8l.2.6.2.5a386.8 386.8 0 011 2.9h.4a13 13 0 01.7.1zm4.5-6.6c.2 0 .4 0 .5-.2l.2-.5-.2-.5c-.1-.2-.3-.2-.5-.2-.3 0-.4 0-.6.2l-.1.5.1.5.6.2zm0 6.6h.3l.1-.3v-5-.3h-.8l-.1.3v.7a102.3 102.3 0 010 3.9V38.9l.4.1zm4.2 0l.8-.1.2-.5v-.3h-1L37 38l-.1-.5v-3.2-.1h1.4l.2-.2.1-.3-.1-.3H38a14 14 0 01-.8-.1H37 37v-1.5l-.1-.3H36l-.1.4v1.3l-.2.2h-.6l-.2.2-.1.2c0 .2.1.3.3.3h.6l.2.2a61.4 61.4 0 010 3.8c0 .2.1.3.3.5 0 .1.2.3.4.3l.8.1zm3.9.2l1-.2.6-.4.3-.3.2-.2v.1l.2.4.1.3.3.1h.2l.1-.2v-.4a30 30 0 000-2.4v-.4c0-.8-.2-1.4-.5-1.8-.4-.4-1-.6-1.8-.6-.5 0-.8 0-1.2.2-.3 0-.5.3-.7.4a1.7 1.7 0 00-.6 1.3l.1.4.4.2.3-.1.1-.3.2-.5.2-.5.5-.2h.6c.5 0 .8 0 1 .2.3.2.4.6.4 1V35.9l-.2.2-.5.1h-.8l-1.1.2-.7.3a1 1 0 00-.4.5l-.1.6v.5l.4.4.6.3.8.2zm.2-.8c-.4 0-.6-.1-.8-.3a.6.6 0 01-.2-.5c0-.2 0-.3.3-.5l1-.3a19.8 19.8 0 001.3-.1c.2 0 .2 0 .2.2l-.1.6-.4.4a2 2 0 01-.6.3l-.7.2zm5.5.6l.6-.1c.2-.1.3-.2.3-.4l-.1-.2-.2-.1h-.2-.2l-.3-.1v-6.7l-.2-.3-.4-.1-.3.1-.1.4v.8a163.8 163.8 0 000 5v1l.2.4.4.2.5.1zm2.7 1.8c.4 0 .8-.1 1-.4.4-.3.6-.6.7-1l1.7-5.4.1-.2v-.3-.1H52.4l-.1.2-1.2 4.2v.1h-.4v-.1l-1.4-4.3-.1-.1H48.6c-.2 0-.3 0-.3.2v.2a4.8 4.8 0 00.3.6 28 28 0 01.7 2.2 125.4 125.4 0 001.1 2.4l.2.1v.3l-.2.3-.3.2a1 1 0 01-.4 0c-.2 0-.3 0-.4.2l-.1.3.1.3.5.1zm8-1.8h.4v-2.8l.1-.1H62l.2-.1.1-.4v-.3h-3.6c-.3 0-.4-.2-.4-.4v-2.1-.3l.3-.1a21.8 21.8 0 011.8 0 25.3 25.3 0 001.5 0h.4v-.5-.3h-1.7a46.3 46.3 0 01-2.8 0h-.5v.4a39.5 39.5 0 000 3.2v.2a107 107 0 010 3.5l.4.1zm6.2 0h.4l.1-.3V36c0-.5.2-1 .5-1.3.3-.3.8-.4 1.3-.4.3 0 .5-.2.5-.5 0-.1 0-.3-.2-.3l-.4-.2c-.3 0-.6 0-.8.2a2 2 0 00-.5.4c0 .2-.2.3-.3.4l-.1.2v-.3l-.1-.7-.1-.2H64l-.3.1-.1.3v.6a86.3 86.3 0 010 3.8V39h.2l.2.1zm4.3-6.6c.2 0 .4 0 .5-.2l.2-.5c0-.2 0-.4-.2-.5-.1-.2-.3-.2-.5-.2s-.4 0-.5.2l-.2.5c0 .2 0 .3.2.5l.5.2zm0 6.6h.4v-5.3-.3h-.8v1a102.3 102.3 0 01-.1 3.9V38.9l.5.1zm4.5.1l1-.1.7-.4.5-.5v-.4c0-.3 0-.4-.3-.4-.1 0-.2 0-.3.2l-.3.3-.5.4-.8.1-.7-.1a1.6 1.6 0 01-.9-1l-.1-.7v-.2h1.2a55.2 55.2 0 011.5 0h1l.3-.2.2-.6c0-.3 0-.6-.2-.9a2.2 2.2 0 00-1.2-1.2c-.3-.2-.7-.2-1-.2a3 3 0 00-1.1.2c-.3 0-.6.2-.8.4l-.5.7a3 3 0 00-.3.9 4.7 4.7 0 000 2l.6 1 .8.5c.3.2.7.2 1.2.2zm1.3-3.5h-2.9v-.3-.4l.4-.4a1.7 1.7 0 011.2-.5c.3 0 .5 0 .7.2.2 0 .3.1.5.3l.2.4.1.4v.2l-.2.1zm4.5 3.5l1-.1.6-.4.3-.3.2-.2v.1a13.6 13.6 0 01.2.8h.7v-1.3a212 212 0 000-5.6v-.6l-.1-.4-.4-.1-.4.1v.4a46.5 46.5 0 000 2.4v.1h-.2c0-.2-.1-.3-.3-.4l-.5-.3a2.8 2.8 0 00-2 0l-.7.6c-.3.3-.4.6-.6 1l-.2 1.2c0 .5 0 .9.2 1.3l.5 1a2 2 0 001.7.7zm.3-.8c-.3 0-.5 0-.8-.2-.2 0-.4-.2-.5-.4a2 2 0 01-.3-.7l-.1-.8v-.8l.4-.7c.1-.2.3-.4.6-.5a2 2 0 011.5 0c.2 0 .4.2.5.4l.4.6v1c0 .6 0 1.2-.4 1.5-.3.4-.7.6-1.3.6zm4.7.7h.4l.1-.3v-.3a25.7 25.7 0 010-1v-1.5c0-.3 0-.6.2-.8l.3-.6c.1-.1.3-.3.5-.3l.6-.1c.3 0 .5 0 .7.3.2.2.3.6.3 1v1.1a45 45 0 000 1.4v1h.9v-3.6l.2-.5a1.2 1.2 0 01.7-.7h.6c.3 0 .6 0 .8.3.2.2.3.6.3 1v1.1a45 45 0 000 1.4v.7l.1.3h.8l.1-.2v-1.3a13.8 13.8 0 000-.8v-1.3c0-.4 0-.8-.2-1 0-.3-.2-.5-.4-.7-.1-.2-.3-.3-.5-.3l-.7-.1a2 2 0 00-1 .1 2 2 0 00-.7.7l-.2.2-.1-.2-.2-.3-.5-.4-.8-.1a1.6 1.6 0 00-1.3.5l-.3.4-.2.1H84v-.4a56.8 56.8 0 01-.2-.5h-.5l-.1.4a170.9 170.9 0 010 4.2v1l.4.1zm10.7.2l1-.2c.3-.1.5-.2.6-.4.2 0 .3-.2.4-.3l.1-.2.1.1.1.4.1.3.3.1h.3V38.4a30 30 0 000-2.4v-.4c0-.8-.1-1.4-.5-1.8-.3-.4-1-.6-1.7-.6-.5 0-1 0-1.2.2-.3 0-.6.3-.8.4a1.7 1.7 0 00-.6 1.3l.1.4.4.2.3-.1.2-.3.1-.5c0-.2.2-.3.3-.5l.4-.2h.7c.4 0 .8 0 1 .2.2.2.4.6.4 1v.4l-.1.2-.2.2-.5.1h-.8l-1 .2-.8.3a1 1 0 00-.4.5l-.1.6.1.5c0 .2.2.3.4.4.1.2.3.3.5.3l.8.2zm.2-.8c-.3 0-.6-.1-.8-.3a.6.6 0 01-.2-.5c0-.2.1-.3.3-.5l1-.3a19.8 19.8 0 001.4-.1c.1 0 .2 0 .2.2s0 .4-.2.6l-.4.4a2 2 0 01-.5.3l-.8.2zm4.8.6h.4V35.8l.2-.8.4-.6.6-.3.6-.1c.3 0 .6 0 .8.3.2.2.3.6.3 1v1.1a46.2 46.2 0 000 1.4v1l.4.1h.5v-1.6a13.8 13.8 0 000-.8v-1.3l-.1-1-.4-.7c-.2-.2-.4-.3-.7-.3l-.7-.1a2 2 0 00-.8.1 2 2 0 00-.8.7l-.2.2V34l-.1-.4-.1-.3H99l-.1.3v.1a390.2 390.2 0 010 4.2V38.9l.4.1z" fill="var(--header-logo-secondary)" fill-rule="nonzero"/> </g> </svg> </div> </figure> </a> <a href="#lessons-modal-trigger" class="c-modal__close"></a> </div> </header> <div class="u-wrap u-flow--m"> <header class="u-split"> <h2 class="c-h c-h-6">In this video course, we’ll explore:</h2> </header> <div class="u-pad-bottom-xl-xl"> <article class="c-full-lesson" id="full-lesson-1" data-id="1"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-1.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Designing for Touch</h3> <p>Chances are high that most of your customers use their mobile devices to access your digital products these days. Let’s see how we use devices and how we need to adjust our workflows for touch.</p> <p><a href="https://www.youtube.com/watch?v=LteyaTkTfGg" class="c-button u-link u-sans u-strong u-link-highlight c-button--shadow c-button--shadow-orange">Free lesson preview <span> <svg style="-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15)); filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15));" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="18 19 1300 1000" id="external-link" fill="currentColor" stroke="none"><g transform="matrix(1,0,0,-1,30.372881,1426.9492)"><path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"></path></g></svg> </span></a></p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>17:51</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-2" data-id="2"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-2.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Accordions UX</h3> <p>The workhorse of all interfaces — the good ol’ <em>accordion</em>, or <em>expander</em>. The pattern is everywhere, but too often it’s wrong or inconsistent. Let’s explore common usability traps, gotchas and best practices.</p> <p><a href="https://youtu.be/aSP5oR9g-ss" class="c-button u-link u-sans u-strong u-link-highlight c-button--shadow c-button--shadow-orange">Free lesson preview <span> <svg style="-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15)); filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15));" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="18 19 1300 1000" id="external-link" fill="currentColor" stroke="none"><g transform="matrix(1,0,0,-1,30.372881,1426.9492)"><path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"></path></g></svg> </span></a></p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>15:18</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-3" data-id="3"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-3.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Navigation UX</h3> <p>On mobile, we don’t have much space to display our elaborate navigation options. Let’s discover how we can deal with common navigation issues and which design patterns we can apply to do so.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>20:37</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-4" data-id="4"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-4.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Hamburger UX</h3> <p>Oh, the infamous hamburger icon! Should it live in the upper right corner or at the bottom of the screen, floating as customers are scrolling and swiping by? Or should we abandon it altogether and use “Menu” instead? Let’s find out.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>10:09</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-5" data-id="5"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-5.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Mega-Dropdowns UX</h3> <p>Do we need mega-dropdown hover menus in 2023? Probably not. Let’s explore things to keep in mind when designing and building a mega-dropdown, alternatives to hover menus and fine details for designing a better navigation UX.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>43:52</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-6" data-id="6"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-6.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Breadcrumbs UX</h3> <p>Breadcrumbs UX are often neglected, but they can be extremely helpful when designing a complex navigation. Let’s explore when we actually need breadcrumbs, how people use them, and how to improve them with sideways navigation, clearer breadcrumbs paths and accordions.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>28:58</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-7" data-id="7"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-7.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Carousels UX</h3> <p>It’s common for us as designers to dismiss carousels at first. However, when designed well, carousels can serve their purpose well — drive engagement and increase conversion. We just need to move away from the generic view of a carousel towards approaches that usually work slightly better.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>15:44</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-8" data-id="8"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-8.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Infinite Scroll UX</h3> <p>Infinite scroll can be frustrating. In this session, we’ll look into the downsides of infinite scroll and how to fix them for good. We’ll also explore how we can combine infinite scroll, the “load more“ pattern and good ol’ pagination to make the exploration of items easier and more efficient.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>16:22</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-9" data-id="9"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-9.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Modals UX</h3> <p>Modals, overlays, pop-ups, popovers... they all are disruptive, annoying and frustrating. Yet sometimes they can be very useful, especially when we need user’s input or don’t want users to lose context while informing them about something important.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>17:53</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-10" data-id="10"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-10.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Footnotes UX</h3> <p>A wonderful yet forgotten UI component that’s left behind in all the conversations about navigation — the footnote, or sidenote. Too often, these notes are found scattered at the bottom of the page. Perhaps they deserve a slightly better placement after all.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>6:37</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-11" data-id="11"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-11.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Search UX</h3> <p>We’ll explore how we search and how we iterate on search phrases, how to refine the interaction design with the search bar, how to show autocomplete suggestions and when to hide them, how many to show and the important details to reveal while users are searching.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>38:04</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-12" data-id="12"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-12.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Autocomplete UX</h3> <p>When customers have a good idea of what they are looking for, they use search. And as they do, they expect autocomplete suggestions to show up. Let’s find out how we can design autocomplete UX to help customers get to their goal faster.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>27:09</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-13" data-id="13"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-13.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Filters UX</h3> <p>Too often dealing with filters can be frustrating. Let’s get them right. That means never freeze the UI on a single input, provide text input fallback and never auto-scroll users on a single input. Here’s why.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>37:22</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-14" data-id="14"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-14.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Sorting UX</h3> <p>Sorting always implies order: be it alphabetical order, timeline, pricing or rating score. But too often sorting isn’t precise enough, doesn’t allow for multi-sorting, and doesn’s support context jumps in a stream of data. Let’s see how we can improve sorting UX, in consumer-focused websites and enterprise apps.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>12:29</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-15" data-id="15"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-15.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Data Tables UX</h3> <p>How do we deal with complex enterprise tables, with filtering, sorting, search and inline editing? A deep-dive into the intricate world of complex tables, with design patterns to keep close.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>49:22</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-16" data-id="16"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-16.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Feature Comparison UX</h3> <p>Chances are high that you’re allowing your customers to select one of the options or variations of your product. However, to choose one of them, they need to be able to compare them easily. And your task is to quickly bring them to the product they will love. How do we get there, especially when we have hundreds of features to compare by?</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>22:45</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-17" data-id="17"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-17.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Pricing Plans UX</h3> <p>How do we design a pricing page that doesn’t overwhelm users with all the options, features and variants? How do we communicate differences? And how do we organize everything on tiny mobile screens? That’s exactly the questions that this lesson is trying to answer.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>53:02</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-18" data-id="18"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-18.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Schedule & Calendars UX</h3> <p>How do we design interfaces for products which involve some sort of a schedule table — a TV guide, a multi-track music festival or an appointment calendar? We need to reduce complexity to the essence and allow users to navigate all the details without overwhelming them. Let’s figure out how.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>21:51</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-19" data-id="19"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-19.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Date Pickers UX</h3> <p>No date picker is like the other one: they come in various forms and flavors, from date input to date range picker, at times with filters, requirements and input limitations. How can we make date input easy and painless? We’ll dive in and explore dozens of examples.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>16:32</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-20" data-id="20"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-20.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Sliders UX</h3> <p>Imagine a helpless little slider masked as a duration filter and tucked away in a sidebar on an airline website. So often such sliders are difficult to manipulate, and too often they frustrate customers and slow down the entire experience. Let’s find out when it makes sense to employ sliders, and how we can make them more usable.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>20:10</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-21" data-id="21"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-21.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Timelines UX</h3> <p>Every history textbook and every sport event will have some sort of a timeline at their heart: a flow of historic events, or a tennis match timeline, or perhaps a boxing match protocol. So what if you want to provide your customers with an insight into dozens of events happening within a particular timeframe?</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>13:57</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-22" data-id="22"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-22.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Maps UX</h3> <p>With zooming in and out in place, maps seem to be quite obvious to get right. But what if we want to display pins to locations on a shopping mall map? Or what about an election results map with autocomplete, filters, and search? That’s where maps become slightly messier and more complex.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>20:32</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-23" data-id="23"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-23.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Seat Selection UX</h3> <p>What if we combine all the previous challenges into one? Imagine you are selling tickets for a cinema, a baseball stadium, or an opera house. Surely you’ll want to provide your customers with an overview of available seats, and allow them to select the best seat as well. The challenge is to do it well on mobile. Let’s tackle this beast!</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>15:19</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-24" data-id="24"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-24.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Configurators UX</h3> <p>Perhaps you have a multi-page wizard, or you’d like your customers to customize your product? In such cases, we need to ensure that users can easily move between steps and complete the task without being slowed down by the interface.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>32:34</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-25" data-id="25"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-25.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Reviews and Ratings UX</h3> <p>95% of users rely on reviews to make their decisions and learn more about how well a product fits their needs. Unfortunately, too often the way we design reviews and ratings UX confuses and frustrates users, rather than helping them. Let’s fix that.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>17:06</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-26" data-id="26"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-26.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Language Selector UX</h3> <p>How difficult can it be to design a bulletproof language selector? It’s not as straightforward as one might think. We need to avoid redirects, decouple our language and country presets, allow for overrides, and use non-modal windows. Let’s dive in!</p> <p><a href="https://www.youtube.com/watch?v=jhZ3el3n-u0" class="c-button u-link u-sans u-strong u-link-highlight c-button--shadow c-button--shadow-orange">Free lesson preview <span> <svg style="-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15)); filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15));" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="18 19 1300 1000" id="external-link" fill="currentColor" stroke="none"><g transform="matrix(1,0,0,-1,30.372881,1426.9492)"><path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"></path></g></svg> </span></a></p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>35:12</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-27" data-id="27"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-27.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Closed Captions and Subtitles UX</h3> <p>When we think about closed captioning, we often think about noisy environments. There, consuming content via audio is difficult, and so captions help communicate information in an alternative, textual way. Captioning can be much more than text though. Let’s explore design patterns for better UX of subtitles, captions, video players, transcripts and on-screen text.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>11:44</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-28" data-id="28"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-28.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Back Button UX</h3> <p>Users rely on a “Back” button to go back, but often we mismatch their expectations, bringing frustration and abandonment. Let’s explore how to design a better “Back” button UX and where to put these buttons in our interfaces.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>11:02</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-29" data-id="29"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-29.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">UX Metrics and Design KPIs</h3> <p>Design solves problems. So we should be able to measure how well a particular design solves a particular problem. That's why I start working by setting Design KPIs, and tracking them over time. Let’s explore how to define, design and track design KPIs in small and large projects.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>35:37</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-30" data-id="30"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-30.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Design Systems</h3> <p>Nobody is surprised by design systems these days. Their main benefit isn’t only in a library of reliable UI components, but in a strong alignment between teams that removes redundant or unnecessary work.</p> <p>But for that, a design system needs to be healthy and work well. Let’s explore how we can keep our design systems relevant over time, and keep it healthy and up-to-date for the entire organization.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>27:11</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-31" data-id="31"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-31.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Authentication UX</h3> <p>How can we make authentication and password recovery slightly more obvious and slightly less frustrating? In this session, we’ll look into authentication UX, design patterns around login/password, 2FA, magic sign-in as well as just the right timing to speed up and simplify authentication.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>44:29</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-32" data-id="32"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-32.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Privacy UX</h3> <p>With GDPR and CCPA in place, we need to think twice about how we ask customers for their data, or specifically, how do we get permissions if we really need them. It’s really the art of asking tough questions at the right time and in the right way.</p> <p>Let’s take a look at omnipresent cookie prompts and see how we can make better privacy-related design decisions without hurting the bottom line.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>17:44</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-33" data-id="33"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-33.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Web Forms UX</h3> <p>Very often forms are inaccessible and difficult to use, with awkward live validation and notorious error messages; not to mention a birthday date-picker starting from 2023, a tiny newsletter checkbox, disabled “submit” buttons and horrendously evil CAPTCHAs in the disguise of street signs and crosswalks. So let’s fix web forms for good!</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>34:17</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-34" data-id="34"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-34.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Disabled Buttons</h3> <p>In this segment, we’ll look into common usability issues with disabled buttons, how to fix these issues and when disabling buttons actually makes sense. We’ll start from the beginning, looking into when disabled buttons cause more trouble than help.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>15:01</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-35" data-id="35"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-35.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Live Validation UX</h3> <p>Inline validation in web forms is useful when it works, but frustrating when it fails. Too often it leads to an endless stream of disruptive error messages or dead-ends without any chance of getting out. Let’s fix it for good.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>19:00</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-36" data-id="36"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-36.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Error Messages UX</h3> <p>Error messages need to be easy to spot, but they also need to be helpful. Let’s explore when error messages should live above input fields and why toast error messages are usually not a very good idea.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>12:59</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-37" data-id="37"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-37.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Bringing Personality Back to the Web</h3> <p>The web has become quite generic and soulless, hasn’t it? Every single website looks alike, and only few websites manage to convey a unique and charming personality. As a result, nothing is particularly memorable, and only few sites manage to connect with us emotionally.</p> <p>But we can do better and be charming and unique and attractive without breaking accessibility and usability. Let’s dive into a few techniques to achieve just that!</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>26:13</time></span> </p> </article> <article class="c-full-lesson" id="full-lesson-38" data-id="38"> <span class="c-full-lesson__number c-h c-h-0"><span class="u-hidden">Lesson number: </span></span> <img src="/static/img/chapters/chapter-38.png" alt="" height="177" width="303" decoding="async" loading="lazy" /> <div class="u-flow--xs o-body"> <h3 class="c-h c-h-0">Summary</h3> <p>Giddy up — you made it! Well done! Now, let’s wrap up and recap everything we’ve learned in the course and see how it all fits together, and how you can apply all the insights to your regular design work.</p> </div> <p class="c-full-lesson__length"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock-2 "> <use xlink:href="/static/svg/sprite.svg#clock-2"></use> </svg> <span>Duration <time>12:30</time></span> </p> </article> </div> <header class="c-section-header c-section-header--small u-wrap u-flow--m"> <svg height="142" class="anim-hand-cta" viewBox="0 0 155 117"><g class="sparks"><circle cx="139.85" cy="59.78" r="2.3" fill="#fff6b3"/> <circle cx="7.29" cy="45.86" r="2.3" fill="#fff6b3"/> <circle cx="51.65" cy="35.57" r="2.3" fill="#fff6b3"/> <circle cx="115.17" cy="30.24" r="2.3" fill="#fff6b3"/> <circle cx="76.51" cy="47.53" r="1.44" fill="#fff6b3"/> <circle cx="17.25" cy="90.35" r="1.44" fill="#fff6b3"/> <circle cx="11.48" cy="64.93" r="1.44" fill="#fff6b3"/> <circle cx="142" cy="90.35" r="1.44" fill="#fff6b3"/> <circle cx="116.26" cy="51.77" r="1.44" fill="#fff6b3"/> <g> <line x1="144.4" y1="33.82" x2="144.4" y2="36.54" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/> <line x1="144.4" y1="42.28" x2="144.4" y2="45" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/> <line x1="149.99" y1="39.41" x2="147.27" y2="39.41" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/> <line x1="141.54" y1="39.41" x2="138.81" y2="39.41" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/> </g> <g> <line x1="77.9" y1="6.45" x2="77.9" y2="10.4" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="77.9" y1="18.71" x2="77.9" y2="22.66" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="86" y1="14.55" x2="82.05" y2="14.55" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="73.74" y1="14.55" x2="69.79" y2="14.55" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> </g> <g> <line x1="20.9" y1="25.11" x2="20.9" y2="27.27" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.1"/> <line x1="20.9" y1="31.83" x2="20.9" y2="34" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.1"/> <line x1="25.34" y1="29.55" x2="23.18" y2="29.55" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.1"/> <line x1="18.62" y1="29.55" x2="16.45" y2="29.55" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.1"/> </g></g><g class="lines"> <path d="M23.87,82.2l-13-4.52A1.28,1.28,0,0,1,10.13,76c.08-.23.16-.45.25-.68a1.28,1.28,0,0,1,1.68-.72l12.73,5.1a1.3,1.3,0,0,1,.72,1.66v0A1.29,1.29,0,0,1,23.87,82.2Z" fill="#ffe895"/> <path d="M130,80.46v0a1.3,1.3,0,0,1,.57-1.71l12.25-6.18a1.28,1.28,0,0,1,1.73.58c.11.21.21.43.31.64a1.28,1.28,0,0,1-.64,1.71l-12.52,5.61A1.28,1.28,0,0,1,130,80.46Z" fill="#ffe895"/> <path d="M33.19,67.89,22.44,59.36a1.27,1.27,0,0,1-.2-1.81l.45-.55a1.29,1.29,0,0,1,1.83-.14l10.35,9a1.3,1.3,0,0,1,.14,1.8l0,0A1.29,1.29,0,0,1,33.19,67.89Z" fill="#ffe895"/> <path d="M119.15,64.13l0,0a1.29,1.29,0,0,1,0-1.8l9.56-9.84a1.29,1.29,0,0,1,1.83,0c.17.17.33.34.5.5a1.3,1.3,0,0,1-.05,1.83l-10,9.41A1.29,1.29,0,0,1,119.15,64.13Z" fill="#ffe895"/> <path d="M47.54,55,40.16,43.38a1.29,1.29,0,0,1,.4-1.78l.61-.37a1.29,1.29,0,0,1,1.77.46l6.85,11.89a1.3,1.3,0,0,1-.46,1.75l0,0A1.3,1.3,0,0,1,47.54,55Z" fill="#ffe895"/> <path d="M103.84,53l0,0a1.28,1.28,0,0,1-.61-1.69L109,38.88a1.29,1.29,0,0,1,1.72-.62l.65.33a1.28,1.28,0,0,1,.55,1.74l-6.37,12.15A1.29,1.29,0,0,1,103.84,53Z" fill="#ffe895"/> <path d="M65.31,47.44,62.17,34.08a1.29,1.29,0,0,1,1-1.55l.69-.14a1.27,1.27,0,0,1,1.51,1l2.55,13.48a1.29,1.29,0,0,1-1,1.5h0A1.3,1.3,0,0,1,65.31,47.44Z" fill="#ffe895"/> <path d="M85.77,47.6h0a1.28,1.28,0,0,1-1.13-1.4L86,32.54a1.29,1.29,0,0,1,1.42-1.15l.71.09a1.27,1.27,0,0,1,1.09,1.46l-2,13.57A1.29,1.29,0,0,1,85.77,47.6Z" fill="#ffe895"/></g><g class="hand"><g id="fork"><path d="M120,80.4l-9.7-.14c-5.34-.06-9.72,3.45-9.77,7.84s4.24,8,9.58,8.07c.19,0,9.5.1,9.7.09" fill="none" stroke="#c9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="119.91" y1="88.33" x2="113.83" y2="88.26" fill="none" stroke="#c9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.24"/><path d="M112.5,96.05l.18-15.79H110.3c-5.34-.06-9.72,3.45-9.77,7.84s4.24,8,9.58,8.07Z" fill="#9683ba" stroke="#c9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M100,87.82l-64.69-.28" fill="none" stroke="#c9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g><g><path d="M61,84.92H89.91a0,0,0,0,1,0,0v25.74a0,0,0,0,1,0,0H76.85A15.85,15.85,0,0,1,61,94.81V84.92A0,0,0,0,1,61,84.92Z" transform="translate(-0.69 0.54) rotate(-0.41)" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="57.84" y="75.42" width="9.18" height="16.04" rx="4.08" transform="translate(-0.59 0.44) rotate(-0.41)" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="67.05" y="75.48" width="9.18" height="20.72" rx="4.59" transform="translate(-0.61 0.51) rotate(-0.41)" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="76.24" y="75.42" width="9.18" height="20.72" rx="4.59" transform="translate(-0.61 0.57) rotate(-0.41)" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="85.44" y="75.35" width="9.18" height="23.75" rx="4.59" transform="translate(-0.62 0.64) rotate(-0.41)" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="84.52" y="93.55" width="9.18" height="17.76" rx="4.08" transform="translate(-44.46 78.13) rotate(-38.67)" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></g></svg> <h1 class="c-h c-h-6">10h video course for designers, UX engineers & front-end developers.</h1> <div class="o-prose"> <a href="#packages" class="c-button anim-hand-btn c-button--shadow c-button--shadow-orange c-button--inline" >← Check the packages</a> </div> </header> </div> </div> <button type="button" class="c-modal__wing"></button> <button type="button" class="c-modal__wing"></button> </section> <div class="c-lessons__wrapper u-wrap"> <div class="c-lessons__content u-flow"> <h2 class="c-h c-h-5">Get once, watch forever. New videos added regularly.</h2> <div class="o-prose"> <p>A growing <strong>library of video lessons & examples</strong>. With <strong>35 lessons</strong> available now, and more added every few months.<br /><br />Ideal <strong>for interface designers</strong>, UI engineers and developers who’d love to be prepared for complex UX challenges.</p> <p><a href="#lessons-modal" id="lessons-modal-trigger" class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--orange c-button--shadow c-button--shadow-orange">Table of Contents →</a></p> </div> </div> <div class="c-lessons__slides"> <div class="c-lessons__slider"> <ol> <li data-id="1"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>17:51</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-1"> Designing for Touch </a> </h3> </header> <img src="/static/img/chapters/chapter-1.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Chances are high that most of your customers use their mobile devices to access your digital products these days. Let’s see how we use devices and how we need to adjust our workflows for touch.</p> <p><a href="https://www.youtube.com/watch?v=LteyaTkTfGg" class="c-button u-link u-sans u-strong u-link-highlight c-button--shadow c-button--shadow-orange">Free lesson preview <span> <svg style="-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15)); filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15));" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="18 19 1300 1000" id="external-link" fill="currentColor" stroke="none"><g transform="matrix(1,0,0,-1,30.372881,1426.9492)"><path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"></path></g></svg> </span></a></p> </div> </article> </li> <li data-id="2"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>15:18</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-2"> Accordions UX </a> </h3> </header> <img src="/static/img/chapters/chapter-2.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>The workhorse of all interfaces — the good ol’ <em>accordion</em>, or <em>expander</em>. The pattern is everywhere, but too often it’s wrong or inconsistent. Let’s explore common usability traps, gotchas and best practices.</p> <p><a href="https://youtu.be/aSP5oR9g-ss" class="c-button u-link u-sans u-strong u-link-highlight c-button--shadow c-button--shadow-orange">Free lesson preview <span> <svg style="-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15)); filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15));" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="18 19 1300 1000" id="external-link" fill="currentColor" stroke="none"><g transform="matrix(1,0,0,-1,30.372881,1426.9492)"><path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"></path></g></svg> </span></a></p> </div> </article> </li> <li data-id="3"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>20:37</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-3"> Navigation UX </a> </h3> </header> <img src="/static/img/chapters/chapter-3.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>On mobile, we don’t have much space to display our elaborate navigation options. Let’s discover how we can deal with common navigation issues and which design patterns we can apply to do so.</p> </div> </article> </li> <li data-id="4"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>10:09</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-4"> Hamburger UX </a> </h3> </header> <img src="/static/img/chapters/chapter-4.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Oh, the infamous hamburger icon! Should it live in the upper right corner or at the bottom of the screen, floating as customers are scrolling and swiping by? Or should we abandon it altogether and use “Menu” instead? Let’s find out.</p> </div> </article> </li> <li data-id="5"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>43:52</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-5"> Mega-Dropdowns UX </a> </h3> </header> <img src="/static/img/chapters/chapter-5.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Do we need mega-dropdown hover menus in 2023? Probably not. Let’s explore things to keep in mind when designing and building a mega-dropdown, alternatives to hover menus and fine details for designing a better navigation UX.</p> </div> </article> </li> <li data-id="6"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>28:58</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-6"> Breadcrumbs UX </a> </h3> </header> <img src="/static/img/chapters/chapter-6.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Breadcrumbs UX are often neglected, but they can be extremely helpful when designing a complex navigation. Let’s explore when we actually need breadcrumbs, how people use them, and how to improve them with sideways navigation, clearer breadcrumbs paths and accordions.</p> </div> </article> </li> <li data-id="7"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>15:44</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-7"> Carousels UX </a> </h3> </header> <img src="/static/img/chapters/chapter-7.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>It’s common for us as designers to dismiss carousels at first. However, when designed well, carousels can serve their purpose well — drive engagement and increase conversion. We just need to move away from the generic view of a carousel towards approaches that usually work slightly better.</p> </div> </article> </li> <li data-id="8"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>16:22</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-8"> Infinite Scroll UX </a> </h3> </header> <img src="/static/img/chapters/chapter-8.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Infinite scroll can be frustrating. In this session, we’ll look into the downsides of infinite scroll and how to fix them for good. We’ll also explore how we can combine infinite scroll, the “load more“ pattern and good ol’ pagination to make the exploration of items easier and more efficient.</p> </div> </article> </li> <li data-id="9"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>17:53</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-9"> Modals UX </a> </h3> </header> <img src="/static/img/chapters/chapter-9.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Modals, overlays, pop-ups, popovers... they all are disruptive, annoying and frustrating. Yet sometimes they can be very useful, especially when we need user’s input or don’t want users to lose context while informing them about something important.</p> </div> </article> </li> <li data-id="10"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>6:37</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-10"> Footnotes UX </a> </h3> </header> <img src="/static/img/chapters/chapter-10.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>A wonderful yet forgotten UI component that’s left behind in all the conversations about navigation — the footnote, or sidenote. Too often, these notes are found scattered at the bottom of the page. Perhaps they deserve a slightly better placement after all.</p> </div> </article> </li> <li data-id="11"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>38:04</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-11"> Search UX </a> </h3> </header> <img src="/static/img/chapters/chapter-11.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>We’ll explore how we search and how we iterate on search phrases, how to refine the interaction design with the search bar, how to show autocomplete suggestions and when to hide them, how many to show and the important details to reveal while users are searching.</p> </div> </article> </li> <li data-id="12"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>27:09</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-12"> Autocomplete UX </a> </h3> </header> <img src="/static/img/chapters/chapter-12.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>When customers have a good idea of what they are looking for, they use search. And as they do, they expect autocomplete suggestions to show up. Let’s find out how we can design autocomplete UX to help customers get to their goal faster.</p> </div> </article> </li> <li data-id="13"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>37:22</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-13"> Filters UX </a> </h3> </header> <img src="/static/img/chapters/chapter-13.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Too often dealing with filters can be frustrating. Let’s get them right. That means never freeze the UI on a single input, provide text input fallback and never auto-scroll users on a single input. Here’s why.</p> </div> </article> </li> <li data-id="14"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>12:29</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-14"> Sorting UX </a> </h3> </header> <img src="/static/img/chapters/chapter-14.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Sorting always implies order: be it alphabetical order, timeline, pricing or rating score. But too often sorting isn’t precise enough, doesn’t allow for multi-sorting, and doesn’s support context jumps in a stream of data. Let’s see how we can improve sorting UX, in consumer-focused websites and enterprise apps.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> </article> </li> <li data-id="15"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>49:22</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-15"> Data Tables UX </a> </h3> </header> <img src="/static/img/chapters/chapter-15.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>How do we deal with complex enterprise tables, with filtering, sorting, search and inline editing? A deep-dive into the intricate world of complex tables, with design patterns to keep close.</p> </div> </article> </li> <li data-id="16"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>22:45</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-16"> Feature Comparison UX </a> </h3> </header> <img src="/static/img/chapters/chapter-16.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Chances are high that you’re allowing your customers to select one of the options or variations of your product. However, to choose one of them, they need to be able to compare them easily. And your task is to quickly bring them to the product they will love. How do we get there, especially when we have hundreds of features to compare by?</p> </div> </article> </li> <li data-id="17"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>53:02</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-17"> Pricing Plans UX </a> </h3> </header> <img src="/static/img/chapters/chapter-17.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>How do we design a pricing page that doesn’t overwhelm users with all the options, features and variants? How do we communicate differences? And how do we organize everything on tiny mobile screens? That’s exactly the questions that this lesson is trying to answer.</p> </div> </article> </li> <li data-id="18"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>21:51</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-18"> Schedule & Calendars UX </a> </h3> </header> <img src="/static/img/chapters/chapter-18.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>How do we design interfaces for products which involve some sort of a schedule table — a TV guide, a multi-track music festival or an appointment calendar? We need to reduce complexity to the essence and allow users to navigate all the details without overwhelming them. Let’s figure out how.</p> </div> </article> </li> <li data-id="19"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>16:32</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-19"> Date Pickers UX </a> </h3> </header> <img src="/static/img/chapters/chapter-19.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>No date picker is like the other one: they come in various forms and flavors, from date input to date range picker, at times with filters, requirements and input limitations. How can we make date input easy and painless? We’ll dive in and explore dozens of examples.</p> </div> </article> </li> <li data-id="20"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>20:10</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-20"> Sliders UX </a> </h3> </header> <img src="/static/img/chapters/chapter-20.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Imagine a helpless little slider masked as a duration filter and tucked away in a sidebar on an airline website. So often such sliders are difficult to manipulate, and too often they frustrate customers and slow down the entire experience. Let’s find out when it makes sense to employ sliders, and how we can make them more usable.</p> </div> </article> </li> <li data-id="21"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>13:57</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-21"> Timelines UX </a> </h3> </header> <img src="/static/img/chapters/chapter-21.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Every history textbook and every sport event will have some sort of a timeline at their heart: a flow of historic events, or a tennis match timeline, or perhaps a boxing match protocol. So what if you want to provide your customers with an insight into dozens of events happening within a particular timeframe?</p> </div> </article> </li> <li data-id="22"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>20:32</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-22"> Maps UX </a> </h3> </header> <img src="/static/img/chapters/chapter-22.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>With zooming in and out in place, maps seem to be quite obvious to get right. But what if we want to display pins to locations on a shopping mall map? Or what about an election results map with autocomplete, filters, and search? That’s where maps become slightly messier and more complex.</p> </div> </article> </li> <li data-id="23"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>15:19</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-23"> Seat Selection UX </a> </h3> </header> <img src="/static/img/chapters/chapter-23.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>What if we combine all the previous challenges into one? Imagine you are selling tickets for a cinema, a baseball stadium, or an opera house. Surely you’ll want to provide your customers with an overview of available seats, and allow them to select the best seat as well. The challenge is to do it well on mobile. Let’s tackle this beast!</p> </div> </article> </li> <li data-id="24"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>32:34</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-24"> Configurators UX </a> </h3> </header> <img src="/static/img/chapters/chapter-24.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Perhaps you have a multi-page wizard, or you’d like your customers to customize your product? In such cases, we need to ensure that users can easily move between steps and complete the task without being slowed down by the interface.</p> </div> </article> </li> <li data-id="25"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>17:06</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-25"> Reviews and Ratings UX </a> </h3> </header> <img src="/static/img/chapters/chapter-25.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>95% of users rely on reviews to make their decisions and learn more about how well a product fits their needs. Unfortunately, too often the way we design reviews and ratings UX confuses and frustrates users, rather than helping them. Let’s fix that.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> </article> </li> <li data-id="26"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>35:12</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-26"> Language Selector UX </a> </h3> </header> <img src="/static/img/chapters/chapter-26.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>How difficult can it be to design a bulletproof language selector? It’s not as straightforward as one might think. We need to avoid redirects, decouple our language and country presets, allow for overrides, and use non-modal windows. Let’s dive in!</p> <p><a href="https://www.youtube.com/watch?v=jhZ3el3n-u0" class="c-button u-link u-sans u-strong u-link-highlight c-button--shadow c-button--shadow-orange">Free lesson preview <span> <svg style="-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15)); filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15));" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="18 19 1300 1000" id="external-link" fill="currentColor" stroke="none"><g transform="matrix(1,0,0,-1,30.372881,1426.9492)"><path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"></path></g></svg> </span></a></p> </div> </article> </li> <li data-id="27"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>11:44</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-27"> Closed Captions and Subtitles UX </a> </h3> </header> <img src="/static/img/chapters/chapter-27.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>When we think about closed captioning, we often think about noisy environments. There, consuming content via audio is difficult, and so captions help communicate information in an alternative, textual way. Captioning can be much more than text though. Let’s explore design patterns for better UX of subtitles, captions, video players, transcripts and on-screen text.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> </article> </li> <li data-id="28"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>11:02</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-28"> Back Button UX </a> </h3> </header> <img src="/static/img/chapters/chapter-28.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Users rely on a “Back” button to go back, but often we mismatch their expectations, bringing frustration and abandonment. Let’s explore how to design a better “Back” button UX and where to put these buttons in our interfaces.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> </article> </li> <li data-id="29"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>35:37</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-29"> UX Metrics and Design KPIs </a> </h3> </header> <img src="/static/img/chapters/chapter-29.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Design solves problems. So we should be able to measure how well a particular design solves a particular problem. That's why I start working by setting Design KPIs, and tracking them over time. Let’s explore how to define, design and track design KPIs in small and large projects.</p> </div> </article> </li> <li data-id="30"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>27:11</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-30"> Design Systems </a> </h3> </header> <img src="/static/img/chapters/chapter-30.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Nobody is surprised by design systems these days. Their main benefit isn’t only in a library of reliable UI components, but in a strong alignment between teams that removes redundant or unnecessary work.</p> <p>But for that, a design system needs to be healthy and work well. Let’s explore how we can keep our design systems relevant over time, and keep it healthy and up-to-date for the entire organization.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> </article> </li> <li data-id="31"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>44:29</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-31"> Authentication UX </a> </h3> </header> <img src="/static/img/chapters/chapter-31.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>How can we make authentication and password recovery slightly more obvious and slightly less frustrating? In this session, we’ll look into authentication UX, design patterns around login/password, 2FA, magic sign-in as well as just the right timing to speed up and simplify authentication.</p> </div> </article> </li> <li data-id="32"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>17:44</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-32"> Privacy UX </a> </h3> </header> <img src="/static/img/chapters/chapter-32.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>With GDPR and CCPA in place, we need to think twice about how we ask customers for their data, or specifically, how do we get permissions if we really need them. It’s really the art of asking tough questions at the right time and in the right way.</p> <p>Let’s take a look at omnipresent cookie prompts and see how we can make better privacy-related design decisions without hurting the bottom line.</p> </div> </article> </li> <li data-id="33"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>34:17</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-33"> Web Forms UX </a> </h3> </header> <img src="/static/img/chapters/chapter-33.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Very often forms are inaccessible and difficult to use, with awkward live validation and notorious error messages; not to mention a birthday date-picker starting from 2023, a tiny newsletter checkbox, disabled “submit” buttons and horrendously evil CAPTCHAs in the disguise of street signs and crosswalks. So let’s fix web forms for good!</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> </article> </li> <li data-id="34"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>15:01</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-34"> Disabled Buttons </a> </h3> </header> <img src="/static/img/chapters/chapter-34.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>In this segment, we’ll look into common usability issues with disabled buttons, how to fix these issues and when disabling buttons actually makes sense. We’ll start from the beginning, looking into when disabled buttons cause more trouble than help.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> </article> </li> <li data-id="35"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>19:00</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-35"> Live Validation UX </a> </h3> </header> <img src="/static/img/chapters/chapter-35.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Inline validation in web forms is useful when it works, but frustrating when it fails. Too often it leads to an endless stream of disruptive error messages or dead-ends without any chance of getting out. Let’s fix it for good.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> </article> </li> <li data-id="36"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>12:59</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-36"> Error Messages UX </a> </h3> </header> <img src="/static/img/chapters/chapter-36.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Error messages need to be easy to spot, but they also need to be helpful. Let’s explore when error messages should live above input fields and why toast error messages are usually not a very good idea.</p> <p><button class="c-button u-link u-sans u-strong u-link-highlight u-link-highlight--blue c-button--shadow c-button--shadow-blue c-button--shadow-blue-border">Coming soon!</p> </div> </article> </li> <li data-id="37"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>26:13</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-37"> Bringing Personality Back to the Web </a> </h3> </header> <img src="/static/img/chapters/chapter-37.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>The web has become quite generic and soulless, hasn’t it? Every single website looks alike, and only few websites manage to convey a unique and charming personality. As a result, nothing is particularly memorable, and only few sites manage to connect with us emotionally.</p> <p>But we can do better and be charming and unique and attractive without breaking accessibility and usability. Let’s dive into a few techniques to achieve just that!</p> </div> </article> </li> <li data-id="38"> <article class="c-lesson"> <header class="c-lesson__header u-flow"> <div class="u-split"> <span class="c-lesson__number"><span class="u-hidden">Lesson number: </span></span> <time><span class="u-hidden">Lesson length: </span> <span class="c-twi c-twi--left" ><span>12:30</span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--clock "> <use xlink:href="/static/svg/sprite.svg#clock"></use> </svg> </span> </time> </div> <h3 class="c-h c-h-1 c-lesson__title"> <a class="c-lesson__title-link" href="#lessons-modal" data-focus="full-lesson-38"> Summary </a> </h3> </header> <img src="/static/img/chapters/chapter-38.png" alt="" height="280" width="480" decoding="async" loading="lazy" /> <div class="c-lesson__content u-flow--xs"> <p>Giddy up — you made it! Well done! Now, let’s wrap up and recap everything we’ve learned in the course and see how it all fits together, and how you can apply all the insights to your regular design work.</p> </div> </article> </li> </ol> </div> <div class="c-lessons__controls"> <button data-direction="-" class="fade-out" type="button" aria-label="Previous slide"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--arrow-left c-icon--shadow"> <use xlink:href="/static/svg/sprite.svg#arrow-left"></use> </svg> </button> <button data-direction="+" type="button" aria-label="Next slide"> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--arrow-right c-icon--shadow"> <use xlink:href="/static/svg/sprite.svg#arrow-right"></use> </svg> </button> </div> <output class="c-lessons__count">1 | 38</output> </div> </div> </div> <section class="o-slat c-course-content"> <header class="c-section-header c-section-header--small u-wrap u-flow--m"> <svg id="anim-bottle" xmlns="http://www.w3.org/2000/svg" width="162" height="133" viewBox="0 0 162 133"><defs><style>.a09df3e6-557d-4798-8f48-dfe0c89cd997,.a66a2ef7-6dab-461e-8007-c4aafcaa921c,.ad06fa33-8329-48c8-9c06-7495867de3e0,.affd1de3-0fc3-40b2-9fe2-21eb6c173ed3,.b8251118-ae09-494c-b64b-1dc1eb1dc86b,.b8f08e27-a486-4a77-bbaf-e4cb17159157,.bef5551d-f6c1-472e-9c3a-1f63757b6196,.ea26007f-0766-4ef2-9c6d-bfcbd374f98a{fill:none}.ea26007f-0766-4ef2-9c6d-bfcbd374f98a{stroke:#9683ba}.a09df3e6-557d-4798-8f48-dfe0c89cd997,.a24a14d7-0949-48c0-934d-84df5b2fab9c,.a66a2ef7-6dab-461e-8007-c4aafcaa921c,.ad06fa33-8329-48c8-9c06-7495867de3e0,.affd1de3-0fc3-40b2-9fe2-21eb6c173ed3,.b8251118-ae09-494c-b64b-1dc1eb1dc86b,.b8f08e27-a486-4a77-bbaf-e4cb17159157,.bef5551d-f6c1-472e-9c3a-1f63757b6196,.ea26007f-0766-4ef2-9c6d-bfcbd374f98a{stroke-miterlimit:10}.a66a2ef7-6dab-461e-8007-c4aafcaa921c,.affd1de3-0fc3-40b2-9fe2-21eb6c173ed3,.ea26007f-0766-4ef2-9c6d-bfcbd374f98a{stroke-width:.5px}.a09df3e6-557d-4798-8f48-dfe0c89cd997,.a24a14d7-0949-48c0-934d-84df5b2fab9c,.ad06fa33-8329-48c8-9c06-7495867de3e0,.b8251118-ae09-494c-b64b-1dc1eb1dc86b,.b8f08e27-a486-4a77-bbaf-e4cb17159157,.bef5551d-f6c1-472e-9c3a-1f63757b6196{stroke-linecap:round}.a09df3e6-557d-4798-8f48-dfe0c89cd997,.b8251118-ae09-494c-b64b-1dc1eb1dc86b,.b8f08e27-a486-4a77-bbaf-e4cb17159157{stroke:#fff8ec}.affd1de3-0fc3-40b2-9fe2-21eb6c173ed3,.bef5551d-f6c1-472e-9c3a-1f63757b6196{stroke:#bfe6c7}.a24a14d7-0949-48c0-934d-84df5b2fab9c,.a66a2ef7-6dab-461e-8007-c4aafcaa921c{stroke:#82cdb2}.a24a14d7-0949-48c0-934d-84df5b2fab9c{stroke-width:3px}.b8f08e27-a486-4a77-bbaf-e4cb17159157{stroke-width:2px}.ad06fa33-8329-48c8-9c06-7495867de3e0{stroke:#ee5b68}.b8251118-ae09-494c-b64b-1dc1eb1dc86b{stroke-width:1.22px}.a24a14d7-0949-48c0-934d-84df5b2fab9c{fill:#4b4b4b}</style></defs><g id="ba60a088-836d-4a83-b118-2143205dbdcc" data-name="pencil"><path class="ea26007f-0766-4ef2-9c6d-bfcbd374f98a" d="M119.78 120.91l6.53-70.77"/><path d="M129 50.6l-6.83 73.92a2.69 2.69 0 01-5.35-.49l6.82-73.88v0l3.36-7.22z" stroke-linecap="round" stroke-miterlimit="10" stroke="#9683ba" fill="none"/><path class="ea26007f-0766-4ef2-9c6d-bfcbd374f98a" d="M126.23 51c.08-.76.62-1 1.39-.91a1.4 1.4 0 011.26 1.52"/><path class="ea26007f-0766-4ef2-9c6d-bfcbd374f98a" d="M126.23 51c.08-.76-.42-1.07-1.19-1.14a1.4 1.4 0 00-1.52 1.26"/><path stroke="#fff8ec" stroke-width=".5" stroke-miterlimit="10" fill="none" d="M122.18 121.3l-4.66-.42"/></g><g id="a041fb5f-fbfa-495c-bcf3-179d4746c773" data-name="brush"><path class="bef5551d-f6c1-472e-9c3a-1f63757b6196" d="M127 64.06h3.2v63.6a1.6 1.6 0 01-1.6 1.6 1.6 1.6 0 01-1.6-1.6v-63.6z" transform="rotate(16.18 128.65 96.7)"/><path class="bef5551d-f6c1-472e-9c3a-1f63757b6196" d="M143.6 45.09s-12.29 10.44-7.93 19.72l4.08 1.19c8.65-5.51 3.85-20.91 3.85-20.91z"/><path class="affd1de3-0fc3-40b2-9fe2-21eb6c173ed3" d="M144.1 60.19l-5.81 3.19-3.19-5.8"/><path class="affd1de3-0fc3-40b2-9fe2-21eb6c173ed3" d="M145.18 56.48l-5.81 3.19-3.19-5.8"/><path class="affd1de3-0fc3-40b2-9fe2-21eb6c173ed3" d="M144.89 53.34l-4.65 2.56-2.24-4.11"/></g><g id="bottle-jar"><path d="M69.91 54.64h28.68a9.45 9.45 0 019.41 9.44v65.69h0-47.54 0V64.08a9.45 9.45 0 019.45-9.44z" stroke-width="3" stroke="#82cdb2" fill="#bfe6c7" stroke-linecap="round" stroke-miterlimit="10"/><path d="M68.7 44.06h31.1a3 3 0 013 3v7.74h0-37.12 0v-7.72a3 3 0 013.02-3.02z" stroke-width="3" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10" fill="none"/><path class="a66a2ef7-6dab-461e-8007-c4aafcaa921c" d="M70.86 45.28v10.66M73.25 45.28v10.66M75.64 45.28v10.66M78.04 45.28v10.66M80.43 45.28v10.66"/><rect class="a09df3e6-557d-4798-8f48-dfe0c89cd997" x="71.15" y="77.84" width="28.43" height="33.65" rx="14.22"/><path class="a09df3e6-557d-4798-8f48-dfe0c89cd997" d="M85.36 84.13v22.02M89.79 91.35l-4.43 4.43-4.42-4.43M89.79 96.8l-4.43 4.42-4.42-4.42M88.11 87.37l-2.75 2.75-2.75-2.75"/></g><g id="e20f4ede-8728-49c4-b336-5fa8be1a728a" data-name="bottle"><path d="M39.24 84.7v7.82h-4.48a7.25 7.25 0 00-7.25 7.25v30.32h37.17V99.77a7.25 7.25 0 00-7.25-7.25H53v-8.14" stroke="#ffe895" fill="#f4b67f" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10"/><path d="M53 80.44V75.5H39.24V80" fill="#ffe895" stroke="#ffe895" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10"/><path stroke-width="2" stroke="#ffe895" fill="#f4b67f" stroke-linecap="round" stroke-miterlimit="10" d="M34.99 80.6H57.2v3.78H34.99z"/><path class="a09df3e6-557d-4798-8f48-dfe0c89cd997" d="M54.1 110.11a.49.49 0 00-.21-.34.48.48 0 00-.4-.07 1.43 1.43 0 01-1.66-.82 1.41 1.41 0 01.61-1.75.51.51 0 00.24-.33.49.49 0 00-.08-.39 8.39 8.39 0 00-1.6-1.64.52.52 0 00-.4-.09.5.5 0 00-.32.23 1.42 1.42 0 01-1.76.6 1.4 1.4 0 01-.8-1.67.55.55 0 00-.06-.4.49.49 0 00-.34-.22 8.13 8.13 0 00-2.31 0 .49.49 0 00-.34.22.47.47 0 00-.06.4 1.41 1.41 0 01-.83 1.66 1.44 1.44 0 01-1.75-.62.47.47 0 00-.71-.15 7.92 7.92 0 00-1.65 1.62.49.49 0 00-.08.39.46.46 0 00.23.33 1.4 1.4 0 01-1.08 2.56.48.48 0 00-.4.06.54.54 0 00-.22.34 8.06 8.06 0 000 2.3.49.49 0 00.21.34.48.48 0 00.4.07 1.44 1.44 0 011.66.82 1.41 1.41 0 01-.61 1.75.51.51 0 00-.24.33.49.49 0 00.08.39 8.39 8.39 0 001.62 1.64l.11.06a.48.48 0 00.29 0 .5.5 0 00.32-.23 1.4 1.4 0 012.56 1.07.51.51 0 00.06.4.49.49 0 00.34.22 8.13 8.13 0 002.31 0 .49.49 0 00.34-.22.47.47 0 00.06-.4 1.41 1.41 0 01.83-1.66 1.45 1.45 0 011.75.62.47.47 0 00.32.24.49.49 0 00.39-.09 7.64 7.64 0 001.64-1.62.45.45 0 00.09-.39.46.46 0 00-.23-.33 1.4 1.4 0 011.08-2.56.48.48 0 00.4-.06.53.53 0 00.22-.34 8.06 8.06 0 00-.02-2.27z" id="ffe8dadb-6616-4af9-9e02-dad8d66b9b4f" data-name="Tools"/><circle class="a09df3e6-557d-4798-8f48-dfe0c89cd997" cx="46.09" cy="111.21" r="2.26"/></g><g id="aca86b5a-d5bf-46cc-a425-e39ed953dc05" data-name="glass"><path d="M104.83 89.08H135v29.23a12 12 0 01-12 12h-6.24a12 12 0 01-12-12V89.08h.07z" stroke="#ee5b68" fill="#ffa18f" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10"/><path class="ad06fa33-8329-48c8-9c06-7495867de3e0" d="M104.54 99.81h30.75M104.54 96.33h30.75"/></g><path d="M23.1 99.29A69.46 69.46 0 01128 15.68" stroke-linejoin="round" stroke-dasharray="0 6.33" stroke-width="2" stroke="#fff8ec" stroke-linecap="round" fill="none" id="dotted-line"/><g id="a4fa809f-4fa7-46b5-a32b-1ddc8a03d7e4" data-name="leaf" stroke="#82cdb2" stroke-linecap="round" stroke-miterlimit="10"><path d="M127.42 120.74l-.95-5.92h0l5.92-.95a10.2 10.2 0 0111.7 8.45l.94 5.92h0l-5.92.96a10.2 10.2 0 01-11.69-8.46z" stroke-width="2" fill="#bfe6c7"/><path d="M144.46 127.57s-2.87-9-17.43-12.22c0 0 6.54 2.43 8.11 8.47" fill="none"/></g><g id="bottle-spark"><path class="b8f08e27-a486-4a77-bbaf-e4cb17159157" d="M139.62 15.39v3.29M139.62 25.59v3.29M146.36 22.13h-3.28M136.16 22.13h-3.28"/><path class="b8251118-ae09-494c-b64b-1dc1eb1dc86b" d="M154.6 30.53v2.01M154.6 36.78v2.01M158.73 34.66h-2.01M152.49 34.66h-2.01"/></g><g id="bb08f5ad-c9a9-4da3-b1b6-89600922760f" data-name="baseline"><path class="a24a14d7-0949-48c0-934d-84df5b2fab9c" d="M18.2 130.22h141.59M1.8 130.22h10"/></g></svg> <h1 class="c-h c-h-6">10h Video, Real-Life Examples, Checklists & Live Sessions.</h1> <div class="o-prose"> <p>With 100s of practical examples, guidelines, gotchas, checklists, <strong>takeaways & exercises</strong> — applicable to your project right away.</p> </div> </header> <div class="c-course-features u-wrap"> <figure> <a class="c-circle c-circle--small bowl-cta anim-cta" href="#newsletter-modal"> <h3>Get a taste!</h3> <p>Get 3 video lessons for free — in your inbox!</p> </a> <div class="c-course-features__image"> <svg id="SVGBowl" viewBox="0 0 835 585"> <mask id="dotmask"> <path fill="none" id="ray-mask" stroke="white" stroke-miterlimit="10" stroke-width="9" d="M266.25 143S347-15.11 537.17 4.79c194.59 21 237.52 190.84 241.46 210.51s28 124.88-47.71 229"/> </mask> <g class="color"> <g id="rice-cloud"> <g id="bubbles"> <circle cx="498.15" cy="210.03" r="3.34" fill="#bfe6c7"/> <circle cx="524.19" cy="214.7" r="3.34" fill="#bfe6c7"/> <circle cx="542.88" cy="270.76" r="3.34" fill="#bfe6c7"/> <circle cx="547.56" cy="246.74" r="3.34" fill="#bfe6c7"/> <circle cx="528.2" cy="234.3" r="1.58" fill="#bfe6c7"/> <circle cx="513.51" cy="195.77" r="1.58" fill="#bfe6c7"/> <circle cx="506.83" cy="230.47" r="1.58" fill="#bfe6c7"/> <circle cx="567.59" cy="269.85" r="1.58" fill="#bfe6c7"/> <circle cx="474.78" cy="228.72" r="1.58" fill="#bfe6c7"/> <g fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"> <path d="M484.41 241.83v12M490.41 247.83h-12"/> </g> <g fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"> <path d="M454.41 232.83v12M460.41 238.83h-12"/> </g> <g fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"> <path d="M464.41 260.83v12M470.41 266.83h-12"/> </g> </g> <path fill="none" stroke="#bfe6c7" stroke-miterlimit="10" stroke-width="2" d="M690.56 384.22a57.66 57.66 0 00-29.2-68.39 40.79 40.79 0 00-39.65-50.33h-.74a33.38 33.38 0 00-56-22.66 33.48 33.48 0 00-13.85-18.7v-1.25a40.78 40.78 0 00-80.52-9.16 40.8 40.8 0 00-58.78 33.91 33.4 33.4 0 00-20 27.81"/> </g> <g id="sparks" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"> <g> <line x1="242.65" y1="209.52" x2="242.65" y2="213.33" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="242.65" y1="221.34" x2="242.65" y2="225.15" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="250.46" y1="217.33" x2="246.66" y2="217.33" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="238.64" y1="217.33" x2="234.84" y2="217.33" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> </g> <g> <line x1="133.08" y1="142.2" x2="133.08" y2="147.83" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="133.08" y1="159.66" x2="133.08" y2="165.29" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="144.62" y1="153.75" x2="139" y2="153.75" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="127.16" y1="153.75" x2="121.53" y2="153.75" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> </g> <g> <line x1="156.6" y1="238.56" x2="156.6" y2="244.19" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="156.6" y1="256.02" x2="156.6" y2="261.65" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="168.15" y1="250.1" x2="162.52" y2="250.1" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="150.68" y1="250.1" x2="145.06" y2="250.1" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> </g> <g> <line x1="682.1" y1="105.89" x2="682.1" y2="111.51" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="682.1" y1="123.35" x2="682.1" y2="128.97" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="693.64" y1="117.43" x2="688.02" y2="117.43" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="676.18" y1="117.43" x2="670.55" y2="117.43" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> </g> <g> <line x1="625.85" y1="127.13" x2="625.85" y2="130.42" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="625.85" y1="137.35" x2="625.85" y2="140.64" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="632.6" y1="133.89" x2="629.31" y2="133.89" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="622.38" y1="133.89" x2="619.09" y2="133.89" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> </g> <g> <line x1="666.82" y1="171.39" x2="666.82" y2="174.68" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="666.82" y1="181.6" x2="666.82" y2="184.89" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="673.58" y1="178.14" x2="670.29" y2="178.14" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="663.36" y1="178.14" x2="660.07" y2="178.14" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> </g> <g> <line x1="743.84" y1="224.32" x2="743.84" y2="229.95" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="743.84" y1="241.78" x2="743.84" y2="247.41" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="755.38" y1="235.86" x2="749.76" y2="235.86" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="737.92" y1="235.86" x2="732.29" y2="235.86" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> </g> <g> <line x1="752.48" y1="283.59" x2="752.48" y2="286.88" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="752.48" y1="293.8" x2="752.48" y2="297.09" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="759.23" y1="290.34" x2="755.94" y2="290.34" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="749.02" y1="290.34" x2="745.73" y2="290.34" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> </g> <g> <line x1="700.22" y1="273.75" x2="700.22" y2="277.04" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="700.22" y1="283.96" x2="700.22" y2="287.25" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="706.97" y1="280.5" x2="703.68" y2="280.5" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="696.76" y1="280.5" x2="693.47" y2="280.5" fill="none" stroke="#ffe895" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> </g> </g> <g id="brush-pencil"> <g id="pencil" stroke="#ff6855" stroke-miterlimit="10" stroke-width="2"> <path fill="#f2b29c" stroke-linecap="round" d="M704 218.15l-127.19 201a8.61 8.61 0 01-14.56-9.21l127.1-200.84 20.12-15.69z"/> <path fill="none" d="M695.61 215.25c1.32-2.09 3.18-1.91 5.27-.59a4.47 4.47 0 011.39 6.17"/> <path fill="none" d="M695.61 215.25c1.32-2.09.36-3.69-1.73-5a4.48 4.48 0 00-6.17 1.38"/> <path fill="#0d242f" d="M582.95 409.51l-14.5-9.49"/> <path fill="#ff6855" d="M575.83 404.7l119.78-189.45"/> </g> <g id="brush" stroke="#548f9c"> <path fill="#82cdb2" stroke-miterlimit="10" stroke-width="2" d="M611.08010865 227.79123424l9.2707502 2.7848861h0L565.05590957 414.6503135a4.84 4.84 0 01-6.02781815 3.24293205h0a4.84 4.84 0 01-3.24293205-6.02781815l55.2949493-184.07419315h0z"/> <path fill="#bfe6c7" stroke-miterlimit="10" stroke-width="2" d="M634.09 168.17s-37.46 31.17-24.55 59.35h0l12.31 3.69h0c26.3-16.39 12.24-63.04 12.24-63.04z"/> <path fill="none" stroke-linecap="round" stroke-linejoin="round" d="M635.16 213.8l-17.64 9.48-9.49-17.63"/> <path fill="none" stroke-linecap="round" stroke-linejoin="round" d="M637.91 203.33l-17.02 8.77-8.98-16.77"/> <path fill="none" stroke-linecap="round" stroke-linejoin="round" d="M637.75 193.12l-14.14 7.6-6.71-12.47"/> </g> </g> <g class="fishcake"> <g id="Tools"> <path fill="#ffca6c" d="M718.33 357.45a4 4 0 00-5-3.12 11.27 11.27 0 01-9.12-20.44 4 4 0 001-5.82 64.46 64.46 0 00-13.5-12.79 3.94 3.94 0 00-5.76 1.36 11.36 11.36 0 01-14 5.25 11.59 11.59 0 01-6.95-13.25 4 4 0 00-.6-3.2 3.92 3.92 0 00-2.78-1.66 64.7 64.7 0 00-18.59.5 4 4 0 00-3.11 5 11.28 11.28 0 01-20.45 9.12 4 4 0 00-5.83-1 64.47 64.47 0 00-12.79 13.49 4 4 0 00-.62 3.18 4 4 0 002 2.58 11.6 11.6 0 015.25 14 11.34 11.34 0 01-13.25 6.91 4 4 0 00-3.2.6 4 4 0 00-1.67 2.78 65 65 0 00.51 18.58 3.78 3.78 0 00.28.94 4 4 0 004.76 2.18 11.27 11.27 0 019.12 20.43 4 4 0 00-1 5.83 65 65 0 0013.5 12.78 3.95 3.95 0 005.76-1.36 11.35 11.35 0 0114-5.24 11.59 11.59 0 016.91 13.25 3.95 3.95 0 003.38 4.85 64.71 64.71 0 0018.59-.5 3.92 3.92 0 002.69-1.81 4 4 0 00.43-3.22 11.27 11.27 0 0120.44-9.12 4 4 0 005.83 1 64.44 64.44 0 0012.79-13.49 3.95 3.95 0 00-1.35-5.74 11.58 11.58 0 01-5.25-14 11.35 11.35 0 0113.25-6.9 3.94 3.94 0 004.86-3.38 64.6 64.6 0 00-.53-18.57z"/> <path fill="none" stroke="#c29c87" stroke-miterlimit="10" stroke-width="2" d="M718.33 357.45a4 4 0 00-5-3.12 11.27 11.27 0 01-9.12-20.44 4 4 0 001-5.82 64.46 64.46 0 00-13.5-12.79 3.94 3.94 0 00-5.76 1.36 11.36 11.36 0 01-14 5.25 11.59 11.59 0 01-6.95-13.25 4 4 0 00-.6-3.2 3.92 3.92 0 00-2.78-1.66 64.7 64.7 0 00-18.59.5 4 4 0 00-3.11 5 11.28 11.28 0 01-20.45 9.12 4 4 0 00-5.83-1 64.47 64.47 0 00-12.79 13.49 4 4 0 00-.62 3.18 4 4 0 002 2.58 11.6 11.6 0 015.25 14 11.34 11.34 0 01-13.25 6.91 4 4 0 00-3.2.6 4 4 0 00-1.67 2.78 65 65 0 00.51 18.58 3.78 3.78 0 00.28.94 4 4 0 004.76 2.18 11.27 11.27 0 019.12 20.43 4 4 0 00-1 5.83 65 65 0 0013.5 12.78 3.95 3.95 0 005.76-1.36 11.35 11.35 0 0114-5.24 11.59 11.59 0 016.91 13.25 3.95 3.95 0 003.38 4.85 64.71 64.71 0 0018.59-.5 3.92 3.92 0 002.69-1.81 4 4 0 00.43-3.22 11.27 11.27 0 0120.44-9.12 4 4 0 005.83 1 64.44 64.44 0 0012.79-13.49 3.95 3.95 0 00-1.35-5.74 11.58 11.58 0 01-5.25-14 11.35 11.35 0 0113.25-6.9 3.94 3.94 0 004.86-3.38 64.6 64.6 0 00-.53-18.57z"/> </g> <path fill="none" stroke="#c29c87" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M666.37 361c-9.06-6.54-22.39.41-21.72 12 .43 7.34 8.26 12.38 14.75 14.55 18.59 6.2 32.1-10.16 30.16-25-3.56-27.14-30.74-33.07-51.19-24.47-17.72 7.46-29.79 31.77-12 54.28 8.8 11.15 28.14 18.18 41.17 10.12"/> </g> <g class="item fishcake" id="fishcake"> <g id="Tools"> <path fill="#0d242f" d="M718.33 357.45a4 4 0 00-5-3.12 11.27 11.27 0 01-9.12-20.44 4 4 0 001-5.82 64.46 64.46 0 00-13.5-12.79 3.94 3.94 0 00-5.76 1.36 11.36 11.36 0 01-14 5.25 11.59 11.59 0 01-6.95-13.25 4 4 0 00-.6-3.2 3.92 3.92 0 00-2.78-1.66 64.7 64.7 0 00-18.59.5 4 4 0 00-3.11 5 11.28 11.28 0 01-20.45 9.12 4 4 0 00-5.83-1 64.47 64.47 0 00-12.79 13.49 4 4 0 00-.62 3.18 4 4 0 002 2.58 11.6 11.6 0 015.25 14 11.34 11.34 0 01-13.25 6.91 4 4 0 00-3.2.6 4 4 0 00-1.67 2.78 65 65 0 00.51 18.58 3.78 3.78 0 00.28.94 4 4 0 004.76 2.18 11.27 11.27 0 019.12 20.43 4 4 0 00-1 5.83 65 65 0 0013.5 12.78 3.95 3.95 0 005.76-1.36 11.35 11.35 0 0114-5.24 11.59 11.59 0 016.91 13.25 3.95 3.95 0 003.38 4.85 64.71 64.71 0 0018.59-.5 3.92 3.92 0 002.69-1.81 4 4 0 00.43-3.22 11.27 11.27 0 0120.44-9.12 4 4 0 005.83 1 64.44 64.44 0 0012.79-13.49 3.95 3.95 0 00-1.35-5.74 11.58 11.58 0 01-5.25-14 11.35 11.35 0 0113.25-6.9 3.94 3.94 0 004.86-3.38 64.6 64.6 0 00-.53-18.57z"/> <path fill="none" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M718.33 357.45a4 4 0 00-5-3.12 11.27 11.27 0 01-9.12-20.44 4 4 0 001-5.82 64.46 64.46 0 00-13.5-12.79 3.94 3.94 0 00-5.76 1.36 11.36 11.36 0 01-14 5.25 11.59 11.59 0 01-6.95-13.25 4 4 0 00-.6-3.2 3.92 3.92 0 00-2.78-1.66 64.7 64.7 0 00-18.59.5 4 4 0 00-3.11 5 11.28 11.28 0 01-20.45 9.12 4 4 0 00-5.83-1 64.47 64.47 0 00-12.79 13.49 4 4 0 00-.62 3.18 4 4 0 002 2.58 11.6 11.6 0 015.25 14 11.34 11.34 0 01-13.25 6.91 4 4 0 00-3.2.6 4 4 0 00-1.67 2.78 65 65 0 00.51 18.58 3.78 3.78 0 00.28.94 4 4 0 004.76 2.18 11.27 11.27 0 019.12 20.43 4 4 0 00-1 5.83 65 65 0 0013.5 12.78 3.95 3.95 0 005.76-1.36 11.35 11.35 0 0114-5.24 11.59 11.59 0 016.91 13.25 3.95 3.95 0 003.38 4.85 64.71 64.71 0 0018.59-.5 3.92 3.92 0 002.69-1.81 4 4 0 00.43-3.22 11.27 11.27 0 0120.44-9.12 4 4 0 005.83 1 64.44 64.44 0 0012.79-13.49 3.95 3.95 0 00-1.35-5.74 11.58 11.58 0 01-5.25-14 11.35 11.35 0 0113.25-6.9 3.94 3.94 0 004.86-3.38 64.6 64.6 0 00-.53-18.57z"/> </g> <path fill="#0d242f" stroke="#FFF8EC" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M666.37 361c-9.06-6.54-22.39.41-21.72 12 .43 7.34 8.26 12.38 14.75 14.55 18.59 6.2 32.1-10.16 30.16-25-3.56-27.14-30.74-33.07-51.19-24.47-17.72 7.46-29.79 31.77-12 54.28 8.8 11.15 28.14 18.18 41.17 10.12"/> </g> <g id="basil-leaves" stroke="#82cdb2" stroke-linecap="round" stroke-linejoin="round"> <path fill="#bfe6c7" stroke-width="2" d="M609.67854111 352.62271234l22.72984733-.08330961h0l.08323631 22.70984746a38.84 38.84 0 01-38.6973834 38.98209484l-22.7198474.08327296h0l-.0832363-22.70984746a38.84 38.84 0 0138.68738346-38.98205819z"/> <path fill="none" d="M631.85 353.4s-10.24 43.94-61.13 61.14c0 0 22.35-20.72 25.84-44.68"/> <g> <path fill="#bfe6c7" stroke-width="2.0057" d="M529.0405 380.8674l6.032-19.968h0l19.9872 6.0378a35.67123045 35.67123045 0 0123.8319 44.4625l-6.032 19.968h0l-19.9872-6.0378a35.67123045 35.67123045 0 01-23.8319-44.4625z"/> <path fill="none" d="M536.39 367.64s35.35 18.52 36.52 67.69c0 0-11.46-24.57-31.47-34.16"/> </g> </g> <g class="ravioli"> <g id="Stamp"> <path fill="#ffe895" d="M467.85 373.88l-2.53-9.37c-1.51-5.6-6.53-7.21-9.53-8.18-1.7-.55-3-1-3.14-1.48s.78-1.51 2-2.84c2.11-2.34 5.63-6.27 4.12-11.86s-6.37-7.15-9.56-8.15c-1.7-.54-3-1-3.14-1.46s.78-1.53 2-2.86c2.24-2.5 5.63-6.27 4.12-11.85s-6.34-7.15-9.53-8.19c-1.7-.54-3-1-3.14-1.47s.78-1.51 2-2.85c2.23-2.5 5.62-6.27 4.11-11.85s-6.33-7.15-9.53-8.18c-1.7-.55-3-1-3.14-1.48s.78-1.52 2-2.85c2.23-2.5 5.62-6.27 4.11-11.86s-6.33-7.14-9.53-8.18c-1.7-.54-3-1-3.14-1.47s.78-1.52 2-2.85c2.24-2.5 5.62-6.28 4.11-11.86l-2.53-9.37a4.85 4.85 0 00-5.95-3.42l-9.38 2.53c-5.59 1.51-7.15 6.33-8.18 9.52-.55 1.7-1 3-1.47 3.14s-1.53-.77-2.85-2c-2.35-2.11-6.27-5.63-11.87-4.12s-7.15 6.33-8.18 9.52c-.55 1.7-1 3-1.48 3.14s-1.52-.78-2.85-2c-2.5-2.24-6.27-5.62-11.86-4.12s-7.15 6.34-8.18 9.52c-.55 1.7-1 3-1.48 3.14s-1.52-.78-2.85-2c-2.5-2.23-6.28-5.62-11.86-4.11s-7.16 6.33-8.19 9.53c-.55 1.7-1 3-1.47 3.13s-1.52-.78-2.85-2c-2.51-2.24-6.28-5.62-11.87-4.11s-7.14 6.32-8.18 9.51c-.55 1.71-1 3-1.47 3.15s-1.52-.78-2.86-2c-2.5-2.24-6.27-5.62-11.86-4.12l-9.37 2.53a4.85 4.85 0 00-3.42 5.95l2.53 9.37c1.51 5.6 6.53 7.21 9.52 8.18 1.7.54 3 1 3.14 1.47s-.77 1.53-2 2.85c-2.1 2.35-5.62 6.27-4.11 11.87s6.33 7.15 9.53 8.18c1.69.54 3 1 3.13 1.46s-.78 1.53-2 2.86c-2.24 2.5-5.62 6.27-4.11 11.86s6.33 7.14 9.52 8.17c1.7.55 3 1 3.14 1.48s-.78 1.52-2 2.85c-2.24 2.5-5.62 6.27-4.11 11.86s6.33 7.14 9.52 8.17c1.7.56 3 1 3.14 1.48s-.78 1.52-2 2.85c-2.24 2.5-5.62 6.27-4.12 11.86s6.34 7.14 9.53 8.18c1.7.55 3 1 3.14 1.47s-.78 1.52-2 2.86c-2.24 2.49-5.62 6.27-4.12 11.85l2.53 9.37a4.87 4.87 0 006 3.42l9.37-2.53c5.6-1.51 7.22-6.53 8.18-9.52.55-1.7 1-3 1.48-3.14s1.52.78 2.85 2c2.34 2.1 6.26 5.62 11.86 4.11s7.15-6.33 8.19-9.52c.55-1.7 1-3 1.47-3.13s1.52.77 2.86 2c2.49 2.23 6.27 5.61 11.86 4.11s7.15-6.34 8.18-9.52c.55-1.7 1-3 1.47-3.14s1.52.78 2.86 2c2.49 2.23 6.27 5.62 11.86 4.11s7.15-6.33 8.18-9.52c.55-1.7 1-3 1.47-3.14s1.53.78 2.86 2c2.5 2.23 6.27 5.61 11.86 4.1s7.15-6.33 8.18-9.51c.55-1.71 1-3 1.48-3.14s1.52.77 2.86 2c2.49 2.23 6.27 5.61 11.85 4.11l9.38-2.53a4.86 4.86 0 003.44-5.97z"/> <path fill="none" stroke="#f4cd7f" stroke-miterlimit="10" stroke-width="2" d="M467.85 373.88l-2.53-9.37c-1.51-5.6-6.53-7.21-9.53-8.18-1.7-.55-3-1-3.14-1.48s.78-1.51 2-2.84c2.11-2.34 5.63-6.27 4.12-11.86s-6.37-7.15-9.56-8.15c-1.7-.54-3-1-3.14-1.46s.78-1.53 2-2.86c2.24-2.5 5.63-6.27 4.12-11.85s-6.34-7.15-9.53-8.19c-1.7-.54-3-1-3.14-1.47s.78-1.51 2-2.85c2.23-2.5 5.62-6.27 4.11-11.85s-6.33-7.15-9.53-8.18c-1.7-.55-3-1-3.14-1.48s.78-1.52 2-2.85c2.23-2.5 5.62-6.27 4.11-11.86s-6.33-7.14-9.53-8.18c-1.7-.54-3-1-3.14-1.47s.78-1.52 2-2.85c2.24-2.5 5.62-6.28 4.11-11.86l-2.53-9.37a4.85 4.85 0 00-5.95-3.42l-9.38 2.53c-5.59 1.51-7.15 6.33-8.18 9.52-.55 1.7-1 3-1.47 3.14s-1.53-.77-2.85-2c-2.35-2.11-6.27-5.63-11.87-4.12s-7.15 6.33-8.18 9.52c-.55 1.7-1 3-1.48 3.14s-1.52-.78-2.85-2c-2.5-2.24-6.27-5.62-11.86-4.12s-7.15 6.34-8.18 9.52c-.55 1.7-1 3-1.48 3.14s-1.52-.78-2.85-2c-2.5-2.23-6.28-5.62-11.86-4.11s-7.16 6.33-8.19 9.53c-.55 1.7-1 3-1.47 3.13s-1.52-.78-2.85-2c-2.51-2.24-6.28-5.62-11.87-4.11s-7.14 6.32-8.18 9.51c-.55 1.71-1 3-1.47 3.15s-1.52-.78-2.86-2c-2.5-2.24-6.27-5.62-11.86-4.12l-9.37 2.53a4.85 4.85 0 00-3.42 5.95l2.53 9.37c1.51 5.6 6.53 7.21 9.52 8.18 1.7.54 3 1 3.14 1.47s-.77 1.53-2 2.85c-2.1 2.35-5.62 6.27-4.11 11.87s6.33 7.15 9.53 8.18c1.69.54 3 1 3.13 1.46s-.78 1.53-2 2.86c-2.24 2.5-5.62 6.27-4.11 11.86s6.33 7.14 9.52 8.17c1.7.55 3 1 3.14 1.48s-.78 1.52-2 2.85c-2.24 2.5-5.62 6.27-4.11 11.86s6.33 7.14 9.52 8.17c1.7.56 3 1 3.14 1.48s-.78 1.52-2 2.85c-2.24 2.5-5.62 6.27-4.12 11.86s6.34 7.14 9.53 8.18c1.7.55 3 1 3.14 1.47s-.78 1.52-2 2.86c-2.24 2.49-5.62 6.27-4.12 11.85l2.53 9.37a4.87 4.87 0 006 3.42l9.37-2.53c5.6-1.51 7.22-6.53 8.18-9.52.55-1.7 1-3 1.48-3.14s1.52.78 2.85 2c2.34 2.1 6.26 5.62 11.86 4.11s7.15-6.33 8.19-9.52c.55-1.7 1-3 1.47-3.13s1.52.77 2.86 2c2.49 2.23 6.27 5.61 11.86 4.11s7.15-6.34 8.18-9.52c.55-1.7 1-3 1.47-3.14s1.52.78 2.86 2c2.49 2.23 6.27 5.62 11.86 4.11s7.15-6.33 8.18-9.52c.55-1.7 1-3 1.47-3.14s1.53.78 2.86 2c2.5 2.23 6.27 5.61 11.86 4.1s7.15-6.33 8.18-9.51c.55-1.71 1-3 1.48-3.14s1.52.77 2.86 2c2.49 2.23 6.27 5.61 11.85 4.11l9.38-2.53a4.86 4.86 0 003.44-5.97z"/> </g> <rect width="110.97" height="110.93" x="318.39" y="268.38" fill="#ffe895" stroke="#f4cd7f" stroke-miterlimit="10" stroke-width="2" rx="15.51" transform="rotate(-15.1 373.91871222 323.87320219)"/> <path fill="none" stroke="#f4cd7f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M395.07 290.6a16.19 16.19 0 00-8.79 5.73 7.36 7.36 0 01-8.87 2.39 17 17 0 00-19.27 5.2 7.3 7.3 0 01-8.85 2.38 16.26 16.26 0 00-10.46-.53M398.74 306.28A16.29 16.29 0 00390 312a6.78 6.78 0 01-4 2.75c-2.09.57-3 .26-4.85-.36a17 17 0 00-19.27 5.2A7.31 7.31 0 01353 322a16.3 16.3 0 00-10.47-.53M403 321a16.29 16.29 0 00-8.79 5.73 6.78 6.78 0 01-4 2.75c-2.09.57-3 .26-4.85-.36a17 17 0 00-19.27 5.2 7.31 7.31 0 01-8.84 2.39 16.3 16.3 0 00-10.47-.53"/> </g> <g class="item ravioli" id="ravioli"> <g> <path fill="#0d242f" d="M467.85 373.88l-2.53-9.37c-1.51-5.6-6.53-7.21-9.53-8.18-1.7-.55-3-1-3.14-1.48s.78-1.51 2-2.84c2.11-2.34 5.63-6.27 4.12-11.86s-6.37-7.15-9.56-8.15c-1.7-.54-3-1-3.14-1.46s.78-1.53 2-2.86c2.24-2.5 5.63-6.27 4.12-11.85s-6.34-7.15-9.53-8.19c-1.7-.54-3-1-3.14-1.47s.78-1.51 2-2.85c2.23-2.5 5.62-6.27 4.11-11.85s-6.33-7.15-9.53-8.18c-1.7-.55-3-1-3.14-1.48s.78-1.52 2-2.85c2.23-2.5 5.62-6.27 4.11-11.86s-6.33-7.14-9.53-8.18c-1.7-.54-3-1-3.14-1.47s.78-1.52 2-2.85c2.24-2.5 5.62-6.28 4.11-11.86l-2.53-9.37a4.85 4.85 0 00-5.95-3.42l-9.38 2.53c-5.59 1.51-7.15 6.33-8.18 9.52-.55 1.7-1 3-1.47 3.14s-1.53-.77-2.85-2c-2.35-2.11-6.27-5.63-11.87-4.12s-7.15 6.33-8.18 9.52c-.55 1.7-1 3-1.48 3.14s-1.52-.78-2.85-2c-2.5-2.24-6.27-5.62-11.86-4.12s-7.15 6.34-8.18 9.52c-.55 1.7-1 3-1.48 3.14s-1.52-.78-2.85-2c-2.5-2.23-6.28-5.62-11.86-4.11s-7.16 6.33-8.19 9.53c-.55 1.7-1 3-1.47 3.13s-1.52-.78-2.85-2c-2.51-2.24-6.28-5.62-11.87-4.11s-7.14 6.32-8.18 9.51c-.55 1.71-1 3-1.47 3.15s-1.52-.78-2.86-2c-2.5-2.24-6.27-5.62-11.86-4.12l-9.37 2.53a4.85 4.85 0 00-3.42 5.95l2.53 9.37c1.51 5.6 6.53 7.21 9.52 8.18 1.7.54 3 1 3.14 1.47s-.77 1.53-2 2.85c-2.1 2.35-5.62 6.27-4.11 11.87s6.33 7.15 9.53 8.18c1.69.54 3 1 3.13 1.46s-.78 1.53-2 2.86c-2.24 2.5-5.62 6.27-4.11 11.86s6.33 7.14 9.52 8.17c1.7.55 3 1 3.14 1.48s-.78 1.52-2 2.85c-2.24 2.5-5.62 6.27-4.11 11.86s6.33 7.14 9.52 8.17c1.7.56 3 1 3.14 1.48s-.78 1.52-2 2.85c-2.24 2.5-5.62 6.27-4.12 11.86s6.34 7.14 9.53 8.18c1.7.55 3 1 3.14 1.47s-.78 1.52-2 2.86c-2.24 2.49-5.62 6.27-4.12 11.85l2.53 9.37a4.87 4.87 0 006 3.42l9.37-2.53c5.6-1.51 7.22-6.53 8.18-9.52.55-1.7 1-3 1.48-3.14s1.52.78 2.85 2c2.34 2.1 6.26 5.62 11.86 4.11s7.15-6.33 8.19-9.52c.55-1.7 1-3 1.47-3.13s1.52.77 2.86 2c2.49 2.23 6.27 5.61 11.86 4.11s7.15-6.34 8.18-9.52c.55-1.7 1-3 1.47-3.14s1.52.78 2.86 2c2.49 2.23 6.27 5.62 11.86 4.11s7.15-6.33 8.18-9.52c.55-1.7 1-3 1.47-3.14s1.53.78 2.86 2c2.5 2.23 6.27 5.61 11.86 4.1s7.15-6.33 8.18-9.51c.55-1.71 1-3 1.48-3.14s1.52.77 2.86 2c2.49 2.23 6.27 5.61 11.85 4.11l9.38-2.53a4.86 4.86 0 003.44-5.97z"/> <path fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M467.85 373.88l-2.53-9.37c-1.51-5.6-6.53-7.21-9.53-8.18-1.7-.55-3-1-3.14-1.48s.78-1.51 2-2.84c2.11-2.34 5.63-6.27 4.12-11.86s-6.37-7.15-9.56-8.15c-1.7-.54-3-1-3.14-1.46s.78-1.53 2-2.86c2.24-2.5 5.63-6.27 4.12-11.85s-6.34-7.15-9.53-8.19c-1.7-.54-3-1-3.14-1.47s.78-1.51 2-2.85c2.23-2.5 5.62-6.27 4.11-11.85s-6.33-7.15-9.53-8.18c-1.7-.55-3-1-3.14-1.48s.78-1.52 2-2.85c2.23-2.5 5.62-6.27 4.11-11.86s-6.33-7.14-9.53-8.18c-1.7-.54-3-1-3.14-1.47s.78-1.52 2-2.85c2.24-2.5 5.62-6.28 4.11-11.86l-2.53-9.37a4.85 4.85 0 00-5.95-3.42l-9.38 2.53c-5.59 1.51-7.15 6.33-8.18 9.52-.55 1.7-1 3-1.47 3.14s-1.53-.77-2.85-2c-2.35-2.11-6.27-5.63-11.87-4.12s-7.15 6.33-8.18 9.52c-.55 1.7-1 3-1.48 3.14s-1.52-.78-2.85-2c-2.5-2.24-6.27-5.62-11.86-4.12s-7.15 6.34-8.18 9.52c-.55 1.7-1 3-1.48 3.14s-1.52-.78-2.85-2c-2.5-2.23-6.28-5.62-11.86-4.11s-7.16 6.33-8.19 9.53c-.55 1.7-1 3-1.47 3.13s-1.52-.78-2.85-2c-2.51-2.24-6.28-5.62-11.87-4.11s-7.14 6.32-8.18 9.51c-.55 1.71-1 3-1.47 3.15s-1.52-.78-2.86-2c-2.5-2.24-6.27-5.62-11.86-4.12l-9.37 2.53a4.85 4.85 0 00-3.42 5.95l2.53 9.37c1.51 5.6 6.53 7.21 9.52 8.18 1.7.54 3 1 3.14 1.47s-.77 1.53-2 2.85c-2.1 2.35-5.62 6.27-4.11 11.87s6.33 7.15 9.53 8.18c1.69.54 3 1 3.13 1.46s-.78 1.53-2 2.86c-2.24 2.5-5.62 6.27-4.11 11.86s6.33 7.14 9.52 8.17c1.7.55 3 1 3.14 1.48s-.78 1.52-2 2.85c-2.24 2.5-5.62 6.27-4.11 11.86s6.33 7.14 9.52 8.17c1.7.56 3 1 3.14 1.48s-.78 1.52-2 2.85c-2.24 2.5-5.62 6.27-4.12 11.86s6.34 7.14 9.53 8.18c1.7.55 3 1 3.14 1.47s-.78 1.52-2 2.86c-2.24 2.49-5.62 6.27-4.12 11.85l2.53 9.37a4.87 4.87 0 006 3.42l9.37-2.53c5.6-1.51 7.22-6.53 8.18-9.52.55-1.7 1-3 1.48-3.14s1.52.78 2.85 2c2.34 2.1 6.26 5.62 11.86 4.11s7.15-6.33 8.19-9.52c.55-1.7 1-3 1.47-3.13s1.52.77 2.86 2c2.49 2.23 6.27 5.61 11.86 4.11s7.15-6.34 8.18-9.52c.55-1.7 1-3 1.47-3.14s1.52.78 2.86 2c2.49 2.23 6.27 5.62 11.86 4.11s7.15-6.33 8.18-9.52c.55-1.7 1-3 1.47-3.14s1.53.78 2.86 2c2.5 2.23 6.27 5.61 11.86 4.1s7.15-6.33 8.18-9.51c.55-1.71 1-3 1.48-3.14s1.52.77 2.86 2c2.49 2.23 6.27 5.61 11.85 4.11l9.38-2.53a4.86 4.86 0 003.44-5.97z"/> </g> <rect width="110.97" height="110.93" x="318.39" y="268.38" fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" rx="15.51" transform="rotate(-15.1 373.91871222 323.87320219)"/> <path fill="#0d242f" stroke="#FFF8EC" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M395.07 290.6a16.19 16.19 0 00-8.79 5.73 7.36 7.36 0 01-8.87 2.39 17 17 0 00-19.27 5.2 7.3 7.3 0 01-8.85 2.38 16.26 16.26 0 00-10.46-.53M398.74 306.28A16.29 16.29 0 00390 312a6.78 6.78 0 01-4 2.75c-2.09.57-3 .26-4.85-.36a17 17 0 00-19.27 5.2A7.31 7.31 0 01353 322a16.3 16.3 0 00-10.47-.53M403 321a16.29 16.29 0 00-8.79 5.73 6.78 6.78 0 01-4 2.75c-2.09.57-3 .26-4.85-.36a17 17 0 00-19.27 5.2 7.31 7.31 0 01-8.84 2.39 16.3 16.3 0 00-10.47-.53"/> </g> <g class="beetroot" stroke="#fff8ec" stroke-width="2"> <ellipse cx="483.3" cy="383.44" fill="#9683ba" stroke-miterlimit="10" rx="63.71" ry="63.68"/> <ellipse cx="483.3" cy="383.44" fill="none" stroke-linecap="round" stroke-linejoin="round" rx="27.42" ry="27.41"/> <ellipse cx="483.3" cy="383.44" fill="none" stroke-dasharray="0 5.04" stroke-linecap="round" stroke-linejoin="round" rx="36.88" ry="36.86"/> <path fill="none" stroke-linecap="round" stroke-linejoin="round" d="M477.41 372.09v22.7l16.69-11.35-16.69-11.35z"/> </g> <g class="item beetroot" id="beetroot" stroke="#FFF8EC" stroke-width="2"> <ellipse cx="483.3" cy="383.44" fill="#0d242f" stroke-miterlimit="10" rx="63.71" ry="63.68"/> <ellipse cx="483.3" cy="383.44" fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" rx="27.42" ry="27.41"/> <ellipse cx="483.3" cy="383.44" fill="#0d242f" stroke-dasharray="0 5.04" stroke-linecap="round" stroke-linejoin="round" rx="36.88" ry="36.86"/> <path fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" d="M477.41 372.09v22.7l16.69-11.35-16.69-11.35z"/> </g> <g stroke="#548f9c" class="leaf" stroke-linecap="round"> <path fill="#92cac4" stroke-linejoin="round" stroke-width="2" d="M304.28 345.77s10.11-35.09 26.85-12.92c11 14.61 11.94 36 14.88 28.28 10.14-26.7 36.42-20.81 35.91 1.79s-9.41 39.1-4.71 38.29c0 0 8.34-23.68 24.27-19.2 11.37 3.19 15.58 12.41 5.82 39.57s-8.61 36.91 1.15 48.76c-9.76-11.85-20.94-13.35-49.48-9s-36.78-1.52-37.73-13.29c-1.35-16.49 30.06-20.16 30.06-20.16 1.69-4.45-22.77 1.15-45.06-2.68s-23-30.75 5.12-35.58c8.17-1.4-12.68-6.39-24.91-20-18.56-20.63 17.83-23.86 17.83-23.86z"/> <path fill="none" stroke-miterlimit="10" d="M314.33 357.62c22.66 14.72 60.49 46.5 91.08 108.21"/> <path fill="#92cac4" stroke-linejoin="round" stroke-width="2" d="M420.36 353.75s27.74-6.63 19.11 13.26c-5.69 13.12-19.89 22-13.49 21 22-3.39 28.15 16.73 12.59 25.07s-30.19 8.65-27.84 11.53c0 0 19.3-3.45 22.39 9.09 2.2 8.95-2.44 15.36-24.65 19.17s-28.4 8.36-32.7 19.54c4.3-11.18 1-19.35-12.93-37s-13.11-25.56-5.48-30.74c6.42-4.35 14.23 1.08 19.46 6.12a1.59 1.59 0 002.46-2c-3.65-5.86-8.95-14.16-12.16-23.09-6-16.61 12-27.47 26.14-10.21 4.1 5-.53-11.07 4-24.62 6.94-20.6 23.1 2.88 23.1 2.88z"/> <path fill="none" stroke-miterlimit="10" d="M416.18 365.13c-1.29 21.05-9.6 61.19-39.77 105.7"/> </g> <g class="item leaf" id="leaf" stroke="#FFF8EC" stroke-linecap="round"> <path fill="#0d242f" stroke-linejoin="round" stroke-width="2" d="M304.28 345.77s10.11-35.09 26.85-12.92c11 14.61 11.94 36 14.88 28.28 10.14-26.7 36.42-20.81 35.91 1.79s-9.41 39.1-4.71 38.29c0 0 8.34-23.68 24.27-19.2 11.37 3.19 15.58 12.41 5.82 39.57s-8.61 36.91 1.15 48.76c-9.76-11.85-20.94-13.35-49.48-9s-36.78-1.52-37.73-13.29c-1.35-16.49 30.06-20.16 30.06-20.16 1.69-4.45-22.77 1.15-45.06-2.68s-23-30.75 5.12-35.58c8.17-1.4-12.68-6.39-24.91-20-18.56-20.63 17.83-23.86 17.83-23.86z"/> <path fill="#0d242f" stroke-miterlimit="10" d="M314.33 357.62c22.66 14.72 60.49 46.5 91.08 108.21"/> <path fill="#0d242f" stroke-linejoin="round" stroke-width="2" d="M420.36 353.75s27.74-6.63 19.11 13.26c-5.69 13.12-19.89 22-13.49 21 22-3.39 28.15 16.73 12.59 25.07s-30.19 8.65-27.84 11.53c0 0 19.3-3.45 22.39 9.09 2.2 8.95-2.44 15.36-24.65 19.17s-28.4 8.36-32.7 19.54c4.3-11.18 1-19.35-12.93-37s-13.11-25.56-5.48-30.74c6.42-4.35 14.23 1.08 19.46 6.12a1.59 1.59 0 002.46-2c-3.65-5.86-8.95-14.16-12.16-23.09-6-16.61 12-27.47 26.14-10.21 4.1 5-.53-11.07 4-24.62 6.94-20.6 23.1 2.88 23.1 2.88z"/> <path fill="#0d242f" stroke-miterlimit="10" d="M416.18 365.13c-1.29 21.05-9.6 61.19-39.77 105.7"/> </g> <g id="right-leaf"> <path fill="#92cac4" stroke-linejoin="round" stroke-width="2" stroke="#548f9c" d="M777.49 571.2C780.65 561.19 764 557 764 557c-.78-2.92 10.16 1.75 24.47.77s16.52-17.93-.94-22.8c-5.07-1.41 8.41-3.22 17-11 13-11.85-9.72-16.22-9.72-16.22s-4.12-22.81-16.1-9.89c-7.91 8.52-9.86 22-11.22 16.91-4.68-17.52-21.64-15.49-22.77-1.19s3.82 29.44.91 28.63c0 0-4.14-19.63-14.48-17.83-7.38 1.28-10.63 6.83-6.22 24.61s4.11 24.94-2.82 31.79c-.04-.07 49.99 7.48 55.38-9.58z"/> <path fill="none" stroke="#548f9c" stroke-miterlimit="10" d="M787.87 514.72a156.34 156.34 0 01-66.35 66.46"/> </g> <g id="left-leaf"> <path fill="#bfe6c7" stroke-linejoin="round" stroke-width="2" stroke="#548f9c" d="M694 530s-17.2 4.46-6.63 12.89c7 5.55 17.37 6.27 13.56 7.6-13.12 4.58-10.6 17.44.4 17.48s19.14-4.07 18.69-1.8c0 0-12.64 1.9-10.12 9.54 3.34 10.07 41.67 5.9 43.34 6.55-5.63-4.9-6.22-10.36-3.72-24.18s-.26-17.89-6-18.51c-4.8-.52-7.52 4.75-8.92 9.06a1 1 0 01-1.93-.38c.29-4.29.78-10.41-.07-16.27-1.57-10.88-14.65-11.6-17.37 2-.79 4-3-6.24-9.41-12.37C696 512.35 694 530 694 530z"/> <path fill="none" stroke="#548f9c" stroke-miterlimit="10" d="M699.59 535c6.86 11.21 23.17 30.87 52.79 46.54"/> </g> <g id="bowl" stroke="#82cdb2" stroke-width="2"> <path fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" d="M289 412.52c25.24 92.73 110.06 160.93 210.83 160.93s185.59-68.2 210.83-160.93z"/> <path fill="none" stroke-miterlimit="10" d="M710.66 412.52c-2.29.19-281.25 6.31-321.25 130.31"/> <path fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" d="M422.21 559.94H576.5v22.03H422.21z"/> <path fill="#0d242f" stroke-miterlimit="10" d="M432.71 560.31v21.35M442.51 560.31v21.35M448.05 560.31v21.35M453.84 560.31v21.35"/> <g id="symbol"> <ellipse cx="499.48" cy="486.67" fill="#0d242f" stroke-miterlimit="10" rx="45.07" ry="45.05"/> <ellipse cx="492.04" cy="490.25" fill="none" stroke-linecap="round" stroke-linejoin="round" rx="18.27" ry="26.71" transform="matrix(.76 -.64 .64 .76 -200.15 432.63)"/> <ellipse cx="507.36" cy="490.18" fill="none" stroke-linecap="round" stroke-linejoin="round" rx="26.71" ry="18.27" transform="rotate(-49.86 507.39969034 490.19572977)"/> </g> </g> <g class="bottle"> <path fill="#ffe895" stroke="#849190" stroke-miterlimit="10" stroke-width="2" d="M218.08 416v-30.56h-38.73v32.06"/> <path fill="#d9dacb" stroke="#849190" stroke-miterlimit="10" stroke-width="2" d="M179.35 413v35.68h-12.67a20.5 20.5 0 00-20.51 20.49v111.16h105.08V469.2a20.5 20.5 0 00-20.51-20.49h-12.66v-36.56"/> <path fill="#d9dacb" stroke="#849190" stroke-miterlimit="10" stroke-width="2" d="M167.33 401.47h62.76v10.68h-62.76z"/> <path fill="#92cac4" stroke="#548f9c" stroke-miterlimit="10" stroke-width="2" d="M219.85 530.17a28 28 0 10-10.92 7.69l14.42 5.6z"/> <g fill="#548f9c"> <circle cx="186.03" cy="511.76" r="3.34"/> <circle cx="198.71" cy="511.76" r="3.34"/> <circle cx="211.4" cy="511.76" r="3.34"/> </g> </g> <g class="item bottle" id="bottle"> <path fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M218.08 416v-30.56h-38.73v32.06"/> <path fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M179.35 413v35.68h-12.67a20.5 20.5 0 00-20.51 20.49v111.16h105.08V469.2a20.5 20.5 0 00-20.51-20.49h-12.66v-36.56"/> <path fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M167.33 401.47h62.76v10.68h-62.76z"/> <path fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M219.85 530.17a28 28 0 10-10.92 7.69l14.42 5.6z"/> <g fill="#FFF8EC"> <circle cx="186.03" cy="511.76" r="3.34"/> <circle cx="198.71" cy="511.76" r="3.34"/> <circle cx="211.4" cy="511.76" r="3.34"/> </g> </g> <path mask="url(#dotmask)" id="dots" fill="#fff8ec" d="M730.92 444.28a1 1 0 01-.21-1.4 1 1 0 011.4-.21 1 1 0 01.21 1.4 1 1 0 01-.81.41 1 1 0 01-.59-.2zm5.81-8.14a1 1 0 01-.26-1.39 1 1 0 011.39-.26 1 1 0 01.26 1.39 1 1 0 01-.82.44 1 1 0 01-.57-.18zm5.52-8.34a1 1 0 01-.32-1.38 1 1 0 011.38-.31 1 1 0 01.32 1.38 1 1 0 01-.85.46 1 1 0 01-.53-.15zm5.21-8.54a1 1 0 01-.37-1.36 1 1 0 011.36-.37 1 1 0 01.36 1.37 1 1 0 01-.86.5 1 1 0 01-.49-.14zm4.89-8.72a1 1 0 01-.41-1.35 1 1 0 011.35-.41 1 1 0 01.41 1.35 1 1 0 01-.88.53 1 1 0 01-.47-.12zm4.58-8.89a1 1 0 01-.46-1.34 1 1 0 011.34-.46 1 1 0 01.46 1.34 1 1 0 01-.89.56 1 1 0 01-.45-.1zm4.25-9a1 1 0 01-.51-1.32 1 1 0 011.32-.51 1 1 0 01.51 1.32 1 1 0 01-.92.59 1 1 0 01-.4-.13zm3.92-9.2a1 1 0 01-.56-1.3 1 1 0 011.3-.56 1 1 0 01.56 1.3 1 1 0 01-.93.63 1 1 0 01-.37-.12zm3.58-9.34a1 1 0 01-.6-1.28 1 1 0 011.28-.6 1 1 0 01.6 1.28 1 1 0 01-.94.66 1 1 0 01-.34-.11zm3.24-9.46a1 1 0 01-.65-1.26 1 1 0 011.26-.65 1 1 0 01.65 1.26 1 1 0 01-1 .69 1 1 0 01-.26-.09zm2.89-9.58a1 1 0 01-.69-1.23 1 1 0 011.23-.69 1 1 0 01.69 1.23 1 1 0 01-1 .73.84.84 0 01-.23-.11zm2.54-9.67a1 1 0 01-.74-1.21 1 1 0 011.21-.74 1 1 0 01.74 1.21 1 1 0 01-1 .77zm2.19-9.76a1 1 0 01-.78-1.18 1 1 0 011.17-.78 1 1 0 01.79 1.17 1 1 0 01-1 .81zm1.83-9.84a1 1 0 01-.83-1.15 1 1 0 011.14-.82 1 1 0 01.83 1.15 1 1 0 01-1 .84zm1.47-9.89a1 1 0 01-.87-1.12 1 1 0 011.12-.87A1 1 0 01784 315a1 1 0 01-1 .87h-.13zm1.12-9.95a1 1 0 01-.91-1.08 1 1 0 011.08-.91A1 1 0 01785 305a1 1 0 01-1 .91zm.75-10a1 1 0 01-1-1.06 1 1 0 011.06-.94 1 1 0 01.94 1.05 1 1 0 01-1 .95zm.4-10a1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1 1 1 0 01-1 1zm-1-11a1 1 0 011-1 1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-.98-1.02zm-.35-9.95a1 1 0 01.94-1.06 1 1 0 011.06.95 1 1 0 01-.95 1.05h-.06a1 1 0 01-.97-.95zm-.71-9.94A1 1 0 01784 254a1 1 0 011.09.9 1 1 0 01-.91 1.09h-.09a1 1 0 01-1.02-.94zm-1.06-9.9a1 1 0 01.87-1.12 1 1 0 011.12.87 1 1 0 01-.87 1.11H783a1 1 0 01-1-.88zm-1.42-9.86a1 1 0 01.83-1.15 1 1 0 011.15.83 1 1 0 01-.83 1.15h-.17a1 1 0 01-.96-.85zm-1.77-9.8a1 1 0 01.78-1.18 1 1 0 011.18.79 1 1 0 01-.79 1.17.62.62 0 01-.19 0 1 1 0 01-.96-.8zm-2.14-9.73a1 1 0 01.74-1.2 1 1 0 011.2.74 1 1 0 01-.74 1.2h-.23a1 1 0 01-.95-.76zm-2.48-9.65a1 1 0 01.7-1.23 1 1 0 011.23.7 1 1 0 01-.7 1.23.82.82 0 01-.26 0 1 1 0 01-.95-.72zm-2.83-9.55a1 1 0 01.65-1.25 1 1 0 011.25.65 1 1 0 01-.65 1.26 1 1 0 01-.3 0 1 1 0 01-.93-.68zm-3.18-9.43a1 1 0 01.6-1.28 1 1 0 011.28.6 1 1 0 01-.61 1.28 1 1 0 01-.33.06 1 1 0 01-.92-.68zm-3.53-9.32a1 1 0 01.56-1.3 1 1 0 011.3.56 1 1 0 01-.56 1.3.94.94 0 01-.37.07 1 1 0 01-.91-.65zm-3.84-9.16a1 1 0 01.51-1.32 1 1 0 011.32.52 1 1 0 01-.51 1.31 1 1 0 01-.41.09 1 1 0 01-.89-.62zm-4.18-9a1 1 0 01.46-1.34 1 1 0 011.34.46 1 1 0 01-.47 1.34.94.94 0 01-.43.1 1 1 0 01-.88-.59zm-4.5-8.86a1 1 0 01.41-1.35 1 1 0 011.35.41 1 1 0 01-.41 1.35 1 1 0 01-.47.12 1 1 0 01-.86-.56zm-483.91-7.91a1 1 0 01-.37-1.36 1 1 0 011.36-.37 1 1 0 01.37 1.36 1 1 0 01-.87.5 1 1 0 01-.47-.16zm479.08-.79a1 1 0 01.37-1.37 1 1 0 011.36.36 1 1 0 01-.36 1.37 1 1 0 01-.5.13 1 1 0 01-.85-.52zm-474-7.8a1 1 0 01-.32-1.38 1 1 0 011.38-.32 1 1 0 01.32 1.38 1 1 0 01-.85.47 1 1 0 01-.47-.18zm468.83-.71a1 1 0 01.31-1.38 1 1 0 011.38.32 1 1 0 01-.31 1.37 1 1 0 01-.54.16 1 1 0 01-.78-.5zm-463.4-7.7a1 1 0 01-.27-1.38 1 1 0 011.39-.27 1 1 0 01.27 1.39 1 1 0 01-.83.44 1 1 0 01-.5-.21zm458-.63a1 1 0 01.26-1.39 1 1 0 011.39.27 1 1 0 01-.26 1.39 1.08 1.08 0 01-.57.17 1 1 0 01-.8-.47zm-452.23-7.57a1 1 0 01-.22-1.39 1 1 0 011.4-.22 1 1 0 01.21 1.39 1 1 0 01-.8.42 1 1 0 01-.57-.23zm446.51-.59a1 1 0 01.21-1.4 1 1 0 011.4.22 1 1 0 01-.22 1.4 1 1 0 01-.59.19 1 1 0 01-.8-.41zm-440.47-7.43a1 1 0 01-.17-1.4 1 1 0 011.4-.17 1 1 0 01.17 1.41 1 1 0 01-.79.38 1 1 0 01-.61-.22zm434.47-.49a1 1 0 01.16-1.4 1 1 0 011.41.16 1 1 0 01-.17 1.41 1 1 0 01-.62.21 1 1 0 01-.78-.38zm-428.14-7.27a1 1 0 01-.12-1.41 1 1 0 011.41-.12 1 1 0 01.12 1.41 1 1 0 01-.77.36 1 1 0 01-.67-.24zm421.83-.42a1 1 0 01.11-1.42 1 1 0 011.41.12 1 1 0 01-.11 1.41 1 1 0 01-.65.24 1 1 0 01-.79-.35zM303.4 94.39a1 1 0 01-.06-1.42 1 1 0 011.41-.06 1 1 0 01.07 1.41 1 1 0 01-.75.33 1 1 0 01-.67-.26zM712.07 94a1 1 0 01.07-1.42 1 1 0 011.41.07 1 1 0 01-.07 1.41 1 1 0 01-.67.26 1 1 0 01-.74-.32zm-401.83-6.91a1 1 0 010-1.41 1 1 0 011.41 0 1 1 0 010 1.42 1 1 0 01-.71.3 1 1 0 01-.7-.31zm395-.29a1 1 0 010-1.42 1 1 0 011.42 0 1 1 0 010 1.42 1 1 0 01-.71.29 1 1 0 01-.73-.29zm-387.9-6.75a1 1 0 010-1.41 1 1 0 011.41 0 1 1 0 010 1.41 1 1 0 01-.69.27 1 1 0 01-.72-.27zm380.77-.23a1 1 0 010-1.42 1 1 0 011.42 0 1 1 0 010 1.41 1 1 0 01-.72.31 1 1 0 01-.7-.3zm-373.42-6.55a1 1 0 01.09-1.41 1 1 0 011.41.09 1 1 0 01-.09 1.41 1 1 0 01-.66.25 1 1 0 01-.75-.34zm366.07-.17a1 1 0 01-.09-1.41 1 1 0 011.41-.09 1 1 0 01.09 1.41 1 1 0 01-.75.34 1 1 0 01-.66-.25zm-358.49-6.34a1 1 0 01.14-1.41 1 1 0 011.41.14 1 1 0 01-.14 1.41 1 1 0 01-.63.23 1 1 0 01-.78-.37zm350.89-.11a1 1 0 01-.14-1.41 1 1 0 011.41-.14 1 1 0 01.14 1.41 1 1 0 01-.77.36 1 1 0 01-.64-.22zm-343.07-6.13a1 1 0 01.19-1.4 1 1 0 011.4.19 1 1 0 01-.19 1.4 1 1 0 01-.61.21 1 1 0 01-.79-.4zm335.25-.05a1 1 0 01-.19-1.4 1 1 0 011.4-.19 1 1 0 01.19 1.4 1 1 0 01-.8.39 1 1 0 01-.6-.2zm-327.22-5.89a1 1 0 01.24-1.4 1 1 0 011.39.24 1 1 0 01-.24 1.4 1 1 0 01-.57.18 1 1 0 01-.82-.42zm319.18 0a1 1 0 01-.24-1.39 1 1 0 011.39-.24 1 1 0 01.24 1.4 1 1 0 01-.82.42 1 1 0 01-.57-.19zm-310.94-5.66a1 1 0 01.29-1.38 1 1 0 011.38.29 1 1 0 01-.29 1.38 1 1 0 01-.54.16 1 1 0 01-.84-.45zm302.69.08a1 1 0 01-.29-1.39 1 1 0 011.38-.29 1 1 0 01.29 1.39 1 1 0 01-.84.45 1 1 0 01-.54-.16zM364.8 43.57a1 1 0 01.33-1.37 1 1 0 011.38.34 1 1 0 01-.34 1.37 1 1 0 01-.52.14 1 1 0 01-.85-.48zm285.8.11a1 1 0 01-.34-1.38 1 1 0 011.37-.34 1 1 0 01.34 1.37 1 1 0 01-.86.49 1.06 1.06 0 01-.51-.14zm-277.18-5.15a1 1 0 01.39-1.36 1 1 0 011.36.38 1 1 0 01-.39 1.36 1 1 0 01-.49.13 1 1 0 01-.87-.51zm268.58.16a1 1 0 01-.39-1.36 1 1 0 011.36-.39 1 1 0 01.39 1.36 1 1 0 01-.88.51 1 1 0 01-.48-.12zM382.22 33.8a1 1 0 01.44-1.35 1 1 0 011.34.44 1 1 0 01-.44 1.35 1 1 0 01-.45.1 1 1 0 01-.89-.54zm250.93.2a1 1 0 01-.44-1.34 1 1 0 011.34-.44 1 1 0 01.44 1.34 1 1 0 01-.89.55 1 1 0 01-.45-.11zm-242-4.62a1 1 0 01.49-1.32 1 1 0 011.33.49 1 1 0 01-.49 1.33 1.06 1.06 0 01-.42.09 1 1 0 01-.88-.58zm233 .27a1 1 0 01-.49-1.33 1 1 0 011.33-.49 1 1 0 01.48 1.33 1 1 0 01-.91.58 1 1 0 01-.39-.08zM400.3 25.32a1 1 0 01.53-1.31 1 1 0 011.31.53 1 1 0 01-.53 1.31 1.09 1.09 0 01-.39.08 1 1 0 01-.92-.61zm214.7.31a1 1 0 01-.54-1.31 1 1 0 011.31-.53 1 1 0 01.54 1.31 1 1 0 01-.93.61.87.87 0 01-.38-.08zm-205.44-4.06a1 1 0 01.58-1.29 1 1 0 011.28.58 1 1 0 01-.58 1.29.84.84 0 01-.35.07 1 1 0 01-.93-.65zm196.19.37a1 1 0 01-.58-1.29 1 1 0 011.29-.58 1 1 0 01.58 1.29 1 1 0 01-.94.65.91.91 0 01-.35-.07zm-186.81-3.77a1 1 0 01.63-1.27 1 1 0 011.26.63 1 1 0 01-.62 1.27 1.26 1.26 0 01-.33.05 1 1 0 01-.94-.68zm177.4.42a1 1 0 01-.63-1.26 1 1 0 011.29-.63 1 1 0 01.63 1.26 1 1 0 01-1 .68.89.89 0 01-.29-.05zm-167.9-3.48a1 1 0 01.67-1.24 1 1 0 011.24.67 1 1 0 01-.67 1.24.92.92 0 01-.28.05 1 1 0 01-.96-.72zm158.4.49a1 1 0 01-.68-1.25 1 1 0 011.25-.67 1 1 0 01.67 1.24 1 1 0 01-1 .72 1.35 1.35 0 01-.24-.04zM438 12.4a1 1 0 01.72-1.22 1 1 0 011.22.72 1 1 0 01-.72 1.22 1.07 1.07 0 01-.25 0 1 1 0 01-.97-.72zm139.2.55a1 1 0 01-.72-1.22 1 1 0 011.21-.72 1 1 0 01.72 1.22 1 1 0 01-1 .75 1 1 0 01-.17.02zM447.74 10a1 1 0 01.76-1.19 1 1 0 011.19.76 1 1 0 01-.76 1.19.86.86 0 01-.22 0 1 1 0 01-.97-.76zm119.81.61a1 1 0 01-.77-1.19A1 1 0 01568 8.7a1 1 0 01.77 1.19 1 1 0 01-1 .78.75.75 0 01-.22-.02zM457.53 8a1 1 0 01.8-1.17 1 1 0 011.16.81 1 1 0 01-.8 1.16h-.18a1 1 0 01-.98-.8zm100.25.68a1 1 0 01-.8-1.16 1 1 0 011.16-.81 1 1 0 01.81 1.16 1 1 0 01-1 .82h-.17zm-90.39-2.31a1 1 0 01.84-1.13 1 1 0 011.14.84 1 1 0 01-.85 1.14h-.14a1 1 0 01-.99-.85zm80.55.75a1 1 0 01-.85-1.12 1 1 0 011.14-.85 1 1 0 01.84 1.13 1 1 0 01-1 .86h-.15zm-70.64-2a1 1 0 01.89-1.12 1 1 0 011.1.89A1 1 0 01478.4 6h-.11a1 1 0 01-.99-.92zm60.76.81a1 1 0 01-.89-1.1 1 1 0 011.1-.89 1 1 0 01.89 1.1 1 1 0 01-1 .89h-.11zm-50.81-1.79a1 1 0 01.93-1.07 1 1 0 011.07.92 1 1 0 01-.93 1.07h-.07a1 1 0 01-1-.92zm40.89.86a1 1 0 01-.93-1 1 1 0 011.07-1 1 1 0 01.92 1.06 1 1 0 01-1 .94h-.07zm-30.91-1.44a1 1 0 011-1 1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1zm21 .94a1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1 1 1 0 01-1 1zm-11-1.17a1 1 0 011-1 1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1z"/> <g id="baseline" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"> <path d="M76.32 582.33H832.5M26.97 582.33h38.72M2.5 582.33h14.02"/> </g> </g> <g class="white"> <g> <g> <circle cx="498.15" cy="210.03" r="3.34" fill="#0d242f"/> <circle cx="524.19" cy="214.7" r="3.34" fill="#0d242f"/> <circle cx="542.88" cy="270.76" r="3.34" fill="#0d242f"/> <circle cx="547.56" cy="246.74" r="3.34" fill="#0d242f"/> <circle cx="528.2" cy="234.3" r="1.58" fill="#0d242f"/> <circle cx="513.51" cy="195.77" r="1.58" fill="#0d242f"/> <circle cx="506.83" cy="230.47" r="1.58" fill="#0d242f"/> <circle cx="567.59" cy="269.85" r="1.58" fill="#0d242f"/> <circle cx="474.78" cy="228.72" r="1.58" fill="#0d242f"/> <g fill="#0d242f" stroke="#FFF8EC" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"> <path d="M484.41 241.83v12M490.41 247.83h-12"/> </g> <g fill="#0d242f" stroke="#FFF8EC" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"> <path d="M454.41 232.83v12M460.41 238.83h-12"/> </g> <g fill="#0d242f" stroke="#FFF8EC" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"> <path d="M464.41 260.83v12M470.41 266.83h-12"/> </g> </g> <path fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M690.56 384.22a57.66 57.66 0 00-29.2-68.39 40.79 40.79 0 00-39.65-50.33h-.74a33.38 33.38 0 00-56-22.66 33.48 33.48 0 00-13.85-18.7v-1.25a40.78 40.78 0 00-80.52-9.16 40.8 40.8 0 00-58.78 33.91 33.4 33.4 0 00-20 27.81"/> </g> <g> <g stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2"> <path fill="#0d242f" stroke-linecap="round" d="M704 218.15l-127.19 201a8.61 8.61 0 01-14.56-9.21l127.1-200.84 20.12-15.69z"/> <path fill="#0d242f" d="M695.61 215.25c1.32-2.09 3.18-1.91 5.27-.59a4.47 4.47 0 011.39 6.17"/> <path fill="#0d242f" d="M695.61 215.25c1.32-2.09.36-3.69-1.73-5a4.48 4.48 0 00-6.17 1.38"/> <path fill="#0d242f" d="M582.95 409.51l-14.5-9.49"/> <path fill="#0d242f" d="M575.83 404.7l119.78-189.45"/> </g> <g stroke="#FFF8EC"> <path fill="#0d242f" stroke-miterlimit="10" stroke-width="2" d="M611.08010865 227.79123424l9.2707502 2.7848861h0L565.05590957 414.6503135a4.84 4.84 0 01-6.02781815 3.24293205h0a4.84 4.84 0 01-3.24293205-6.02781815l55.2949493-184.07419315h0z"/> <path fill="#0d242f" stroke-miterlimit="10" stroke-width="2" d="M634.09 168.17s-37.46 31.17-24.55 59.35h0l12.31 3.69h0c26.3-16.39 12.24-63.04 12.24-63.04z"/> <path fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" d="M635.16 213.8l-17.64 9.48-9.49-17.63"/> <path fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" d="M637.91 203.33l-17.02 8.77-8.98-16.77"/> <path fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" d="M637.75 193.12l-14.14 7.6-6.71-12.47"/> </g> </g> <g> <g> <path fill="#0d242f" d="M718.33 357.45a4 4 0 00-5-3.12 11.27 11.27 0 01-9.12-20.44 4 4 0 001-5.82 64.46 64.46 0 00-13.5-12.79 3.94 3.94 0 00-5.76 1.36 11.36 11.36 0 01-14 5.25 11.59 11.59 0 01-6.95-13.25 4 4 0 00-.6-3.2 3.92 3.92 0 00-2.78-1.66 64.7 64.7 0 00-18.59.5 4 4 0 00-3.11 5 11.28 11.28 0 01-20.45 9.12 4 4 0 00-5.83-1 64.47 64.47 0 00-12.79 13.49 4 4 0 00-.62 3.18 4 4 0 002 2.58 11.6 11.6 0 015.25 14 11.34 11.34 0 01-13.25 6.91 4 4 0 00-3.2.6 4 4 0 00-1.67 2.78 65 65 0 00.51 18.58 3.78 3.78 0 00.28.94 4 4 0 004.76 2.18 11.27 11.27 0 019.12 20.43 4 4 0 00-1 5.83 65 65 0 0013.5 12.78 3.95 3.95 0 005.76-1.36 11.35 11.35 0 0114-5.24 11.59 11.59 0 016.91 13.25 3.95 3.95 0 003.38 4.85 64.71 64.71 0 0018.59-.5 3.92 3.92 0 002.69-1.81 4 4 0 00.43-3.22 11.27 11.27 0 0120.44-9.12 4 4 0 005.83 1 64.44 64.44 0 0012.79-13.49 3.95 3.95 0 00-1.35-5.74 11.58 11.58 0 01-5.25-14 11.35 11.35 0 0113.25-6.9 3.94 3.94 0 004.86-3.38 64.6 64.6 0 00-.53-18.57z"/> <path fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M718.33 357.45a4 4 0 00-5-3.12 11.27 11.27 0 01-9.12-20.44 4 4 0 001-5.82 64.46 64.46 0 00-13.5-12.79 3.94 3.94 0 00-5.76 1.36 11.36 11.36 0 01-14 5.25 11.59 11.59 0 01-6.95-13.25 4 4 0 00-.6-3.2 3.92 3.92 0 00-2.78-1.66 64.7 64.7 0 00-18.59.5 4 4 0 00-3.11 5 11.28 11.28 0 01-20.45 9.12 4 4 0 00-5.83-1 64.47 64.47 0 00-12.79 13.49 4 4 0 00-.62 3.18 4 4 0 002 2.58 11.6 11.6 0 015.25 14 11.34 11.34 0 01-13.25 6.91 4 4 0 00-3.2.6 4 4 0 00-1.67 2.78 65 65 0 00.51 18.58 3.78 3.78 0 00.28.94 4 4 0 004.76 2.18 11.27 11.27 0 019.12 20.43 4 4 0 00-1 5.83 65 65 0 0013.5 12.78 3.95 3.95 0 005.76-1.36 11.35 11.35 0 0114-5.24 11.59 11.59 0 016.91 13.25 3.95 3.95 0 003.38 4.85 64.71 64.71 0 0018.59-.5 3.92 3.92 0 002.69-1.81 4 4 0 00.43-3.22 11.27 11.27 0 0120.44-9.12 4 4 0 005.83 1 64.44 64.44 0 0012.79-13.49 3.95 3.95 0 00-1.35-5.74 11.58 11.58 0 01-5.25-14 11.35 11.35 0 0113.25-6.9 3.94 3.94 0 004.86-3.38 64.6 64.6 0 00-.53-18.57z"/> </g> <path fill="#0d242f" stroke="#FFF8EC" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M666.37 361c-9.06-6.54-22.39.41-21.72 12 .43 7.34 8.26 12.38 14.75 14.55 18.59 6.2 32.1-10.16 30.16-25-3.56-27.14-30.74-33.07-51.19-24.47-17.72 7.46-29.79 31.77-12 54.28 8.8 11.15 28.14 18.18 41.17 10.12"/> </g> <g stroke="#FFF8EC" stroke-linecap="round" stroke-linejoin="round"> <path fill="#0d242f" stroke-width="2" d="M609.67854111 352.62271234l22.72984733-.08330961h0l.08323631 22.70984746a38.84 38.84 0 01-38.6973834 38.98209484l-22.7198474.08327296h0l-.0832363-22.70984746a38.84 38.84 0 0138.68738346-38.98205819z"/> <path fill="#0d242f" d="M631.85 353.4s-10.24 43.94-61.13 61.14c0 0 22.35-20.72 25.84-44.68"/> <g> <path fill="#0d242f" stroke-width="2.0057" d="M529.0405 380.8674l6.032-19.968h0l19.9872 6.0378a35.67123045 35.67123045 0 0123.8319 44.4625l-6.032 19.968h0l-19.9872-6.0378a35.67123045 35.67123045 0 01-23.8319-44.4625z"/> <path fill="#0d242f" d="M536.39 367.64s35.35 18.52 36.52 67.69c0 0-11.46-24.57-31.47-34.16"/> </g> </g> <g> <g> <path fill="#0d242f" d="M467.85 373.88l-2.53-9.37c-1.51-5.6-6.53-7.21-9.53-8.18-1.7-.55-3-1-3.14-1.48s.78-1.51 2-2.84c2.11-2.34 5.63-6.27 4.12-11.86s-6.37-7.15-9.56-8.15c-1.7-.54-3-1-3.14-1.46s.78-1.53 2-2.86c2.24-2.5 5.63-6.27 4.12-11.85s-6.34-7.15-9.53-8.19c-1.7-.54-3-1-3.14-1.47s.78-1.51 2-2.85c2.23-2.5 5.62-6.27 4.11-11.85s-6.33-7.15-9.53-8.18c-1.7-.55-3-1-3.14-1.48s.78-1.52 2-2.85c2.23-2.5 5.62-6.27 4.11-11.86s-6.33-7.14-9.53-8.18c-1.7-.54-3-1-3.14-1.47s.78-1.52 2-2.85c2.24-2.5 5.62-6.28 4.11-11.86l-2.53-9.37a4.85 4.85 0 00-5.95-3.42l-9.38 2.53c-5.59 1.51-7.15 6.33-8.18 9.52-.55 1.7-1 3-1.47 3.14s-1.53-.77-2.85-2c-2.35-2.11-6.27-5.63-11.87-4.12s-7.15 6.33-8.18 9.52c-.55 1.7-1 3-1.48 3.14s-1.52-.78-2.85-2c-2.5-2.24-6.27-5.62-11.86-4.12s-7.15 6.34-8.18 9.52c-.55 1.7-1 3-1.48 3.14s-1.52-.78-2.85-2c-2.5-2.23-6.28-5.62-11.86-4.11s-7.16 6.33-8.19 9.53c-.55 1.7-1 3-1.47 3.13s-1.52-.78-2.85-2c-2.51-2.24-6.28-5.62-11.87-4.11s-7.14 6.32-8.18 9.51c-.55 1.71-1 3-1.47 3.15s-1.52-.78-2.86-2c-2.5-2.24-6.27-5.62-11.86-4.12l-9.37 2.53a4.85 4.85 0 00-3.42 5.95l2.53 9.37c1.51 5.6 6.53 7.21 9.52 8.18 1.7.54 3 1 3.14 1.47s-.77 1.53-2 2.85c-2.1 2.35-5.62 6.27-4.11 11.87s6.33 7.15 9.53 8.18c1.69.54 3 1 3.13 1.46s-.78 1.53-2 2.86c-2.24 2.5-5.62 6.27-4.11 11.86s6.33 7.14 9.52 8.17c1.7.55 3 1 3.14 1.48s-.78 1.52-2 2.85c-2.24 2.5-5.62 6.27-4.11 11.86s6.33 7.14 9.52 8.17c1.7.56 3 1 3.14 1.48s-.78 1.52-2 2.85c-2.24 2.5-5.62 6.27-4.12 11.86s6.34 7.14 9.53 8.18c1.7.55 3 1 3.14 1.47s-.78 1.52-2 2.86c-2.24 2.49-5.62 6.27-4.12 11.85l2.53 9.37a4.87 4.87 0 006 3.42l9.37-2.53c5.6-1.51 7.22-6.53 8.18-9.52.55-1.7 1-3 1.48-3.14s1.52.78 2.85 2c2.34 2.1 6.26 5.62 11.86 4.11s7.15-6.33 8.19-9.52c.55-1.7 1-3 1.47-3.13s1.52.77 2.86 2c2.49 2.23 6.27 5.61 11.86 4.11s7.15-6.34 8.18-9.52c.55-1.7 1-3 1.47-3.14s1.52.78 2.86 2c2.49 2.23 6.27 5.62 11.86 4.11s7.15-6.33 8.18-9.52c.55-1.7 1-3 1.47-3.14s1.53.78 2.86 2c2.5 2.23 6.27 5.61 11.86 4.1s7.15-6.33 8.18-9.51c.55-1.71 1-3 1.48-3.14s1.52.77 2.86 2c2.49 2.23 6.27 5.61 11.85 4.11l9.38-2.53a4.86 4.86 0 003.44-5.97z"/> <path fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M467.85 373.88l-2.53-9.37c-1.51-5.6-6.53-7.21-9.53-8.18-1.7-.55-3-1-3.14-1.48s.78-1.51 2-2.84c2.11-2.34 5.63-6.27 4.12-11.86s-6.37-7.15-9.56-8.15c-1.7-.54-3-1-3.14-1.46s.78-1.53 2-2.86c2.24-2.5 5.63-6.27 4.12-11.85s-6.34-7.15-9.53-8.19c-1.7-.54-3-1-3.14-1.47s.78-1.51 2-2.85c2.23-2.5 5.62-6.27 4.11-11.85s-6.33-7.15-9.53-8.18c-1.7-.55-3-1-3.14-1.48s.78-1.52 2-2.85c2.23-2.5 5.62-6.27 4.11-11.86s-6.33-7.14-9.53-8.18c-1.7-.54-3-1-3.14-1.47s.78-1.52 2-2.85c2.24-2.5 5.62-6.28 4.11-11.86l-2.53-9.37a4.85 4.85 0 00-5.95-3.42l-9.38 2.53c-5.59 1.51-7.15 6.33-8.18 9.52-.55 1.7-1 3-1.47 3.14s-1.53-.77-2.85-2c-2.35-2.11-6.27-5.63-11.87-4.12s-7.15 6.33-8.18 9.52c-.55 1.7-1 3-1.48 3.14s-1.52-.78-2.85-2c-2.5-2.24-6.27-5.62-11.86-4.12s-7.15 6.34-8.18 9.52c-.55 1.7-1 3-1.48 3.14s-1.52-.78-2.85-2c-2.5-2.23-6.28-5.62-11.86-4.11s-7.16 6.33-8.19 9.53c-.55 1.7-1 3-1.47 3.13s-1.52-.78-2.85-2c-2.51-2.24-6.28-5.62-11.87-4.11s-7.14 6.32-8.18 9.51c-.55 1.71-1 3-1.47 3.15s-1.52-.78-2.86-2c-2.5-2.24-6.27-5.62-11.86-4.12l-9.37 2.53a4.85 4.85 0 00-3.42 5.95l2.53 9.37c1.51 5.6 6.53 7.21 9.52 8.18 1.7.54 3 1 3.14 1.47s-.77 1.53-2 2.85c-2.1 2.35-5.62 6.27-4.11 11.87s6.33 7.15 9.53 8.18c1.69.54 3 1 3.13 1.46s-.78 1.53-2 2.86c-2.24 2.5-5.62 6.27-4.11 11.86s6.33 7.14 9.52 8.17c1.7.55 3 1 3.14 1.48s-.78 1.52-2 2.85c-2.24 2.5-5.62 6.27-4.11 11.86s6.33 7.14 9.52 8.17c1.7.56 3 1 3.14 1.48s-.78 1.52-2 2.85c-2.24 2.5-5.62 6.27-4.12 11.86s6.34 7.14 9.53 8.18c1.7.55 3 1 3.14 1.47s-.78 1.52-2 2.86c-2.24 2.49-5.62 6.27-4.12 11.85l2.53 9.37a4.87 4.87 0 006 3.42l9.37-2.53c5.6-1.51 7.22-6.53 8.18-9.52.55-1.7 1-3 1.48-3.14s1.52.78 2.85 2c2.34 2.1 6.26 5.62 11.86 4.11s7.15-6.33 8.19-9.52c.55-1.7 1-3 1.47-3.13s1.52.77 2.86 2c2.49 2.23 6.27 5.61 11.86 4.11s7.15-6.34 8.18-9.52c.55-1.7 1-3 1.47-3.14s1.52.78 2.86 2c2.49 2.23 6.27 5.62 11.86 4.11s7.15-6.33 8.18-9.52c.55-1.7 1-3 1.47-3.14s1.53.78 2.86 2c2.5 2.23 6.27 5.61 11.86 4.1s7.15-6.33 8.18-9.51c.55-1.71 1-3 1.48-3.14s1.52.77 2.86 2c2.49 2.23 6.27 5.61 11.85 4.11l9.38-2.53a4.86 4.86 0 003.44-5.97z"/> </g> <rect width="110.97" height="110.93" x="318.39" y="268.38" fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" rx="15.51" transform="rotate(-15.1 373.91871222 323.87320219)"/> <path fill="#0d242f" stroke="#FFF8EC" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M395.07 290.6a16.19 16.19 0 00-8.79 5.73 7.36 7.36 0 01-8.87 2.39 17 17 0 00-19.27 5.2 7.3 7.3 0 01-8.85 2.38 16.26 16.26 0 00-10.46-.53M398.74 306.28A16.29 16.29 0 00390 312a6.78 6.78 0 01-4 2.75c-2.09.57-3 .26-4.85-.36a17 17 0 00-19.27 5.2A7.31 7.31 0 01353 322a16.3 16.3 0 00-10.47-.53M403 321a16.29 16.29 0 00-8.79 5.73 6.78 6.78 0 01-4 2.75c-2.09.57-3 .26-4.85-.36a17 17 0 00-19.27 5.2 7.31 7.31 0 01-8.84 2.39 16.3 16.3 0 00-10.47-.53"/> </g> <g stroke="#FFF8EC" stroke-width="2"> <ellipse cx="483.3" cy="383.44" fill="#0d242f" stroke-miterlimit="10" rx="63.71" ry="63.68"/> <ellipse cx="483.3" cy="383.44" fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" rx="27.42" ry="27.41"/> <ellipse cx="483.3" cy="383.44" fill="#0d242f" stroke-dasharray="0 5.04" stroke-linecap="round" stroke-linejoin="round" rx="36.88" ry="36.86"/> <path fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" d="M477.41 372.09v22.7l16.69-11.35-16.69-11.35z"/> </g> <g stroke="#FFF8EC" stroke-linecap="round"> <path fill="#0d242f" stroke-linejoin="round" stroke-width="2" d="M304.28 345.77s10.11-35.09 26.85-12.92c11 14.61 11.94 36 14.88 28.28 10.14-26.7 36.42-20.81 35.91 1.79s-9.41 39.1-4.71 38.29c0 0 8.34-23.68 24.27-19.2 11.37 3.19 15.58 12.41 5.82 39.57s-8.61 36.91 1.15 48.76c-9.76-11.85-20.94-13.35-49.48-9s-36.78-1.52-37.73-13.29c-1.35-16.49 30.06-20.16 30.06-20.16 1.69-4.45-22.77 1.15-45.06-2.68s-23-30.75 5.12-35.58c8.17-1.4-12.68-6.39-24.91-20-18.56-20.63 17.83-23.86 17.83-23.86z"/> <path fill="#0d242f" stroke-miterlimit="10" d="M314.33 357.62c22.66 14.72 60.49 46.5 91.08 108.21"/> <path fill="#0d242f" stroke-linejoin="round" stroke-width="2" d="M420.36 353.75s27.74-6.63 19.11 13.26c-5.69 13.12-19.89 22-13.49 21 22-3.39 28.15 16.73 12.59 25.07s-30.19 8.65-27.84 11.53c0 0 19.3-3.45 22.39 9.09 2.2 8.95-2.44 15.36-24.65 19.17s-28.4 8.36-32.7 19.54c4.3-11.18 1-19.35-12.93-37s-13.11-25.56-5.48-30.74c6.42-4.35 14.23 1.08 19.46 6.12a1.59 1.59 0 002.46-2c-3.65-5.86-8.95-14.16-12.16-23.09-6-16.61 12-27.47 26.14-10.21 4.1 5-.53-11.07 4-24.62 6.94-20.6 23.1 2.88 23.1 2.88z"/> <path fill="#0d242f" stroke-miterlimit="10" d="M416.18 365.13c-1.29 21.05-9.6 61.19-39.77 105.7"/> <g> <path fill="#0d242f" stroke-linejoin="round" stroke-width="2" d="M777.49 571.2C780.65 561.19 764 557 764 557c-.78-2.92 10.16 1.75 24.47.77s16.52-17.93-.94-22.8c-5.07-1.41 8.41-3.22 17-11 13-11.85-9.72-16.22-9.72-16.22s-4.12-22.81-16.1-9.89c-7.91 8.52-9.86 22-11.22 16.91-4.68-17.52-21.64-15.49-22.77-1.19s3.82 29.44.91 28.63c0 0-4.14-19.63-14.48-17.83-7.38 1.28-10.63 6.83-6.22 24.61s4.11 24.94-2.82 31.79c-.04-.07 49.99 7.48 55.38-9.58z"/> <path fill="#0d242f" stroke-miterlimit="10" d="M787.87 514.72a156.34 156.34 0 01-66.35 66.46"/> </g> <g> <path fill="#0d242f" stroke-linejoin="round" stroke-width="2" d="M694 530s-17.2 4.46-6.63 12.89c7 5.55 17.37 6.27 13.56 7.6-13.12 4.58-10.6 17.44.4 17.48s19.14-4.07 18.69-1.8c0 0-12.64 1.9-10.12 9.54 3.34 10.07 41.67 5.9 43.34 6.55-5.63-4.9-6.22-10.36-3.72-24.18s-.26-17.89-6-18.51c-4.8-.52-7.52 4.75-8.92 9.06a1 1 0 01-1.93-.38c.29-4.29.78-10.41-.07-16.27-1.57-10.88-14.65-11.6-17.37 2-.79 4-3-6.24-9.41-12.37C696 512.35 694 530 694 530z"/> <path fill="#0d242f" stroke-miterlimit="10" d="M699.59 535c6.86 11.21 23.17 30.87 52.79 46.54"/> </g> </g> <g stroke="#FFF8EC" stroke-width="2"> <path fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" d="M289 412.52c25.24 92.73 110.06 160.93 210.83 160.93s185.59-68.2 210.83-160.93z"/> <path fill="#0d242f" stroke-miterlimit="10" d="M710.66 412.52c-2.29.19-281.25 6.31-321.25 130.31"/> <path fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" d="M422.21 559.94H576.5v22.03H422.21z"/> <path fill="#0d242f" stroke-miterlimit="10" d="M432.71 560.31v21.35M442.51 560.31v21.35M448.05 560.31v21.35M453.84 560.31v21.35"/> <g> <ellipse cx="499.48" cy="486.67" fill="#0d242f" stroke-miterlimit="10" rx="45.07" ry="45.05"/> <ellipse cx="492.04" cy="490.25" fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" rx="18.27" ry="26.71" transform="matrix(.76 -.64 .64 .76 -200.15 432.63)"/> <ellipse cx="507.36" cy="490.18" fill="#0d242f" stroke-linecap="round" stroke-linejoin="round" rx="26.71" ry="18.27" transform="rotate(-49.86 507.39969034 490.19572977)"/> </g> </g> <g> <path fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M218.08 416v-30.56h-38.73v32.06"/> <path fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M179.35 413v35.68h-12.67a20.5 20.5 0 00-20.51 20.49v111.16h105.08V469.2a20.5 20.5 0 00-20.51-20.49h-12.66v-36.56"/> <path fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M167.33 401.47h62.76v10.68h-62.76z"/> <path fill="#0d242f" stroke="#FFF8EC" stroke-miterlimit="10" stroke-width="2" d="M219.85 530.17a28 28 0 10-10.92 7.69l14.42 5.6z"/> <g fill="#0d242f"> <circle cx="186.03" cy="511.76" r="3.34"/> <circle cx="198.71" cy="511.76" r="3.34"/> <circle cx="211.4" cy="511.76" r="3.34"/> </g> </g> <g fill="#0d242f" stroke="#FFF8EC" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"> <path d="M76.32 582.33H832.5M26.97 582.33h38.72M2.5 582.33h14.02"/> </g> </g> </svg> </div> </figure> <span></span> <aside class="u-flow"> <p>A full course with delicious design recipes, exquisite samples and reliable examples. Carefully hand-picked over <strong>15 years</strong>:</p> <ul class="c-accordion"> <li> <button type="button" class="c-accordion__trigger" data-food="fishcake"> <span class="c-twi c-twi--left" ><span>100s of real-life examples</span> <span class="c-icon-wrapper"> <svg data-name="editablefile-fishcake" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><g data-name="Tools"><path d="M194.32 83.81a5.82 5.82 0 00-7.4-4.58 16.56 16.56 0 01-13.4-30 5.8 5.8 0 001.54-8.56 95.19 95.19 0 00-19.83-18.78 5.8 5.8 0 00-8.46 2 16.67 16.67 0 01-20.56 7.71 17 17 0 01-10.15-19.47 5.81 5.81 0 00-5-7.14 95 95 0 00-27.3.74 5.81 5.81 0 00-4.57 7.4 16.56 16.56 0 01-30 13.39A5.82 5.82 0 0040.63 25a95 95 0 00-18.79 19.79 5.81 5.81 0 00-.91 4.68 5.93 5.93 0 002.9 3.78 17 17 0 017.72 20.55A16.66 16.66 0 0112.08 84a5.81 5.81 0 00-7.14 5 95.3 95.3 0 00.74 27.29 6 6 0 00.42 1.38 5.83 5.83 0 007 3.2 16.56 16.56 0 0113.4 30 5.8 5.8 0 00-1.54 8.56 95.36 95.36 0 0019.82 18.77 5.8 5.8 0 008.46-2 16.69 16.69 0 0120.57-7.71 17 17 0 0110.14 19.47 5.81 5.81 0 005 7.13 95.36 95.36 0 0027.3-.74 5.8 5.8 0 004.57-7.39 16.56 16.56 0 0130-13.4 5.85 5.85 0 003.94 2.7 5.77 5.77 0 004.62-1.17 94.62 94.62 0 0018.78-19.81 5.8 5.8 0 00-2-8.46 17 17 0 01-7.71-20.55 16.64 16.64 0 0119.46-10.15 5.81 5.81 0 007.15-5 94.89 94.89 0 00-.74-27.31z" fill="#ffca6c"/><path d="M194.32 83.81a5.82 5.82 0 00-7.4-4.58 16.56 16.56 0 01-13.4-30 5.8 5.8 0 001.54-8.56 95.19 95.19 0 00-19.83-18.78 5.8 5.8 0 00-8.46 2 16.67 16.67 0 01-20.56 7.71 17 17 0 01-10.15-19.47 5.81 5.81 0 00-5-7.14 95 95 0 00-27.3.74 5.81 5.81 0 00-4.57 7.4 16.56 16.56 0 01-30 13.39A5.82 5.82 0 0040.63 25a95 95 0 00-18.79 19.79 5.81 5.81 0 00-.91 4.68 5.93 5.93 0 002.9 3.78 17 17 0 017.72 20.55A16.66 16.66 0 0112.08 84a5.81 5.81 0 00-7.14 5 95.3 95.3 0 00.74 27.29 6 6 0 00.42 1.38 5.83 5.83 0 007 3.2 16.56 16.56 0 0113.4 30 5.8 5.8 0 00-1.54 8.56 95.36 95.36 0 0019.82 18.77 5.8 5.8 0 008.46-2 16.69 16.69 0 0120.57-7.71 17 17 0 0110.14 19.47 5.81 5.81 0 005 7.13 95.36 95.36 0 0027.3-.74 5.8 5.8 0 004.57-7.39 16.56 16.56 0 0130-13.4 5.85 5.85 0 003.94 2.7 5.77 5.77 0 004.62-1.17 94.62 94.62 0 0018.78-19.81 5.8 5.8 0 00-2-8.46 17 17 0 01-7.71-20.55 16.64 16.64 0 0119.46-10.15 5.81 5.81 0 007.15-5 94.89 94.89 0 00-.74-27.31z" fill="none" stroke="#c29c87" stroke-miterlimit="10" stroke-width="3"/></g><path d="M118 89c-13.3-9.61-32.88.6-31.89 17.58.63 10.78 12.13 18.18 21.66 21.36 27.31 9.06 47.16-14.94 44.31-36.66-5.23-39.86-45.16-48.58-75.19-35.94-26 11-43.75 46.66-17.65 79.72 12.92 16.37 41.32 26.69 60.46 14.87" stroke-linecap="round" fill="none" stroke="#c29c87" stroke-miterlimit="10" stroke-width="3"/></svg> </span> </span> </button> <div class="c-accordion__content u-flow"> A growing video library of examples for common UI components: from <strong>complex navigation</strong> and <strong>enterprise tables</strong> to intricate mega-dropdowns, carousels, filters, sorting, maps, charts and web forms. From remote corners of the web. </div> </li> <li> <button type="button" class="c-accordion__trigger" data-food="ravioli"> <span class="c-twi c-twi--left" ><span>35 recorded video lessons</span> <span class="c-icon-wrapper"> <svg id="b79406bd-0323-48a9-af41-e7ac43701d80" data-name="file-ravioli" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.af8b1854-7824-41cf-9f3f-29ef8f306a07{fill:none;stroke:#ffb16c;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}</style></defs><g id="ad67abb2-b6f2-4fd4-ab96-a9f5e6d5995c" data-name="Stamp"><path d="M183.51 36.59c3.37-2.19 8.46-5.5 8.46-12.42V12.54a5.8 5.8 0 00-5.81-5.81h-11.63c-6.94 0-10.24 5.08-12.43 8.45-1.17 1.79-2.11 3.16-2.69 3.16s-1.52-1.37-2.68-3.16c-2-3.17-5.49-8.47-12.43-8.47s-10.25 5.08-12.45 8.45c-1.16 1.79-2.1 3.16-2.68 3.16s-1.51-1.37-2.68-3.17c-2.19-3.36-5.5-8.46-12.43-8.46s-10.24 5.08-12.43 8.45c-1.17 1.79-2.11 3.16-2.69 3.16s-1.52-1.37-2.68-3.17c-2.19-3.36-5.5-8.46-12.43-8.46s-10.26 5.08-12.45 8.45c-1.17 1.79-2.1 3.16-2.68 3.16S67.18 16.9 66 15.1c-2.19-3.37-5.5-8.46-12.43-8.46s-10.24 5.08-12.43 8.44c-1.14 1.8-2.14 3.17-2.68 3.17s-1.46-1.37-2.68-3.17c-2.19-3.37-5.5-8.46-12.43-8.46H11.72a5.81 5.81 0 00-5.82 5.8V24c0 6.94 5.29 10.38 8.46 12.43 1.79 1.17 3.16 2.11 3.16 2.69s-1.37 1.52-3.16 2.68c-3.17 2-8.47 5.49-8.48 12.43S11 64.52 14.34 66.71c1.8 1.16 3.17 2.1 3.17 2.68s-1.38 1.52-3.18 2.68C11 74.26 5.87 77.56 5.87 84.49S11 94.74 14.33 96.93c1.79 1.17 3.16 2.11 3.16 2.68s-1.37 1.52-3.17 2.68c-3.37 2.19-8.46 5.5-8.46 12.43s5.08 10.24 8.45 12.43c1.8 1.17 3.17 2.11 3.17 2.69s-1.38 1.52-3.17 2.68c-3.37 2.19-8.46 5.49-8.47 12.42s5.09 10.24 8.46 12.44c1.79 1.17 3.17 2.11 3.17 2.68s-1.38 1.52-3.18 2.69c-3.37 2.19-8.46 5.49-8.46 12.42v11.62a5.83 5.83 0 005.82 5.82h11.62c6.94 0 10.38-5.29 12.44-8.45 1.16-1.8 2.1-3.17 2.68-3.17s1.51 1.38 2.68 3.16c2 3.17 5.49 8.47 12.43 8.48s10.25-5.09 12.45-8.46c1.16-1.79 2.1-3.16 2.67-3.16s1.53 1.38 2.69 3.18c2.19 3.36 5.5 8.45 12.43 8.46s10.25-5.09 12.44-8.45c1.17-1.8 2.11-3.17 2.68-3.17s1.52 1.38 2.69 3.18c2.19 3.36 5.5 8.45 12.43 8.46s10.24-5.09 12.44-8.45c1.16-1.8 2.1-3.17 2.68-3.17s1.52 1.38 2.68 3.18c2.19 3.36 5.5 8.45 12.43 8.46s10.25-5.09 12.44-8.45c1.17-1.79 2.11-3.17 2.69-3.17s1.52 1.38 2.69 3.18c2.18 3.37 5.49 8.45 12.42 8.46h11.63a5.83 5.83 0 005.82-5.81v-11.61c0-6.94-5.29-10.38-8.46-12.43-1.79-1.17-3.16-2.11-3.16-2.69s1.37-1.51 3.16-2.67c3.17-2.06 8.47-5.49 8.47-12.43s-5.08-10.25-8.45-12.45c-1.8-1.16-3.17-2.09-3.17-2.67s1.38-1.52 3.17-2.69c3.37-2.18 8.46-5.49 8.47-12.41s-5.09-10.25-8.46-12.45c-1.79-1.16-3.17-2.1-3.16-2.68s1.37-1.51 3.17-2.68c3.37-2.19 8.46-5.5 8.46-12.42s-5.08-10.24-8.45-12.44c-1.8-1.16-3.17-2.1-3.17-2.68s1.37-1.52 3.17-2.69c3.37-2.19 8.46-5.49 8.47-12.42S186.87 44.15 183.5 42c-1.79-1.17-3.17-2.11-3.17-2.69s1.38-1.55 3.18-2.72z" fill="#ffe895"/><path d="M183.51 36.59c3.37-2.19 8.46-5.5 8.46-12.42V12.54a5.8 5.8 0 00-5.81-5.81h-11.63c-6.94 0-10.24 5.08-12.43 8.45-1.17 1.79-2.11 3.16-2.69 3.16s-1.52-1.37-2.68-3.16c-2-3.17-5.49-8.47-12.43-8.47s-10.25 5.08-12.45 8.45c-1.16 1.79-2.1 3.16-2.68 3.16s-1.51-1.37-2.68-3.17c-2.19-3.36-5.5-8.46-12.43-8.46s-10.24 5.08-12.43 8.45c-1.17 1.79-2.11 3.16-2.69 3.16s-1.52-1.37-2.68-3.17c-2.19-3.36-5.5-8.46-12.43-8.46s-10.26 5.08-12.45 8.45c-1.17 1.79-2.1 3.16-2.68 3.16S67.18 16.9 66 15.1c-2.19-3.37-5.5-8.46-12.43-8.46s-10.24 5.08-12.43 8.44c-1.14 1.8-2.14 3.17-2.68 3.17s-1.46-1.37-2.68-3.17c-2.19-3.37-5.5-8.46-12.43-8.46H11.72a5.81 5.81 0 00-5.82 5.8V24c0 6.94 5.29 10.38 8.46 12.43 1.79 1.17 3.16 2.11 3.16 2.69s-1.37 1.52-3.16 2.68c-3.17 2-8.47 5.49-8.48 12.43S11 64.52 14.34 66.71c1.8 1.16 3.17 2.1 3.17 2.68s-1.38 1.52-3.18 2.68C11 74.26 5.87 77.56 5.87 84.49S11 94.74 14.33 96.93c1.79 1.17 3.16 2.11 3.16 2.68s-1.37 1.52-3.17 2.68c-3.37 2.19-8.46 5.5-8.46 12.43s5.08 10.24 8.45 12.43c1.8 1.17 3.17 2.11 3.17 2.69s-1.38 1.52-3.17 2.68c-3.37 2.19-8.46 5.49-8.47 12.42s5.09 10.24 8.46 12.44c1.79 1.17 3.17 2.11 3.17 2.68s-1.38 1.52-3.18 2.69c-3.37 2.19-8.46 5.49-8.46 12.42v11.62a5.83 5.83 0 005.82 5.82h11.62c6.94 0 10.38-5.29 12.44-8.45 1.16-1.8 2.1-3.17 2.68-3.17s1.51 1.38 2.68 3.16c2 3.17 5.49 8.47 12.43 8.48s10.25-5.09 12.45-8.46c1.16-1.79 2.1-3.16 2.67-3.16s1.53 1.38 2.69 3.18c2.19 3.36 5.5 8.45 12.43 8.46s10.25-5.09 12.44-8.45c1.17-1.8 2.11-3.17 2.68-3.17s1.52 1.38 2.69 3.18c2.19 3.36 5.5 8.45 12.43 8.46s10.24-5.09 12.44-8.45c1.16-1.8 2.1-3.17 2.68-3.17s1.52 1.38 2.68 3.18c2.19 3.36 5.5 8.45 12.43 8.46s10.25-5.09 12.44-8.45c1.17-1.79 2.11-3.17 2.69-3.17s1.52 1.38 2.69 3.18c2.18 3.37 5.49 8.45 12.42 8.46h11.63a5.83 5.83 0 005.82-5.81v-11.61c0-6.94-5.29-10.38-8.46-12.43-1.79-1.17-3.16-2.11-3.16-2.69s1.37-1.51 3.16-2.67c3.17-2.06 8.47-5.49 8.47-12.43s-5.08-10.25-8.45-12.45c-1.8-1.16-3.17-2.09-3.17-2.67s1.38-1.52 3.17-2.69c3.37-2.18 8.46-5.49 8.47-12.41s-5.09-10.25-8.46-12.45c-1.79-1.16-3.17-2.1-3.16-2.68s1.37-1.51 3.17-2.68c3.37-2.19 8.46-5.5 8.46-12.42s-5.08-10.24-8.45-12.44c-1.8-1.16-3.17-2.1-3.17-2.68s1.37-1.52 3.17-2.69c3.37-2.19 8.46-5.49 8.47-12.42S186.87 44.15 183.5 42c-1.79-1.17-3.17-2.11-3.17-2.69s1.38-1.55 3.18-2.72z" stroke-miterlimit="10" stroke="#ffb16c" stroke-width="3" fill="none"/></g><rect x="32.44" y="33.24" width="132.92" height="132.86" rx="18.58" stroke-miterlimit="10" stroke="#ffb16c" stroke-width="3" fill="#ffe895"/><path class="af8b1854-7824-41cf-9f3f-29ef8f306a07" d="M133.8 81.86a19.49 19.49 0 00-12 3.87c-1.93 1.29-2.9 1.93-5.5 1.93s-3.57-.65-5.5-1.93a20.3 20.3 0 00-23.9 0c-1.9 1.27-2.85 1.91-5.45 1.91S77.89 87 76 85.7a19.5 19.5 0 00-12-3.89M133.14 101.14a19.49 19.49 0 00-12 3.88c-1.93 1.28-2.9 1.92-5.5 1.92s-3.57-.64-5.5-1.93a20.34 20.34 0 00-23.9 0c-1.93 1.29-2.89 1.93-5.49 1.93s-3.56-.65-5.49-1.94a19.57 19.57 0 00-11.94-3.89M133.5 119.49a19.56 19.56 0 00-12 3.87c-1.93 1.29-2.9 1.93-5.5 1.93s-3.57-.64-5.5-1.93a20.34 20.34 0 00-23.9 0c-1.93 1.29-2.89 1.93-5.49 1.93s-3.56-.65-5.49-1.94a19.57 19.57 0 00-11.94-3.89"/></svg> </span> </span> </button> <div class="c-accordion__content u-flow"> Each lesson is around <strong>10–20 mins long</strong>, with examples, guidelines and checklists to keep in mind when designing and building interfaces. You can <strong>watch lessons in any order</strong>, and use them as references for your ongoing projects. </div> </li> <li> <button type="button" class="c-accordion__trigger" data-food="beetroot"> <span class="c-twi c-twi--left" ><span>Quality recordings & subtitles</span> <span class="c-icon-wrapper"> <svg id="a2d135fa-de7d-4472-b230-398e34c0dfd4" data-name="video-tomato" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.b5864b43-1f8b-458e-9c21-67a077e94ec5{stroke:#fff8ec;stroke-width:3px;fill:none;stroke-linecap:round;stroke-linejoin:round}</style></defs><ellipse cx="100" cy="100" rx="96.08" ry="96.03" stroke="#fff8ec" stroke-width="3" fill="#9683ba" stroke-miterlimit="10"/><ellipse class="b5864b43-1f8b-458e-9c21-67a077e94ec5" cx="100" cy="100" rx="41.35" ry="41.33"/><ellipse cx="100" cy="100" rx="55.61" ry="55.59" stroke-dasharray="0 7.6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="#fff8ec" stroke-width="3"/><path class="b5864b43-1f8b-458e-9c21-67a077e94ec5" d="M91.11 82.89v34.22L116.28 100 91.11 82.89z"/></svg> </span> </span> </button> <div class="c-accordion__content u-flow"> All video lessons are recorded in <strong>high quality</strong> and include full captioning in English. </div> </li> <li> <button type="button" class="c-accordion__trigger" data-food="bottle"> <span class="c-twi c-twi--left" ><span>Live sessions and Q&A</span> <span class="c-icon-wrapper"> <svg id="bb1588f2-5894-443b-b5ae-2f75b16af9ce" data-name="faq-bottle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.ff805034-a35b-463c-8fe5-66ca419ff559{fill:#d9dacb;stroke:#9da2a7;stroke-miterlimit:10;stroke-width:3px}.fd5e4055-5d09-465b-af58-f13f635ee00d{fill:#548f9c}</style></defs><path class="ff805034-a35b-463c-8fe5-66ca419ff559" d="M78.37 37.14v21H64.16a23 23 0 00-23 23V193.4H159V81.08a23 23 0 00-23-23h-14.19V36.15"/><path d="M121.81 23.67V8H78.37v16.41" fill="#ffe895" stroke-miterlimit="10" stroke-width="3" stroke="#9da2a7"/><path class="ff805034-a35b-463c-8fe5-66ca419ff559" d="M64.89 24.17h70.4v11.98h-70.4z"/><path d="M123.8 149.46a31.38 31.38 0 10-12.24 8.63l16.17 6.28z" fill="#92cac4" stroke="#548f9c" stroke-miterlimit="10" stroke-width="3"/><circle class="fd5e4055-5d09-465b-af58-f13f635ee00d" cx="85.86" cy="128.81" r="3.74"/><circle class="fd5e4055-5d09-465b-af58-f13f635ee00d" cx="100.09" cy="128.81" r="3.74"/><circle class="fd5e4055-5d09-465b-af58-f13f635ee00d" cx="114.32" cy="128.81" r="3.74"/></svg> </span> </span> </button> <div class="c-accordion__content u-flow"> Twice a year you can participate in a deep-dive <a href='https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman/' class='u-link u-sans u-strong u-white-link'>live online UX training</a>, with exercises, challenges and groupwork, <em>live</em>. You can also <strong>ask all your questions directly</strong>, and get your work reviewed by peers and Vitaly. You get a <strong>UX certificate</strong> as well. </div> </li> <li> <button type="button" class="c-accordion__trigger" data-food="leaf"> <span class="c-twi c-twi--left" ><span>Up-to-date UI & UX checklists</span> <span class="c-icon-wrapper"> <svg data-name="checklist-leaf" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M161 37.63s47 7.16 21.19 32.43c-17 16.66-44.45 21.41-34 23.91 36.13 8.59 32.93 43.44 3.71 46.56s-52-5.59-50.16.33c0 0 31.93 6.78 28.83 28-2.22 15.19-13.39 22.16-50 14.12s-49-4.92-62.68 9.64c13.64-14.56 13.7-29.22 3.29-65.25S17 79.78 32 76.58c12.63-2.69 21.28 10.59 26.17 21.64a2.66 2.66 0 005.05-1.53c-2-11.32-4.93-27.46-4.28-43.24 1.2-29.36 35.78-34.83 46.72.64 3.18 10.3 6.12-17.4 21.64-35.44C150.82-8.72 161 37.63 161 37.63z" stroke="#548f9c" stroke-linecap="round" fill="#92cac4" stroke-linejoin="round" stroke-width="3"/><path d="M147.44 52.56c-15.18 31.65-53.15 88.36-127.59 138.09" fill="none" stroke-miterlimit="10" stroke-width="1.5" stroke="#548f9c" stroke-linecap="round"/></svg> </span> </span> </button> <div class="c-accordion__content u-flow"> You also receive a <strong>165-pages deck with UI/UX checklists</strong>. The deck includes useful questions, pointers and <strong>best practices</strong> to bring up early to avoid issues down the line. Updated annually. For you, free of charge. </div> </li> </ul> </aside> </div> </section> <aside class="o-slat c-cta u-wrap u-relative"> <div class="c-cta__content anim-slat"> <figure class="c-cta__image"> <picture> <source srcset="/static/img/checklists-hi-res.avif" type="image/avif" /> <source srcset="/static/img/checklists.webp" type="image/webp" /> <img src="/static/img/checklists-hi-res.png" width="243" height="327" loading="lazy" decoding="async" alt="A deck of 165 cards for everything to keep in mind about interface design." /> </picture> </figure> <div class="u-flow"> <h2 class="c-h c-h-4">Bonus: Life-Time Access to UX Checklists!</h2> <div class="o-prose o-prose--primary-links"> <strong>Never forget important details</strong>. All the fine little details that make or break UIs — in one single deck of <strong>165 cards</strong>. No expiry. Updated annually. </div> </div> </div> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--spark c-cta-spark-1"> <use xlink:href="/static/svg/sprite.svg#spark"></use> </svg> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--spark c-cta-spark-2"> <use xlink:href="/static/svg/sprite.svg#spark"></use> </svg> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--spark c-cta-spark-3"> <use xlink:href="/static/svg/sprite.svg#spark"></use> </svg> </aside> <section class="o-slat c-image-bleed" id="about-the-course"> <div class="u-wrap c-image-bleed__wrapper"> <div class="c-image-bleed__content u-flow"> <svg data-name="cutlery" xmlns="http://www.w3.org/2000/svg" width="54" height="65" viewBox="0 0 54 65"><path fill="#9683ba" stroke="#C9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" d="M18.71 24.27c3.15-2.21 3.91-9.08.38-14.74C15.65 4 10.53 1 7.18 2.5z"/><path fill="none" stroke="#C9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" d="M39.88 1.45l-4.07 7.63c-2.24 4.21-1.25 9.11 2.21 11s8.08-.09 10.32-4.3c.08-.14 4-7.48 4-7.64M46.13 4.77l-2.54 4.78"/><path fill="#9683ba" stroke="#C9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" d="M49.22 13.8L36.78 7.19l-1 1.89c-2.24 4.21-1.25 9.11 2.21 11s8.08-.09 10.32-4.3z"/><path fill="none" stroke="#C9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" d="M39.67 39.38h12.68M14.31 39.38H1.63M6.99 2.55l32 61M37.81 19.89L15 63.55"/></svg> <h1 class="c-h c-h-6">Add-on: Live UX training. Deep-dive sessions with 1:1 feedback & UX certification.</h1> <div class="o-prose o-prose--primary-links"> <p>In a 4-weeks sprint, you’ll learn how to deal with <strong>real-life UX challenges</strong> from the ground up. You’ll be designing <strong>complex interfaces</strong>, receive feedback and work with Vitaly and people around the world.</p> <p>Every week, we’ll host <strong>2×2.5h-long</strong> live sessions on:</p> <ul> <li><strong>Real-life UX challenges</strong>,</li> <li><strong>Full UX workflow</strong>, from start to finishg,</li> <li><strong>UX deep dives</strong> and case studies,</li> <li>Design reviews and revisions</li> <li>Personal 1:1 feedback with Vitaly.</li> </ul> <p>You’ll have enough time to ask all your questions and learn at your own pace. And: you can get a UX certificate as well. <a class="u-white-link" href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman/">Check the next UX training.</a></p><p><a href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman/" class="c-button c-button--secondary c-button--content">Next UX training: Mar 7 – Apr 7, 2025 <span><svg style="-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15));filter: drop-shadow(1px 1px 1px rgba(0,0,0,.15));" xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="18 19 1300 1000" id="external-link" fill="currentColor" stroke="none"><g transform="matrix(1,0,0,-1,30.372881,1426.9492)"><path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"></path></g></svg><br><small class="c-button__caption">(Can’t make it? Mark Oct 10 – Nov 7, 2025)</small></span></a></p> </div> </div> <figure class="c-image-bleed__image"> <picture> <source type="image/avif" srcset="/static/img/live-training--mobile.avif 540w" media="(max-width: 750px)" sizes="(max-width: 750px) 100vw, 100vw"> <source type="image/avif" srcset="/static/img/live-training.avif 940w" media="(min-width: 750px)" sizes="(min-width: 750px) 100vw, 100vw"> <source srcset="/static/img/live-training.jpg 540w" media="(max-width: 750px)" sizes="(max-width: 750px) 100vw, 100vw"> <source srcset="/static/img/live-training.jpg 940w" media="(min-width: 750px)" sizes="(min-width: 750px) 100vw, 100vw"> <img src="/static/img/live-training.jpg" width="1200" height="800" decoding="async" loading="lazy" alt="Sneak peek into the video training sessions." /> </picture> <a href="#video-modal-677886175" id="video-modal-trigger-677886175" class="c-button c-button--split c-image-bleed__trigger"> <span> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--play "> <use xlink:href="/static/svg/sprite.svg#play"></use> </svg> </span> <span>What's UX training like?</span> </a> </figure> </div> </section> <section class="c-modal" id="video-modal-677886175"> <div class="c-modal__wrapper"> <header class="c-header"> <div class="c-header__wrap u-wrap"> <a class="c-header__logo" href="/" alt="Home"> <figure class="c-header__logo-smash"> <div class="c-header__logo-aspect"> <svg xmlns="http://www.w3.org/2000/svg" width="44" height="87" viewBox="0 0 44 87"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="99.9%"><stop offset="0%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".3"/><stop offset="2%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".3"/><stop offset="28%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".1"/><stop offset="48%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/><stop offset="60%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".2"/><stop offset="14%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".1"/><stop offset="36%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/><stop offset="50%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/></linearGradient></defs><g fill="none" fill-rule="nonzero"><g fill="var(--smashing-logo, #FFF8EC)"><path d="M25.7 28.2c-2-1.5-4.2-2.7-6.5-3.5-1.8-.8-3.5-1.7-5-2.7-3.8-2.7-5.7-5.9-5.7-9.8A10 10 0 0111.4 5l-8 1.9A4.3 4.3 0 000 11.9l6.7 28.7a4.3 4.3 0 005.1 3.3l3.3-.8H15c-2.2-.7-4.4-1.7-6.4-2.8l3.5-7.7c2.7 2.3 6.2 3.5 9.7 3.5 3.8 0 5.7-1.4 5.7-4a5 5 0 00-1.8-3.9zM43.9 32L37.2 3.5A4.3 4.3 0 0032.1 0l-4.9 1.1a28.5 28.5 0 018 2.6l-2.9 7.5c-2.1-1.8-5-2.7-8.8-2.7-3.4 0-5 1.3-5 4 0 1.1.6 2.2 1.6 2.8 2.2 1.4 4.6 2.6 7.1 3.4 2.2.8 4.2 2 6 3.4.7.5 1.3 1.2 1.9 1.8 1.6 2.2 2.4 4.8 2.4 7.4 0 2.6-.8 5-2.3 7.1l5.4-1.2A4.3 4.3 0 0044 32z"/></g><path fill="url(#a)" d="M21.8 8c-3.5 0-7 1.1-9.7 3.4L8.6 3.7c2-1.2 4.2-2 6.4-2.8h.2L12 0c-2.3-.5-4.6 1-5.1 3.3L0 32c-.5 2.3 1 4.6 3.3 5.2l8 1.8a9.6 9.6 0 01-3-7.3c0-3.9 2-7.1 5.7-9.7 1.6-1.1 3.2-2 5-2.7 2.4-.9 4.6-2 6.6-3.6a5 5 0 001.7-3.8c0-2.7-1.8-4-5.6-4z" transform="translate(0 43)"/><path fill="url(#b)" d="M40.6 6.7l-5.4-1.2c1.5 2 2.4 4.6 2.3 7.1a11.6 11.6 0 01-4.3 9.3 22.2 22.2 0 01-6 3.3c-2.5.9-4.8 2-7 3.4-1 .6-1.6 1.6-1.7 2.8 0 2.6 1.7 4 5 4 3.8 0 6.7-1 8.8-2.7l2.8 7.5a26.4 26.4 0 01-7.8 2.6l4.8 1c2.3.6 4.6-.8 5.2-3.2L43.9 12a4.3 4.3 0 00-3.3-5.2z" transform="translate(0 43)"/></g></svg> </div> </figure> <figure class="c-header__logo-smart"> <div class="c-header__logo-aspect"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142 41" id="smart-logo" fill="none" stroke="none"> <defs> <path id="a" d="M0 0h5.7v8H0z"/> </defs> <g fill="none" fill-rule="evenodd"> <path class="title" d="M3.4 0c.6 0 1 0 1.5.3.4.1.7.3 1 .6.3.2.4.5.5.8.2.3.2.6.2.9 0 .3-.1.4-.5.4h-.3l-.2-.4-.2-.6-.5-.5a2 2 0 00-.6-.4l-1-.1h-.8l-.6.4-.4.4-.1.6V3l.4.4c.2.1.4.3.7.3l1 .3 1.6.3 1 .5.4.6.2.7c0 .3 0 .5-.2.8 0 .3-.3.5-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5C.6 7.4.4 7 .2 6.9L0 6l.1-.3.3-.1h.3L1 6l.2.3.3.4.5.4.4.2.5.2h.7c.7 0 1.2 0 1.5-.3.4-.2.5-.5.5-.9v-.5L5 5.4 4.3 5a37.8 37.8 0 00-2.6-.6L1 4c-.3-.2-.4-.5-.5-.7a2.3 2.3 0 010-1.8l.7-.8 1-.5L3.3 0M11.5.1h.4c.2 0 .2.1.3.2l.2.2.1.4A87.5 87.5 0 0015 6.6l.1-.4A157.2 157.2 0 0017.2.3l.3-.1h1.1l.1.5V5.3l.1 1V8l-.6.1-.4-.1v-.8-1-1.3a695.7 695.7 0 010-2.5v-.6-.2h-.1-.1l-.2.5-2 5.4-.2.4-.5.2c-.2 0-.4 0-.5-.2A44 44 0 0112 2.1l-.1-.3a5.1 5.1 0 00-.1-.3h-.2v.1a8 8 0 000 .6 47 47 0 000 4 66.5 66.5 0 000 1.9h-.9v-.4a34.7 34.7 0 010-2.9v-.6a56.1 56.1 0 000-3V.6l.1-.4.7-.2M24.8 4.4a3.2 3.2 0 000 .2l.1.2h2.3s.2 0 .2-.2l-.1-.2a135 135 0 00-.7-2l-.2-.7-.1-.2h-.5v.2a16.6 16.6 0 00-.4 1l-.2.3a30.7 30.7 0 01-.4 1.4m-2.4 3.4v-.1l.1-.3a12.6 12.6 0 01.6-1.6l.5-1.2A159.8 159.8 0 0125.4.3L26 0c.3 0 .6 0 .7.2l.5.7.2.6a173.2 173.2 0 011.1 3l.4 1.2a170.8 170.8 0 00.7 2.2l-.4.1h-.7l-.2-.4a67.8 67.8 0 01-1-2.2H24.5l-.1.2-.7 2c0 .2-.1.3-.2.3h-.8c-.2 0-.3 0-.3-.2M34.5 4v.2l.3.2h2.5l.8-.5.4-.5a1.7 1.7 0 000-1.4l-.5-.6-.8-.3a4 4 0 00-1-.2h-1l-.5.2s-.2 0-.2.2v.5a19.3 19.3 0 010 2v.1zm4.4 2.4l.5.6.4.2.3.2V8l-.5.1c-.3 0-.6 0-.8-.2l-.6-.5-.4-.7a18.9 18.9 0 01-.6-1l-.2-.3-.4-.1a21.9 21.9 0 01-1.4 0H35l-.2-.1h-.3v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.1.8l-.5.1h-.4l-.1-.4v-1a147.5 147.5 0 010-6.1c0-.2.2-.3.4-.4l.8-.2H36a6 6 0 011.7.2l1.2.6c.3.2.5.5.6.8.2.4.2.7.2 1l-.1 1-.4.5-.4.4a3.6 3.6 0 01-.8.4h-.2v.2c.1 0 .2 0 .3.2l.3.3.5.8zM43.1.1h.4a53 53 0 011.8 0h1.9a84.2 84.2 0 001.6 0c.3 0 .4.2.4.5V1h-2.3l-.2.2-.1.2v.4a81.7 81.7 0 000 2v1a89 89 0 000 3.2l-.2.1h-.8l-.1-.4V4a49.6 49.6 0 010-2.9h-2.3L43 1V.6.2h.2M61 .1c.2 0 .4.2.4.5V8l-.2.1h-.8l-.1-.4v-3a143.2 143.2 0 000-2.5v-.8a41.3 41.3 0 010-1.2H61zM72.3 3.4a121.4 121.4 0 000 2.5v1a53.7 53.7 0 01-.1 1l-.6.2h-.3L71 8l-.2-.2a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.3a3.3 3.3 0 000 .4V8l-.4.1h-.6V6.8a49 49 0 010-1.6V3a80.8 80.8 0 000-1.8V.8l.1-.5.5-.1.5.1.3.3a57.2 57.2 0 012.3 3.6l.9 1.3a43.3 43.3 0 00.9 1 42.6 42.6 0 000-5 39.8 39.8 0 010-1.2h.6c.2 0 .4 0 .4.3v2.8zM76.1.1h.4a53 53 0 011.8 0h1.9a84.2 84.2 0 001.6 0c.3 0 .4.2.4.5V1h-2.4l-.2.2V1.8a81.7 81.7 0 000 2v1a89 89 0 000 3.2l-.2.1h-.8l-.1-.4V4a49.6 49.6 0 010-2.9h-2.3l-.3-.1-.1-.4V.2h.3M91 4.3v.4H87l-.3.2V5a12.3 12.3 0 010 .7v.9l.1.4h1.4a50 50 0 001.6 0h1l.3.2.1.3V8l-.4.1h-.2a21.3 21.3 0 01-1.1 0H88a55.5 55.5 0 00-1.5 0h-.4l-.5-.1v-.4a14.6 14.6 0 010-.8V6v-.8a246.2 246.2 0 010-2.3V2a246.7 246.7 0 000-1.8h.5a37 37 0 003.2 0H91.2V1h-.4a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1V4H90.6l.3.1.1.3M96.3 4v.2l.3.2h2.5l.8-.5.4-.5a1.7 1.7 0 000-1.4l-.5-.6-.7-.3A4 4 0 0098 .9h-1l-.4.2c-.2 0-.2 0-.2.2v.5a19.3 19.3 0 01-.1 2v.1zm4.5 2.4l.4.6.4.2.3.2.1.3-.1.3-.5.1c-.3 0-.5 0-.7-.2-.3-.1-.4-.3-.6-.5l-.5-.7a18.9 18.9 0 01-.6-1l-.2-.3-.3-.1a21.9 21.9 0 01-1.4 0h-.3l-.2-.1h-.2v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.2.8l-.4.1h-.5V6.6a147.5 147.5 0 010-6.1c0-.2.1-.3.3-.4l.8-.2H98a6 6 0 011.7.2l1.1.6.7.8.2 1c0 .4 0 .7-.2 1 0 .2-.2.4-.3.5l-.5.4a3.6 3.6 0 01-.8.4h-.1v.2l.2.2.4.3.5.8zM111.2 4.5v.3l-.4.1h-3.7l-.3.1v2.7l-.1.3-.5.1h-.5v-.4a45.1 45.1 0 010-4.6v-1a455.7 455.7 0 000-1.8l.5-.2a51.9 51.9 0 013.1 0h1.6l.3.1.1.4-.1.4h-.4a19.1 19.1 0 01-1.7 0 30.5 30.5 0 00-2.2.1V3.7c0 .3 0 .4.4.4h3.8l.1.4M116.6 4.4a3.2 3.2 0 000 .2l.1.2h2.3c.1 0 .2 0 .2-.2v-.2a134.8 134.8 0 00-.8-2l-.2-.7v-.2h-.5l-.1.2a16.6 16.6 0 00-.4 1l-.1.3a30.7 30.7 0 01-.5 1.4m-2.3 3.4v-.1-.3a12.6 12.6 0 01.6-1.6l.5-1.2.4-1.1a159.8 159.8 0 011.4-3.2l.7-.2c.4 0 .6 0 .8.2l.4.7.2.6a173.1 173.1 0 011.1 3l.4 1.2a170.8 170.8 0 00.7 2.2l-.3.1h-.8l-.2-.4a67.8 67.8 0 01-1-2.2H116.3l-.1.2-.7 2c0 .2 0 .3-.2.3h-.8c-.1 0-.2 0-.2-.2M131.8 5.6l.3.1.1.3c0 .2 0 .4-.2.6 0 .3-.3.6-.5.8l-1.1.7-1.7.2c-.7 0-1.3 0-1.7-.3a3.3 3.3 0 01-2-2.2 5.8 5.8 0 01.1-3.3c.2-.5.4-.9.8-1.3a3.6 3.6 0 012.8-1.2 4 4 0 011.7.3c.4.2.8.4 1 .7a2.6 2.6 0 01.8 1.7c0 .3-.2.4-.5.4h-.4a1 1 0 01-.2-.5 3 3 0 00-.9-1.2c-.3-.3-.8-.4-1.4-.4-.5 0-1 0-1.3.2a2.8 2.8 0 00-1.5 2.2 5 5 0 00.2 2.2c.1.4.3.7.6 1 .2.3.5.5.9.6.3.2.7.2 1 .2l1-.1c.3 0 .6-.2.7-.3l.5-.4.3-.5.3-.4h.3M141.7 4.3v.4h-4l-.2.2V5a12.2 12.2 0 010 .7v1.3h1.5a50 50 0 001.6 0h1l.3.2.1.3-.1.4-.3.1h-.3a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.5 0h-.4l-.5-.1v-.4a14.6 14.6 0 010-.8V6v-.8a246.4 246.4 0 010-2.3V2a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.2.4c0 .2 0 .3-.2.4h-.3a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1V4H141.3l.3.1v.3M6 21.2c.3-.3.5-.6.6-1l.1-1.5-.1-1-.6-1a3 3 0 00-1-.8l-1.6-.2a13.4 13.4 0 00-1.2 0L2 16v.2a48 48 0 000 5v.5c0 .2.1.3.3.3l1 .1a10.4 10.4 0 001.5-.1c.2 0 .4-.2.5-.3.2 0 .4-.2.6-.4m-3-6.5c1 0 1.7 0 2.3.3l1.6.8c.4.4.6.8.8 1.3.2.5.3 1 .3 1.7v.8a3.4 3.4 0 01-.6 1.4l-.5.7-1.4 1-2 .2a21.6 21.6 0 01-2-.1 1 1 0 01-.4-.2v-.1L.8 22a27.3 27.3 0 010-2.3 96.9 96.9 0 000-4.2V15l.3-.3H2l1-.1M17.2 19v.4h-3.9l-.3.1v.3a12.3 12.3 0 010 .7v1.3h1.5a50 50 0 001.6 0h1l.3.1.1.4-.1.4h-.6a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.5 0h-.9v-.4a14.6 14.6 0 010-.9v-.7-.7a246.2 246.2 0 010-2.3v-1a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.2.3-.1.5H17a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1v2.7l.3.1h3.4l.3.1.1.3M24.4 14.7c.6 0 1 0 1.5.2l1 .7.5.8.2.9c0 .3-.2.4-.5.4l-.3-.1-.2-.3-.3-.6c0-.2-.2-.4-.4-.6a2 2 0 00-.6-.3l-1-.2-.8.1c-.3.1-.5.2-.6.4-.2 0-.3.2-.4.4l-.1.6v.6l.4.4.7.3 1 .3c.6 0 1.1.2 1.5.3l1 .5.5.5.2.8-.2.8-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5-.8-.8-.2-.7.1-.3.3-.1h.3l.2.2.2.3.3.4.4.4.5.2.5.1.7.1c.7 0 1.2-.1 1.5-.3.3-.2.5-.5.5-1l-.1-.4c0-.1-.2-.3-.4-.3l-.7-.3a37.8 37.8 0 00-2.6-.7l-.8-.5c-.3-.2-.4-.4-.5-.6a2.3 2.3 0 010-1.8l.6-.8 1-.5 1.4-.2M32.4 14.8c.3 0 .4.2.4.5V22.7h-.2l-.3.1h-.5v-3.4a143.2 143.2 0 00-.1-2.5V16a41.3 41.3 0 010-1c.1-.2.3-.2.4-.2h.3zM40.8 15.6c-.5 0-1 .1-1.3.3a2.7 2.7 0 00-1.1 1l-.3.5-.2.7v.9c0 .4 0 .9.2 1.2a2.7 2.7 0 001.6 1.6 3.4 3.4 0 002.3 0c.3 0 .6-.2.8-.4l.4-.5.1-.5V20H41l-.2-.1v-.3-.4h2.8l.6.1.2.6a2.9 2.9 0 01-.9 2c-.2.3-.6.5-1 .7-.5.2-1 .3-1.7.3s-1.2-.2-1.7-.4a3.9 3.9 0 01-2.4-3.7c0-.5 0-1 .2-1.5l.6-1.2c.4-.5.8-1 1.3-1.2.6-.2 1.2-.3 2-.3a3.4 3.4 0 012.6.9l.5.8.3.9-.1.4-.4.1-.4-.1a1 1 0 01-.2-.4 3 3 0 00-.9-1.2c-.3-.3-.8-.5-1.4-.5M54.8 18a121.4 121.4 0 000 2.5v1a53.7 53.7 0 010 1.1l-.6.2H54l-.3-.2-.2-.1a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.2a3.3 3.3 0 000 .5v5.4h-1v-1.2a49 49 0 010-1.6v-2.3a80.8 80.8 0 000-1.7v-.4-.5l.6-.1h.5l.3.4a57.2 57.2 0 012.3 3.5l.8 1.3a43.3 43.3 0 001 1.2V21a42.6 42.6 0 00-.1-4.8 39.8 39.8 0 010-1.3l.4-.1h.3c.2 0 .3.1.3.4V18zM69.6 19.2c.5 0 .9 0 1.1-.2.3 0 .6-.2.7-.3l.4-.6.1-.7c0-.6-.2-1-.7-1.3-.4-.3-1-.5-1.9-.5h-.8l-.5.1-.1.2v.5a21.3 21.3 0 01-.1 2.2v.4l.4.1h1.4m3.4-1.8c0 .4 0 .8-.2 1a2 2 0 01-.6 1 3 3 0 01-1 .5l-1.6.1a28.8 28.8 0 01-1.8 0v.3a38.2 38.2 0 000 2.2l-.1.3h-.9l-.1-.3a41 41 0 000-1.4 110.9 110.9 0 010-3.1v-.6a95 95 0 00.1-2.2l.4-.2.7-.2h1.4c.6 0 1.1 0 1.6.2.5 0 .9.3 1.2.5a2.3 2.3 0 011 2M78.2 19a3.2 3.2 0 000 .3c0 .1 0 .2.2.2h2.2l.2-.2V19a134.9 134.9 0 00-.7-2l-.3-.7v-.2l-.3-.1h-.2l-.1.3a16.6 16.6 0 00-.4 1l-.1.3a30.7 30.7 0 01-.5 1.4M76 22.5v-.2-.2a12.6 12.6 0 01.7-1.6l.4-1.3.4-1a159.8 159.8 0 011.4-3.3l.7-.1c.4 0 .6 0 .8.2.2.1.3.4.4.7l.2.6a173.2 173.2 0 011.2 3 170.8 170.8 0 001 3.4H82l-.1-.3a67.8 67.8 0 01-1-2.2H78 78v.2l-.8 2c0 .1 0 .3-.2.3h-.7c-.2 0-.3 0-.3-.2M85.7 14.8h.4a53 53 0 011.7 0h2a84.2 84.2 0 001.6 0c.2 0 .4.2.4.5l-.1.4h-2.3l-.2.1v.7a81.7 81.7 0 000 2v1a89 89 0 00-.1 3.2l-.2.1h-.8v-4.1a49.6 49.6 0 01-.1-2.9h-2.2l-.4-.1v-.4-.4h.3M94.8 14.8h.4a53 53 0 011.7 0h2a84.2 84.2 0 001.6 0c.2 0 .4.2.4.5l-.1.4h-2.3l-.2.1v.7a81.7 81.7 0 000 2v1a89 89 0 00-.1 3.2l-.2.1h-.8v-4.1a49.6 49.6 0 01-.1-2.9h-2.3l-.3-.1v-.4-.4h.3M109.7 19l-.1.4h-3.9l-.2.1v.3a12.2 12.2 0 010 .7v1.3h1.5a50 50 0 001.5 0h1l.4.1v.8h-.6a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.6 0h-.8v-.4a14.6 14.6 0 010-.9v-.7-.7a246.4 246.4 0 010-2.3v-1a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.1.3v.5h-.4a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1l-.1.3V18.5l.4.1h3.4l.3.1v.3M115 18.6v.3l.3.1.5.1h.9l1-.1.8-.4.5-.5a1.7 1.7 0 000-1.4l-.5-.6-.8-.4a4 4 0 00-1-.1h-1l-.5.1-.2.2V16.5a19.3 19.3 0 010 2v.1zm4.4 2.5l.5.5.4.3.3.2v.6h-.5l-.8-.1-.6-.5-.4-.7a18.8 18.8 0 01-.6-1l-.2-.3-.4-.1a21.9 21.9 0 01-1.4 0l-.2-.1h-.5v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.1.8l-.5.1-.4-.1-.1-.3v-1a147.5 147.5 0 010-6.2l.4-.3.8-.2h1.4a6 6 0 011.7.2c.5.1.9.3 1.2.6.3.2.5.5.6.8.2.3.2.7.2 1l-.1.9-.4.6-.4.4a3.6 3.6 0 01-.9.3l-.1.1v.2l.3.1.3.4.5.8zM130.8 18a121.4 121.4 0 000 2.5v1a53.7 53.7 0 010 1.1l-.6.2h-.3l-.3-.2-.2-.1a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.2a3.3 3.3 0 000 .5v5.4h-1v-1.2a49 49 0 010-1.6v-2.3a80.8 80.8 0 000-1.7v-.4-.5l.6-.1h.5l.3.4a57.2 57.2 0 012.3 3.5l.8 1.3a43.3 43.3 0 001 1.2V21a42.6 42.6 0 00-.1-4.8 39.8 39.8 0 010-1.3l.4-.1h.3c.2 0 .3.1.3.4V18zM138.1 14.7c.7 0 1.2 0 1.6.2l1 .7.5.8.2.9c0 .3-.2.4-.5.4l-.3-.1-.2-.3-.3-.6c0-.2-.2-.4-.4-.6a2 2 0 00-.6-.3l-1-.2-.8.1-.7.4-.3.4-.2.6.1.6.4.4.7.3 1 .3c.6 0 1.1.2 1.5.3l1 .5.5.5.1.8-.1.8-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5-.8-.8-.2-.7.1-.3.3-.1h.3l.2.2.2.3.3.4.4.4.5.2.5.1.7.1c.7 0 1.2-.1 1.5-.3.3-.2.5-.5.5-1l-.1-.4c0-.1-.2-.3-.4-.3l-.8-.3a37.8 37.8 0 00-2.5-.7l-.9-.5-.4-.6a2.3 2.3 0 010-1.8l.6-.8 1-.5 1.3-.2" fill="var(--header-logo-primary)"/> <path class="author" d="M6.5 39c.3 0 .5 0 .6-.2l.3-.5.5-2.2.7-2.3v-.3-.2h-.8l-.2.5-.8 3.2a10.4 10.4 0 00-.2 1h-.1V38a8 8 0 00-.3-1 58.7 58.7 0 01-.9-3.3.8.8 0 00-.5-.2c-.2 0-.4 0-.5.2a1 1 0 00-.3.5 24.6 24.6 0 00-.8 3.7l-.1.3L3 38v-.2a10.5 10.5 0 00-.2-.8l-.9-3.3-.1-.3-.3-.1h-.4H1v.5l.2.5 1.1 4c0 .3.2.4.3.5l.6.2h.3l.2-.1.2-.3.2-.4a35.3 35.3 0 00.6-3.5l.2-.2v.2l.2.6.6 2.8c0 .3.2.6.3.7l.6.2zm3.9-6.6c.2 0 .4 0 .5-.2l.1-.5-.1-.5c-.1-.2-.3-.2-.5-.2-.3 0-.5 0-.6.2l-.2.5.2.5.6.2zm0 6.6h.3l.1-.3v-5l-.1-.3H10l-.1.3v.7a102.3 102.3 0 010 3.9V38.9l.4.1zm4.1 0l.9-.1.2-.5v-.3h-.7-.3l-.5-.1-.1-.5v-3.2-.1h1.3c.1 0 .2 0 .3-.2v-.3-.3H15a14 14 0 01-.7-.1H14 14v-1.5l-.1-.3H13V33.2l-.2.2h-.6l-.3.2v.2c0 .2 0 .3.3.3h.6l.1.2a61.4 61.4 0 010 3.8l.3.5c.2.1.3.3.5.3l.7.1zm6.6 0h.3l.1-.4v-1.2a58.6 58.6 0 010-1.5v-.5l-.1-1-.5-.8-.6-.3a3 3 0 00-.8-.1 2 2 0 00-.8.1 2 2 0 00-.5.3l-.3.3v.1h-.1V34a46.5 46.5 0 01-.1-2.8l-.4-.1-.4.1V39l.3.1h.5v-1a68.2 68.2 0 000-1.4v-1l.2-.7a1.4 1.4 0 01.9-.8h.6c.4 0 .7 0 .9.3.2.2.3.6.3 1v1.2a46.6 46.6 0 010 1.2V39h.5zm7.7 0l.4-.1.3-.4a139.5 139.5 0 002.1-6.7c0-.2 0-.3-.3-.3H31c-.2 0-.3.1-.4.4a76.8 76.8 0 00-1.3 4.4 119.3 119.3 0 01-.7 1.6l-.2-.1v-.3a60.7 60.7 0 01-1.6-4.7 210 210 0 00-.4-1.2h-.7c-.2 0-.3 0-.3.2a.8.8 0 000 .3 42.8 42.8 0 011 2.8l.2.6.2.5a386.8 386.8 0 011 2.9h.4a13 13 0 01.7.1zm4.5-6.6c.2 0 .4 0 .5-.2l.2-.5-.2-.5c-.1-.2-.3-.2-.5-.2-.3 0-.4 0-.6.2l-.1.5.1.5.6.2zm0 6.6h.3l.1-.3v-5-.3h-.8l-.1.3v.7a102.3 102.3 0 010 3.9V38.9l.4.1zm4.2 0l.8-.1.2-.5v-.3h-1L37 38l-.1-.5v-3.2-.1h1.4l.2-.2.1-.3-.1-.3H38a14 14 0 01-.8-.1H37 37v-1.5l-.1-.3H36l-.1.4v1.3l-.2.2h-.6l-.2.2-.1.2c0 .2.1.3.3.3h.6l.2.2a61.4 61.4 0 010 3.8c0 .2.1.3.3.5 0 .1.2.3.4.3l.8.1zm3.9.2l1-.2.6-.4.3-.3.2-.2v.1l.2.4.1.3.3.1h.2l.1-.2v-.4a30 30 0 000-2.4v-.4c0-.8-.2-1.4-.5-1.8-.4-.4-1-.6-1.8-.6-.5 0-.8 0-1.2.2-.3 0-.5.3-.7.4a1.7 1.7 0 00-.6 1.3l.1.4.4.2.3-.1.1-.3.2-.5.2-.5.5-.2h.6c.5 0 .8 0 1 .2.3.2.4.6.4 1V35.9l-.2.2-.5.1h-.8l-1.1.2-.7.3a1 1 0 00-.4.5l-.1.6v.5l.4.4.6.3.8.2zm.2-.8c-.4 0-.6-.1-.8-.3a.6.6 0 01-.2-.5c0-.2 0-.3.3-.5l1-.3a19.8 19.8 0 001.3-.1c.2 0 .2 0 .2.2l-.1.6-.4.4a2 2 0 01-.6.3l-.7.2zm5.5.6l.6-.1c.2-.1.3-.2.3-.4l-.1-.2-.2-.1h-.2-.2l-.3-.1v-6.7l-.2-.3-.4-.1-.3.1-.1.4v.8a163.8 163.8 0 000 5v1l.2.4.4.2.5.1zm2.7 1.8c.4 0 .8-.1 1-.4.4-.3.6-.6.7-1l1.7-5.4.1-.2v-.3-.1H52.4l-.1.2-1.2 4.2v.1h-.4v-.1l-1.4-4.3-.1-.1H48.6c-.2 0-.3 0-.3.2v.2a4.8 4.8 0 00.3.6 28 28 0 01.7 2.2 125.4 125.4 0 001.1 2.4l.2.1v.3l-.2.3-.3.2a1 1 0 01-.4 0c-.2 0-.3 0-.4.2l-.1.3.1.3.5.1zm8-1.8h.4v-2.8l.1-.1H62l.2-.1.1-.4v-.3h-3.6c-.3 0-.4-.2-.4-.4v-2.1-.3l.3-.1a21.8 21.8 0 011.8 0 25.3 25.3 0 001.5 0h.4v-.5-.3h-1.7a46.3 46.3 0 01-2.8 0h-.5v.4a39.5 39.5 0 000 3.2v.2a107 107 0 010 3.5l.4.1zm6.2 0h.4l.1-.3V36c0-.5.2-1 .5-1.3.3-.3.8-.4 1.3-.4.3 0 .5-.2.5-.5 0-.1 0-.3-.2-.3l-.4-.2c-.3 0-.6 0-.8.2a2 2 0 00-.5.4c0 .2-.2.3-.3.4l-.1.2v-.3l-.1-.7-.1-.2H64l-.3.1-.1.3v.6a86.3 86.3 0 010 3.8V39h.2l.2.1zm4.3-6.6c.2 0 .4 0 .5-.2l.2-.5c0-.2 0-.4-.2-.5-.1-.2-.3-.2-.5-.2s-.4 0-.5.2l-.2.5c0 .2 0 .3.2.5l.5.2zm0 6.6h.4v-5.3-.3h-.8v1a102.3 102.3 0 01-.1 3.9V38.9l.5.1zm4.5.1l1-.1.7-.4.5-.5v-.4c0-.3 0-.4-.3-.4-.1 0-.2 0-.3.2l-.3.3-.5.4-.8.1-.7-.1a1.6 1.6 0 01-.9-1l-.1-.7v-.2h1.2a55.2 55.2 0 011.5 0h1l.3-.2.2-.6c0-.3 0-.6-.2-.9a2.2 2.2 0 00-1.2-1.2c-.3-.2-.7-.2-1-.2a3 3 0 00-1.1.2c-.3 0-.6.2-.8.4l-.5.7a3 3 0 00-.3.9 4.7 4.7 0 000 2l.6 1 .8.5c.3.2.7.2 1.2.2zm1.3-3.5h-2.9v-.3-.4l.4-.4a1.7 1.7 0 011.2-.5c.3 0 .5 0 .7.2.2 0 .3.1.5.3l.2.4.1.4v.2l-.2.1zm4.5 3.5l1-.1.6-.4.3-.3.2-.2v.1a13.6 13.6 0 01.2.8h.7v-1.3a212 212 0 000-5.6v-.6l-.1-.4-.4-.1-.4.1v.4a46.5 46.5 0 000 2.4v.1h-.2c0-.2-.1-.3-.3-.4l-.5-.3a2.8 2.8 0 00-2 0l-.7.6c-.3.3-.4.6-.6 1l-.2 1.2c0 .5 0 .9.2 1.3l.5 1a2 2 0 001.7.7zm.3-.8c-.3 0-.5 0-.8-.2-.2 0-.4-.2-.5-.4a2 2 0 01-.3-.7l-.1-.8v-.8l.4-.7c.1-.2.3-.4.6-.5a2 2 0 011.5 0c.2 0 .4.2.5.4l.4.6v1c0 .6 0 1.2-.4 1.5-.3.4-.7.6-1.3.6zm4.7.7h.4l.1-.3v-.3a25.7 25.7 0 010-1v-1.5c0-.3 0-.6.2-.8l.3-.6c.1-.1.3-.3.5-.3l.6-.1c.3 0 .5 0 .7.3.2.2.3.6.3 1v1.1a45 45 0 000 1.4v1h.9v-3.6l.2-.5a1.2 1.2 0 01.7-.7h.6c.3 0 .6 0 .8.3.2.2.3.6.3 1v1.1a45 45 0 000 1.4v.7l.1.3h.8l.1-.2v-1.3a13.8 13.8 0 000-.8v-1.3c0-.4 0-.8-.2-1 0-.3-.2-.5-.4-.7-.1-.2-.3-.3-.5-.3l-.7-.1a2 2 0 00-1 .1 2 2 0 00-.7.7l-.2.2-.1-.2-.2-.3-.5-.4-.8-.1a1.6 1.6 0 00-1.3.5l-.3.4-.2.1H84v-.4a56.8 56.8 0 01-.2-.5h-.5l-.1.4a170.9 170.9 0 010 4.2v1l.4.1zm10.7.2l1-.2c.3-.1.5-.2.6-.4.2 0 .3-.2.4-.3l.1-.2.1.1.1.4.1.3.3.1h.3V38.4a30 30 0 000-2.4v-.4c0-.8-.1-1.4-.5-1.8-.3-.4-1-.6-1.7-.6-.5 0-1 0-1.2.2-.3 0-.6.3-.8.4a1.7 1.7 0 00-.6 1.3l.1.4.4.2.3-.1.2-.3.1-.5c0-.2.2-.3.3-.5l.4-.2h.7c.4 0 .8 0 1 .2.2.2.4.6.4 1v.4l-.1.2-.2.2-.5.1h-.8l-1 .2-.8.3a1 1 0 00-.4.5l-.1.6.1.5c0 .2.2.3.4.4.1.2.3.3.5.3l.8.2zm.2-.8c-.3 0-.6-.1-.8-.3a.6.6 0 01-.2-.5c0-.2.1-.3.3-.5l1-.3a19.8 19.8 0 001.4-.1c.1 0 .2 0 .2.2s0 .4-.2.6l-.4.4a2 2 0 01-.5.3l-.8.2zm4.8.6h.4V35.8l.2-.8.4-.6.6-.3.6-.1c.3 0 .6 0 .8.3.2.2.3.6.3 1v1.1a46.2 46.2 0 000 1.4v1l.4.1h.5v-1.6a13.8 13.8 0 000-.8v-1.3l-.1-1-.4-.7c-.2-.2-.4-.3-.7-.3l-.7-.1a2 2 0 00-.8.1 2 2 0 00-.8.7l-.2.2V34l-.1-.4-.1-.3H99l-.1.3v.1a390.2 390.2 0 010 4.2V38.9l.4.1z" fill="var(--header-logo-secondary)" fill-rule="nonzero"/> </g> </svg> </div> </figure> </a> <a href="#video-modal-trigger-677886175" class="c-modal__close"></a> </div> </header> <div class="u-wrap"> <figure class="c-embed"> <div class="c-embed__wrapper"> <iframe title="Course trailer" width="1920" height="1080" loading="lazy" decoding="async" data-src="https://player.vimeo.com/video/677886175?texttrack=en&quality=1080p&autoplay=0&loop=0&autopause=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> </div> </figure> </div> </div> <button type="button" class="c-modal__wing"></button> <button type="button" class="c-modal__wing"></button> </section> <section class="o-slat c-testimonials" id="testimonials"> <div class="u-wrap"> <header class="c-section-header c-section-header--small u-wrap u-flow--m"> <svg width="110" height="100" viewBox="0 0 110 100" class="testimonials__svg"><style>.a72b693f-2bb1-4409-a61e-b1fe6d718343,.b26f1380-bba7-4e33-8dea-2dc4ae8e1b99{fill:#bfe6c7;stroke:#82cdb2}.a303e43b-cbec-46fd-b402-3ff916a6fb9a,.a72b693f-2bb1-4409-a61e-b1fe6d718343,.ae852cf4-3a1e-4a34-9403-1d77e7931b04,.b1c669d9-357e-4a11-90f0-b71c12a1947c,.b26f1380-bba7-4e33-8dea-2dc4ae8e1b99,.bdc8176c-285d-401b-b379-daa16c715e29,.f01f16fd-b8ce-400b-96c1-ff67d9b4d8bf{stroke-miterlimit:10}.a303e43b-cbec-46fd-b402-3ff916a6fb9a,.a72b693f-2bb1-4409-a61e-b1fe6d718343,.f01f16fd-b8ce-400b-96c1-ff67d9b4d8bf{stroke-width:2px}.ae852cf4-3a1e-4a34-9403-1d77e7931b04,.b1c669d9-357e-4a11-90f0-b71c12a1947c,.b26f1380-bba7-4e33-8dea-2dc4ae8e1b99,.bdc8176c-285d-401b-b379-daa16c715e29,.f01f16fd-b8ce-400b-96c1-ff67d9b4d8bf{stroke-linecap:round}.a303e43b-cbec-46fd-b402-3ff916a6fb9a{fill:#ffa18f;stroke:#ee5b68}.f01f16fd-b8ce-400b-96c1-ff67d9b4d8bf{stroke:#ee5b68}.ae852cf4-3a1e-4a34-9403-1d77e7931b04,.b1c669d9-357e-4a11-90f0-b71c12a1947c,.bdc8176c-285d-401b-b379-daa16c715e29,.f01f16fd-b8ce-400b-96c1-ff67d9b4d8bf{fill:none}.ae852cf4-3a1e-4a34-9403-1d77e7931b04,.b1c669d9-357e-4a11-90f0-b71c12a1947c,.bdc8176c-285d-401b-b379-daa16c715e29{stroke:#fff8ec}.bdc8176c-285d-401b-b379-daa16c715e29{stroke-width:1.48px}.b1c669d9-357e-4a11-90f0-b71c12a1947c{stroke-width:1.11px}.ae852cf4-3a1e-4a34-9403-1d77e7931b04{stroke-width:.75px}</style><g class="leaf"><path d="M49.42 11.65H61v11.53A19.71 19.71 0 0141.24 42.9H29.71V31.36a19.71 19.71 0 0119.71-19.71z" class="a72b693f-2bb1-4409-a61e-b1fe6d718343" transform="rotate(-53.87 45.34 27.27)"/><path d="M42.5 6.5s14.06 15.65 5.79 41.64c0 0-1.32-14.21-10.07-22.85" class="b26f1380-bba7-4e33-8dea-2dc4ae8e1b99"/></g><g class="leaf"><path d="M32.2 36.77h11.53v11.54A19.71 19.71 0 0124 68H12.49V56.49A19.71 19.71 0 0132.2 36.77z" class="a72b693f-2bb1-4409-a61e-b1fe6d718343" transform="rotate(-126.54 28.11 52.4)"/><path d="M7.47 49.84s19.09-9.69 41.43 5.94c0 0-13.95-3-24.8 2.81" class="b26f1380-bba7-4e33-8dea-2dc4ae8e1b99"/></g><g class="leaf"><path d="M86.38 63.77h11.53V75.3A19.71 19.71 0 0178.19 95H66.66V83.48a19.71 19.71 0 0119.72-19.71z" class="a72b693f-2bb1-4409-a61e-b1fe6d718343" transform="rotate(37.01 82.3 79.4)"/><path d="M102.8 76s-15.57 14.69-41.42 6c0 0 14.23-1.11 23-9.72" class="b26f1380-bba7-4e33-8dea-2dc4ae8e1b99"/></g></g><g id="f978387a-c3fd-4a3a-b32b-d802f988d3c5" data-name="fruit"><circle cx="61.48" cy="58.37" r="22.26" class="a303e43b-cbec-46fd-b402-3ff916a6fb9a"/><path d="M63.84 53.78a34.49 34.49 0 018.3-.42M68.2 57.72a34.8 34.8 0 01-.43-8.3" class="f01f16fd-b8ce-400b-96c1-ff67d9b4d8bf"/><circle cx="37.37" cy="75.29" r="22.26" class="a303e43b-cbec-46fd-b402-3ff916a6fb9a"/><path d="M42.6 76.11A34.36 34.36 0 0150.7 78M45.71 81.1a34.61 34.61 0 011.88-8.1" class="f01f16fd-b8ce-400b-96c1-ff67d9b4d8bf"/></g><g class="sparks"><path d="M81.82 7.63v3.99M81.82 20.01V24M90 15.81h-3.99M77.62 15.81h-3.99" class="bdc8176c-285d-401b-b379-daa16c715e29"/><path d="M100.82 39.63v3.01M100.82 48.98V52M107 45.81h-3.01M97.65 45.81h-3.02" class="b1c669d9-357e-4a11-90f0-b71c12a1947c"/><path d="M7.82 20.63v2.04M7.82 26.96V29M12 24.81H9.96M5.67 24.81H3.63" class="ae852cf4-3a1e-4a34-9403-1d77e7931b04"/></g></svg> <h1 class="c-h c-h-6">That’s what these wonderful people say about the course!</h1> </header> <ul class="c-testimonials__quotes"> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.linkedin.com/in/denacho1301/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/dena-cho.avif" type="image/avif" /> <img src="/static/img/testimonials/dena-cho.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Dena Cho profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Dena Cho</h2> <p class="u-step-0 c-testimonial__role">Product Designer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Incredibly enriching experience!”</h4><p>The insights I’ve gained have <strong>truly empowered me</strong> with invaluable knowledge and skills. What sets this course apart is the instructor’s holistic approach, diving not only into UI topics but also into <strong>product strategy</strong>.</p><p>Learning how to view design through the lens of stakeholders has been eye-opening, equipping me with the tools to bring design value to a wider audience. I feel <strong>significantly more confident</strong> in my ability to influence design decisions, even in the most complex UI scenarios.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.linkedin.com/in/sanandadutta/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/sananda-dutta.avif" type="image/avif" /> <img src="/static/img/testimonials/sananda-dutta.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Sananda Dutta profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Sananda Dutta</h2> <p class="u-step-0 c-testimonial__role">Product Designer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Unwavering commitment to students!”</h4><p>The course is a <strong>practical exploration</strong> of the intricate nuances that make interfaces truly intuitive and engaging. Vitaly’s guidance is invaluable, his knowledge profound, and his <strong>passion for design is contagious</strong>.</p> <p>Vitaly’s unwavering <strong>commitment to students</strong> ensures that every lesson is a stepping stone towards getting proficient at UX. Whether you’re a seasoned designer or just starting your journey, this course <strong>will revolutionize your approach to UX</strong>, empowering you to create interfaces that resonate deeply with users.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://twitter.com/Zara__Cooper" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/zara-cooper.avif" type="image/avif" /> <img src="/static/img/testimonials/zara-cooper.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Zara Cooper profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Zara Cooper</h2> <p class="u-step-0 c-testimonial__role">Software Developer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Years of design expertise!”</h4><p>Smart Interface Design Patterns is an incredible resource. Vitaly lays out the best practices and patterns for responsive and accessible interface design. It is <strong>detailed, informative, and backed up with practical examples</strong>.</p> <p>You can tell years of design expertise have been poured into it. Vitaly is an amazing teacher and walks you through complex concepts by making them <strong>easy to understand</strong>. Developers and designers of all experience levels can gain so much from this!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.linkedin.com/in/duygu-ozgul/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/duygu-ozgul.avif" type="image/avif" /> <img src="/static/img/testimonials/duygu-ozgul.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Duygu Özgül profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Duygu Özgül</h2> <p class="u-step-0 c-testimonial__role">Design Lead</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Exactly what is missing in other courses!”</h4><p>This course provides exactly what is missing from the other UX courses out there: a <strong>practical deep dive</strong> into timeless digital design patterns. The course is the synthesis of the best articles and examples on fundamental patterns out there with Vitaly’s outstanding expertise.</p><p>Because of the practical nature of the content, <strong>I can confidently use the learnings</strong> from this course without necessarily testing every detail!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://bradfrost.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/brad-frost.avif" type="image/avif" /> <img src="/static/img/testimonials/brad-frost.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Brad Frost profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Brad Frost</h2> <p class="u-step-0 c-testimonial__role">Web Designer, Front-End Developer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Best practices encyclopedia!”</h4><p>I love me some components. Effective design systems bake UX, design, and development best practices into a reusable component library to increase velocity and improve quality.</p> <p>But what exactly are those best practices? Where does one learn those best practices? <strong>Right here in this course!</strong> Vitaly is a living, breathing web design & development best practices encyclopedia, so I’d highly recommend this course to any web practitioner.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.sarasoueidan.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/sara-soueidan.avif" type="image/avif" /> <img src="/static/img/testimonials/sara-soueidan.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Sara Soueidan profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Sara Soueidan</h2> <p class="u-step-0 c-testimonial__role">Web UI and Design Systems Engineer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“This course is a goldmine!”</h4><p><strong>Years of research</strong> and experience by one of the most prolific members of the web community has been distilled and condensed into this course.</p><!--<p>As a front-end developer, I work with designers all the time, and have discussions about UI, UX and accessibility. This course contains a goldmine of research and best practices that are an excellent foundation for any collaborative design process. It’s also packed with design patterns from all over the Web — so much inspiration!</p>--><p>So whether you’re a designer or a developer who frequently works with designers, you’ll find something in this course for you. <strong>Take this course; you won’t regret it</strong>.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://twitter.com/AgencyCecil" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/portia-burton.avif" type="image/avif" /> <img src="/static/img/testimonials/portia-burton.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Portia Burton profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Portia Burton</h2> <p class="u-step-0 c-testimonial__role">Head Developer and Writer at DocumentWrite.dev</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Brimming with timeless advice!”</h4><p>A <strong>rare course</strong> that skips the framework hype and dives straight into actionable solutions. “Smart Interface Design Patterns” course is brimming with timeless advice about best practices for intermediate-level designers. Vitaly does an amazing job giving each solution <strong>real-world context</strong>. I wish I discovered this course sooner in my career!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://twitter.com/annaecook" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/anna-cook.avif" type="image/avif" /> <img src="/static/img/testimonials/anna-cook.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Anna E. Cook profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Anna E. Cook</h2> <p class="u-step-0 c-testimonial__role">Senior Accessibility Designer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“One-on-one conversation!”</h4><p>Smashing Magazine and Vitaly are better than ever, and we get to watch it all from the comfort of home!</p> <p>The workshop is so fun and immersive you won’t even notice you’re learning. You’ll feel like you’re getting to have a <strong>one-on-one conversation</strong> with one of the greatest design and development educators while digging into your biggest questions. This library is a lovely combination of principle and practice and well worth it!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://bencallahan.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/ben-callahan.avif" type="image/avif" /> <img src="/static/img/testimonials/ben-callahan.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Ben Callahan profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Ben Callahan</h2> <p class="u-step-0 c-testimonial__role">Design Systems Specialist, Designer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“So much of expertise in one place!”</h4> <p>Vitaly has been a relentless force for good in the digital design space for years now. With this <strong>beautifully captured video series</strong>, so much of his expertise is in one place. There is something for everyone here!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://addyosmani.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/addy-osmani.avif" type="image/avif" /> <img src="/static/img/testimonials/addy-osmani.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Addy Osmani profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Addy Osmani</h2> <p class="u-step-0 c-testimonial__role">Engineering Manager, Chrome, Google</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Simply fantastic!”</h4> <p>“Smart Interface Design Patterns” offers the <strong>most comprehensive</strong> look at modern user-interface patterns of any course I’ve seen. Vitaly explores (in-depth) <strong>100s of real-world examples</strong> of production UX, picking apart the trade-offs of responsiveness, interaction and accessibility along the way.</p> <p>The focus on “production” vs. simple demos makes this course particularly valuable; you can see what decisions teams across eCommerce (and other verticals) made and why. I also loved the format — a <strong>wonderful mix of examples, videos, speaking</strong> and more. Highly recommended!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://twitter.com/jh3yy" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/jhey-tompkins.avif" type="image/avif" /> <img src="/static/img/testimonials/jhey-tompkins.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Jhey Tompkins profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Jhey Tompkins</h2> <p class="u-step-0 c-testimonial__role">Front-End Developer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“11/10!”</h4><p>For someone who struggles to focus on courses and usually avoids them, Vitaly has an <strong>engaging charm that keeps you watching</strong>. Vitaly shares so many insightful gems and the thinking that goes behind different design decisions for different UX/UI issues. This course makes for a <strong>fantastic design reference</strong>! 11/10.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.cassie.codes" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/cassie-evans.avif" type="image/avif" /> <img src="/static/img/testimonials/cassie-evans.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Cassie Evans profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Cassie Evans</h2> <p class="u-step-0 c-testimonial__role">Designer, Illustrator, Animator</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Ton of ’aha’-moments!”</h4> <p>As a developer, it’s so easy to get hyper-focused on the code itself and lose sight of the bigger picture. This friendly course provides a ton of “aha” moments that <strong>will help you make better decisions</strong> for the people using your sites.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://twitter.com/almahoffmann" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/alma-hoffmann.avif" type="image/avif" /> <img src="/static/img/testimonials/alma-hoffmann.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Alma Hoffmann profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Alma Hoffmann</h2> <p class="u-step-0 c-testimonial__role">Funky Design Educator</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Gem of knowledge!”</h4> <p>In this course, Vitaly provides significant insight not only theoretically but also using practical and relevant examples. These examples are backed up with research and clear graphics to illustrate the points he is making.</p> <!--<p>Designers and developers alike aim to solve problems and smooth out rough instances for the user. This course provides solutions to common problems but it also helps with developing a systematic approach to solve the not so common ones.</p> <p>Because it is about creating patterns, these patterns are flexible and can be modified and applied to a great variety of issues to come. Because technology changes rapidly, we need to develop systems that can be modified and applied as quickly to help the user.</p>--> <p>Vitaly has accumulated years of observation and research that makes this course a gem of knowledge; essential for any of us, not just designers and developers.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://danmall.me/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/dan-mall.avif" type="image/avif" /> <img src="/static/img/testimonials/dan-mall.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Dan Mall profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Dan Mall</h2> <p class="u-step-0 c-testimonial__role">Creative Director, Advisor</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Don’t miss it!”</h4><p>Vitaly has been a student of the web for a long time now, and he’s collected a wealth of knowledge about what makes for great digital experiences. This course is a <strong>fantastic way to learn</strong> from his years of experience in just a few short hours. Don’t miss it!"</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://twitter.com/5t3ph" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/stephanie-eckles.avif" type="image/avif" /> <img src="/static/img/testimonials/stephanie-eckles.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Stephanie Eckles profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Stephanie Eckles</h2> <p class="u-step-0 c-testimonial__role">Front-End Developer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Incredible value!”</h4><p>Vitaly has seen and done it all, and this course is an incredible value for <strong>all the insights and resources</strong> you’ll gain! The depth of knowledge Vitaly has gained over the years is unmatched, and through this course he shares the extra details that would otherwise take a full career to know about.</p><p>The videos are <strong>packed with examples</strong> to get your ideas churning, and after taking this course you’ll be able to create more successful, usable interfaces that work today and into the future.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://marcthiele.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/marc-thiele.avif" type="image/avif" /> <img src="/static/img/testimonials/marc-thiele.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Marc Thiele profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Marc Thiele</h2> <p class="u-step-0 c-testimonial__role">BTConf, Conference Organizer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Treasure of knowledge.”</h4><p>Vitaly is known for his intense research when it comes to topics like this. Over the years he gained such a good expertise in the field of design patterns that this course is a <strong>treasure of knowledge</strong>, mixed with best practices and spiced with a pinch of useful tips and tricks.</p><p>If you are a designer, this in-depth workshop can only broaden your knowledge and make you an even more experienced designer. If you are a developer, this course is a must for you to build a better connection and understand to the designers you work with.</p><!--<p>A <strong>great course with inspiration and knowledge</strong> and an enjoyable way of learning.</p>--> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://twitter.com/EmmaBostian" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/emma-bostian.avif" type="image/avif" /> <img src="/static/img/testimonials/emma-bostian.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Emma Bostian profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Emma Bostian</h2> <p class="u-step-0 c-testimonial__role">Software Engineer at Spotify</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“The course I never knew I needed!”</h4><p>This is the course I never knew I needed. As a frontend developer who works closely with design, this course provided me with the <strong>skills I need to collaborate more effectively</strong>.</p><p>Not only do you get <strong>real-world examples</strong>, but you’ll learn the why’s of responsive design patterns, backed up by tangible data. I recommend this course for every designer and web developer looking to improve their responsive design pattern skills.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://twitter.com/mandy_kerr" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/mandy-michael.avif" type="image/avif" /> <img src="/static/img/testimonials/mandy-michael.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Mandy Michael profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Mandy Michael</h2> <p class="u-step-0 c-testimonial__role">Front-End Developer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“A bunch to take away!”</h4><p>You’d be hard pressed to find a workshop that can keep you as engaged and eager for more as this latest work from Vitaly! His energy, enthusiasm and skill is clear and his experience and many years of research in the industry is a valuable resource.</p><p>There are <strong>lots of great examples and takeaways</strong>. Whether you are new to the industry or been around for a while, there is still a bunch to take away and use in your work day to day! A super fun and really enjoyable learning experience.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://nerdy.dev/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/adam-argyle.avif" type="image/avif" /> <img src="/static/img/testimonials/adam-argyle.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Adam Argyle profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Adam Argyle</h2> <p class="u-step-0 c-testimonial__role">UI + UX Specialist, Front-End Engineer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Rad thoughts and examples!”</h4> <p>Rad thoughts, examples and lessons from Vitaly here. Clearly thought out, professionally vetted, and elegantly distilled. A delightful and educational course with something for designers and developers alike.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://ishadeed.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/ahmad-shadeed.avif" type="image/avif" /> <img src="/static/img/testimonials/ahmad-shadeed.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Ahmad Shadeed profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Ahmad Shadeed</h2> <p class="u-step-0 c-testimonial__role">Product Designer, Front-End Developer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Immense value in a short amount of time!”</h4> <p>Anytime Vitaly shares something, I immediately think of great UX practices, in-depth dives, and well-researched studies. <!-- I have learned so much from his writings over at Smashing Magazine about design patterns and components. --></p> <p>This workshop is a <strong>deep-dive with tons of useful recommendations</strong> that help you make decisions more quickly, effectively, and without wasting time on weighing options and solutions.</p> <p>As designers, we tend to learn by example, so this workshop provides immense value in a short amount of time. Whether you’re a designer or a developer, you’ll learn a lot. I highly recommend it!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.linkedin.com/in/gwendolynschorling/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/gwendolyn-schorling.avif" type="image/avif" /> <img src="/static/img/testimonials/gwendolyn-schorling.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Gwendolyn Schorling profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Gwendolyn Schorling</h2> <p class="u-step-0 c-testimonial__role">Digital Designer, Creative Lead</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Restored my faith in learning!”</h4><p>The “Interface Design Patterns UX Training” has restored my faith in virtual learning. Not only does he provide a <strong>wealth of knowledge</strong>, but also makes the learning experience engaging, thoughtful, and personal.</p> <p>His <strong>homework critiques are thorough</strong> and inspire me to continue refining my work. I’ve already used the extensive resources from class to guide my UX projects at work.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://jamesrice.com" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/james-rice.avif" type="image/avif" /> <img src="/static/img/testimonials/james-rice.jpg" width="128" height="128" loading="lazy" decoding="async" alt="James Rice profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">James Rice</h2> <p class="u-step-0 c-testimonial__role">Senior UX Designer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Boundless enthusiasm!”</h4><p>Having been in the industry for 25 years, being introduced to <strong>new ideas and examples</strong> I haven’t seen before is pretty rare - but I obviously had not met Vitaly yet!</p><p>He has a slide or anecdote for every possible scenario plus <strong>boundless enthusiasm</strong> and positivity to accompany it. The assignments based on <strong>real-world clients</strong> and projects were challenging but fun as they fell outside my normal day to day type of work. Also, <strong>personalized video feedback</strong> on each assignment was provided, which I found very helpful.</p><p>I’ve done workshops and been to a number of conferences, and while the content is typically well and good, you often find yourself getting bored, zoning out, or wanting it to be over. It was exactly the opposite with Vitaly’s training; many of the attendees <strong>would have continued the sessions indefinitely</strong> if given the opportunity. I’ve already started applying new ways of thinking to my client work and I would sign-up for a part two in a heartbeat.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="http://monkeypolice.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/cath-macaulay.avif" type="image/avif" /> <img src="/static/img/testimonials/cath-macaulay.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Cath Macaulay profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Cath Macaulay</h2> <p class="u-step-0 c-testimonial__role">Product/UX Designer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Sizzled with detail!”</h4><p>Every week there was an assignment to complete which focused on a particular UX problem. I found that there was such a wealth of information that <strong>my mind was exploding</strong> with creative ideas! The assignments sizzled with detail and had me wishing for all clients and stakeholders to write design briefs in this manner.</p><p>There’s no doubt that my confidence in tackling the UX assignments grew over the duration of the course. I now feel able to devour UX assignments, and less like a fraud when self-describing as a “UX” designer. Vitaly teaches UX in a <strong>fun and accessible way</strong>, and it was a joy to learn from a renowned industry leader. I can’t wait to sign up for another course!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.linkedin.com/in/skhyun/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/stacy-hyun.avif" type="image/avif" /> <img src="/static/img/testimonials/stacy-hyun.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Stacy Hyun profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Stacy Hyun</h2> <p class="u-step-0 c-testimonial__role">Art Director, Visual Designer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Mind-blowing!”</h4><p>Are you dealing with complex UX challenges? The knowledge and expertise shared by Vitaly are mind-blowing! His enthusiasm for the topic makes the class a <strong>must-do to learn how to approach complex UX</strong>.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.vasilis.nl/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/vasilis-van-gemert.avif" type="image/avif" /> <img src="/static/img/testimonials/vasilis-van-gemert.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Vasilis van Gemert profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Vasilis van Gemert</h2> <p class="u-step-0 c-testimonial__role">Teacher, Educator</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Incredible amount of knowledge!”</h4><p>Over the years Vitaly has amassed an incredible amount of knowledge about web design and web development. He has always shared his knowledge with everybody at conferences and at universities around the world.</p> <p>And now he has made all this knowledge available to you in <strong>this very pleasant form</strong>, to enjoy in your living room, in your home office, in the kitchen or in your hammock, where and whenever you want."</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://withkoji.com/@Dawntraoz" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/alba-silvente.avif" type="image/avif" /> <img src="/static/img/testimonials/alba-silvente.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Alba Silvente profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Alba Silvente</h2> <p class="u-step-0 c-testimonial__role">Front-End Developer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans"> “Well-defined steps to follow!”</h4><p>I’m amazed with the quality of the course. Not only for the quality of the videos, which is incredible and with many details that make me hooked, but also for the clarity of the content.</p> <p>As a front-end developer, I always put a lot of emphasis on how to <strong>assemble interactive components</strong>, and it’s a permanent research! But with these videos, you get both regular and cutting-edge cases covered, with general solutions and <strong>well-defined steps to follow</strong>.</p> <p>Undoubtedly, that’s the course for front-end people who want to improve in UX field. And it’s not only for those who are just starting, but also for experienced professionals who want to improve their skills.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.ricardogimenes.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/ricardo-gimenes.avif" type="image/avif" /> <img src="/static/img/testimonials/ricardo-gimenes.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Ricardo Gimenes profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Ricardo Gimenes</h2> <p class="u-step-0 c-testimonial__role">Illustrator, Art Director</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans"> “Clear and enjoyable to watch!”</h4><p>I’ve had the honor and privilege of working with Vitaly for the past 11 years. So I’m an eyewitness to this project’s time spent, dedication, and attention to detail. The result is a course that is clear, precise, and enjoyable to watch.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://cariefisher.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/carie-fisher.avif" type="image/avif" /> <img src="/static/img/testimonials/carie-fisher.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Carie Fisher profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Carie Fisher</h2> <p class="u-step-0 c-testimonial__role">Author, Speaker, and Developer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans"> “Real-world examples!”</h4><p>Vitaly has done a fantastic job reimagining the virtual teaching space with his latest video course! Each of the sessions include <strong>succinct video tutorials</strong> with detailed background pattern information, engaging real-world examples, and areas to focus on when reviewing or building your own patterns.</p> <p>The amount of detail and engagement that Vitaly brings to this course ensures that both designers and developers will learn something new - plus have fun along the way!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.smashingmagazine.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/smashing-cat.avif" type="image/avif" /> <img src="/static/img/testimonials/smashing-cat.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Smashing Cat profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Smashing Cat</h2> <p class="u-step-0 c-testimonial__role">Mascot, Food-Chaser</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Meowsome!”</h4><p>Greatest secrets are always hidden in the most unlikely places. I find my way by moonlight and see the dawn before the rest of the world. This course has them all — <strong>greatest secrets</strong> for better interface design and UX, all in one single place. Meowsome!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://twitter.com/jaclynziegler_" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/jaclyn-ziegler.avif" type="image/avif" /> <img src="/static/img/testimonials/jaclyn-ziegler.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Jaclyn Ziegler profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Jaclyn Ziegler</h2> <p class="u-step-0 c-testimonial__role">UX Designer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Mind-blown how much I learned!”</h4><p>I am mind-blown at how much I learn at Vitaly’s workshops! It is amazing when we break down every piece of an interface, how much easier it becomes to understand it.<!-- In his workshops we dive into design patterns through deep-thinking fun exercises to problems I never considered. Through Vitaly’s workshops, I have been able to view my own work from a valuable new perspective.--></p> <p>Vitaly has a <strong>highly engaging and positive teaching style</strong>. He is exceedingly knowledgeable yet very down to earth and approachable. Vitaly goes above and beyond for his students! I highly recommend Vitaly’s workshops to any designer, product owner or front-end developer who wants to advance their career! <!-- For example, before every workshop he asks how difficult they would like the material to be and adjusts his presentation to what the students are looking for. He provides numerous real-world examples and shares many valuable resources too. In addition, Vitaly showed us where he gets his inspiration from to build great web forms for his own clients. --></p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://twitter.com/kenny_io" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/ekene-eze.avif" type="image/avif" /> <img src="/static/img/testimonials/ekene-eze.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Ekene Eze profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Ekene Eze</h2> <p class="u-step-0 c-testimonial__role">Front-End Developer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“What I needed to make smarter decisions!”</h4><p>“Smart Interface Design Patterns” is truly what the name says. Vitaly goes beyond the basics to tell you the “why” and show you the “how” to inform your design decisions. For someone who struggled with mobile responsiveness, I think this is what I needed to make better (smarter) decisions.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://twitter.com/JoshWComeau" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/josh-comeau.avif" type="image/avif" /> <img src="/static/img/testimonials/josh-comeau.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Josh W. Comeau profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Josh W. Comeau</h2> <p class="u-step-0 c-testimonial__role">Front-End Developer, Indie Hacker</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“How to design thoughtful, robust building blocks!”</h4><p>Modern web applications are full of <strong>surprisingly-intricate UI elements</strong>. There’s so much more than meets the eye, and if we aren’t careful, we’ll wind up designing an inaccessible, hard-to-use product! Vitaly shows us how to design thoughtful, robust building blocks for the web.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://uxsalon.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/avi-itzkovich.avif" type="image/avif" /> <img src="/static/img/testimonials/avi-itzkovich.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Avi Itzkovich profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Avi Itzkovich</h2> <p class="u-step-0 c-testimonial__role">UX Designer, Speaker, Conference Organizer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Recommend it to everyone.”</h4><p>Great design requires a way to explain why we choose a certain design solution. This course offers a <strong>solution to every common design problem</strong> and much more. I recommend it to everyone, especially if you are already working in the field.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.darins.page/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/darin-senneff.avif" type="image/avif" /> <img src="/static/img/testimonials/darin-senneff.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Darin Senneff profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Darin Senneff</h2> <p class="u-step-0 c-testimonial__role">UX/UI Designer, Animator</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Pros & cons of different patterns.”</h4><p>If you design or develop interfaces, you need the ability to weigh the pros and cons of different patterns and approaches. This <strong>course dives deep into all of the common components</strong> of the modern web, allowing you to create solutions and tackle important issues in your work.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.aarronwalter.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/aarron-walter.avif" type="image/avif" /> <img src="/static/img/testimonials/aarron-walter.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Aarron Walter profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Aarron Walter</h2> <p class="u-step-0 c-testimonial__role">UX Designer, Author</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Carefully researched examples.”</h4><p>Getting proficient at UI design can take years, but you can <strong>get there way faster with this course</strong>. The carefully researched examples and practical guidance here will give you the foundation you need to design great interfaces.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://kittygiraudel.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/kitty-giraudel.avif" type="image/avif" /> <img src="/static/img/testimonials/kitty-giraudel.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Kitty Giraudel profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Kitty Giraudel</h2> <p class="u-step-0 c-testimonial__role">Front-End Developer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Countless examples and real-world studies.”</h4><p>Smart Interface Design Patterns is an <strong>absolute goldmine of information</strong>, presented in a lighthearted and pleasant form by Vitaly Friedman.</p><p>It explains <strong>complex design patterns</strong> — particularly when done responsively and responsibly — with great details, backing suggestions with countless examples and real world studies. It is a joy to watch through and through, and a must for anyone interested in high quality and modern web design.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://michellebarker.co.uk/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/michelle-barker.avif" type="image/avif" /> <img src="/static/img/testimonials/michelle-barker.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Michelle Barker profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Michelle Barker</h2> <p class="u-step-0 c-testimonial__role">Lead Front-End Developer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Plenty to benefit from!”</h4><p>This course is ideal for anyone looking to get up to speed on modern UI design and development practices. Backed up by thorough research, and featuring <strong>detailed and well-articulated explanations</strong> of common components, both new and experienced designers and developers will find plenty to benefit from. Highly recommended!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://atila.io/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/atila-fassina.avif" type="image/avif" /> <img src="/static/img/testimonials/atila-fassina.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Átila Fassina profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Átila Fassina</h2> <p class="u-step-0 c-testimonial__role">Lead Frontend Engineer at Signavio</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Strategies and patterns to solve the right issues.”</h4><p>Vitaly takes responsive design to the next level by discussing information architecture and content strategy. How to come up with tactics to achieve the best UX is always tough. But this course gives us strategies and patterns to solve the right issues.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://boagworld.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/paul-boag.avif" type="image/avif" /> <img src="/static/img/testimonials/paul-boag.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Paul Boag profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Paul Boag</h2> <p class="u-step-0 c-testimonial__role">UX Consultant</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“You won’t find a better guide!”</h4><p>I know of nobody else in the industry who has spent so much time and energy analyzing best practices in user interface design across thousands of websites. If you are seeking to improve your interface design skills, you will not find a better guide.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://veerle.duoh.com" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/veerle-pieters.avif" type="image/avif" /> <img src="/static/img/testimonials/veerle-pieters.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Veerle Pieters profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Veerle Pieters</h2> <p class="u-step-0 c-testimonial__role">Graphic/Web Designer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Vast experience!”</h4><p>Vitaly has been around the ‘internet’ block a few times and his vast experience comes together in this course. In only a few hours of video you gain a wealth of in-depth knowledge bundled with real world examples. Highly recommended!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.linkedin.com/in/natalie-larsson-0521b197/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/natalie-larsson.avif" type="image/avif" /> <img src="/static/img/testimonials/natalie-larsson.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Natalie Larsson profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Natalie Larsson</h2> <p class="u-step-0 c-testimonial__role">UX Designer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Brilliant combination of theory and practice!”</h4><p>This was exactly that type of training that I was looking for. Enjoyed every hour of it. Well-structured, professional, interesting, with plenty of real-life examples and analysis, well thought out assignments of various complexity, friendly atmosphere and good humor. The brilliant combination of theory and practical parts.</p> <p>It is a very good fit for those who have already been active in UX for some time and want to get better, but at the same time the simple structure and stile of presenting makes it very suitable for beginners as well.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://chuanqisun.com/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/chuanqi-sun.avif" type="image/avif" /> <img src="/static/img/testimonials/chuanqi-sun.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Chuánqí Sun profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Chuánqí Sun</h2> <p class="u-step-0 c-testimonial__role">Senior UX Developer, Microsoft</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Exceeded my expectation!”</h4><p>The workshop has exceeded my expectation — it pushed me beyond my comfort zone without losing relevance to problems I encounter in my daily design work. I’m really glad to be part of the journey and would recommend the workshop to every designer and engineer who find themselves in complex projects.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://uk.linkedin.com/in/debbie-hay-240a9b58" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/debbie-hay.avif" type="image/avif" /> <img src="/static/img/testimonials/debbie-hay.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Debbie Hay profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Debbie Hay</h2> <p class="u-step-0 c-testimonial__role">Web Developer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Can’t recommend this course enough!”</h4><p>I can’t recommend this course enough! Vitaly is an amazing teacher, always eager to help in anyway he can. The assignments were challenging but incredibly enjoyable and rewarding. I have learnt so many new skills from this amazing course!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.linkedin.com/in/kenneth-chen-uxd" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/kenneth-chen.avif" type="image/avif" /> <img src="/static/img/testimonials/kenneth-chen.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Kenneth Chen profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Kenneth Chen</h2> <p class="u-step-0 c-testimonial__role">User Experience Designer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Exceeded my expectations!”</h4><p>This course far exceeded my expectations and I was excited to be learning from Vitaly’s experience. The sessions are brimming with great insights that are immediately applicable to your day to day work. The sheer amount of interface patterns that were discussed, combined with plenty of detailed, real-world examples, makes for an action-packed course!</p> <p>Vitaly shares his wisdom enthusiastically and you can see his passion for design. He also provides excellent 1:1 feedback on assignments which will inspire you to challenge the status quo and level up your craft.</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://www.linkedin.com/in/krista-boughner-b2450b42" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/krista-boughner.avif" type="image/avif" /> <img src="/static/img/testimonials/krista-boughner.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Krista Boughner profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Krista Boughner</h2> <p class="u-step-0 c-testimonial__role">Senior Designer</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“Incredibly helpful!”</h4><p>This training course has been incredibly helpful and I have learned a lot! I really appreciate all of the useful tips and detailed resources you’ve shared — this knowledge is so applicable in my current job and will help me on future projects. I will certainly recommend this course to my friends/colleagues!</p> </div> </blockquote> </li> <li class="c-testimonials__quote"> <blockquote class="c-testimonial u-flow--s"> <a href="https://espen.design/" class="u-block u-flow--xs"> <figure class="c-testimonial__image"> <picture> <source srcset="/static/img/testimonials/espen-brunborg.avif" type="image/avif" /> <img src="/static/img/testimonials/espen-brunborg.jpg" width="128" height="128" loading="lazy" decoding="async" alt="Espen Brunborg profile photo" /> </picture> </figure> <cite> <h2 class="c-h u-link u-link--testimonial">Espen Brunborg</h2> <p class="u-step-0 c-testimonial__role">Digital Designer, Illustrator</p> </cite> </a> <div class="c-testimonial__content u-flow--xs"> <h4 class="c-testimonial-byline u-sans">“This is bloody amazing!”</h4><p>If you’re looking for digestible, friendly, and extremely well researched advice on interface design, this is the course for you. I can’t think of a single resource more <strong>informative or exhaustive</strong>, nor a presenter more suited than Vitaly. <strong>Miss it at your peril</strong>.</p> </div> </blockquote> </li> </ul> <div class="c-testimonials__wrapper"> <button type="button" class="c-button c-button--inline c-button--secondary c-testimonial__toggle"></button> </div> </div> </section> <section class="c-modal" id="video-modal-3"> <div class="c-modal__wrapper"> <header class="c-header"> <div class="c-header__wrap u-wrap"> <a class="c-header__logo" href="/" alt="Home"> <figure class="c-header__logo-smash"> <div class="c-header__logo-aspect"> <svg xmlns="http://www.w3.org/2000/svg" width="44" height="87" viewBox="0 0 44 87"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="99.9%"><stop offset="0%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".3"/><stop offset="2%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".3"/><stop offset="28%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".1"/><stop offset="48%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/><stop offset="60%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".2"/><stop offset="14%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity=".1"/><stop offset="36%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/><stop offset="50%" stop-color="var(--smashing-logo, #FFF8EC)" stop-opacity="0"/></linearGradient></defs><g fill="none" fill-rule="nonzero"><g fill="var(--smashing-logo, #FFF8EC)"><path d="M25.7 28.2c-2-1.5-4.2-2.7-6.5-3.5-1.8-.8-3.5-1.7-5-2.7-3.8-2.7-5.7-5.9-5.7-9.8A10 10 0 0111.4 5l-8 1.9A4.3 4.3 0 000 11.9l6.7 28.7a4.3 4.3 0 005.1 3.3l3.3-.8H15c-2.2-.7-4.4-1.7-6.4-2.8l3.5-7.7c2.7 2.3 6.2 3.5 9.7 3.5 3.8 0 5.7-1.4 5.7-4a5 5 0 00-1.8-3.9zM43.9 32L37.2 3.5A4.3 4.3 0 0032.1 0l-4.9 1.1a28.5 28.5 0 018 2.6l-2.9 7.5c-2.1-1.8-5-2.7-8.8-2.7-3.4 0-5 1.3-5 4 0 1.1.6 2.2 1.6 2.8 2.2 1.4 4.6 2.6 7.1 3.4 2.2.8 4.2 2 6 3.4.7.5 1.3 1.2 1.9 1.8 1.6 2.2 2.4 4.8 2.4 7.4 0 2.6-.8 5-2.3 7.1l5.4-1.2A4.3 4.3 0 0044 32z"/></g><path fill="url(#a)" d="M21.8 8c-3.5 0-7 1.1-9.7 3.4L8.6 3.7c2-1.2 4.2-2 6.4-2.8h.2L12 0c-2.3-.5-4.6 1-5.1 3.3L0 32c-.5 2.3 1 4.6 3.3 5.2l8 1.8a9.6 9.6 0 01-3-7.3c0-3.9 2-7.1 5.7-9.7 1.6-1.1 3.2-2 5-2.7 2.4-.9 4.6-2 6.6-3.6a5 5 0 001.7-3.8c0-2.7-1.8-4-5.6-4z" transform="translate(0 43)"/><path fill="url(#b)" d="M40.6 6.7l-5.4-1.2c1.5 2 2.4 4.6 2.3 7.1a11.6 11.6 0 01-4.3 9.3 22.2 22.2 0 01-6 3.3c-2.5.9-4.8 2-7 3.4-1 .6-1.6 1.6-1.7 2.8 0 2.6 1.7 4 5 4 3.8 0 6.7-1 8.8-2.7l2.8 7.5a26.4 26.4 0 01-7.8 2.6l4.8 1c2.3.6 4.6-.8 5.2-3.2L43.9 12a4.3 4.3 0 00-3.3-5.2z" transform="translate(0 43)"/></g></svg> </div> </figure> <figure class="c-header__logo-smart"> <div class="c-header__logo-aspect"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142 41" id="smart-logo" fill="none" stroke="none"> <defs> <path id="a" d="M0 0h5.7v8H0z"/> </defs> <g fill="none" fill-rule="evenodd"> <path class="title" d="M3.4 0c.6 0 1 0 1.5.3.4.1.7.3 1 .6.3.2.4.5.5.8.2.3.2.6.2.9 0 .3-.1.4-.5.4h-.3l-.2-.4-.2-.6-.5-.5a2 2 0 00-.6-.4l-1-.1h-.8l-.6.4-.4.4-.1.6V3l.4.4c.2.1.4.3.7.3l1 .3 1.6.3 1 .5.4.6.2.7c0 .3 0 .5-.2.8 0 .3-.3.5-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5C.6 7.4.4 7 .2 6.9L0 6l.1-.3.3-.1h.3L1 6l.2.3.3.4.5.4.4.2.5.2h.7c.7 0 1.2 0 1.5-.3.4-.2.5-.5.5-.9v-.5L5 5.4 4.3 5a37.8 37.8 0 00-2.6-.6L1 4c-.3-.2-.4-.5-.5-.7a2.3 2.3 0 010-1.8l.7-.8 1-.5L3.3 0M11.5.1h.4c.2 0 .2.1.3.2l.2.2.1.4A87.5 87.5 0 0015 6.6l.1-.4A157.2 157.2 0 0017.2.3l.3-.1h1.1l.1.5V5.3l.1 1V8l-.6.1-.4-.1v-.8-1-1.3a695.7 695.7 0 010-2.5v-.6-.2h-.1-.1l-.2.5-2 5.4-.2.4-.5.2c-.2 0-.4 0-.5-.2A44 44 0 0112 2.1l-.1-.3a5.1 5.1 0 00-.1-.3h-.2v.1a8 8 0 000 .6 47 47 0 000 4 66.5 66.5 0 000 1.9h-.9v-.4a34.7 34.7 0 010-2.9v-.6a56.1 56.1 0 000-3V.6l.1-.4.7-.2M24.8 4.4a3.2 3.2 0 000 .2l.1.2h2.3s.2 0 .2-.2l-.1-.2a135 135 0 00-.7-2l-.2-.7-.1-.2h-.5v.2a16.6 16.6 0 00-.4 1l-.2.3a30.7 30.7 0 01-.4 1.4m-2.4 3.4v-.1l.1-.3a12.6 12.6 0 01.6-1.6l.5-1.2A159.8 159.8 0 0125.4.3L26 0c.3 0 .6 0 .7.2l.5.7.2.6a173.2 173.2 0 011.1 3l.4 1.2a170.8 170.8 0 00.7 2.2l-.4.1h-.7l-.2-.4a67.8 67.8 0 01-1-2.2H24.5l-.1.2-.7 2c0 .2-.1.3-.2.3h-.8c-.2 0-.3 0-.3-.2M34.5 4v.2l.3.2h2.5l.8-.5.4-.5a1.7 1.7 0 000-1.4l-.5-.6-.8-.3a4 4 0 00-1-.2h-1l-.5.2s-.2 0-.2.2v.5a19.3 19.3 0 010 2v.1zm4.4 2.4l.5.6.4.2.3.2V8l-.5.1c-.3 0-.6 0-.8-.2l-.6-.5-.4-.7a18.9 18.9 0 01-.6-1l-.2-.3-.4-.1a21.9 21.9 0 01-1.4 0H35l-.2-.1h-.3v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.1.8l-.5.1h-.4l-.1-.4v-1a147.5 147.5 0 010-6.1c0-.2.2-.3.4-.4l.8-.2H36a6 6 0 011.7.2l1.2.6c.3.2.5.5.6.8.2.4.2.7.2 1l-.1 1-.4.5-.4.4a3.6 3.6 0 01-.8.4h-.2v.2c.1 0 .2 0 .3.2l.3.3.5.8zM43.1.1h.4a53 53 0 011.8 0h1.9a84.2 84.2 0 001.6 0c.3 0 .4.2.4.5V1h-2.3l-.2.2-.1.2v.4a81.7 81.7 0 000 2v1a89 89 0 000 3.2l-.2.1h-.8l-.1-.4V4a49.6 49.6 0 010-2.9h-2.3L43 1V.6.2h.2M61 .1c.2 0 .4.2.4.5V8l-.2.1h-.8l-.1-.4v-3a143.2 143.2 0 000-2.5v-.8a41.3 41.3 0 010-1.2H61zM72.3 3.4a121.4 121.4 0 000 2.5v1a53.7 53.7 0 01-.1 1l-.6.2h-.3L71 8l-.2-.2a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.3a3.3 3.3 0 000 .4V8l-.4.1h-.6V6.8a49 49 0 010-1.6V3a80.8 80.8 0 000-1.8V.8l.1-.5.5-.1.5.1.3.3a57.2 57.2 0 012.3 3.6l.9 1.3a43.3 43.3 0 00.9 1 42.6 42.6 0 000-5 39.8 39.8 0 010-1.2h.6c.2 0 .4 0 .4.3v2.8zM76.1.1h.4a53 53 0 011.8 0h1.9a84.2 84.2 0 001.6 0c.3 0 .4.2.4.5V1h-2.4l-.2.2V1.8a81.7 81.7 0 000 2v1a89 89 0 000 3.2l-.2.1h-.8l-.1-.4V4a49.6 49.6 0 010-2.9h-2.3l-.3-.1-.1-.4V.2h.3M91 4.3v.4H87l-.3.2V5a12.3 12.3 0 010 .7v.9l.1.4h1.4a50 50 0 001.6 0h1l.3.2.1.3V8l-.4.1h-.2a21.3 21.3 0 01-1.1 0H88a55.5 55.5 0 00-1.5 0h-.4l-.5-.1v-.4a14.6 14.6 0 010-.8V6v-.8a246.2 246.2 0 010-2.3V2a246.7 246.7 0 000-1.8h.5a37 37 0 003.2 0H91.2V1h-.4a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1V4H90.6l.3.1.1.3M96.3 4v.2l.3.2h2.5l.8-.5.4-.5a1.7 1.7 0 000-1.4l-.5-.6-.7-.3A4 4 0 0098 .9h-1l-.4.2c-.2 0-.2 0-.2.2v.5a19.3 19.3 0 01-.1 2v.1zm4.5 2.4l.4.6.4.2.3.2.1.3-.1.3-.5.1c-.3 0-.5 0-.7-.2-.3-.1-.4-.3-.6-.5l-.5-.7a18.9 18.9 0 01-.6-1l-.2-.3-.3-.1a21.9 21.9 0 01-1.4 0h-.3l-.2-.1h-.2v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.2.8l-.4.1h-.5V6.6a147.5 147.5 0 010-6.1c0-.2.1-.3.3-.4l.8-.2H98a6 6 0 011.7.2l1.1.6.7.8.2 1c0 .4 0 .7-.2 1 0 .2-.2.4-.3.5l-.5.4a3.6 3.6 0 01-.8.4h-.1v.2l.2.2.4.3.5.8zM111.2 4.5v.3l-.4.1h-3.7l-.3.1v2.7l-.1.3-.5.1h-.5v-.4a45.1 45.1 0 010-4.6v-1a455.7 455.7 0 000-1.8l.5-.2a51.9 51.9 0 013.1 0h1.6l.3.1.1.4-.1.4h-.4a19.1 19.1 0 01-1.7 0 30.5 30.5 0 00-2.2.1V3.7c0 .3 0 .4.4.4h3.8l.1.4M116.6 4.4a3.2 3.2 0 000 .2l.1.2h2.3c.1 0 .2 0 .2-.2v-.2a134.8 134.8 0 00-.8-2l-.2-.7v-.2h-.5l-.1.2a16.6 16.6 0 00-.4 1l-.1.3a30.7 30.7 0 01-.5 1.4m-2.3 3.4v-.1-.3a12.6 12.6 0 01.6-1.6l.5-1.2.4-1.1a159.8 159.8 0 011.4-3.2l.7-.2c.4 0 .6 0 .8.2l.4.7.2.6a173.1 173.1 0 011.1 3l.4 1.2a170.8 170.8 0 00.7 2.2l-.3.1h-.8l-.2-.4a67.8 67.8 0 01-1-2.2H116.3l-.1.2-.7 2c0 .2 0 .3-.2.3h-.8c-.1 0-.2 0-.2-.2M131.8 5.6l.3.1.1.3c0 .2 0 .4-.2.6 0 .3-.3.6-.5.8l-1.1.7-1.7.2c-.7 0-1.3 0-1.7-.3a3.3 3.3 0 01-2-2.2 5.8 5.8 0 01.1-3.3c.2-.5.4-.9.8-1.3a3.6 3.6 0 012.8-1.2 4 4 0 011.7.3c.4.2.8.4 1 .7a2.6 2.6 0 01.8 1.7c0 .3-.2.4-.5.4h-.4a1 1 0 01-.2-.5 3 3 0 00-.9-1.2c-.3-.3-.8-.4-1.4-.4-.5 0-1 0-1.3.2a2.8 2.8 0 00-1.5 2.2 5 5 0 00.2 2.2c.1.4.3.7.6 1 .2.3.5.5.9.6.3.2.7.2 1 .2l1-.1c.3 0 .6-.2.7-.3l.5-.4.3-.5.3-.4h.3M141.7 4.3v.4h-4l-.2.2V5a12.2 12.2 0 010 .7v1.3h1.5a50 50 0 001.6 0h1l.3.2.1.3-.1.4-.3.1h-.3a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.5 0h-.4l-.5-.1v-.4a14.6 14.6 0 010-.8V6v-.8a246.4 246.4 0 010-2.3V2a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.2.4c0 .2 0 .3-.2.4h-.3a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1V4H141.3l.3.1v.3M6 21.2c.3-.3.5-.6.6-1l.1-1.5-.1-1-.6-1a3 3 0 00-1-.8l-1.6-.2a13.4 13.4 0 00-1.2 0L2 16v.2a48 48 0 000 5v.5c0 .2.1.3.3.3l1 .1a10.4 10.4 0 001.5-.1c.2 0 .4-.2.5-.3.2 0 .4-.2.6-.4m-3-6.5c1 0 1.7 0 2.3.3l1.6.8c.4.4.6.8.8 1.3.2.5.3 1 .3 1.7v.8a3.4 3.4 0 01-.6 1.4l-.5.7-1.4 1-2 .2a21.6 21.6 0 01-2-.1 1 1 0 01-.4-.2v-.1L.8 22a27.3 27.3 0 010-2.3 96.9 96.9 0 000-4.2V15l.3-.3H2l1-.1M17.2 19v.4h-3.9l-.3.1v.3a12.3 12.3 0 010 .7v1.3h1.5a50 50 0 001.6 0h1l.3.1.1.4-.1.4h-.6a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.5 0h-.9v-.4a14.6 14.6 0 010-.9v-.7-.7a246.2 246.2 0 010-2.3v-1a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.2.3-.1.5H17a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1v2.7l.3.1h3.4l.3.1.1.3M24.4 14.7c.6 0 1 0 1.5.2l1 .7.5.8.2.9c0 .3-.2.4-.5.4l-.3-.1-.2-.3-.3-.6c0-.2-.2-.4-.4-.6a2 2 0 00-.6-.3l-1-.2-.8.1c-.3.1-.5.2-.6.4-.2 0-.3.2-.4.4l-.1.6v.6l.4.4.7.3 1 .3c.6 0 1.1.2 1.5.3l1 .5.5.5.2.8-.2.8-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5-.8-.8-.2-.7.1-.3.3-.1h.3l.2.2.2.3.3.4.4.4.5.2.5.1.7.1c.7 0 1.2-.1 1.5-.3.3-.2.5-.5.5-1l-.1-.4c0-.1-.2-.3-.4-.3l-.7-.3a37.8 37.8 0 00-2.6-.7l-.8-.5c-.3-.2-.4-.4-.5-.6a2.3 2.3 0 010-1.8l.6-.8 1-.5 1.4-.2M32.4 14.8c.3 0 .4.2.4.5V22.7h-.2l-.3.1h-.5v-3.4a143.2 143.2 0 00-.1-2.5V16a41.3 41.3 0 010-1c.1-.2.3-.2.4-.2h.3zM40.8 15.6c-.5 0-1 .1-1.3.3a2.7 2.7 0 00-1.1 1l-.3.5-.2.7v.9c0 .4 0 .9.2 1.2a2.7 2.7 0 001.6 1.6 3.4 3.4 0 002.3 0c.3 0 .6-.2.8-.4l.4-.5.1-.5V20H41l-.2-.1v-.3-.4h2.8l.6.1.2.6a2.9 2.9 0 01-.9 2c-.2.3-.6.5-1 .7-.5.2-1 .3-1.7.3s-1.2-.2-1.7-.4a3.9 3.9 0 01-2.4-3.7c0-.5 0-1 .2-1.5l.6-1.2c.4-.5.8-1 1.3-1.2.6-.2 1.2-.3 2-.3a3.4 3.4 0 012.6.9l.5.8.3.9-.1.4-.4.1-.4-.1a1 1 0 01-.2-.4 3 3 0 00-.9-1.2c-.3-.3-.8-.5-1.4-.5M54.8 18a121.4 121.4 0 000 2.5v1a53.7 53.7 0 010 1.1l-.6.2H54l-.3-.2-.2-.1a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.2a3.3 3.3 0 000 .5v5.4h-1v-1.2a49 49 0 010-1.6v-2.3a80.8 80.8 0 000-1.7v-.4-.5l.6-.1h.5l.3.4a57.2 57.2 0 012.3 3.5l.8 1.3a43.3 43.3 0 001 1.2V21a42.6 42.6 0 00-.1-4.8 39.8 39.8 0 010-1.3l.4-.1h.3c.2 0 .3.1.3.4V18zM69.6 19.2c.5 0 .9 0 1.1-.2.3 0 .6-.2.7-.3l.4-.6.1-.7c0-.6-.2-1-.7-1.3-.4-.3-1-.5-1.9-.5h-.8l-.5.1-.1.2v.5a21.3 21.3 0 01-.1 2.2v.4l.4.1h1.4m3.4-1.8c0 .4 0 .8-.2 1a2 2 0 01-.6 1 3 3 0 01-1 .5l-1.6.1a28.8 28.8 0 01-1.8 0v.3a38.2 38.2 0 000 2.2l-.1.3h-.9l-.1-.3a41 41 0 000-1.4 110.9 110.9 0 010-3.1v-.6a95 95 0 00.1-2.2l.4-.2.7-.2h1.4c.6 0 1.1 0 1.6.2.5 0 .9.3 1.2.5a2.3 2.3 0 011 2M78.2 19a3.2 3.2 0 000 .3c0 .1 0 .2.2.2h2.2l.2-.2V19a134.9 134.9 0 00-.7-2l-.3-.7v-.2l-.3-.1h-.2l-.1.3a16.6 16.6 0 00-.4 1l-.1.3a30.7 30.7 0 01-.5 1.4M76 22.5v-.2-.2a12.6 12.6 0 01.7-1.6l.4-1.3.4-1a159.8 159.8 0 011.4-3.3l.7-.1c.4 0 .6 0 .8.2.2.1.3.4.4.7l.2.6a173.2 173.2 0 011.2 3 170.8 170.8 0 001 3.4H82l-.1-.3a67.8 67.8 0 01-1-2.2H78 78v.2l-.8 2c0 .1 0 .3-.2.3h-.7c-.2 0-.3 0-.3-.2M85.7 14.8h.4a53 53 0 011.7 0h2a84.2 84.2 0 001.6 0c.2 0 .4.2.4.5l-.1.4h-2.3l-.2.1v.7a81.7 81.7 0 000 2v1a89 89 0 00-.1 3.2l-.2.1h-.8v-4.1a49.6 49.6 0 01-.1-2.9h-2.2l-.4-.1v-.4-.4h.3M94.8 14.8h.4a53 53 0 011.7 0h2a84.2 84.2 0 001.6 0c.2 0 .4.2.4.5l-.1.4h-2.3l-.2.1v.7a81.7 81.7 0 000 2v1a89 89 0 00-.1 3.2l-.2.1h-.8v-4.1a49.6 49.6 0 01-.1-2.9h-2.3l-.3-.1v-.4-.4h.3M109.7 19l-.1.4h-3.9l-.2.1v.3a12.2 12.2 0 010 .7v1.3h1.5a50 50 0 001.5 0h1l.4.1v.8h-.6a21.3 21.3 0 01-1 0h-1.5a55.5 55.5 0 00-1.6 0h-.8v-.4a14.6 14.6 0 010-.9v-.7-.7a246.4 246.4 0 010-2.3v-1a246.7 246.7 0 000-1.8h.5a37 37 0 003.1 0h1.8l.1.3v.5h-.4a20.2 20.2 0 01-1.7 0 31.1 31.1 0 00-2.2.1l-.1.3V18.5l.4.1h3.4l.3.1v.3M115 18.6v.3l.3.1.5.1h.9l1-.1.8-.4.5-.5a1.7 1.7 0 000-1.4l-.5-.6-.8-.4a4 4 0 00-1-.1h-1l-.5.1-.2.2V16.5a19.3 19.3 0 010 2v.1zm4.4 2.5l.5.5.4.3.3.2v.6h-.5l-.8-.1-.6-.5-.4-.7a18.8 18.8 0 01-.6-1l-.2-.3-.4-.1a21.9 21.9 0 01-1.4 0l-.2-.1h-.5v.2a31.3 31.3 0 000 1v.8a40.4 40.4 0 01-.1.8l-.5.1-.4-.1-.1-.3v-1a147.5 147.5 0 010-6.2l.4-.3.8-.2h1.4a6 6 0 011.7.2c.5.1.9.3 1.2.6.3.2.5.5.6.8.2.3.2.7.2 1l-.1.9-.4.6-.4.4a3.6 3.6 0 01-.9.3l-.1.1v.2l.3.1.3.4.5.8zM130.8 18a121.4 121.4 0 000 2.5v1a53.7 53.7 0 010 1.1l-.6.2h-.3l-.3-.2-.2-.1a6.2 6.2 0 01-.5-.8l-.5-.7-.7-1.1a202.8 202.8 0 01-2.3-3.3v.2a3.3 3.3 0 000 .5v5.4h-1v-1.2a49 49 0 010-1.6v-2.3a80.8 80.8 0 000-1.7v-.4-.5l.6-.1h.5l.3.4a57.2 57.2 0 012.3 3.5l.8 1.3a43.3 43.3 0 001 1.2V21a42.6 42.6 0 00-.1-4.8 39.8 39.8 0 010-1.3l.4-.1h.3c.2 0 .3.1.3.4V18zM138.1 14.7c.7 0 1.2 0 1.6.2l1 .7.5.8.2.9c0 .3-.2.4-.5.4l-.3-.1-.2-.3-.3-.6c0-.2-.2-.4-.4-.6a2 2 0 00-.6-.3l-1-.2-.8.1-.7.4-.3.4-.2.6.1.6.4.4.7.3 1 .3c.6 0 1.1.2 1.5.3l1 .5.5.5.1.8-.1.8-.5.7a3 3 0 01-1 .5 5.3 5.3 0 01-3 0l-1-.5-.8-.8-.2-.7.1-.3.3-.1h.3l.2.2.2.3.3.4.4.4.5.2.5.1.7.1c.7 0 1.2-.1 1.5-.3.3-.2.5-.5.5-1l-.1-.4c0-.1-.2-.3-.4-.3l-.8-.3a37.8 37.8 0 00-2.5-.7l-.9-.5-.4-.6a2.3 2.3 0 010-1.8l.6-.8 1-.5 1.3-.2" fill="var(--header-logo-primary)"/> <path class="author" d="M6.5 39c.3 0 .5 0 .6-.2l.3-.5.5-2.2.7-2.3v-.3-.2h-.8l-.2.5-.8 3.2a10.4 10.4 0 00-.2 1h-.1V38a8 8 0 00-.3-1 58.7 58.7 0 01-.9-3.3.8.8 0 00-.5-.2c-.2 0-.4 0-.5.2a1 1 0 00-.3.5 24.6 24.6 0 00-.8 3.7l-.1.3L3 38v-.2a10.5 10.5 0 00-.2-.8l-.9-3.3-.1-.3-.3-.1h-.4H1v.5l.2.5 1.1 4c0 .3.2.4.3.5l.6.2h.3l.2-.1.2-.3.2-.4a35.3 35.3 0 00.6-3.5l.2-.2v.2l.2.6.6 2.8c0 .3.2.6.3.7l.6.2zm3.9-6.6c.2 0 .4 0 .5-.2l.1-.5-.1-.5c-.1-.2-.3-.2-.5-.2-.3 0-.5 0-.6.2l-.2.5.2.5.6.2zm0 6.6h.3l.1-.3v-5l-.1-.3H10l-.1.3v.7a102.3 102.3 0 010 3.9V38.9l.4.1zm4.1 0l.9-.1.2-.5v-.3h-.7-.3l-.5-.1-.1-.5v-3.2-.1h1.3c.1 0 .2 0 .3-.2v-.3-.3H15a14 14 0 01-.7-.1H14 14v-1.5l-.1-.3H13V33.2l-.2.2h-.6l-.3.2v.2c0 .2 0 .3.3.3h.6l.1.2a61.4 61.4 0 010 3.8l.3.5c.2.1.3.3.5.3l.7.1zm6.6 0h.3l.1-.4v-1.2a58.6 58.6 0 010-1.5v-.5l-.1-1-.5-.8-.6-.3a3 3 0 00-.8-.1 2 2 0 00-.8.1 2 2 0 00-.5.3l-.3.3v.1h-.1V34a46.5 46.5 0 01-.1-2.8l-.4-.1-.4.1V39l.3.1h.5v-1a68.2 68.2 0 000-1.4v-1l.2-.7a1.4 1.4 0 01.9-.8h.6c.4 0 .7 0 .9.3.2.2.3.6.3 1v1.2a46.6 46.6 0 010 1.2V39h.5zm7.7 0l.4-.1.3-.4a139.5 139.5 0 002.1-6.7c0-.2 0-.3-.3-.3H31c-.2 0-.3.1-.4.4a76.8 76.8 0 00-1.3 4.4 119.3 119.3 0 01-.7 1.6l-.2-.1v-.3a60.7 60.7 0 01-1.6-4.7 210 210 0 00-.4-1.2h-.7c-.2 0-.3 0-.3.2a.8.8 0 000 .3 42.8 42.8 0 011 2.8l.2.6.2.5a386.8 386.8 0 011 2.9h.4a13 13 0 01.7.1zm4.5-6.6c.2 0 .4 0 .5-.2l.2-.5-.2-.5c-.1-.2-.3-.2-.5-.2-.3 0-.4 0-.6.2l-.1.5.1.5.6.2zm0 6.6h.3l.1-.3v-5-.3h-.8l-.1.3v.7a102.3 102.3 0 010 3.9V38.9l.4.1zm4.2 0l.8-.1.2-.5v-.3h-1L37 38l-.1-.5v-3.2-.1h1.4l.2-.2.1-.3-.1-.3H38a14 14 0 01-.8-.1H37 37v-1.5l-.1-.3H36l-.1.4v1.3l-.2.2h-.6l-.2.2-.1.2c0 .2.1.3.3.3h.6l.2.2a61.4 61.4 0 010 3.8c0 .2.1.3.3.5 0 .1.2.3.4.3l.8.1zm3.9.2l1-.2.6-.4.3-.3.2-.2v.1l.2.4.1.3.3.1h.2l.1-.2v-.4a30 30 0 000-2.4v-.4c0-.8-.2-1.4-.5-1.8-.4-.4-1-.6-1.8-.6-.5 0-.8 0-1.2.2-.3 0-.5.3-.7.4a1.7 1.7 0 00-.6 1.3l.1.4.4.2.3-.1.1-.3.2-.5.2-.5.5-.2h.6c.5 0 .8 0 1 .2.3.2.4.6.4 1V35.9l-.2.2-.5.1h-.8l-1.1.2-.7.3a1 1 0 00-.4.5l-.1.6v.5l.4.4.6.3.8.2zm.2-.8c-.4 0-.6-.1-.8-.3a.6.6 0 01-.2-.5c0-.2 0-.3.3-.5l1-.3a19.8 19.8 0 001.3-.1c.2 0 .2 0 .2.2l-.1.6-.4.4a2 2 0 01-.6.3l-.7.2zm5.5.6l.6-.1c.2-.1.3-.2.3-.4l-.1-.2-.2-.1h-.2-.2l-.3-.1v-6.7l-.2-.3-.4-.1-.3.1-.1.4v.8a163.8 163.8 0 000 5v1l.2.4.4.2.5.1zm2.7 1.8c.4 0 .8-.1 1-.4.4-.3.6-.6.7-1l1.7-5.4.1-.2v-.3-.1H52.4l-.1.2-1.2 4.2v.1h-.4v-.1l-1.4-4.3-.1-.1H48.6c-.2 0-.3 0-.3.2v.2a4.8 4.8 0 00.3.6 28 28 0 01.7 2.2 125.4 125.4 0 001.1 2.4l.2.1v.3l-.2.3-.3.2a1 1 0 01-.4 0c-.2 0-.3 0-.4.2l-.1.3.1.3.5.1zm8-1.8h.4v-2.8l.1-.1H62l.2-.1.1-.4v-.3h-3.6c-.3 0-.4-.2-.4-.4v-2.1-.3l.3-.1a21.8 21.8 0 011.8 0 25.3 25.3 0 001.5 0h.4v-.5-.3h-1.7a46.3 46.3 0 01-2.8 0h-.5v.4a39.5 39.5 0 000 3.2v.2a107 107 0 010 3.5l.4.1zm6.2 0h.4l.1-.3V36c0-.5.2-1 .5-1.3.3-.3.8-.4 1.3-.4.3 0 .5-.2.5-.5 0-.1 0-.3-.2-.3l-.4-.2c-.3 0-.6 0-.8.2a2 2 0 00-.5.4c0 .2-.2.3-.3.4l-.1.2v-.3l-.1-.7-.1-.2H64l-.3.1-.1.3v.6a86.3 86.3 0 010 3.8V39h.2l.2.1zm4.3-6.6c.2 0 .4 0 .5-.2l.2-.5c0-.2 0-.4-.2-.5-.1-.2-.3-.2-.5-.2s-.4 0-.5.2l-.2.5c0 .2 0 .3.2.5l.5.2zm0 6.6h.4v-5.3-.3h-.8v1a102.3 102.3 0 01-.1 3.9V38.9l.5.1zm4.5.1l1-.1.7-.4.5-.5v-.4c0-.3 0-.4-.3-.4-.1 0-.2 0-.3.2l-.3.3-.5.4-.8.1-.7-.1a1.6 1.6 0 01-.9-1l-.1-.7v-.2h1.2a55.2 55.2 0 011.5 0h1l.3-.2.2-.6c0-.3 0-.6-.2-.9a2.2 2.2 0 00-1.2-1.2c-.3-.2-.7-.2-1-.2a3 3 0 00-1.1.2c-.3 0-.6.2-.8.4l-.5.7a3 3 0 00-.3.9 4.7 4.7 0 000 2l.6 1 .8.5c.3.2.7.2 1.2.2zm1.3-3.5h-2.9v-.3-.4l.4-.4a1.7 1.7 0 011.2-.5c.3 0 .5 0 .7.2.2 0 .3.1.5.3l.2.4.1.4v.2l-.2.1zm4.5 3.5l1-.1.6-.4.3-.3.2-.2v.1a13.6 13.6 0 01.2.8h.7v-1.3a212 212 0 000-5.6v-.6l-.1-.4-.4-.1-.4.1v.4a46.5 46.5 0 000 2.4v.1h-.2c0-.2-.1-.3-.3-.4l-.5-.3a2.8 2.8 0 00-2 0l-.7.6c-.3.3-.4.6-.6 1l-.2 1.2c0 .5 0 .9.2 1.3l.5 1a2 2 0 001.7.7zm.3-.8c-.3 0-.5 0-.8-.2-.2 0-.4-.2-.5-.4a2 2 0 01-.3-.7l-.1-.8v-.8l.4-.7c.1-.2.3-.4.6-.5a2 2 0 011.5 0c.2 0 .4.2.5.4l.4.6v1c0 .6 0 1.2-.4 1.5-.3.4-.7.6-1.3.6zm4.7.7h.4l.1-.3v-.3a25.7 25.7 0 010-1v-1.5c0-.3 0-.6.2-.8l.3-.6c.1-.1.3-.3.5-.3l.6-.1c.3 0 .5 0 .7.3.2.2.3.6.3 1v1.1a45 45 0 000 1.4v1h.9v-3.6l.2-.5a1.2 1.2 0 01.7-.7h.6c.3 0 .6 0 .8.3.2.2.3.6.3 1v1.1a45 45 0 000 1.4v.7l.1.3h.8l.1-.2v-1.3a13.8 13.8 0 000-.8v-1.3c0-.4 0-.8-.2-1 0-.3-.2-.5-.4-.7-.1-.2-.3-.3-.5-.3l-.7-.1a2 2 0 00-1 .1 2 2 0 00-.7.7l-.2.2-.1-.2-.2-.3-.5-.4-.8-.1a1.6 1.6 0 00-1.3.5l-.3.4-.2.1H84v-.4a56.8 56.8 0 01-.2-.5h-.5l-.1.4a170.9 170.9 0 010 4.2v1l.4.1zm10.7.2l1-.2c.3-.1.5-.2.6-.4.2 0 .3-.2.4-.3l.1-.2.1.1.1.4.1.3.3.1h.3V38.4a30 30 0 000-2.4v-.4c0-.8-.1-1.4-.5-1.8-.3-.4-1-.6-1.7-.6-.5 0-1 0-1.2.2-.3 0-.6.3-.8.4a1.7 1.7 0 00-.6 1.3l.1.4.4.2.3-.1.2-.3.1-.5c0-.2.2-.3.3-.5l.4-.2h.7c.4 0 .8 0 1 .2.2.2.4.6.4 1v.4l-.1.2-.2.2-.5.1h-.8l-1 .2-.8.3a1 1 0 00-.4.5l-.1.6.1.5c0 .2.2.3.4.4.1.2.3.3.5.3l.8.2zm.2-.8c-.3 0-.6-.1-.8-.3a.6.6 0 01-.2-.5c0-.2.1-.3.3-.5l1-.3a19.8 19.8 0 001.4-.1c.1 0 .2 0 .2.2s0 .4-.2.6l-.4.4a2 2 0 01-.5.3l-.8.2zm4.8.6h.4V35.8l.2-.8.4-.6.6-.3.6-.1c.3 0 .6 0 .8.3.2.2.3.6.3 1v1.1a46.2 46.2 0 000 1.4v1l.4.1h.5v-1.6a13.8 13.8 0 000-.8v-1.3l-.1-1-.4-.7c-.2-.2-.4-.3-.7-.3l-.7-.1a2 2 0 00-.8.1 2 2 0 00-.8.7l-.2.2V34l-.1-.4-.1-.3H99l-.1.3v.1a390.2 390.2 0 010 4.2V38.9l.4.1z" fill="var(--header-logo-secondary)" fill-rule="nonzero"/> </g> </svg> </div> </figure> </a> <a href="#video-modal-trigger-3" class="c-modal__close"></a> </div> </header> <div class="u-wrap"> <figure class="c-embed"> <div class="c-embed__wrapper"> <iframe title="Course trailer" width="1920" height="1080" loading="lazy" decoding="async" data-src="https://player.vimeo.com/video/678683072?texttrack=en&quality=1080p&autoplay=0&loop=0&autopause=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> </div> </figure> </div> </div> <button type="button" class="c-modal__wing"></button> <button type="button" class="c-modal__wing"></button> </section> <section class="o-slat c-creator anim-creator" id="about-vitaly"> <div class="c-creator__wrapper u-wrap"> <header class="c-creator__header anim-creator-content u-flow--m"> <svg xmlns="http://www.w3.org/2000/svg" width="140" height="79" viewBox="0 0 140 79"><defs><style>.bb58faa2-17c7-4362-8801-b5804a5a7a28,.eb8869b3-a8b5-4789-a147-c77c8d887def,.f0d95a97-7594-4692-90bb-5c751049101b,.fe5a5bb0-73ff-41df-8f1e-cc5db50a9da5{fill:none;stroke-miterlimit:10}.bb58faa2-17c7-4362-8801-b5804a5a7a28,.eb8869b3-a8b5-4789-a147-c77c8d887def{stroke:#fff8ec}.bb58faa2-17c7-4362-8801-b5804a5a7a28,.eb8869b3-a8b5-4789-a147-c77c8d887def,.f0d95a97-7594-4692-90bb-5c751049101b,.fe5a5bb0-73ff-41df-8f1e-cc5db50a9da5{stroke-linecap:round}.bb58faa2-17c7-4362-8801-b5804a5a7a28,.f0d95a97-7594-4692-90bb-5c751049101b{stroke-width:2px}.f0d95a97-7594-4692-90bb-5c751049101b,.fe5a5bb0-73ff-41df-8f1e-cc5db50a9da5{stroke:#82cdb2}</style></defs><g id="f034a11a-4d33-4bb1-b8a2-d7d3d57be262" data-name="spark"><path class="bb58faa2-17c7-4362-8801-b5804a5a7a28" d="M97.65 5v4.55M97.65 19.14v4.55M107 14.34h-4.56M92.86 14.34H88.3"/><path class="eb8869b3-a8b5-4789-a147-c77c8d887def" d="M116.65 33v2.11M116.65 39.57v2.12M121 37.34h-2.12M114.42 37.34h-2.12"/></g><g id="f9d83552-2558-431a-b5da-065af031a3c2" data-name="chef-hat"><path d="M84.71 29.53a17.76 17.76 0 00-22.71-17A17.72 17.72 0 0029.54 12a19 19 0 00-2.84-.22 17.72 17.72 0 00-1.61 35.37V77h42.29V47.24a17.72 17.72 0 0017.33-17.71z" stroke-linejoin="round" stroke="#82cdb2" fill="#fff8ec" stroke-width="2" stroke-linecap="round"/><path class="fe5a5bb0-73ff-41df-8f1e-cc5db50a9da5" d="M37.05 52.85v23.98M46.41 52.85v23.98M55.78 52.85v23.98"/></g><g id="b417e89f-7035-4f35-9eac-06270ae94a9f" data-name="clock" stroke="#ee5b68" stroke-linecap="round"><path fill="#ffa18f" stroke-linejoin="round" stroke-width="2" d="M86.42 44.78H67.95l-9.24 16 9.24 16h18.47l9.24-16-9.24-16z"/><path fill="none" stroke-miterlimit="10" d="M75.83 53.59v8.54h7.64"/></g><g id="e98fcba1-87e9-42bf-80c6-d41eb3ea1429" data-name="baseline"><path class="f0d95a97-7594-4692-90bb-5c751049101b" d="M2.07 77.22h117.64M128.36 77.22h9.71"/></g></svg> <h1 class="c-h c-h-6">Smart Interface Design Patterns, curated by yours truly chef in charge, Vitaly Friedman.</h1> </header> <figure class="c-creator__image anim-creator-image"> <picture> <source type="image/avif" srcset="/static/img/vitaly--mobile.avif 540w" media="(max-width: 750px)" sizes="(max-width: 750px) 100vw, 100vw"> <source type="image/avif" srcset="/static/img/vitaly.avif 940w" media="(min-width: 750px)" sizes="(min-width: 750px) 100vw, 100vw"> <source srcset="/static/img/vitaly--mobile.jpg 540w" media="(max-width: 750px)" sizes="(max-width: 750px) 100vw, 100vw"> <source srcset="/static/img/vitaly.jpg 940w" media="(min-width: 750px)" sizes="(min-width: 750px) 100vw, 100vw"> <img src="/static/img/vitaly--mobile.jpg" width="867" height="545" decoding="async" loading="lazy" alt="Vitaly sitting at a computer desk with a cup of coffee" /> </picture> </figure> <div class="c-creator__content o-prose o-prose--primary-links"> <!--<p>Coming up with a new solution for every problem takes time, and often it’s not necessary. We can rely on <strong>smart design patterns</strong> ahead of time to avoid problems down the line. This course is supposed to help with just that.</p>--> <p>My name is <a href=https://www.smashingmagazine.com/author/vitaly-friedman/>Vitaly</a>, and over the last 15 years, I’ve been scouting the web for <strong>reliable interface design patterns</strong>. I was honored to be involved in design and testing first-hand, studying solutions that worked well or failed miserably. All these <strong>learnings and insights</strong> from all these years are now collected in this video course.</p> <p>Over the years, I was wearing many hats, as designer and as developer, being involved in UX, interface design, usability testing and performance optimization.</p> <p>I love our wonderful community, and so love writing <a href=https://www.smashingmagazine.com/author/vitaly-friedman/>articles about the web</a>, speaking, workshopping and teaching. I’m the editor-in-chief and creative lead of <a href=https://www.smashingmagazine.com>Smashing Magazine</a>. In my <em>spare</em> time, I’m a front-end & UX consultant in Europe and abroad, working with big and small companies and organizations, such as European Parliament, Haufe-Lexware, Axel-Springer and others.</p> <p><a href=https://www.twitter.com/vitalyf>Twitter</a> — <a href=https://www.linkedin.com/in/vitalyfriedman/>LinkedIn</a></p> <p><a class="c-h c-button u-link u-link-highlight u-link-highlight--orange c-button--shadow c-button--shadow-orange" href="mailto:vitaly@smashingconf.com?subject=Smart Interface Design Patterns">vitaly@smashingconf.com</a></p> </div> </div> </section> <section class="o-slat c-packages anim-packages" id="packages"> <header class="c-section-header c-section-header--large u-wrap u-flow--m"> <svg height="142" class="anim-hand" viewBox="0 0 155 117"><g class="sparks"><circle cx="139.85" cy="59.78" r="2.3" fill="#fff6b3"/> <circle cx="7.29" cy="45.86" r="2.3" fill="#fff6b3"/> <circle cx="51.65" cy="35.57" r="2.3" fill="#fff6b3"/> <circle cx="115.17" cy="30.24" r="2.3" fill="#fff6b3"/> <circle cx="76.51" cy="47.53" r="1.44" fill="#fff6b3"/> <circle cx="17.25" cy="90.35" r="1.44" fill="#fff6b3"/> <circle cx="11.48" cy="64.93" r="1.44" fill="#fff6b3"/> <circle cx="142" cy="90.35" r="1.44" fill="#fff6b3"/> <circle cx="116.26" cy="51.77" r="1.44" fill="#fff6b3"/> <g> <line x1="144.4" y1="33.82" x2="144.4" y2="36.54" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/> <line x1="144.4" y1="42.28" x2="144.4" y2="45" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/> <line x1="149.99" y1="39.41" x2="147.27" y2="39.41" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/> <line x1="141.54" y1="39.41" x2="138.81" y2="39.41" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/> </g> <g> <line x1="77.9" y1="6.45" x2="77.9" y2="10.4" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="77.9" y1="18.71" x2="77.9" y2="22.66" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="86" y1="14.55" x2="82.05" y2="14.55" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line x1="73.74" y1="14.55" x2="69.79" y2="14.55" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> </g> <g> <line x1="20.9" y1="25.11" x2="20.9" y2="27.27" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.1"/> <line x1="20.9" y1="31.83" x2="20.9" y2="34" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.1"/> <line x1="25.34" y1="29.55" x2="23.18" y2="29.55" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.1"/> <line x1="18.62" y1="29.55" x2="16.45" y2="29.55" fill="none" stroke="#fff8ec" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.1"/> </g></g><g class="lines"> <path d="M23.87,82.2l-13-4.52A1.28,1.28,0,0,1,10.13,76c.08-.23.16-.45.25-.68a1.28,1.28,0,0,1,1.68-.72l12.73,5.1a1.3,1.3,0,0,1,.72,1.66v0A1.29,1.29,0,0,1,23.87,82.2Z" fill="#ffe895"/> <path d="M130,80.46v0a1.3,1.3,0,0,1,.57-1.71l12.25-6.18a1.28,1.28,0,0,1,1.73.58c.11.21.21.43.31.64a1.28,1.28,0,0,1-.64,1.71l-12.52,5.61A1.28,1.28,0,0,1,130,80.46Z" fill="#ffe895"/> <path d="M33.19,67.89,22.44,59.36a1.27,1.27,0,0,1-.2-1.81l.45-.55a1.29,1.29,0,0,1,1.83-.14l10.35,9a1.3,1.3,0,0,1,.14,1.8l0,0A1.29,1.29,0,0,1,33.19,67.89Z" fill="#ffe895"/> <path d="M119.15,64.13l0,0a1.29,1.29,0,0,1,0-1.8l9.56-9.84a1.29,1.29,0,0,1,1.83,0c.17.17.33.34.5.5a1.3,1.3,0,0,1-.05,1.83l-10,9.41A1.29,1.29,0,0,1,119.15,64.13Z" fill="#ffe895"/> <path d="M47.54,55,40.16,43.38a1.29,1.29,0,0,1,.4-1.78l.61-.37a1.29,1.29,0,0,1,1.77.46l6.85,11.89a1.3,1.3,0,0,1-.46,1.75l0,0A1.3,1.3,0,0,1,47.54,55Z" fill="#ffe895"/> <path d="M103.84,53l0,0a1.28,1.28,0,0,1-.61-1.69L109,38.88a1.29,1.29,0,0,1,1.72-.62l.65.33a1.28,1.28,0,0,1,.55,1.74l-6.37,12.15A1.29,1.29,0,0,1,103.84,53Z" fill="#ffe895"/> <path d="M65.31,47.44,62.17,34.08a1.29,1.29,0,0,1,1-1.55l.69-.14a1.27,1.27,0,0,1,1.51,1l2.55,13.48a1.29,1.29,0,0,1-1,1.5h0A1.3,1.3,0,0,1,65.31,47.44Z" fill="#ffe895"/> <path d="M85.77,47.6h0a1.28,1.28,0,0,1-1.13-1.4L86,32.54a1.29,1.29,0,0,1,1.42-1.15l.71.09a1.27,1.27,0,0,1,1.09,1.46l-2,13.57A1.29,1.29,0,0,1,85.77,47.6Z" fill="#ffe895"/></g><g class="hand"><g id="fork"><path d="M120,80.4l-9.7-.14c-5.34-.06-9.72,3.45-9.77,7.84s4.24,8,9.58,8.07c.19,0,9.5.1,9.7.09" fill="none" stroke="#c9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="119.91" y1="88.33" x2="113.83" y2="88.26" fill="none" stroke="#c9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.24"/><path d="M112.5,96.05l.18-15.79H110.3c-5.34-.06-9.72,3.45-9.77,7.84s4.24,8,9.58,8.07Z" fill="#9683ba" stroke="#c9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M100,87.82l-64.69-.28" fill="none" stroke="#c9bde0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g><g><path d="M61,84.92H89.91a0,0,0,0,1,0,0v25.74a0,0,0,0,1,0,0H76.85A15.85,15.85,0,0,1,61,94.81V84.92A0,0,0,0,1,61,84.92Z" transform="translate(-0.69 0.54) rotate(-0.41)" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="57.84" y="75.42" width="9.18" height="16.04" rx="4.08" transform="translate(-0.59 0.44) rotate(-0.41)" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="67.05" y="75.48" width="9.18" height="20.72" rx="4.59" transform="translate(-0.61 0.51) rotate(-0.41)" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="76.24" y="75.42" width="9.18" height="20.72" rx="4.59" transform="translate(-0.61 0.57) rotate(-0.41)" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="85.44" y="75.35" width="9.18" height="23.75" rx="4.59" transform="translate(-0.62 0.64) rotate(-0.41)" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><rect x="84.52" y="93.55" width="9.18" height="17.76" rx="4.08" transform="translate(-44.46 78.13) rotate(-38.67)" fill="#ffa18f" stroke="#ee5b68" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></g></svg> <h1 class="c-h c-h-7">Simple prices, no surprises. Buy once, access forever.</h1> </header> <div class="u-wrap u-relative"> <ul class="c-packages__list"> <li class="c-package c-package--single"> <header class="u-flow--2xs"> <svg xmlns="http://www.w3.org/2000/svg" width="120" height="90" viewBox="0 0 120 90"><defs><style>.b4c7362a-6c9a-4042-8f1f-2f148dc83450{fill:#82cdb2}.f0222f54-f907-4e29-8714-c099d0c7adf3{fill:#ffa18f;stroke:#82cdb2;stroke-linecap:round;stroke-miterlimit:10}</style></defs><g id="a29db0c5-6c7b-4f1d-9d01-23a288b2b452" data-name="hat"><path d="M93.44 37.28a17 17 0 00-21.88-16.34 17 17 0 00-31.16-.48 17.54 17.54 0 00-2.73-.22 17 17 0 00-1.55 34v32.1h40.66v-32a17 17 0 0016.66-17.06z" fill="#fff8ec"/><path class="b4c7362a-6c9a-4042-8f1f-2f148dc83450" d="M94.56 37.28a18.18 18.18 0 00-23.3-17.43l1.28.52a18.17 18.17 0 00-33.12-.48l1.28-.52a18.16 18.16 0 00-15.92 30.71 18.48 18.48 0 0011.34 5.3L35 54.25v32.09a1.15 1.15 0 001.13 1.13h40.65a1.14 1.14 0 001.13-1.13v-32l-1.13 1.13a18.38 18.38 0 0017.78-18.19 1.13 1.13 0 00-2.25 0 16.09 16.09 0 01-15.53 15.9 1.15 1.15 0 00-1.13 1.13v32l1.13-1.13H36.12l1.13 1.13V54.25a1.16 1.16 0 00-1.13-1.13 15.92 15.92 0 114-31.57 1.17 1.17 0 001.26-.55 15.92 15.92 0 0129.2.48 1.13 1.13 0 001.28.52 15.9 15.9 0 0120.45 15.28 1.13 1.13 0 002.25 0z"/><path class="f0222f54-f907-4e29-8714-c099d0c7adf3" d="M47.63 59.66v26.53M56.62 59.66v26.53M65.62 59.66v26.53"/></g><g id="b8bff799-5564-4b7a-bc42-f1fc0d936b4c" data-name="beetroot"><circle cx="80.95" cy="67.7" r="17.91" stroke="#9683ba" fill="#c9bde0" stroke-width="2" stroke-miterlimit="10"/><circle cx="80.95" cy="67.7" r="7.71" stroke-width=".5" fill="none" stroke="#9683ba" stroke-miterlimit="10"/><circle cx="80.95" cy="67.7" r="10.37" stroke-linejoin="round" stroke-dasharray="0 3" fill="none" stroke="#9683ba" stroke-linecap="round"/><path fill="#9683ba" d="M79.08 64.51v6.38l4.69-3.19-4.69-3.19z"/></g><path class="b4c7362a-6c9a-4042-8f1f-2f148dc83450" d="M2.5 88.21h100.84c4.64 0 9.32.19 14 0h.2a1.13 1.13 0 000-2.26H16.66c-4.64 0-9.32-.18-14 0H2.5a1.13 1.13 0 000 2.26z" id="e58099dd-b3eb-455d-a489-8f9ef855729b" data-name="baseline"/></svg> <h2 class="c-h c-h-5"> <a href="https://smart-interface-design-patterns.thinkific.com/enroll/1645405?et=paid"> Sous chef $300 </a> </h2> <div class="c-package__subtitles u-flow--2xs"> <a href="https://smart-interface-design-patterns.thinkific.com/enroll/1645405?et=paid" class="c-h c-h-1 c-package__subtitle c-button--shadow c-button--shadow-blue c-button--shadow-blue-border u-margin-top-xs"> Video library only </a> </div> </header> <div class="o-body o-body--list"> <ul> <li><strong>100s of real-life examples</strong></li> <li><strong>35 video lessons</strong> (total 10h)</li> <li><strong>5 new videos every year</strong></li> <li>Quality recordings (incl. English captioning)</li> <li>Life-time access to all videos, slides and checklists</li> <li>Credit cards, PayPal, bank transfer</li> </ul> </div> <a class="c-package__button c-button--shadow c-button--shadow-orange" href="https://smart-interface-design-patterns.thinkific.com/enroll/1645405?et=paid"> <div class="c-package__button-cost c-package__button-promo"> <span class="c-package__button-cost-upcoming">$395</span> <span>$300</span> </div> <p class="c-package__button-specs"> <strong> Get the course! </strong> <span class="u-step-0">Happy birds (3 left)</span> </p> </a> </li> <li class="c-package c-package--single"> <header class="u-flow--2xs"> <svg xmlns="http://www.w3.org/2000/svg" width="120" height="90" viewBox="0 0 120 90"><defs><style>.b4367bc6-c039-405c-bb97-8b073c3070bb{fill:#82cdb2}.a556932d-8455-49da-b7da-e2c6fa756271{fill:#ffa18f;stroke:#82cdb2;stroke-linecap:round}.ab917930-6991-4546-bacc-eabcaabe5e13,.b7c536d1-57a2-4b2d-9286-3e51e1a4cb1f{stroke-linecap:round}.a556932d-8455-49da-b7da-e2c6fa756271,.aa2fff2c-ca68-49ab-a0e5-edc44e8eef6e,.ab917930-6991-4546-bacc-eabcaabe5e13,.b7c536d1-57a2-4b2d-9286-3e51e1a4cb1f,.eacf2438-dd18-40b8-a2fb-42ac0c472b6a{stroke-miterlimit:10}.aa2fff2c-ca68-49ab-a0e5-edc44e8eef6e,.ab917930-6991-4546-bacc-eabcaabe5e13,.b7c536d1-57a2-4b2d-9286-3e51e1a4cb1f,.eacf2438-dd18-40b8-a2fb-42ac0c472b6a{fill:none}.ab917930-6991-4546-bacc-eabcaabe5e13,.eacf2438-dd18-40b8-a2fb-42ac0c472b6a{stroke:#bfe6c7}.aa2fff2c-ca68-49ab-a0e5-edc44e8eef6e{stroke:#9683ba;stroke-width:.5px}.b7c536d1-57a2-4b2d-9286-3e51e1a4cb1f{stroke:#ee5b68}</style></defs><g id="e8fc408e-bafd-4301-b6c3-327d7f533996" data-name="hat"><path d="M80.44 37.28a17 17 0 00-21.88-16.34 17 17 0 00-31.16-.48 17.54 17.54 0 00-2.73-.22 17 17 0 00-1.55 34v32.1h40.66v-32a17 17 0 0016.66-17.06z" fill="#fff8ec"/><path class="b4367bc6-c039-405c-bb97-8b073c3070bb" d="M81.56 37.28a18.18 18.18 0 00-23.3-17.43l1.28.52a18.17 18.17 0 00-33.12-.48l1.28-.52a18.16 18.16 0 00-15.92 30.71 18.48 18.48 0 0011.34 5.3L22 54.25v32.09a1.15 1.15 0 001.13 1.13h40.65a1.14 1.14 0 001.13-1.13v-32l-1.13 1.13a18.38 18.38 0 0017.78-18.19 1.13 1.13 0 00-2.25 0 16.09 16.09 0 01-15.53 15.9 1.15 1.15 0 00-1.13 1.13v32l1.13-1.13H23.12l1.13 1.13V54.25a1.16 1.16 0 00-1.13-1.13 15.92 15.92 0 114-31.57 1.17 1.17 0 001.26-.55 15.92 15.92 0 0129.2.48 1.13 1.13 0 001.28.52 15.9 15.9 0 0120.45 15.28 1.13 1.13 0 002.25 0z"/><path class="a556932d-8455-49da-b7da-e2c6fa756271" d="M34.63 59.66v26.53M43.62 59.66v26.53M52.62 59.66v26.53"/></g><g id="ac176ef9-2c7c-434d-bd5a-774d9346f88b" data-name="brush"><path class="ab917930-6991-4546-bacc-eabcaabe5e13" d="M95.9 25.59h3v59a1.48 1.48 0 01-1.48 1.48 1.48 1.48 0 01-1.48-1.48v-59z" transform="rotate(16.18 97.4 55.85)"/><path class="ab917930-6991-4546-bacc-eabcaabe5e13" d="M111.26 8s-11.4 9.68-7.36 18.28l3.79 1.1C115.71 22.27 111.26 8 111.26 8z"/><path class="eacf2438-dd18-40b8-a2fb-42ac0c472b6a" d="M111.72 22l-5.38 2.96-2.96-5.38"/><path class="eacf2438-dd18-40b8-a2fb-42ac0c472b6a" d="M112.72 18.56l-5.38 2.96-2.96-5.38"/><path class="eacf2438-dd18-40b8-a2fb-42ac0c472b6a" d="M112.45 15.65L108.14 18 106 14.21"/></g><g id="b5313463-0d31-4bfa-8312-7c4a69a14271" data-name="pencil"><path class="aa2fff2c-ca68-49ab-a0e5-edc44e8eef6e" d="M89.17 78.31l6.06-65.63"/><path d="M97.69 13.1l-6.33 68.55a2.49 2.49 0 11-5-.45l6.32-68.51v0L95.84 6z" stroke="#9683ba" fill="none" stroke-miterlimit="10" stroke-linecap="round"/><path class="aa2fff2c-ca68-49ab-a0e5-edc44e8eef6e" d="M95.15 13.46c.07-.72.57-.91 1.29-.85A1.31 1.31 0 0197.61 14"/><path class="aa2fff2c-ca68-49ab-a0e5-edc44e8eef6e" d="M95.15 13.46c.07-.72-.39-1-1.1-1.07a1.3 1.3 0 00-1.41 1.17"/><path stroke="#fff8ec" stroke-width=".46" fill="none" stroke-miterlimit="10" d="M91.39 78.66l-4.32-.38"/></g><g id="acb25e30-659f-4866-868d-add492eb1626" data-name="glass"><path d="M76.3 48.79h28v27.1A11.1 11.1 0 0193.18 87H87.4a11.1 11.1 0 01-11.1-11.1V48.79h0z" stroke-width="2" stroke="#ee5b68" stroke-miterlimit="10" stroke-linecap="round" fill="#ffa18f"/><path class="b7c536d1-57a2-4b2d-9286-3e51e1a4cb1f" d="M75.03 58.74h28.52M76.03 55.51h28.52"/></g><g id="bb18edc6-01f3-408c-8c00-5ddae0dbba76" data-name="beetroot"><circle cx="67.95" cy="67.7" r="17.91" fill="#c9bde0" stroke-width="2" stroke="#9683ba" stroke-miterlimit="10"/><circle class="aa2fff2c-ca68-49ab-a0e5-edc44e8eef6e" cx="67.95" cy="67.7" r="7.71"/><circle cx="67.95" cy="67.7" r="10.37" stroke-linejoin="round" stroke-dasharray="0 3" stroke="#9683ba" fill="none" stroke-linecap="round"/><path fill="#9683ba" d="M66.08 64.51v6.38l4.69-3.19-4.69-3.19z"/></g><path class="b4367bc6-c039-405c-bb97-8b073c3070bb" d="M2.5 88.21h100.84c4.64 0 9.32.19 14 0h.2a1.13 1.13 0 000-2.26H16.66c-4.64 0-9.32-.18-14 0H2.5a1.13 1.13 0 000 2.26z" id="ab1f3a50-a3a2-491f-8e88-65e20940e80b" data-name="baseline"/><g id="a36590a9-3fb8-48f8-b60b-083ae53d71c5" data-name="leaf" stroke-miterlimit="10" stroke-linecap="round" stroke="#82cdb2"><path d="M94.26 78.14l-.88-5.46h0l5.46-.88a9.46 9.46 0 0110.84 7.83l.88 5.47h0l-5.46.88a9.46 9.46 0 01-10.84-7.84z" fill="#bfe6c7" stroke-width="2"/><path d="M110.06 84.48s-2.67-8.39-16.16-11.33c0 0 6.06 2.25 7.51 7.85" stroke-width=".5" fill="none"/></g></svg> <h2 class="c-h c-h-5"> <a href="https://smart-interface-design-patterns.thinkific.com/enroll/1645405?price_id=2163032"> Master chef $549 </a> </h2> <div class="c-package__subtitles u-flow--2xs"> <a href="https://smart-interface-design-patterns.thinkific.com/enroll/1645405?price_id=2163032" class="c-h c-h-1 c-package__subtitle c-button--shadow c-button--shadow-blue c-button--shadow-blue-border u-margin-top-xs"> Video library + UX training </a> </div> </header> <div class="o-body o-body--list"> <ul> <li><strong>100s of real-life examples</strong></li> <li><strong>35 video lessons</strong> (total 10h)</li> <li><strong>5 new videos every year</strong></li> <li>Quality recordings (incl. English captioning)</li> <li>Life-time access to all videos, slides and checklists</li> <li><strong>Live UX training (4 weeks)</strong> with hands-on UX challenges (next: Mar 2025)</li> <li>Personal 1:1 feedback & Slack</li> <li>Answers to all your questions</li> <li><strong>UX certification</strong></li> <li>Credit cards, PayPal, bank transfer</li> </ul> </div> <a class="c-package__button c-button--shadow c-button--shadow-orange" href="https://smart-interface-design-patterns.thinkific.com/enroll/1645405?price_id=2163032"> <div class="c-package__button-cost c-package__button-promo"> <span class="c-package__button-cost-upcoming"></span> <span>$549</span> </div> <p class="c-package__button-specs"> <strong> Get the course! </strong> <span class="u-step-0">Eary birds (6 left)</span> </p> </a> </li> <li class="c-package c-package--double"> <header class="u-flow--2xs"> <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="303" viewBox="0 0 303 161"><g clip-path="url(#a)"><path d="M222 1a80 80 0 0 0-63.2 129l.8 1 .8 1a79.8 79.8 0 0 0 123.2 0l.8-1 .8-1A80 80 0 0 0 222 1Z" fill="#82CDB2"/><path d="m158.8 130 .8 1 .8 1h123.2l.8-1 .8-1H158.8Z" fill="#BFE6C7"/><path d="m236.6 78.1-.3-3.4 3.4-.2c11.8-1 22.1 7.8 23 19.5l.4 3.4-3.4.3c-11.8 1-22.1-7.8-23-19.6Z" fill="#BFE6C7" stroke="#548F9C" stroke-width="2.7" stroke-miterlimit="10" stroke-linecap="round"/><path d="M237 75.3s17.3 1.9 25.8 21.8c0 0-8.7-7.9-18.4-8.5" stroke="#548F9C" stroke-width=".7" stroke-miterlimit="10" stroke-linecap="round"/><path d="m263 97.4.3-3.4a21.4 21.4 0 0 1 23-19.5l3.5.3-.3 3.4a21.4 21.4 0 0 1-23 19.5l-3.4-.3Z" fill="#BFE6C7" stroke="#548F9C" stroke-width="2.7" stroke-miterlimit="10" stroke-linecap="round"/><path d="M289.2 75.3s-17.4 1.9-25.9 21.8c0 0 8.7-7.9 18.4-8.5" stroke="#548F9C" stroke-width=".7" stroke-miterlimit="10" stroke-linecap="round"/><path d="M262.9 106.3V50.8" stroke="#548F9C" stroke-width="2.7" stroke-miterlimit="10" stroke-linecap="round"/><path d="M242.8 106.9h41.6v1.8c0 11.2-9.1 20.4-20.4 20.4h-.9a20.4 20.4 0 0 1-20.4-20.4V107h0Z" fill="#FFA18F" stroke="#D35C6A" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/><path d="M262.4 92.4s-1.3-23.2 15.9-31.8" stroke="#548F9C" stroke-width="2.7" stroke-miterlimit="10" stroke-linecap="round"/><path d="M291.4 53a2.3 2.3 0 0 0 1.4 3.6c2.3.6 2.2 4-.2 4.4-1.5.3-2.3 2-1.5 3.4 1.2 2.1-1.2 4.5-3.3 3.1a2.3 2.3 0 0 0-3.4 1.3c-.7 2.4-4 2.3-4.5-.1-.3-1.5-2-2.3-3.4-1.5-2.1 1.2-4.5-1.3-3.1-3.3.9-1.3.2-3-1.3-3.5-2.4-.6-2.3-4 .1-4.4 1.6-.3 2.3-2.1 1.5-3.5-1.2-2 1.3-4.4 3.3-3 1.3.9 3 .2 3.5-1.4.6-2.3 4-2.2 4.4.2.4 1.5 2.1 2.3 3.5 1.5 2-1.2 4.4 1.2 3 3.3Z" fill="#FBE696" stroke="#E9B381" stroke-width="2" stroke-miterlimit="10"/><path d="M282.4 61.4a2.9 2.9 0 1 0 0-5.8 2.9 2.9 0 0 0 0 5.8Z" stroke="#E9B381" stroke-linecap="round" stroke-linejoin="round"/><path d="M275.5 34.7a3.2 3.2 0 0 0 1.9 4.8c3.2.9 3 5.6-.2 6.2a3.2 3.2 0 0 0-2.1 4.7c1.7 3-1.7 6.2-4.5 4.3a3.2 3.2 0 0 0-4.9 1.8c-.8 3.3-5.5 3.1-6.1-.2a3.2 3.2 0 0 0-4.8-2c-2.9 1.6-6-1.8-4.2-4.6 1.2-1.8.3-4.3-1.8-4.8-3.3-.9-3.2-5.5.1-6.2a3.2 3.2 0 0 0 2.2-4.7c-1.8-3 1.7-6.1 4.5-4.2 1.8 1.2 4.2.2 4.8-1.9.8-3.3 5.5-3.1 6.2.2a3.2 3.2 0 0 0 4.7 2.1c2.9-1.7 6.1 1.7 4.2 4.5Z" fill="#C9BDE0" stroke="#9683BA" stroke-width="2" stroke-miterlimit="10"/><path d="M263 46.2a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" fill="#C9BDE0" stroke="#9683BA" stroke-miterlimit="10"/><path d="M253 49h-64v82h64V49Z" fill="#FFF8EC" stroke="#BFE6C7" stroke-miterlimit="10"/><path d="m227.5 99.7 12-20.8h6.4l-.4-1h-6.2c-.2 0-.4.2-.4.3l-12 20.8h-11.7l-12-20.8-.4-.2h-6.2l-.4.9h6.4l12 20.8.4.2H227l.4-.2Z" fill="#FFA18F"/><path d="M238.8 99.5v-21c0-.3.2-.5.5-.5.2 0 .4.2.4.4v21c0 .3-.2.5-.4.5a.4.4 0 0 1-.5-.5Z" fill="#82CDB2"/><path d="M202.4 99.5v-21c0-.3.2-.5.5-.5.2 0 .4.2.4.4v21c0 .3-.2.5-.4.5a.4.4 0 0 1-.5-.5Z" fill="#FFA18F"/><path d="M214.6 99.5v-21c0-.3.2-.5.4-.5.3 0 .4.2.4.4v21c0 .3-.2.5-.4.5a.4.4 0 0 1-.4-.5Z" fill="#82CDB2"/><path d="M226.7 99.5v-21c0-.3.2-.5.4-.5.3 0 .5.2.5.4v21c0 .3-.2.5-.5.5a.4.4 0 0 1-.4-.5ZM202.9 81a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" fill="#FFA18F"/><path d="M202.9 102a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM215 81a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z" fill="#82CDB2"/><path d="M227.1 102a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM215 102a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z" fill="#FFA18F"/><path d="M227.1 81a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" fill="#82CDB2"/><path d="M239.3 81a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z" fill="#FFA18F"/><path d="M239.3 102a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z" fill="#82CDB2"/><path d="m203.3 99.7 12-20.8h11.6l12 20.8.4.2h6.2l.4-1h-6.3l-12-20.7-.4-.2H215c-.1 0-.3 0-.4.2l-12 20.8h-6.3l.4.9h6.2l.4-.2Z" fill="#82CDB2"/><path d="M233.2 91.4a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM209 91.4a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z" fill="#FFA18F"/><path d="M180.6 93.8V72.4h-7.8v21.4a18 18 0 1 0 7.8 0Z" stroke="#548F9C" stroke-width="2" stroke-miterlimit="10"/><path d="M194.8 112.2c-1.7 6.6-10.7 3-19 .3-10.9-3.7-16.7 2.7-16.7 2.7s2.7 13.9 17 14.3c14.3.4 18.7-12 18.7-17.3" fill="#FBE696"/><path d="M194.8 112.2c-1.7 6.6-10.7 3-19 .3-10.9-3.7-16.7 2.7-16.7 2.7s2.7 13.9 17 14.3c14.3.4 18.7-12 18.7-17.3" stroke="#548F9C" stroke-width="2" stroke-miterlimit="10"/><path d="M194.8 111.5s-6.7-5-16.7 1.7c0 0 16.4 7 16.7-1.7Z" fill="#FFCA6C" stroke="#548F9C" stroke-width="2" stroke-miterlimit="10"/><path d="M170.5 72.3H183" stroke="#548F9C" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/><path d="M176.8 65a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4Z" fill="#FFF7B3"/><path d="M165.8 54a4.8 4.8 0 1 0 0-9.5 4.8 4.8 0 0 0 0 9.6Z" fill="#BFE6C7"/><path d="M179.7 46.9a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2Z" fill="#548F9C"/><path d="M156.3 69.5v2.3M156.3 76.5v2.2M160.9 74.1h-2.2M154 74.1h-2.3" stroke="#FFF7B3" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></g><g clip-path="url(#b)"><path d="M80 0a80 80 0 0 0-63.2 129l.8 1 .8 1a79.8 79.8 0 0 0 123.2 0l.8-1 .8-1A80 80 0 0 0 80 0Z" fill="#FF6855"/><path d="m16.8 129 .8 1 .8 1h123.2l.8-1 .8-1H16.8Z" fill="#BFE6C7"/><path d="M107.4 48H45v80h62.5V48Z" fill="#FFF8EC" stroke="#82CDB2" stroke-width="2" stroke-miterlimit="10"/><path d="M68.7 81.7c2.6-1.8 3.3-7.5.3-12.2-2.8-4.6-7-7.1-9.8-5.9l9.5 18.1Z" fill="#FFF7B3" stroke="#FFCA6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M86.3 62.8 82.9 69c-1.9 3.5-1 7.6 1.8 9 3 1.6 6.7 0 8.6-3.5l3.4-6.3M91.5 65.5l-2.1 4" stroke="#FFCA6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m94 73-10.3-5.5-.8 1.6c-1.9 3.5-1 7.6 1.8 9 3 1.6 6.8 0 8.6-3.5L94 73h0Z" fill="#FFF7B3" stroke="#FFCA6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M86.1 94.2h10.5M65 94.2H54.6M59 63.7l26.5 50.6M84.6 78l-19 36.3" stroke="#FFCA6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M33.8 82.4v3.4c0 2.5-2 4.5-4.5 4.5-4 0-7.3 3.3-7.3 7.3V128h37.3V97.6c0-4-3.2-7.3-7.3-7.3-2.4 0-4.5-2-4.5-4.5V82" fill="#548F9C"/><path d="M33.8 82.4v3.4c0 2.5-2 4.5-4.5 4.5-4 0-7.3 3.3-7.3 7.3V128h37.3V97.6c0-4-3.2-7.3-7.3-7.3-2.4 0-4.5-2-4.5-4.5V82" stroke="#92CAC4" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/><path d="M47.5 78.2v-5H33.8v4.5" fill="#548F9C"/><path d="M51.8 78.3H29.5v3.8h22.3v-3.8Z" fill="#548F9C" stroke="#92CAC4" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/><path d="m48.7 108-.2-.4a.5.5 0 0 0-.4 0c-.7.1-1.4-.3-1.7-.9-.3-.6 0-1.4.6-1.8a.5.5 0 0 0 .2-.7c-.5-.6-1-1.2-1.6-1.6a.5.5 0 0 0-.4-.1c-.2 0-.3 0-.4.2-.3.6-1 .9-1.7.6-.7-.3-1-1-.8-1.7v-.4l-.4-.2h-2.3c-.2 0-.3 0-.4.2v.4c.1.7-.2 1.4-.9 1.7-.6.2-1.4 0-1.7-.6-.1-.2-.2-.3-.4-.3l-.4.1a8 8 0 0 0-1.6 1.6l-.1.4.2.4c.6.3.9 1 .6 1.7-.2.7-1 1-1.6.8h-.4l-.3.4v2.3l.2.4h.4c.7-.1 1.4.2 1.7.9.3.6 0 1.4-.6 1.7l-.3.4.1.4c.5.6 1 1.1 1.7 1.6 0 0 0 0 0 0l.4.1.3-.2c.4-.7 1.1-1 1.8-.6.6.2 1 1 .8 1.6v.4c0 .2.2.2.4.3h2.3l.3-.2c0-.2.1-.3 0-.4-.1-.7.2-1.4.9-1.7.6-.3 1.4 0 1.8.6l.3.3.4-.1c.6-.5 1.2-1 1.6-1.7.1 0 .2-.2.1-.4 0-.1 0-.2-.2-.3-.6-.4-.9-1.1-.6-1.8.3-.6 1-1 1.7-.8h.4l.2-.3v-2.4h0Z" stroke="#FFF8EC" stroke-miterlimit="10" stroke-linecap="round"/><path d="M40.7 111.3a2.3 2.3 0 1 0 0-4.5 2.3 2.3 0 0 0 0 4.5Z" stroke="#FFF8EC" stroke-miterlimit="10" stroke-linecap="round"/><path d="M121 127.9a23.3 23.3 0 1 0 0-46.7 23.3 23.3 0 0 0 0 46.7Z" fill="#C9BDE0" stroke="#9683BA" stroke-width="2" stroke-miterlimit="10"/><path d="M121 114.6a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z" stroke="#9683BA" stroke-miterlimit="10"/><path d="M122 118a.5.5 0 1 1 .5.5.5.5 0 0 1-.5-.5Zm-3.5.3Zm7.3-1c-.1-.3 0-.6.3-.7.2-.1.5 0 .6.2a.5.5 0 0 1-.5.7.5.5 0 0 1-.4-.3Zm-11.1-.3a.5.5 0 0 1-.2-.7c0-.2.4-.3.6-.2.3.2.4.5.3.7-.1.2-.3.3-.5.3h-.2Zm14.5-1.7a.5.5 0 0 1 0-.6.5.5 0 1 1 .7.7l-.3.1c-.1 0-.3 0-.4-.2Zm-17.8-.6a.5.5 0 0 1 0-.7c.2-.2.5-.2.7 0 .2.2.2.5 0 .7l-.4.1-.3-.1Zm20.5-2.1a.5.5 0 0 1 0-.7c0-.2.4-.3.6-.1a.5.5 0 0 1-.3.9l-.3-.1Zm-23-1.1c-.1-.3 0-.6.2-.7.2-.1.5 0 .7.2a.5.5 0 0 1-.5.7c-.1 0-.3 0-.4-.2Zm24.9-2.3a.5.5 0 0 1-.3-.7c0-.3.3-.4.6-.3.3 0 .4.4.3.6 0 .2-.2.4-.5.4h-.1Zm-26.4-1.5c0-.2.1-.5.4-.6.3 0 .5.1.6.4 0 .3-.1.5-.4.6a.5.5 0 0 1-.6-.4Zm27-1.3a.5.5 0 0 1-.4-.5.5.5 0 0 1 1 0c0 .3-.2.5-.5.5Zm-26.8-2.2a.5.5 0 0 1-.5-.5.5.5 0 0 1 1 0c0 .3-.3.5-.5.5Zm26.3-2c0-.4 0-.6.4-.7.2 0 .5.2.5.4 0 .3 0 .6-.4.6a.5.5 0 0 1-.5-.4Zm-25.7-1.8a.5.5 0 0 1-.3-.6c.1-.3.4-.4.7-.3a.5.5 0 0 1-.2 1l-.2-.1Zm24.4-1.8c-.1-.3 0-.6.3-.7a.5.5 0 1 1 .2 1 .5.5 0 0 1-.5-.3ZM110 96.9a.5.5 0 0 1 0-.7c.1-.2.4-.3.6-.1.3.2.3.5.1.7l-.4.2-.3-.1Zm20.5-1.4a.5.5 0 0 1 0-.7c.3-.2.6-.2.8 0 .2.2.1.5 0 .7l-.4.2c-.1 0-.3 0-.4-.2ZM112.6 94a.5.5 0 0 1 0-.7c.3-.1.6 0 .8.1.1.3.1.6-.1.7l-.3.1c-.2 0-.3 0-.4-.2Zm14.9-.8a.5.5 0 0 1-.2-.6c.1-.3.4-.4.7-.2.2 0 .3.4.2.6-.1.2-.3.3-.5.3h-.2Zm-11.6-1.1c0-.3 0-.6.3-.7.3 0 .6 0 .7.3 0 .3 0 .6-.3.6h-.2a.5.5 0 0 1-.5-.2Zm8-.2a.5.5 0 0 1-.3-.6c0-.3.3-.5.6-.4.3 0 .5.3.4.6 0 .2-.3.4-.5.4h-.1Zm-4.2-.8c0-.3.2-.5.5-.5a.5.5 0 0 1 0 1 .5.5 0 0 1-.5-.5ZM118.6 100.4v8.3l6.2-4.2-6.2-4.1Z" fill="#9683BA"/><path d="M16.7 61v2.2M16.7 67.8V70M21.2 65.5H19M14.4 65.5h-2.1" stroke="#FFF7B3" stroke-miterlimit="10" stroke-linecap="round"/><path d="M33.4 36.3v2.9M33.4 45V48M39.2 42.1h-2.9M30.4 42.1h-2.8M129 54.3V57M129 63v2.8M134.8 60H132M126 60h-2.8" stroke="#FFF7B3" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></g><defs><clipPath id="a"><path fill="#fff" d="M142 1h160v160H142z"/></clipPath><clipPath id="b"><path fill="#fff" d="M0 0h160v160H0z"/></clipPath></defs></svg> <h2 class="c-h c-h-5"> <a href="https://smart-interface-design-patterns.thinkific.com/enroll/3082557?price_id=3951421"> UX Bundle Package </a> <span class="c-package__badge">Save $349!</span> </h2> <div class="c-package__subtitles u-flow--2xs"> <a href="https://smart-interface-design-patterns.com/" class="c-h c-h-1 c-package__subtitle c-button--shadow c-button--shadow-blue c-button--shadow-blue-border u-margin-top-xs"> Smart Interface Design Patterns </a> <p><strong>+</strong></p> <a href="https://measure-ux.com/" class="c-h c-h-1 c-package__subtitle c-button--shadow c-button--shadow-blue c-button--shadow-blue-border u-margin-top-xs"> How to Measure UX and Impact </a> </div> </header> <div class="o-body o-body--list"> <ul> <li><strong>100s of real-life examples</strong></li> <li><strong>35 video lessons</strong> (total 10h)</li> <li><strong>5 new videos every year</strong></li> <li>Quality recordings (incl. English captioning)</li> <li>Life-time access to all videos, slides and checklists</li> <li>Credit cards, PayPal, bank transfer</li> </ul> <ul class='measure-ux'> <li><strong>Practical real-life examples</strong></li> <li><strong>25 video lessons</strong> (total 8h)</li> <li><strong>New videos added annually</strong></li> <li>Quality recordings (incl. English captioning)</li> <li>Life-time access to all videos, templates, slides, checklists</li> <li>Credit cards, PayPal, bank transfer</li> </ul> </div> <a class="c-package__button c-button--shadow c-button--shadow-orange" href="https://smart-interface-design-patterns.thinkific.com/enroll/3082557?price_id=3951421"> <div class="c-package__button-cost c-package__button-promo"> <span class="c-package__button-cost-upcoming">$799</span> <span>$450</span> </div> <p class="c-package__button-specs"> <strong> Get the UX bundle </strong> <span class="u-step-0">You’re saving $349</span> </p> </a> </li> </ul> </div> </section> <aside class="o-slat c-cta u-wrap u-relative"> <div class="c-cta__content anim-slat"> <figure class="c-cta__image c-cta__license"> <img src="/static/svg/larger-teams.svg" alt="" /> </figure> <div class="u-flow"> <h2 class="c-h c-h-4">License for a larger team (4+ seats)? Pay per invoice?</h2> <div class="o-prose o-prose--primary-links"> Want to bring your entire team on board? <strong>That’s a smart choice</strong>! For team licenses, <strong>wire transfers and VAT invoices</strong>, please <a class="u-link u-strong u-sans u-white-link" href="mailto:vitaly@smashingconf.com?subject=Video course + UX training for the entire team">get in touch with Vitaly</a>, and get full access and certification for your entire team. </div> </div> </div> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--spark c-cta-spark-4"> <use xlink:href="/static/svg/sprite.svg#spark"></use> </svg> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--spark c-cta-spark-5"> <use xlink:href="/static/svg/sprite.svg#spark"></use> </svg> <svg role="img" aria-hidden="true" focusable="false" class="c-icon c-icon--spark c-cta-spark-6"> <use xlink:href="/static/svg/sprite.svg#spark"></use> </svg> </aside> <footer class="c-footer" role="contentinfo"> <div class="u-wrap"> <div class="c-footer__border"> <svg viewBox="0 0 262 105" width="262" height="105" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(32.98 1.6)"><path d="M100.83 36a16.32 16.32 0 00-8.75-2.53h-.3a13.42 13.42 0 00-22.52-9.07c-.9-3.1-2.87-5.76-5.56-7.52v-.5a16.38 16.38 0 00-32.34-3.68A16.38 16.38 0 007.75 26.33 13.45 13.45 0 000 35.7" stroke="#F4B67F" fill="#FFF6B3" fill-rule="nonzero"/><circle fill="#FFA18F" fill-rule="nonzero" cx="42.44" cy="11.21" r="1.34"/><circle fill="#FFA18F" fill-rule="nonzero" cx="52.9" cy="13.08" r="1.34"/><circle fill="#FFA18F" fill-rule="nonzero" cx="62.29" cy="25.96" r="1.34"/><circle fill="#FFA18F" fill-rule="nonzero" cx="33.05" cy="18.72" r="1"/><circle fill="#FFA18F" fill-rule="nonzero" cx="54.51" cy="20.96" r="1"/><circle fill="#FFA18F" fill-rule="nonzero" cx="48.61" cy="5.47" r="1"/><circle fill="#FFA18F" fill-rule="nonzero" cx="45.92" cy="19.42" r="1"/><path stroke="#F4B67F" stroke-linecap="round" d="M38.15 23.37v5.27M40.79 26h-5.28M24.95 19.41v5.27M27.59 22.05h-5.28"/></g><g transform="translate(1 37.89)" stroke="#82CDB2"><path stroke-width="2" fill="#4B4B4B" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" d="M0 66.11h25.58M37.96 66.11h221.5"/><path d="M17.34 0a85.1 85.1 0 00164.19 0H17.34z" stroke-width="2"/><path d="M181.54 0c-.89.07-116.7 10.21-125.2 49.71"/><path stroke-width="2" fill="#4B4B4B" fill-rule="nonzero" d="M69.22 57.42h60.08V66H69.22z"/><path d="M73.31 57.57v8.31M77.13 57.57v8.31M79.29 57.57v8.31M81.54 57.57v8.31"/><circle fill="#4B4B4B" fill-rule="nonzero" cx="99.31" cy="28.88" r="17.55"/><ellipse stroke-linecap="round" stroke-linejoin="round" transform="rotate(-40.1 96.41 30.28)" cx="96.41" cy="30.28" rx="7.12" ry="10.4"/><ellipse stroke-linecap="round" stroke-linejoin="round" transform="rotate(-49.9 102.38 30.25)" cx="102.38" cy="30.25" rx="10.4" ry="7.12"/></g><g transform="translate(181.52 45.14)"><path d="M16.26 5.5L20.82 0l5.5 4.56c5.18 4.3 5.89 12 1.58 17.18l-4.56 5.5-5.5-4.57A12.2 12.2 0 0116.27 5.5h0z" stroke="#82CDB2" stroke-width="2" fill="#BFE6C7" fill-rule="nonzero"/><path d="M20.58.84s8.63 10.06 2.5 25.79c0 0-.25-8.83-5.32-14.5" stroke="#82CDB2" stroke-width=".5" stroke-linecap="round"/><path d="M3.88 34.28l-3.88-6 6-3.88a12.2 12.2 0 0116.9 3.64l3.88 6-5.99 3.88a12.2 12.2 0 01-16.9-3.64h0z" stroke="#82CDB2" stroke-width="2" fill="#BFE6C7" fill-rule="nonzero"/><path d="M.75 28.76s12.17-5.24 25.36 5.28c0 0-8.51-2.38-15.43.77" stroke="#82CDB2" stroke-width=".5" stroke-linecap="round"/><path d="M55.35 44.73l4.79 5.3-5.3 4.78a12.2 12.2 0 01-17.23-.87l-4.77-5.28 5.3-4.8a12.2 12.2 0 0117.21.87h0z" stroke="#82CDB2" stroke-width="2" fill="#BFE6C7" fill-rule="nonzero"/><path d="M59.34 49.68s-11.18 7.1-25.88-1.18c0 0 8.77 1 15.1-3.22" stroke="#82CDB2" stroke-width=".5" stroke-linecap="round"/><circle stroke="#EE5B68" stroke-width="2" fill="#FFA18F" fill-rule="nonzero" cx="33.78" cy="36.13" r="13.78"/><path d="M35.4 33.39c1.72-.2 3.45-.2 5.16 0M37.96 35.99c-.19-1.71-.17-3.44.05-5.15" stroke="#EE5B68" stroke-linecap="round"/><circle stroke="#EE5B68" stroke-width="2" fill="#FFA18F" fill-rule="nonzero" cx="18.23" cy="44.65" r="13.78"/><path d="M21.43 45.35c1.7.3 3.34.79 4.92 1.48M23.15 48.55c.3-1.7.8-3.35 1.48-4.92" stroke="#EE5B68" stroke-linecap="round"/></g></g></svg> </div> <div class="c-footer__primary"> <form class="js-newsletter"> <div class="u-flow--m"> <header class="u-flow"> <h2 class="c-h c-h-4"> Still hungry? </h2> <p>Subscribe to get friendly and semi-regular tips around design and UX.</p> </header> <div class="with-js"> <div class="c-input-inline-button"> <div> <label class="c-label" for="footer-newsletter-email">Your email</label> <input type="email" class="c-input" name="email" autocomplete="email" inputmode="email" placeholder="e.g. meow@garfield.com" id="footer-newsletter-email" required /> </div> <input type="submit" value="Subscribe" class="c-button u-link u-sans u-strong u-link-highlight c-button--shadow c-button--shadow-orange" /> </div> </div> <div class="without-js"> <a href="#newsletter-modal" class="c-button c-button--inline">Subscribe</a> </div> </div> </form> <address class="u-flow--l"> <div class="u-flow"> <h2 class="c-h c-h-4">Contact Vitaly</h2> <div class="o-body o-body--primary-links"> <p>Interested in a <strong>public or in-house workshop</strong> on interface design, UX, or front-end? You are in the right place. <strong>Reach out via email</strong> and we can arrange something in no time, be it training, audit, consultancy, workshop or talk!</p> </div> </div> <p><a class="c-h c-button u-link u-link-highlight" href="mailto:vitaly@smashingconf.com?subject=Smart Interface Design Patterns">vitaly@smashingconf.com</a></p> </address> </div> <div class="c-footer__secondary"> <div> <p>🍩 UI and illustrations crafted with imagination and love by <a href="https://www.untilsunday.it">Chiara Aliotta</a>.<br />🍿 Illustrations animated with passion by <a href="https://www.cassie.codes/">Cassie Evans</a>.<br />🍧 Course animations beautifully designed by <a href="https://guillaumekurkdjian.com/">Guillaume Kurkdijan</a>.<br />🍎 Components built and put together with love by <a href="https://www.trysmudford.com/">Trys Mudford</a>.<br />🍰 Product illustrations refined with care by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a>.<br />🍭 Photos with love by <a href="https://marcthiele.com/">Marc Thiele</a>. Powered by Web Adventures OÜ.</p> </div> <ul> <li><a href="/privacy/">Privacy Policy</a></li> <li><a href="mailto:vitaly@smashingconf.com?subject=Smart Interface Design Patterns">Contact via email</a></li> <li><a href="https://smart-interface-design-patterns.thinkific.com/users/sign_in">User login</a></li> </ul> <div> <p>This course is brought to you by </p> <a href="https://www.smashingmagazine.com"> <img width="134" height="58" loading="lazy" decoding="async" src="/static/img/footer-logo.png" alt="Smashing Magazine" /> </a> </div> </div> </div> </footer> <aside class="c-newsletter-modal" id="newsletter-modal"> <div class="c-newsletter-modal__wrapper"> <header class="c-section-header c-section-header--small u-wrap u-flow--m"> <h1 class="c-h c-h-6">Friendly Newsletter</h1> <div class="o-prose"> <p>Please enter your details below — there is a lil’ gift waiting for you, too.</p> </div> </header> <a href="#0" class="c-newsletter-modal__close" aria-label="Close newsletter form"></a> <form action="https://smashingmagazine.us1.list-manage.com/subscribe/post?u=16b832d9ad4b28edf261f34df&id=8ed24b5d9e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate> <div class="u-flow--l"> <div> <label class="c-label" for="modal-newsletter-name">How do your friends call you?</label> <input type="text" class="c-input" name="FNAME" autocomplete="name" inputmode="" placeholder="e.g. Alice" id="modal-newsletter-name" required /> </div> <div> <label class="c-label" for="modal-newsletter-email">Your email</label> <input type="email" class="c-input" name="EMAIL" autocomplete="email" inputmode="email" placeholder="e.g. meow@garfield.com" id="modal-newsletter-email" required /> </div> <div class="u-flow"> <h3 class="c-h">You are:</h3> <ul class="u-flow--2xs"> <li> <input type="radio" class="c-radio" name="group[86]" id="modal-newsletter-role-incredible-front-end-developer" value="1" required /> <label for="modal-newsletter-role-incredible-front-end-developer">Incredible front-end developer</label> </li> <li> <input type="radio" class="c-radio" name="group[86]" id="modal-newsletter-role-marvellous-ui-designer" value="2" required /> <label for="modal-newsletter-role-marvellous-ui-designer">Marvellous UI designer</label> </li> <li> <input type="radio" class="c-radio" name="group[86]" id="modal-newsletter-role-extraordinary-ux-designer" value="4" required /> <label for="modal-newsletter-role-extraordinary-ux-designer">Extraordinary UX designer</label> </li> <li> <input type="radio" class="c-radio" name="group[86]" id="modal-newsletter-role-just-a-jack-of-all-trades" value="8" required /> <label for="modal-newsletter-role-just-a-jack-of-all-trades">Just a jack of all trades!</label> </li> </ul> </div> <input type="submit" value="Subscribe!" class="c-button c-button--wide" /> <div class="o-body"> <p>No strings attached. Sent out at most 2× a month. You can unsubscribe any time, of course. <a href="/privacy">Check the privacy policy</a>.</p> </div> </div> </form> </div> <a href="#0" class="c-newsletter-modal__full-close" aria-label="Close newsletter form"></a> </aside> <script> var _beats = [{ slug: 'accessibility-strong-case', count: 2478 },{ slug: 'error-messages-ux', count: 458 },{ slug: 'design-autism', count: 252 },{ slug: 'drag-and-drop-ux', count: 224 },{ slug: 'better-carousel-ux', count: 210 },{ slug: 'interface-design-books', count: 147 },{ slug: 'naming-design-tokens', count: 135 },{ slug: 'design-handoff', count: 117 },{ slug: 'multi-lingual-ux', count: 115 },{ slug: 'language-selector', count: 106 },{ slug: 'back-button-ux', count: 103 },{ slug: 'accessible-tap-target-sizes', count: 99 },{ slug: 'how-to-redesign-guide', count: 96 },{ slug: 'perfect-design-process', count: 93 },{ slug: 'ux-career-ladder', count: 82 },{ slug: 'design-older-adults', count: 76 },{ slug: 'hidden-vs-disabled', count: 70 },{ slug: 'avoid-hamburger-menus', count: 68 },{ slug: 'navigation-design-mobile-ux', count: 65 },{ slug: 'disabled-buttons', count: 55 },{ slug: 'complex-filtering', count: 55 },{ slug: 'design-metrics-kpis', count: 50 },{ slug: 'design-patterns-almost-everything', count: 50 },{ slug: 'double-diamond-process', count: 47 },{ slug: 'free-inclusive-photos-of-people', count: 44 },{ slug: 'lessons-learned', count: 39 },{ slug: 'how-to-avoid-bias-in-ux-research', count: 36 },{ slug: 'dyslexia-design', count: 34 },{ slug: 'time-zone-selection-ux', count: 31 },{ slug: 'defend-design-decisions', count: 30 },{ slug: 'sustainable-design-patterns', count: 28 },{ slug: 'designing-better-meetings', count: 22 },{ slug: 'design-interviews-red-flags', count: 22 },{ slug: 'harmful-newsletter-pop-ups', count: 19 },{ slug: 'better-mobile-navigation', count: 18 },{ slug: 'select-slug-from-beats', count: 14 },{ slug: 'a-third-article', count: 12 },{ slug: 'copywriting', count: 12 },{ slug: 'a-slug', count: 10 },{ slug: 'navigate-the-team-of-one', count: 10 },{ slug: 'sticky-menus', count: 10 },{ slug: 'boost-ux-maturity', count: 9 },{ slug: 'designing-for-mobile-ios-android-guide', count: 9 },{ slug: 'another-slug', count: 8 },{ slug: 'filtering-ux', count: 8 },{ slug: 'design-guidelines-children', count: 8 },{ slug: 'miro-templates', count: 6 },{ slug: 'color-contrast-cheat-sheet', count: 6 },{ slug: 'timing-matters', count: 5 },{ slug: 'breadcrumbs-ux', count: 5 },{ slug: 'design-case-study', count: 5 },{ slug: 'fast-navigation', count: 5 },{ slug: '2-page-login-pattern', count: 5 },{ slug: 'autocomplete-ux', count: 4 },{ slug: 'birthday-picker', count: 4 },{ slug: 'links-ux', count: 3 },{ slug: 'ux-report', count: 3 },{ slug: 'another-article', count: 2 },{ slug: 'design-kpis', count: 2 },{ slug: 'design-systems', count: 2 },{ slug: 'never-hide-critical-navigation', count: 2 },{ slug: 'design-critiques', count: 2 },{ slug: 'avoid-misunderstandings-in-design-process', count: 2 },{ slug: 'frequently-asked-questions', count: 1 },{ slug: 'navigation-queries-ux', count: 1 },{ slug: 'reviews-and-ratings-ux', count: 1 },{ slug: 'beautiful-open-source-fonts', count: 1 },{ slug: 'design-management', count: 1 },{ slug: 'net-promotion-score', count: 1 },{ slug: 'business-language-vs-ux-language', count: 1 },{ slug: 'accessibility-ux', count: 0 },{ slug: 'ai-tools-for-designers', count: 0 },{ slug: 'bettercarouselux', count: 0 },{ slug: 'billboard-navigation-pattern', count: 0 },{ slug: 'breadcrumbs', count: 0 },{ slug: 'designkpis', count: 0 },{ slug: 'design-kpis-ux', count: 0 },{ slug: 'infinite-scroll', count: 0 },{ slug: 'inline-validation-ux', count: 0 },{ slug: 'onboarding-ux', count: 0 },{ slug: 'pricing-plans', count: 0 },{ slug: 'product-managers', count: 0 },{ slug: 'ten-useful-tools', count: 0 },{ slug: 'design-kpis-uk', count: 0 },{ slug: 'free-books', count: 0 },{ slug: 'guide-to-designing-better-data-visualization', count: 0 },{ slug: 'inclusive-design-ux-toolkits', count: 0 },{ slug: 'typefaces-combining', count: 0 },{ slug: 'ux-guides', count: 0 },{ slug: 'estimates', count: 0 },{ slug: 'exposure-hours', count: 0 },{ slug: 'combining-typefaces', count: 0 },{ slug: '30-questions-ux-interviews', count: 0 },{ slug: 'colorblindness-design', count: 0 },{ slug: 'should-links-open-new-tabs', count: 0 },{ slug: 'should-links-open-in-new-tabs', count: 0 },{ slug: 'how-to-fix-a-bad-user-interface', count: 0 },{ slug: 'how-to-make-strong-case-ux-research', count: 0 },{ slug: 'how-to-make-strong-case-ux-research-copy', count: 0 }]; var _beatsAPI = "https://beats.smart-interface-design-patterns.com" </script> <script delay="https://player.vimeo.com/api/player.js" defer></script> <script>const autoLoadDuration=5,eventList=["keydown","mousemove","wheel","touchmove","touchstart","touchend"],autoLoadTimeout=setTimeout(runScripts,5e3);function triggerScripts(){runScripts(),clearTimeout(autoLoadTimeout),eventList.forEach(function(t){window.removeEventListener(t,triggerScripts,{passive:!0})})}function runScripts(){document.querySelectorAll("script[delay]").forEach(function(t){t.setAttribute("src",t.getAttribute("delay"))}),document.querySelectorAll("iframe[data-src]").forEach(function(t){t.setAttribute("src",t.getAttribute("data-src"))})}eventList.forEach(function(t){window.addEventListener(t,triggerScripts,{passive:!0})});</script> <script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="04639e2a-921d-47d9-a473-1753bb5f18b8" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiMDQ2MzllMmEtOTIxZC00N2Q5LWE0NzMtMTc1M2JiNWYxOGI4IiwiYWNjb3VudF9pZCI6IjVhMGYzNDI1NGM0YjkzMmE4YmJhNDVmYiIsImRlcGxveV9pZCI6IjY3MzJmMTdhMTExMDY4MDAwOGMyMjVlMCIsImlzc3VlciI6Im5mc2VydmVyIn0.bwRuKxCgYIVlwvZkxFl--3TyZQqxlnUIq9qZPN3lMTk"></script></body> </html>