1<!DOCTYPE html><html lang="en" class="overflow-x-hidden lg:overflow-x-clip"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes, viewport-fit=cover"/><link rel="stylesheet" href="/_next/static/chunks/0u6v7a6-c9no0.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/0nchaizb147_e.css" data-precedence="next"/><link rel="stylesheet" href="https://use.typekit.net/bvl2qse.css" data-precedence="default"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/2twfjdkphd1bd.js"/>
1<script src="/_next/static/chunks/0vnwigue-rj-g.js" async=""></script>
1<script src="/_next/static/chunks/076in2ewi099s.js" async=""></script>
1<script src="/_next/static/chunks/15sorre6a6zg1.js" async=""></script>
1<script src="/_next/static/chunks/0f7hpzff5gixy.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-1wjqudkk24mhb.js" async=""></script>
1<script src="/_next/static/chunks/2317sa_4mq8sr.js" async=""></script>
1<script src="/_next/static/chunks/0agl4fg0_1a_y.js" async=""></script>
1<script src="/_next/static/chunks/11lkkyb-gcm2d.js" async=""></script>
1<script src="/_next/static/chunks/0sqa-0011n2kn.js" async=""></script>
1<script src="/_next/static/chunks/0r_wt5r3dc9tp.js" async=""></script>
1<script src="/_next/static/chunks/31pt8a7ru2j-u.js" async=""></script>
1<script src="/_next/static/chunks/2cu8-jfr1i4z0.js" async=""></script>
1<link rel="preload" href="https://api.iamsteve.me/latest.js" as="script"/><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/><meta name="apple-mobile-web-app-title" content="iamsteve"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="mobile-web-app-title" content="iamsteve"/><meta name="mobile-web-app-capable" content="yes"/><link rel="preconnect" href="https://use.typekit.net" crossorigin="anonymous"/><link rel="dns-prefetch" href="https://use.typekit.net"/><meta name="theme-color" content="rgb(241 232 228)"/><title>Blog archive ⢠iamsteve</title><meta name="description" content="Tips and tutorials about the design and build of web interfaces"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><link rel="canonical" href="https://iamsteve.me/blog"/><meta property="og:title" content="iamsteve ⢠design & code blog"/><meta property="og:description" content="A blog by Steve McKinney about the design and build of websites. Bridging the gap between your design tool and code, with a focus on typography, CSS and visual craft."/><meta property="og:url" content="https://iamsteve.me"/><meta property="og:site_name" content="iamsteve"/><meta property="og:locale" content="en_GB"/><meta property="og:image" content="https://iamsteve.me/images/twitter-card.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="600"/><meta property="og:image:alt" content="iamsteve â design and code blog"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@irsteve"/><meta name="twitter:creator" content="@irsteve"/><meta name="twitter:title" content="iamsteve.me ⢠design & code blog"/><meta name="twitter:description" content="A blog by Steve McKinney about the design and build of websites. Bridging the gap between your design tool and code, with a focus on typography, CSS and visual craft."/><meta name="twitter:image" content="https://iamsteve.me/images/twitter-card.png"/><meta name="twitter:image:alt" content="iamsteve â design and code blog"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="600"/><link rel="icon" href="/favicon.ico?favicon.0wbxx1jac1un_.ico" sizes="48x48" type="image/x-icon"/><link rel="icon" href="/icon.svg?icon.27188g3n6dpua.svg" sizes="any" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon.png?apple-icon.1himecj5p-ewa.png" sizes="192x192" type="image/png"/>
1<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://iamsteve.me/#organization","name":"iamsteve","url":"https://iamsteve.me","logo":{"@type":"ImageObject","url":"https://iamsteve.me/images/logo.svg"}},{"@type":"WebSite","@id":"https://iamsteve.me/#website","url":"https://iamsteve.me","name":"iamsteve","description":"A blog by Steve McKinney about the design and build of websites. Bridging the gap between your design tool and code, with a focus on typography, CSS and visual craft.","publisher":{"@id":"https://iamsteve.me/#organization"}},{"@type":"Person","@id":"https://iamsteve.me/#person","name":"Steve McKinney","url":"https://iamsteve.me","sameAs":["https://twitter.com/irsteve","https://instagram.com/stevemckinney","https://www.linkedin.com/in/smcknny/"],"homeLocation":{"@type":"City","name":"Manchester"},"jobTitle":"User interface designer","knowsAbout":["Web Design","Visual Design","UI Design","Typography","CSS"],"worksFor":{"@id":"https://iamsteve.me/#organization"}}]}</script>
1<script src="/_next/static/chunks/0cz1d0mv5g_q7.js" noModule=""></script>
1</head><body class="antialiased min-w-screen min-h-screen bg-[url(/images/texture.png)] dark:bg-[url(/images/texture-dark.png)] bg-size-[172px_auto] bg-blend-multiply dark:bg-blend-color-dodge bg-canvas text-body overflow-x-hidden lg:overflow-x-clip"><div hidden=""><!--$--><!--/$--></div><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden;display:none"><defs><symbol id=" checkmark-16" viewBox="0 0 16 16"><g class="checkmark / checkmark"><path d="m3 8 3 3 7-7" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id=" checkmark-underline-16" viewBox="0 0 16 16"><g class="checkmark / underline"><path d="M2 15h12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m3 8 3 3 7-7" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="about-16" viewBox="0 0 16 16"><path d="M9.84335,9.69765l-.00229-.031a4.25032,4.25032,0,0,0,1.49227-3.33334v-2c0-1.20734,0-2-.66666-2.66666a2.44912,2.44912,0,0,0-2-.66667c-.60143,0-.66029.54257-1.645.64876a2.72461,2.72461,0,0,0-2.355,2.74544V6.33333A4.25032,4.25032,0,0,0,6.15894,9.66667l-.0023.03113C6.06721,10.90871,5.223,10.908,4.063,11.26685a12.9908,12.9908,0,0,0-1.56186.59426,1.99748,1.99748,0,0,0-1.16784,1.82032V14a1,1,0,0,0,1,1H13.66667a1,1,0,0,0,1-1v-.3186a1.9975,1.9975,0,0,0-1.1678-1.82031,12.99024,12.99024,0,0,0-1.56184-.59427C10.777,10.90791,9.93278,10.90862,9.84335,9.69765Z"></path></symbol><symbol id="accessibility-16" viewBox="0 0 16 16"><g class="accessibility"><path d="M8 4C8.552 4 9 3.552 9 3C9 2.448 8.552 2 8 2C7.448 2 7 2.448 7 3C7 3.552 7.448 4 8 4Z" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M12 6C12 6 9.682 7 8 7C6.318 7 4 6 4 6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M9 7H7V11H9Z" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M7 11L6 14" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M9 11L10 14" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="airplane-16" viewBox="0 0 16 16"><g class="airplane"><path d="M15 8 5 14v-4l3-2-3-2V2l10 6Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M2 8H1" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M13 8H8" class="fill-none stroke-current stroke-2 sl-r"></path><circle cx="2" cy="4" r="1" class="fill-current"></circle><circle cx="2" cy="12" r="1" class="fill-current"></circle></g></symbol><symbol id="align-centre-16" viewBox="0 0 16 16"><g class="align-centre"><path d="M2 2h12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M2 14h12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M4 6h8" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M4 10h8" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="align-left-16" viewBox="0 0 16 16"><g class="align-left"><path d="M2 2h12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M2 6h8" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M2 10h6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M2 14h10" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="align-right-16" viewBox="0 0 16 16"><g class="align-right"><path d="M2 2h12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M6 6h8" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M8 10h6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M4 14h10" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="all-16" viewBox="0 0 16 16"><g class="all"><path d="M6 2H2v4h4V2Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M14 2h-4v4h4V2Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M6 10H2v4h4v-4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M14 10h-4v4h4v-4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="angle-down-16" viewBox="0 0 16 16"><g class="angle-down"><path d="m2 5 6 6 6-6" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol>
1<symbol id="angle-left-16" viewBox="0 0 16 16"><g class="angle-left"><path d="M10 2 4 8l6 6" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="angle-right-16" viewBox="0 0 16 16"><g class="angle-right"><path d="m6 2 6 6-6 6" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="angle-up-16" viewBox="0 0 16 16"><g class="angle-up"><path d="m2 11 6-6 6 6" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="arrow-down-16" viewBox="0 0 16 16"><g class="arrow-down"><path d="M8 14V2" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m4 10 4 4 4-4" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="arrow-left-16" viewBox="0 0 16 16"><g class="arrow-left"><path d="M2 8h12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M6 4 2 8l4 4" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="arrow-right-16" viewBox="0 0 16 16"><g class="arrow-right"><path d="M14 8H2" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m10 12 4-4-4-4" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="arrow-up-16" viewBox="0 0 16 16"><g class="arrow-up"><path d="M8 2v12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M12 6 8 2 4 6" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="autolayout-h-16" viewBox="0 0 16 16"><g class="autolayout / h"><rect width="4" height="12" x="2" y="2" class="fill-(--icon-fill) stroke-current stroke-2 sl-r" rx="1"></rect><rect width="4" height="12" x="10" y="2" class="fill-(--icon-fill) stroke-current stroke-2 sl-r" rx="1"></rect></g></symbol><symbol id="autolayout-v-16" viewBox="0 0 16 16"><g class="autolayout / v"><rect width="12" height="4" x="2" y="2" class="fill-(--icon-fill) stroke-current stroke-2 sl-r" rx="1"></rect><rect width="12" height="4" x="2" y="10" class="fill-(--icon-fill) stroke-current stroke-2 sl-r" rx="1"></rect></g></symbol><symbol id="blog-16" viewBox="0 0 16 16"><polygon class="fill-s1" points="10.667 13.333 5.333 13.333 3 7 8 1 13 7 10.667 13.333"></polygon><rect x="4" y="13" width="8" height="2" transform="translate(16 28) rotate(180)"></rect><line x1="8" y1="1" x2="8" y2="8"></line></symbol><symbol id="bolt-16" viewBox="0 0 16 16"><g class="bolt"><path d="M9 6 8 1l-5 9h4l1 5 5-9H9Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="book-16" viewBox="0 0 16 16"><path stroke="color(display-p3 .0353 .1804 .1412)" d="M12 14V9H3v4a1 1 0 0 0 1 1h8Zm-1 0h2" class="slc-r sl-r stroke-2"></path><path class="fill-(--icon-fill) stroke-2" stroke="color(display-p3 .0353 .1804 .1412)" d="M13 11V2H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h9Z"></path></symbol><symbol id="bookmark-16" viewBox="0 0 16 16"><g class="bookmark"><path d="M5 2H11V14L8 12L5 14Z" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="box-16" viewBox="0 0 16 16"><g class="box"><path d="M4 14a1 1 0 0 1-1-1V6h10v7a1 1 0 0 1-1 1H4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M6 9h4" class="stroke-current stroke-2"></path><path d="M2.5 6a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-11Z" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="bulb-16" viewBox="0 0 16 16"><g class="bulb"><path d="M8 1.159C6 1.159 4 2.492 4 5.159C4 7.825 6 7.825 6 10.492V12H10V10.492C10 7.825 12 7.825 12 5.159C12 2.492 10 1.159 8 1.159Z" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M10 13C10 14 9 15 8 15C7 15 6 14 6 13C6 12.381 6 12 6 12H10C10 12 10 12.381 10 13Z" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="calendar-16" viewBox="0 0 16 16"><g class="calendar"><rect width="12" height="10" x="2" y="3" class="fill-current stroke-current stroke-2 sl-r" rx="1"></rect><path d="M3 5h10" class="fill-none stroke-current stroke-2 sl-r"></path><rect width="10" height="6" x="3" y="6" class="fill-(--icon-fill)" rx=".5"></rect></g></symbol>
1<symbol id="caret-down-16" viewBox="0 0 16 16"><g class="caret-down"><path d="m12 6-4 6-4-6h8Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="caret-left-16" viewBox="0 0 16 16"><g class="caret-left"><path d="M10 4 4 8l6 4V4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="caret-right-16" viewBox="0 0 16 16"><g class="caret-right"><path d="m6 4 6 4-6 4V4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="caret-up-16" viewBox="0 0 16 16"><g class="caret-up"><path d="M12 11 8 5l-4 6h8Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="category-16" viewBox="0 0 16 16"><rect class="b" x="1" y="6" width="14" height="8"></rect><polygon class="b" points="15 6 1 6 1 2 7 2 7.667 3 15 3 15 6"></polygon></symbol><symbol id="checkbox-16" viewBox="0 0 16 16"><title>checkbox</title><polyline points="3 8 6 11 13 4"></polyline></symbol><symbol id="checkmark-16" viewBox="0 0 16 16"><g class="checkmark"><path d="m3 8 3 3 7-7" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="clipboard-16" viewBox="0 0 16 16"><g class="clipboard"><path d="M3 2h10v12H3z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M7 2h2v1H7z" class="fill-none stroke-current stroke-2 sl-s"></path></g></symbol><symbol id="clipboard-success-16" viewBox="0 0 16 16"><g class="clipboard-success"><path d="M3 2h10v12H3z" class="fill-success"></path><path d="M7 2h2v1H7z" class="fill-none stroke-current stroke-2 sl-s"></path><path d="m6 9 1 1 3-3" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="close-16" viewBox="0 0 16 16"><g class="close"><path d="M12 12 4 4" class="stroke-current stroke-2 sl-r"></path><path d="m12 4-8 8" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="cmd-16" viewBox="0 0 16 16"><g class="cmd"><path d="M4 14a2 2 0 0 0 2-2V4a2 2 0 1 0-2 2h8a2 2 0 1 0-2-2v8a2 2 0 1 0 2-2H4a2 2 0 1 0 0 4Z" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="code-16" viewBox="0 0 16 16"><g class="code"><rect width="14" height="12" x="1" y="2" class="fill-(--icon-fill) stroke-current stroke-2 sl-r" rx="1"></rect><path d="m5 6 2 2-2 2" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M9 10h2" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="collections-16" viewBox="0 0 16 16"><g class="collections"><path d="M7 3H3v11h4V3Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M10.864 3 7 4.035 9.686 14.06l3.864-1.035L10.864 3Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="comment-16" viewBox="0 0 16 16"><g class="comment"><path d="M11 2H5a3 3 0 0 0-3 3v8a1 1 0 0 0 1.6.8l1.333-1a4 4 0 0 1 2.4-.8H11a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="component-16" viewBox="0 0 16 16"><g class="component"><path d="m5 5 3-3 3 3-3 3z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="m2 8 3-3 3 3-3 3z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="m5 11 3-3 3 3-3 3z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="m8 8 3-3 3 3-3 3z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="component-instance-16" viewBox="0 0 16 16"><g class="component / instance"><path d="M7.293 1.636a1 1 0 0 1 1.414 0l5.657 5.657a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 0 1-1.414 0L1.636 8.707a1 1 0 0 1 0-1.414l5.657-5.657Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="contact-16" viewBox="0 0 16 16"><polyline class="fill-s1 sw-2" points="2 5.286 1 6 1 15 15 15 15 6 13.999 5.285"></polyline><polygon class="fill-(--icon-fill)" points="14 7 14 3 2 3 2 7 1 7 8 11 15 7 14 7"></polygon><polyline class="sw-2" points="1 7 8 11 15 7"></polyline><line class="sw-2" x1="10.79676" y1="2.99769" x2="8" y2="1"></line><line class="sw-2" x1="8" y1="1" x2="5.20058" y2="2.99958"></line><polyline class="sw-2" points="2 7 2 3 14 3 14 7"></polyline></symbol>
1<symbol id="copy-16" viewBox="0 0 16 16"><g class="copy"><path d="M5 6H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3" class="fill-none stroke-current stroke-2 sl-r"></path><rect width="8" height="8" x="6" y="2" class="fill-(--icon-fill) stroke-current stroke-2 sl-r" rx="1"></rect></g></symbol><symbol id="copy-alternate-16" viewBox="0 0 16 16"><g class="copy-alternate"><path d="M5 6H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3" class="fill-none stroke-current stroke-2 sl-r"></path><rect width="8" height="8" x="6" y="2" class="fill-(--icon-fill) stroke-current stroke-2 sl-r" rx="1"></rect></g></symbol><symbol id="copy-success-16" viewBox="0 0 16 16"><g class="copy-success"><path d="M3 2h10v12H3z" class="fill-success"></path><path d="M7 2h2v1H7z" class="fill-none stroke-current stroke-2 sl-s"></path><path d="m6 9 1 1 3-3" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="css-16" viewBox="0 0 16 16"><g class="css"><path d="M4 2h8v4l2 2-2 2v4H4v-4L2 8l2-2V2Z" class="fill-(--icon-fill)"></path><path d="M6 2h-.5A1.5 1.5 0 0 0 4 3.5v2.293a.5.5 0 0 1-.146.353l-1.5 1.5a.5.5 0 0 0 0 .708l1.5 1.5a.5.5 0 0 1 .146.353V12.5A1.5 1.5 0 0 0 5.5 14H6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M10 2h.5A1.5 1.5 0 0 1 12 3.5v2.293a.5.5 0 0 0 .146.353l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 0-.146.353V12.5a1.5 1.5 0 0 1-1.5 1.5H10" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="cursor-16" viewBox="0 0 16 16"><g class="cursor"><path d="m3.606 1.988 10.404 6.07-6.069.866-3.468 5.202-.867-12.138Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="date-16" viewBox="0 0 16 16"><path class="stroke-currentcolor fill-s1" d="M14,15H2a1,1,0,0,1-1-1V3H15V14A1,1,0,0,1,14,15Z"></path><rect class="fill-current" x="4" y="7" width="2" height="2" rx="1" ry="1"></rect><rect class="fill-current" x="7" y="7" width="2" height="2" rx="1" ry="1"></rect><rect class="fill-current" x="10" y="7" width="2" height="2" rx="1" ry="1"></rect><rect class="fill-current" x="4" y="10" width="2" height="2" rx="1" ry="1"></rect><rect class="fill-current" x="7" y="10" width="2" height="2" rx="1" ry="1"></rect><rect class="fill-current" x="10" y="10" width="2" height="2" rx="1" ry="1"></rect><path class="fill-none stroke-currentcolor" d="M2,1H14a1,1,0,0,1,1,1V3a0,0,0,0,1,0,0H1A0,0,0,0,1,1,3V2A1,1,0,0,1,2,1Z"></path></symbol><symbol id="design-16" viewBox="0 0 16 16"><g class="design"><g class="fill-(--icon-fill) stroke-current stroke-2 sl-s"><path d="M3 12c0-2.76 2.24-5 5-5s5 2.24 5 5"></path><path d="M3 12c0-2.76 2.24-5 5-5s5 2.24 5 5"></path></g><path d="M2 7h12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M9 6H7v2h2V6Z" class="fill-current stroke-current stroke-2 sl-r"></path><path d="M2 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" class="fill-current stroke-current stroke-2 sl-r"></path><path d="M14 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" class="fill-current stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="download-16" viewBox="0 0 16 16"><g class="download"><path d="M2 15h12" class="fill-none stroke-current stroke-2 sl-r"></path><g class="fill-none stroke-current stroke-2 sl-r"><path d="m5 8 3 3 3-3"></path><path d="m5 8 3 3 3-3"></path></g><path d="M8 1v9" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="dropdown-16" viewBox="0 0 16 16"><path d="M8.27,10.58a.5.5,0,0,1-.54,0l-5.7-7A.5.5,0,0,1,2.3,3h11.4a.5.5,0,0,1,.27.92Z"></path></symbol><symbol id="enlarge-16" viewBox="0 0 16 16"><g class="enlarge"><path d="M2 11v3h3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M14 5V2h-3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M5 2H2v3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m14 2-4 4" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m6 10-4 4" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m2 2 4 4" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m10 10 4 4" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M11 14h3v-3" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol>
1<symbol id="enter-16" viewBox="0 0 16 16"><g class="enter"><path d="M3 8h10V4" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M4 6 2 8l2 2" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="envelope-16" viewBox="0 0 16 16"><g class="envelope"><g class="fill-(--icon-fill) stroke-current stroke-2 sl-r"><path d="M2 5.29 1 6v9h14V6l-1-.72"></path><path d="M2 5.29 1 6v9h14V6l-1-.72"></path></g><path d="M14 7V3H2v4H1l7 4 7-4h-1Z" class="fill-(--icon-fill-bg)"></path><path d="m1 7 7 4 7-4" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M10.8 3 8 1" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M8 1 5.2 3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M2 7V3h12v4" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="expand-16" viewBox="0 0 16 16"><g class="expand"><path d="M10 2h4v4" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M6 2H2v4" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M10 14h4v-4" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M6 14H2v-4" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="external-16" viewBox="0 0 16 16"><g class="external"><rect width="8" height="8" x="3" y="5" class="fill-(--icon-fill)" rx="1"></rect><path d="m7 9 7-7" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M9 2h5v5" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M6 5H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="external-1-16" viewBox="0 0 16 16"><path d="M6 10L14 2" class="stroke-current stroke-2 slc-r sl-r"></path><path d="M10 2L14 2L14 6" class="stroke-current stroke-2 slc-r sl-r"></path><path d="M6 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V10" class="stroke-current stroke-2 slc-r sl-r"></path></symbol><symbol id="folder-16" viewBox="0 0 16 16"><g class="folder"><path d="M2 6h12v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M3 3a1 1 0 0 1 1-1h2l2 1h4a1 1 0 0 1 1 1v2H3V3Z" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="font-16" viewBox="0 0 16 16"><g class="font"><path d="m3 4 .625-2 .535.214a4 4 0 0 0 1.485.286h4.71a4 4 0 0 0 1.485-.286L12.375 2 13 4a2.438 2.438 0 0 0-2.25-1.5H10C9.375 2.5 8 3 8 4c0-1-1.375-1.5-2-1.5h-.75C4.266 2.5 3.378 3.092 3 4Z" class="Vector 35"></path><path d="M8 3v10" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M6 14h4Z" class="fill-none stroke-current stroke-2 sl-s"></path></g></symbol><symbol id="font-outline-16" viewBox="0 0 16 16"><path class="fill-(--icon-fill) stroke-2" stroke="color(display-p3 .0353 .1804 .1412)" d="M4.104 2.385 3.334 2l-.667 4.667s.666-1.334 2.666-1.334h1.334V10c0 1.333-.667 2-1.334 2v2h5.334v-2c-.667 0-1.334-.667-1.334-2V5.333h1.334c2 0 2.666 1.334 2.666 1.334L12.667 2l-.77.385c-.37.185-.78.282-1.193.282H5.296c-.414 0-.822-.097-1.192-.282Z"></path></symbol><symbol id="foundry-16" viewBox="0 0 16 16"><g class="foundry"><path d="M2.662 14C2.294 14 2 13.702 2 13.333V2.667C2 2.298 2.298 2 2.667 2C6.222 2 9.778 2 13.333 2C13.702 2 14 2.298 14 2.667V13.333C14 13.702 13.705 14 13.337 14C11.259 14 4.882 14 2.662 14Z" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M5 6V5H11V6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M8 5V11" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M7 11H9" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="frame-16" viewBox="0 0 16 16"><g class="frame"><path d="M4 4h8v8H4z" class="fill-(--icon-fill)"></path><path d="M2 4h12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M4 2v12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M12 2v12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M2 12h12" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol>
1<symbol id="home-16" viewBox="0 0 16 16"><g class="home"><path d="M15 7 8 1 1 7h1v8h4V9h4v6h4V7h1Z" class="fill-(--icon-fill)"></path><path d="m1 7 7-6 7 6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M2 6.33V15h4V9h4v6h4V6.33" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M6 14h4" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="link-16" viewBox="0 0 16 16"><g class="link"><path d="M13.084 7.337a3.126 3.126 0 1 0-4.42-4.421l-1.77 1.768a3.126 3.126 0 0 0 0 4.421m-3.978-.442a3.126 3.126 0 1 0 4.42 4.421l1.77-1.768a3.126 3.126 0 0 0 0-4.421" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="move-16" viewBox="0 0 16 16"><g class="move"><path d="m6 12 2 2 2-2" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M10 4 8 2 6 4" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M4 6 2 8l2 2" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M10 8h3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M3 8h3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M8 3v3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M8 10v3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m12 10 2-2-2-2" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="navigation-16" viewBox="0 0 16 16"><g class="navigation"><path d="M13 4H3" class="stroke-current stroke-2 sl-r"></path><path d="M13 12H3" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="newsletter-16" viewBox="0 0 16 16"><path d="M15 8 5 14v-4l3-2-3-2V2l10 6Z" fill="#EEEAEC" class="stroke-currentcolor"></path><path d="M2 8H1M13 8H8" class="stroke-currentcolor"></path><circle cx="2" cy="4" r="1" class="fill-current" stroke="none"></circle><circle cx="2" cy="12" r="1" class="fill-current" stroke="none"></circle></symbol><symbol id="note-16" viewBox="0 0 16 16"><g class="note"><g class="fill-(--icon-fill) stroke-current stroke-2 sl-r"><path d="M3.5 14a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H12a1 1 0 0 1 1 1v6l-5 5H3.5Z"></path><path d="M8 14v-4a1 1 0 0 1 1-1h4m-5 5H3.5a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H12a1 1 0 0 1 1 1v6m-5 5 5-5"></path></g><path d="M10 6H6" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="note-pencil-16" viewBox="0 0 16 16"><g class="note-pencil"><rect width="10.667" height="12" x="2.667" y="2" class="fill-(--icon-fill)" rx=".667"></rect><path d="M10 10H6" class="stroke-current stroke-2 sl-r"></path><path d="M8.667 2H3.333a.667.667 0 0 0-.666.667v10.666c0 .368.298.667.666.667h9.334a.667.667 0 0 0 .666-.667V6.667" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M12 2 8.667 5.333v1.334H10l3.333-3.334L12 2Z" class="Vector 33"></path></g></symbol><symbol id="note-plus-16" viewBox="0 0 16 16"><g class="note-plus"><rect width="10" height="12" x="3" y="2" class="fill-(--icon-fill)" rx=".667"></rect><path d="M10 6H6" class="stroke-current stroke-2 sl-r"></path><path d="M8.333 14H3.667A.667.667 0 0 1 3 13.333V2.667C3 2.298 3.298 2 3.667 2h8.666c.368 0 .667.298.667.667V8" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M11.5 12.5h3" class="stroke-current stroke-2 sl-r"></path><path d="M13 11v3" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="notepad-16" viewBox="0 0 16 16"><g class="notepad"><path d="M4 14a1 1 0 0 1-1-1V2.667C3 2.298 3.298 2 3.667 2h8.666c.368 0 .667.298.667.667V13c0 .552-.444 1-.996 1H4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M6 2v2" class="stroke-current stroke-2 sl-r"></path><path d="M10 2v2" class="stroke-current stroke-2 sl-r"></path><path d="M6 7h2" class="stroke-current stroke-2 sl-r"></path><path d="M6 10h4" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="palette-16" viewBox="0 0 16 16"><g class="palette"><path d="M2 8a6 6 0 1 1 12 0v1.547c0 .25-.203.453-.453.453h-2.214c-.736 0-1.333.597-1.333 1.333v2.214c0 .25-.203.453-.453.453H8a6 6 0 0 1-6-6Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><circle cx="8" cy="5" r="1" class="fill-current"></circle><circle cx="7" cy="10" r="1" class="fill-current"></circle><circle cx="5" cy="7" r="1" class="fill-current"></circle></g></symbol>
1<symbol id="pen-16" viewBox="0 0 16 16"><g class="pen"><path d="M11 15H5c0-3-3-6-3-6l6-8 6 8s-3 3-3 6Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M8 2v7" class="fill-none stroke-current stroke-2 sl-r"></path><circle cx="8" cy="9" r="1" class="fill-current stroke-current stroke-1 sl-r"></circle><path d="M4 15h8" class="fill-none stroke-current stroke-2 sl-s"></path></g></symbol><symbol id="person-16" viewBox="0 0 16 16"><g class="person"><path d="M9.84 9.7v-.03c.9-.72 1.49-1.94 1.49-3.33v-2c0-1.21 0-2-.67-2.67C10 1 9.33 1 8.67 1c-.6 0-.66.54-1.64.65-1.37.15-2.36 1.37-2.36 2.74v1.94c0 1.39.59 2.62 1.49 3.33v.03c-.09 1.21-.93 1.21-2.09 1.57-.62.19-1.14.4-1.56.59-.71.33-1.17 1.04-1.17 1.82V14c0 .55.45 1 1 1h11.33c.55 0 1-.45 1-1v-.32c0-.78-.45-1.49-1.17-1.82-.42-.19-.95-.4-1.56-.59-1.16-.36-2.01-.36-2.1-1.57Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="play-16" viewBox="0 0 16 16"><g class="play"><path d="M3 2.741a1 1 0 0 1 1.504-.864l9.015 5.26a1 1 0 0 1 0 1.727l-9.015 5.259A1 1 0 0 1 3 13.259V2.741Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="plus-16" viewBox="0 0 16 16"><g class="plus"><path d="M3 8h10" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M8 3v10" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="publication-16" viewBox="0 0 16 16"><g class="publication"><path d="M3 14C2.448 14 2 13.552 2 13V3C2 2.448 2.448 2 3 2H13C13.552 2 14 2.448 14 3V13C14 13.552 13.552 14 13 14Z" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M5 6H11" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M6 9H10" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="puzzle-16" viewBox="0 0 16 16"><g class="puzzle"><path d="M2 2.5a.5.5 0 0 1 .5-.5h8.889a.5.5 0 0 1 .5.5v2.645c0 .382.424.642.793.544C13.604 5.444 15 5.489 15 8c0 2.512-1.396 2.556-2.318 2.311-.37-.098-.793.162-.793.544V13.5a.5.5 0 0 1-.5.5H2.5a.5.5 0 0 1-.5-.5v-2.732c0-.362.38-.618.734-.55.92.177 2.377.092 2.377-2.218S3.654 5.605 2.734 5.782C2.38 5.85 2 5.594 2 5.232V2.5Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="rectangle-16" viewBox="0 0 16 16"><g class="rectangle"><rect width="10" height="10" x="3" y="3" class="fill-(--icon-fill) stroke-current stroke-2 sl-r" rx="1"></rect></g></symbol><symbol id="save-16" viewBox="0 0 16 16"><line x1="2" y1="15" x2="14" y2="15"></line><polyline class="fill-s1" points="5 8 8 11 11 8"></polyline><line x1="8" y1="1" x2="8" y2="10"></line></symbol><symbol id="saved-16" viewBox="0 0 16 16"><line x1="2" y1="15" x2="14" y2="15"></line><polyline points="3 8 6 11 13 4"></polyline></symbol><symbol id="search-16" viewBox="0 0 16 16"><g class="search"><path d="m11 11 2 2" class="fill-none stroke-current stroke-4 sl-r"></path><circle cx="7" cy="7" r="5" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></circle></g></symbol><symbol id="search-small-16" viewBox="0 0 16 16"><path d="M11 11L14 14" class="sw-4"></path><circle cx="7" cy="7" r="5" class="fill-(--icon-fill) sw-2"></circle></symbol><symbol id="settings-16" viewBox="0 0 16 16"><g class="settings"><circle cx="5" cy="4" r="2" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></circle><circle cx="11" cy="12" r="2" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></circle><path d="M5 6v9" class="fill-none stroke-current stroke-2"></path><path d="M11 1v9" class="fill-none stroke-current stroke-2"></path></g></symbol><symbol id="shadow-16" viewBox="0 0 16 16"><g class="shadow"><circle cx="8" cy="6" r="4" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></circle><path d="M3.101 12a6.977 6.977 0 0 0 4.9 2 6.977 6.977 0 0 0 4.898-2" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="shapes-16" viewBox="0 0 16 16"><g class="shapes"><circle cx="4" cy="12" r="2" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></circle><circle cx="12" cy="4" r="2" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></circle><path d="M14 10h-4v4h4v-4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M6 2H2v4h4V2Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol>
1<symbol id="share-16" viewBox="0 0 16 16"><g class="share"><g class="Group 2"><rect width="10" height="6" x="3" y="7" class="fill-(--icon-fill)" rx="1"></rect><path d="M5.143 7H3.5a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.5-.5h-1.643" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M8 3v6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M10 4 8 2 6 4" class="fill-none stroke-current stroke-2 sl-r"></path></g></g></symbol><symbol id="sidebar-left-16" viewBox="0 0 16 16"><g class="sidebar-left"><path d="M3.5 14A1.5 1.5 0 0 1 2 12.5v-9A1.5 1.5 0 0 1 3.5 2h1A1.5 1.5 0 0 1 6 3.5v9A1.5 1.5 0 0 1 4.5 14h-1Z" class="fill-(--icon-fill)"></path><rect width="12" height="12" x="2" y="2" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r" rx="1"></rect><path d="M6 3v10" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="sidebar-right-16" viewBox="0 0 16 16"><g class="sidebar-right"><path d="M11.5 14a1.5 1.5 0 0 1-1.5-1.5v-9A1.5 1.5 0 0 1 11.5 2h1A1.5 1.5 0 0 1 14 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-1Z" class="fill-(--icon-fill)"></path><rect width="12" height="12" x="2" y="2" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r" rx="1"></rect><path d="M10 3v10" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="star-16" viewBox="0 0 16 16"><g class="star"><path d="M7.407 2.154a.667.667 0 0 1 1.186 0l1.36 2.647c.097.188.277.32.486.353l2.937.476a.667.667 0 0 1 .367 1.128l-2.097 2.11a.666.666 0 0 0-.186.572l.456 2.94a.667.667 0 0 1-.96.698l-2.655-1.342a.667.667 0 0 0-.602 0l-2.655 1.342a.667.667 0 0 1-.96-.697l.456-2.94a.667.667 0 0 0-.186-.572L2.257 6.758a.667.667 0 0 1 .367-1.128l2.937-.476a.667.667 0 0 0 .486-.353l1.36-2.647Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="tab-16" viewBox="0 0 16 16"><g class="tab"><path d="M13 8H2" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M9 12L13 8L9 4" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M14 4V12" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="time-16" viewBox="0 0 16 16"><circle class="fill-s1" cx="8" cy="9" r="5.5"></circle><line x1="2" y1="3.5" x2="4" y2="1.5"></line><line x1="14" y1="3.5" x2="12" y2="1.5"></line><polyline points="8 7 8 9 10 9"></polyline></symbol><symbol id="timer-16" viewBox="0 0 16 16"><g class="timer"><path d="M8 14.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="m2 3.5 2-2" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m14 3.5-2-2" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M8 7v2h2" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="type-16" viewBox="0 0 16 16"><g class="type"><path d="m8 3 1 1v6H5l3-7Z" class="fill-(--icon-fill)"></path><g class="mask-type-16"><mask id="type-16-a" width="8" height="14" x="1" y="1" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path d="M1 1h8v14H1z"></path></mask><g mask="url(#type-16-a)"><path d="M4 11h5" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M2 16 7.76 2 14 16" class="fill-none stroke-current stroke-2 sl-r"></path></g></g><path d="M11 2h1v12h-1" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M13 2h-1v12h1" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="vector-square-16" viewBox="0 0 16 16"><g class="vector-square"><path d="M4 13a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v8c0 .552-.444 1-.996 1H4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M4 2H2v2h2V2Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M4 12H2v2h2v-2Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M14 2h-2v2h2V2Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M14 12h-2v2h2v-2Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="views-16" viewBox="0 0 16 16"><g class="views"><g class="fill-(--icon-fill) stroke-current stroke-2 sl-r"><path d="M2 4h4v10H2z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M6 6h4v8H6z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M10 2h4v12h-4z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></g></symbol></defs></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden;display:none"><defs><symbol id="accessibility-24" viewBox="0 0 24 24"><g class="accessibility"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M12 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" class="fill-(--icon-fill) stroke-current stroke-1 sl-r"></path><path d="M16 10s-2.318 1-4 1-4-1-4-1" class="stroke-current stroke-2 sl-r"></path><path d="M13 11h-2v4h2v-4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="m11 15-1 3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m13 15 1 3" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="airplane-24" viewBox="0 0 24 24"><g class="airplane"><path d="M22 12 8 21v-6l4-3-4-3V3l14 9Z" class="fill-current"></path><path d="M22 12 8 21v-6l4-3-4-3V3l14 9Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M21 12h-9" class="stroke-current stroke-2 sl-r"></path><path d="M3 8h1" class="stroke-current stroke-2 sl-r"></path><path d="M3 16h1" class="stroke-current stroke-2 sl-r"></path><path d="M2 12h4" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="align-centre-24" viewBox="0 0 24 24"><g class="align-centre"><path d="M3 3h18" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M3 21h18" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M6 9h12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M6 15h12" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="align-left-24" viewBox="0 0 24 24"><g class="align-left"><path d="M3 3h18" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M3 9h12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M3 15h9" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M3 21h15" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="align-right-24" viewBox="0 0 24 24"><g class="align-right"><path d="M3 3h18" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M9 9h12" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M12 15h9" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M6 21h15" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="all-24" viewBox="0 0 24 24"><g class="all"><path d="M7 3H3v4h4V3Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M14 3h-4v4h4V3Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M14 10h-4v4h4v-4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M14 17h-4v4h4v-4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M7 17H3v4h4v-4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M7 10H3v4h4v-4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M21 3h-4v4h4V3Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M21 17h-4v4h4v-4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M21 10h-4v4h4v-4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="angle-down-24" viewBox="0 0 24 24"><g class="angle-down"><path d="m4 8 8 8 8-8" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="angle-left-24" viewBox="0 0 24 24"><g class="angle-left"><path d="m16 4-8 8 8 8" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="angle-right-24" viewBox="0 0 24 24"><g class="angle-right"><path d="m8 4 8 8-8 8" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="angle-up-24" viewBox="0 0 24 24"><g class="angle-up"><path d="m4 16 8-8 8 8" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="arrow-down-24" viewBox="0 0 24 24"><g class="arrow-down"><path d="M12 22V2" class="stroke-current stroke-2 sl-r"></path><path d="m6 16 6 6 6-6" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="arrow-left-24" viewBox="0 0 24 24"><g class="arrow-left"><path d="M2 12h20" class="stroke-current stroke-2 sl-r"></path><path d="m8 6-6 6 6 6" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="arrow-right-24" viewBox="0 0 24 24"><g class="arrow-right"><path d="M22 12H2" class="stroke-current stroke-2 sl-r"></path><path d="m16 18 6-6-6-6" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="arrow-up-24" viewBox="0 0 24 24"><g class="arrow-up"><path d="M12 2v20" class="stroke-current stroke-2 sl-r"></path><path d="m18 8-6-6-6 6" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="bee-24" viewBox="0 0 24 24"><g class="bee"><path d="M10 6c0-3-1-4-4-4" class="stroke-current stroke-2 sl-r"></path><path d="M14 6c0-3 1-4 4-4" class="stroke-current stroke-2 sl-r"></path><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" class="fill-current stroke-current stroke-2 sl-r"></path><path d="M12 21a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" class="fill-dandelion-100 dark:fill-fern-900 stroke-current stroke-2 sl-r"></path>
1<path d="M7 12c3.871 1.341 6.058 1.325 10 0" class="path"></path><path d="M7 16c3.871 1.341 6.058 1.325 10 0" class="stroke-current stroke-2 sl-r"></path><path d="M22 17.667A8.667 8.667 0 0 0 13.333 9H12v1.333A8.667 8.667 0 0 0 20.667 19c.736 0 1.333-.597 1.333-1.333Z" class="fill-dandelion-0 dark:fill-fern-900 stroke-current stroke-2 sl-r"></path><path d="M2 17.667A8.667 8.667 0 0 1 10.667 9H12v1.333A8.667 8.667 0 0 1 3.333 19 1.333 1.333 0 0 1 2 17.667Z" class="fill-dandelion-0 dark:fill-fern-900 stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="bolt-24" viewBox="0 0 24 24"><g class="bolt"><path d="m13 10-1-8-6 12h5l1 8 6-12h-5Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="book-24" viewBox="0 0 24 24"><g class="book"><path d="M16 21h3" class="stroke-current stroke-2 sl-r"></path><path d="M19 17V3H6.5A1.5 1.5 0 0 0 5 4.5v11A1.5 1.5 0 0 0 6.5 17H19Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M5 15v4.5A1.5 1.5 0 0 0 6.5 21H18v-4" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="bookmark-24" viewBox="0 0 24 24"><g class="bookmark"><rect width="18" height="11" x="3" y="9" class="fill-(--icon-fill)" rx="1"></rect><path d="M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r"></path><path d="M4 9h10" class="stroke-current stroke-2 sl-r"></path><path d="M18 9h3" class="stroke-current stroke-2 sl-r"></path><path d="M14 4h4v12l-2-2-2 2V4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="box-24" viewBox="0 0 24 24"><g class="box"><path d="M4 9h16v9.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5V9Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><rect width="18" height="4" x="3" y="5" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r" rx="1"></rect><path d="M9 13h6" class="stroke-current stroke-2"></path></g></symbol><symbol id="bulb-24" viewBox="0 0 24 24"><g class="bulb"><path d="M12 2C9 2 6 4 6 8s3 4 3 8v2h6v-2c0-4 3-4 3-8s-3-6-6-6Z" class="fill-(--icon-fill) stroke-current stroke-2"></path><path d="M9 15h6" class="stroke-current stroke-2"></path><path d="M15 19a3 3 0 1 1-6 0v-1h6v1Z" class="fill-(--icon-fill-bg) stroke-current stroke-2"></path></g></symbol><symbol id="buy-coffee-24" viewBox="0 0 24 24"><g clip-path="url(#buy-coffee-24-clip0)"><path d="M18.5546 5.58282L18.5381 5.57314L18.5 5.56152C18.5153 5.57445 18.5345 5.58196 18.5546 5.58282Z" class="fill-current"></path><path d="M18.7948 7.29739L18.7764 7.30255L18.7948 7.29739Z" class="fill-current"></path><path d="M18.5617 5.58018C18.5593 5.57988 18.557 5.57934 18.5548 5.57855C18.5547 5.58007 18.5547 5.58161 18.5548 5.58313C18.5573 5.58279 18.5597 5.58178 18.5617 5.58018Z" class="fill-current"></path><path d="M18.5552 5.58302H18.5576V5.58148L18.5552 5.58302Z" class="fill-current"></path><path d="M18.7803 7.29427L18.808 7.27847L18.8184 7.27266L18.8277 7.26266C18.8101 7.27024 18.7941 7.28096 18.7803 7.29427Z" class="fill-current"></path><path d="M18.6027 5.62028L18.5755 5.59444L18.5571 5.58444C18.567 5.60189 18.5834 5.61477 18.6027 5.62028Z" class="fill-current"></path><path d="M11.7789 22.2583C11.7572 22.2677 11.7382 22.2823 11.7236 22.3009L11.7407 22.29C11.7524 22.2793 11.7688 22.2667 11.7789 22.2583Z" class="fill-current"></path><path d="M15.7414 21.4786C15.7414 21.4542 15.7295 21.4587 15.7324 21.5457C15.7324 21.5388 15.7353 21.5317 15.7366 21.5249C15.7382 21.5094 15.7395 21.4942 15.7414 21.4786Z" class="fill-current"></path><path d="M15.3306 22.2583C15.3089 22.2677 15.29 22.2823 15.2754 22.3009L15.2925 22.29C15.3041 22.2793 15.3206 22.2667 15.3306 22.2583Z" class="fill-current"></path><path d="M8.98829 22.4437C8.97183 22.4294 8.9517 22.42 8.93018 22.4164C8.94761 22.4249 8.96504 22.4333 8.97666 22.4397L8.98829 22.4437Z" class="fill-current"></path><path d="M8.36033 21.8423C8.35776 21.8169 8.34996 21.7923 8.3374 21.77C8.3463 21.7931 8.35373 21.8169 8.35968 21.8409L8.36033 21.8423Z" class="fill-current"></path>
1<path d="M12.5783 11.0868C11.7163 11.4559 10.738 11.8743 9.47003 11.8743C8.93963 11.8733 8.41178 11.8005 7.90088 11.658L8.7778 20.6614C8.80884 21.0376 8.98027 21.3885 9.25805 21.6443C9.53582 21.9 9.89963 22.0419 10.2772 22.0419C10.2772 22.0419 11.5206 22.1064 11.9355 22.1064C12.382 22.1064 13.721 22.0419 13.721 22.0419C14.0985 22.0419 14.4622 21.8998 14.7399 21.6441C15.0177 21.3883 15.189 21.0376 15.2201 20.6614L16.1593 10.7123C15.7396 10.5689 15.316 10.4737 14.8384 10.4737C14.0125 10.4734 13.3471 10.7578 12.5783 11.0868Z" class="fill-(--icon-fill)"></path><path d="M5.18652 7.24561L5.20137 7.25951L5.21106 7.26534C5.2036 7.25792 5.19538 7.2513 5.18652 7.24561Z" class="fill-current"></path><path d="M20.2147 6.41468L20.0827 5.74859C19.9642 5.15096 19.6952 4.58625 19.0818 4.37025C18.8851 4.30114 18.662 4.27146 18.5113 4.12841C18.3605 3.98539 18.3159 3.76325 18.2811 3.55725C18.2165 3.17917 18.1558 2.80076 18.0896 2.42332C18.0324 2.09883 17.9872 1.73431 17.8384 1.43662C17.6447 1.03691 17.2427 0.803144 16.843 0.648488C16.6382 0.572029 16.4291 0.50735 16.2169 0.454765C15.2183 0.1913 14.1683 0.0944382 13.1409 0.039227C11.9078 -0.0288182 10.6713 -0.00831713 9.4411 0.100573C8.52544 0.183874 7.56101 0.284611 6.69088 0.601349C6.37285 0.71726 6.04513 0.856417 5.80331 1.10213C5.50658 1.40401 5.40972 1.87089 5.62636 2.24735C5.78038 2.51469 6.04126 2.70357 6.31797 2.82853C6.67838 2.98953 7.05478 3.11204 7.44092 3.19403C8.51608 3.43166 9.62967 3.52496 10.7281 3.56469C11.9455 3.61381 13.1649 3.57399 14.3765 3.44553C14.6762 3.4126 14.9753 3.3731 15.2738 3.32705C15.6254 3.27312 15.8511 2.81335 15.7475 2.49305C15.6235 2.11014 15.2903 1.96162 14.9135 2.01942C14.858 2.02812 14.8027 2.03619 14.7472 2.04426L14.7072 2.05008C14.5795 2.06623 14.4519 2.08128 14.3242 2.09528C14.0606 2.12369 13.7962 2.14694 13.5313 2.16503C12.9378 2.20635 12.3428 2.2254 11.748 2.22637C11.1636 2.22637 10.5789 2.2099 9.9958 2.17148C9.72976 2.15405 9.46435 2.13187 9.1996 2.10496C9.07917 2.09237 8.95906 2.07914 8.83896 2.06428L8.72465 2.04976L8.6998 2.04621L8.5813 2.0291C8.33915 1.9926 8.09699 1.95064 7.85742 1.89994C7.83325 1.89457 7.81162 1.88114 7.79612 1.86182C7.78062 1.8425 7.77217 1.81848 7.77217 1.79372C7.77217 1.76896 7.78062 1.74493 7.79612 1.72562C7.81162 1.70631 7.83325 1.69286 7.85742 1.68749H7.86194C8.06955 1.64326 8.27876 1.60548 8.48863 1.57255C8.5586 1.56157 8.62876 1.55081 8.69915 1.54026H8.70108C8.83249 1.53155 8.96455 1.50798 9.09531 1.49248C10.233 1.37414 11.3775 1.33379 12.5207 1.37172C13.0757 1.38787 13.6304 1.42048 14.1828 1.47666C14.3016 1.48893 14.4198 1.50184 14.538 1.51637C14.5832 1.52186 14.6287 1.52832 14.6742 1.53381L14.7659 1.54704C15.0333 1.58687 15.2992 1.63519 15.5637 1.69202C15.9557 1.77725 16.4591 1.80502 16.6334 2.23444C16.689 2.37069 16.7142 2.52212 16.7448 2.66514L16.7839 2.84757C16.7849 2.85084 16.7857 2.8542 16.7862 2.85758C16.8785 3.28808 16.9709 3.71857 17.0635 4.14907C17.0703 4.18088 17.0704 4.21374 17.064 4.2456C17.0575 4.27748 17.0445 4.30765 17.0259 4.3343C17.0072 4.36093 16.9832 4.38342 16.9555 4.40039C16.9278 4.41735 16.8968 4.4284 16.8646 4.43289H16.862L16.8055 4.44064L16.7497 4.44805C16.5727 4.47109 16.3956 4.49262 16.2182 4.51264C15.8689 4.55246 15.519 4.58689 15.1686 4.61596C14.4722 4.67385 13.7745 4.71184 13.0754 4.72993C12.7191 4.73939 12.363 4.74382 12.007 4.74316C10.5899 4.74206 9.17402 4.65968 7.76637 4.49648C7.61397 4.47841 7.46158 4.45903 7.30917 4.43934C7.42735 4.45452 7.22329 4.42771 7.18197 4.42191C7.0851 4.40834 6.98824 4.39425 6.89138 4.37962C6.56624 4.33085 6.24306 4.2708 5.91856 4.21816C5.52627 4.1536 5.1511 4.18589 4.79626 4.37962C4.50499 4.539 4.26925 4.78341 4.12049 5.08025C3.96744 5.39666 3.92192 5.74116 3.85347 6.08116C3.78502 6.42114 3.67847 6.78695 3.71883 7.13598C3.80568 7.88925 4.33229 8.50141 5.08975 8.63831C5.80233 8.76745 6.51879 8.87206 7.23717 8.96118C10.0592 9.3068 12.9102 9.34814 15.741 9.08452C15.9715 9.06299 16.2017 9.03954 16.4316 9.01413C16.5034 9.00625 16.5761 9.01451 16.6443 9.03834C16.7125 9.06217 16.7745 9.10095 16.8257 9.15184C16.877 9.20273 16.9162 9.26445 16.9405 9.33245C16.9649 9.40048 16.9737 9.47308
116.9663 9.54493L16.8946 10.2417C16.7502 11.6496 16.6058 13.0575 16.4613 14.4652C16.3107 15.9435 16.159 17.4218 16.0064 18.8998C15.9634 19.3162 15.9203 19.7324 15.8773 20.1484C15.8359 20.5582 15.8301 20.9808 15.7523 21.3857C15.6296 22.0224 15.1986 22.4134 14.5696 22.5564C13.9934 22.6876 13.4048 22.7565 12.8138 22.7617C12.1587 22.7653 11.504 22.7362 10.8488 22.7398C10.1495 22.7437 9.29292 22.6792 8.75308 22.1586C8.27876 21.7015 8.21322 20.9856 8.14865 20.3666C8.06256 19.5471 7.97721 18.7279 7.8926 17.9086L7.41799 13.3532L7.11094 10.4057C7.10576 10.357 7.1006 10.3089 7.09576 10.2598C7.05895 9.90817 6.81001 9.56399 6.41772 9.58174C6.08195 9.59659 5.70031 9.88202 5.7397 10.2598L5.96731 12.445L6.43806 16.9652C6.57217 18.2492 6.70595 19.5333 6.8394 20.8177C6.86524 21.0637 6.88944 21.3105 6.91656 21.5565C7.06412 22.901 8.09085 23.6255 9.36233 23.8294C10.1049 23.949 10.8656 23.9735 11.6192 23.9857C12.5853 24.0013 13.561 24.0385 14.5112 23.8634C15.9192 23.605 16.9757 22.6649 17.1264 21.2065C17.1695 20.7854 17.2126 20.3643 17.2556 19.9431C17.3987 18.55 17.5417 17.1568 17.6844 15.7635L18.1513 11.211L18.3653 9.12456C18.376 9.02109 18.4197 8.92382 18.4899 8.84713C18.5602 8.77043 18.6532 8.71838 18.7554 8.69868C19.158 8.62022 19.5428 8.48622 19.8292 8.17982C20.2851 7.69197 20.3759 7.05591 20.2147 6.41468ZM5.06909 6.86477C5.07522 6.86186 5.06392 6.91448 5.05908 6.93902C5.05811 6.90189 5.06005 6.86895 5.06909 6.86477ZM5.10816 7.16697C5.11138 7.1647 5.12107 7.17763 5.13108 7.19313C5.1159 7.17891 5.10622 7.16827 5.10783 7.16697H5.10816ZM5.14658 7.21766C5.16046 7.24123 5.16789 7.25609 5.14658 7.21766V7.21766ZM5.22374 7.28029H5.22568C5.22568 7.28257 5.22923 7.28482 5.23052 7.28709C5.22838 7.28459 5.226 7.28232 5.22342 7.28029H5.22374ZM18.7366 7.18666C18.592 7.3242 18.374 7.38814 18.1587 7.42011C15.7436 7.7785 13.2933 7.95995 10.8517 7.87988C9.10435 7.82015 7.37537 7.62609 5.64542 7.38168C5.47591 7.35779 5.29219 7.32679 5.17563 7.20184C4.95608 6.96614 5.06392 6.49152 5.12107 6.20675C5.17338 5.94586 5.27347 5.59814 5.58375 5.561C6.06806 5.50418 6.63049 5.70855 7.10965 5.7812C7.68651 5.86923 8.26553 5.93973 8.84669 5.99268C11.327 6.2187 13.849 6.1835 16.3183 5.85289C16.7684 5.79239 17.2169 5.72211 17.6637 5.64205C18.0618 5.57068 18.5032 5.4367 18.7437 5.849C18.9087 6.12991 18.9307 6.50573 18.9052 6.82311C18.8973 6.96139 18.8369 7.09145 18.7363 7.18666H18.7366Z" class="fill-current"></path></g><defs><clipPath id="buy-coffee-24-clip0"><rect width="24" height="24" class="fill-(--icon-fill)"></rect></clipPath></defs></symbol><symbol id="calendar-24" viewBox="0 0 24 24"><g class="calendar"><rect width="20" height="16" x="2" y="4" class="fill-current stroke-current stroke-2 sl-r" rx="1"></rect><rect width="18" height="12" x="3" y="7" class="fill-(--icon-fill)" rx=".5"></rect><rect width="2" height="2" x="5" y="15" class="fill-current" rx="1"></rect><rect width="2" height="2" x="5" y="12" class="fill-current" rx="1"></rect><rect width="2" height="2" x="8" y="15" class="fill-current" rx="1"></rect><rect width="2" height="2" x="8" y="12" class="fill-current" rx="1"></rect><rect width="2" height="2" x="8" y="9" class="fill-current" rx="1"></rect><rect width="2" height="2" x="11" y="15" class="fill-current" rx="1"></rect><rect width="2" height="2" x="14" y="15" class="fill-current" rx="1"></rect><rect width="2" height="2" x="11" y="12" class="fill-current" rx="1"></rect><rect width="2" height="2" x="11" y="9" class="fill-current" rx="1"></rect><rect width="2" height="2" x="14" y="12" class="fill-current" rx="1"></rect><rect width="2" height="2" x="17" y="12" class="fill-current" rx="1"></rect><rect width="2" height="2" x="14" y="9" class="fill-current" rx="1"></rect><rect width="2" height="2" x="17" y="9" class="fill-current" rx="1"></rect></g></symbol><symbol id="caret-down-24" viewBox="0 0 24 24"><g class="caret-down"><path d="m17 9-5 8-5-8h10Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="caret-left-24" viewBox="0 0 24 24"><g class="caret-left"><path d="m15 7-8 5 8 5V7Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="caret-right-24" viewBox="0 0 24 24"><g class="caret-right"><path d="m9 7 8 5-8 5V7Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="caret-up-24" viewBox="0 0 24 24"><g class="caret-up"><path d="m17 15-5-8-5 8h10Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="checkmark-24" viewBox="0 0 24 24"><g class="checkmark"><path d="m4 13 5 4L20 6" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="checkmark-underline-24" viewBox="0 0 24 24"><g class="checkmark-underline"><path d="M3 22.5h18" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m4 13 5 4L20 6" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="clipboard-24" viewBox="0 0 24 24"><g class="clipboard"><path d="M6.496 21A1.497 1.497 0 0 1 5 19.5V5a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14.5c0 .828-.669 1.5-1.497 1.5H6.496Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M8 5h8v1H8z" class="fill-current stroke-current stroke-2 sl-r"></path><circle cx="12" cy="4" r="2" class="stroke-current stroke-2 sl-r fill-(--icon-fill)"></circle></g></symbol><symbol id="clipboard-success-24" viewBox="0 0 24 24"><g class="clipboard-success"><path d="M6.496 21A1.497 1.497 0 0 1 5 19.5V5a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14.5c0 .828-.669 1.5-1.497 1.5H6.496Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M8 5h8v1H8z" class="fill-current stroke-current stroke-2 sl-r"></path><circle cx="12" cy="4" r="2" class="stroke-current stroke-2 sl-r fill-(--icon-fill)"></circle><path d="m15 11-4 4-2-2" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="clock-reverse-24" viewBox="0 0 24 24"><g class="clock-reverse">
1<path d="M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18Z" class="fill-(--icon-fill)"></path><path d="M3 9s1.988-2.32 2.727-3.192c.176-.208.382-.436.587-.615C9.1 2.753 13.09 2.237 16.5 4.206a9 9 0 0 1-9 15.588" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m15 15-3-3V8" class="stroke-current stroke-2 sl-r"></path><path d="M3 5v4h4" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="close-24" viewBox="0 0 24 24"><g class="close"><path d="M19 19 5 5" class="stroke-current stroke-2 sl-r"></path><path d="M19 5 5 19" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="cmd-24" viewBox="0 0 24 24"><g class="cmd"><path d="M6 21a3 3 0 0 0 3-3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 0 6Z" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="code-24" viewBox="0 0 24 24"><g class="code"><path d="M3.993 20A.994.994 0 0 1 3 19V5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v14c0 .552-.442 1-.995 1H3.993Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="m7 12 2 2-2 2" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M12 16h3" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="collections-24" viewBox="0 0 24 24"><g class="collections"><path d="M8 6H3v15h5V6Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="m17.812 4.005-4.83 1.294 4.209 15.706 4.83-1.294-4.21-15.706Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M13 3H8v18h5V3Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="comment-24" viewBox="0 0 24 24"><g class="comment"><path d="M16.5 3h-9A4.5 4.5 0 0 0 3 7.5v12c0 1.236 1.411 1.942 2.4 1.2l2-1.5A6 6 0 0 1 11 18h5.5a4.5 4.5 0 0 0 4.5-4.5v-6A4.5 4.5 0 0 0 16.5 3Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="component-24" viewBox="0 0 24 24"><g class="component"><path d="m14.632 12 3.684-3.684L22 12l-3.684 3.684z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M8.316 18.316 12 14.632l3.684 3.684L12 22z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M8.316 5.684 12 2l3.684 3.684L12 9.368z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="m2 12 3.684-3.684L9.368 12l-3.684 3.684z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="copy-24" viewBox="0 0 24 24"><g class="copy"><path d="M8 9H4.5A1.5 1.5 0 0 0 3 10.5v9A1.5 1.5 0 0 0 4.5 21h10a1.5 1.5 0 0 0 1.5-1.5V15" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r"></path><rect width="13" height="12" x="8" y="3" class="fill-(--icon-fill) stroke-current stroke-2 sl-r" rx="1.5"></rect></g></symbol><symbol id="css-24" viewBox="0 0 24 24"><g class="css"><path d="M6 2h12v6.667L21 12l-3 3.333V22H6v-6.667L3 12l3-3.333V2Z" class="fill-(--icon-fill)"></path><path d="M9 2H7.417a1.5 1.5 0 0 0-1.5 1.5v4.979a.5.5 0 0 1-.124.33L3.288 11.67a.5.5 0 0 0 0 .658l2.505 2.863a.5.5 0 0 1 .124.33V20.5a1.5 1.5 0 0 0 1.5 1.5H9" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M15 2h1.583a1.5 1.5 0 0 1 1.5 1.5v4.979a.5.5 0 0 0 .124.33l2.505 2.862a.5.5 0 0 1 0 .658l-2.505 2.863a.5.5 0 0 0-.124.33V20.5a1.5 1.5 0 0 1-1.5 1.5H15" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="cursor-24" viewBox="0 0 24 24"><g class="cursor"><path d="m4 4 18 6-9 3-3 9L4 4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="design-24" viewBox="0 0 24 24"><g class="design"><path d="M4 15c0-4.416 3.584-8 8-8s8 3.584 8 8" class="stroke-current stroke-2 sl-r"></path><path d="M4 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M20 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M4 7h16" class="stroke-current stroke-2 sl-r"></path><path d="M10 7a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z" class="fill-current stroke-current stroke-2 sl-r"></path><path d="M6 5H2v4h4V5Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M22 5h-4v4h4V5Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="download-24" viewBox="0 0 24 24">
1<path stroke="color(display-p3 .0353 .1804 .1412)" d="M3 22.5h18m-13.5-9L12 18l4.5-4.5M12 3v13.5" class="slc-r sl-r stroke-2"></path></symbol><symbol id="enlarge-24" viewBox="0 0 24 24"><g class="enlarge"><path d="M3 18v3h3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M21 6V3h-3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M6 3H3v3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m21 3-6 6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m9 15-6 6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m3 3 6 6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m15 15 6 6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M18 21h3v-3" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="enter-24" viewBox="0 0 24 24"><g class="enter"><path d="M4.5 12h15V6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m6 9-3 3 3 3" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="envelope-24" viewBox="0 0 24 24"><g class="envelope"><path d="M21 10v11H3V10l9 6 9-6Z" class="fill-(--icon-fill)"></path><path d="M5 4h14v6h2l-9 6-9-6h2V4Z" class="fill-(--icon-fill-bg)"></path><path d="M19 8.222 21 10v11H3V10l2-1.778" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M14.25 4 12 2 9.75 4" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m3 10 9 6 9-6" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M19 11V4H5v7" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="external-24" viewBox="0 0 24 24"><g class="external"><rect width="13" height="13" x="4" y="7" class="fill-(--icon-fill)" rx="1"></rect><path d="m12 12 8-8" class="stroke-current stroke-2 sl-r"></path><path d="M15 4h5v5" class="stroke-current stroke-2 sl-r"></path><path d="M9.333 7H5.5A1.5 1.5 0 0 0 4 8.5v10A1.5 1.5 0 0 0 5.5 20h10a1.5 1.5 0 0 0 1.5-1.5v-3.833" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="folder-24" viewBox="0 0 24 24"><g class="folder"><path d="M20 19.003A.997.997 0 0 1 19 20H5a1 1 0 0 1-1-1V5.5A1.5 1.5 0 0 1 5.5 4H8l1 1h9.5c.828 0 1.5.67 1.5 1.498v12.505Z" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r"></path><path d="M2.05 9.545A.5.5 0 0 1 2.548 9h18.905a.5.5 0 0 1 .497.545l-.826 9.09A1.5 1.5 0 0 1 19.63 20H4.37a1.5 1.5 0 0 1-1.494-1.364l-.826-9.09Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="font-24" viewBox="0 0 24 24"><g class="font"><path d="M12 5v15" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M9 21h6Z" class="fill-none stroke-current stroke-2 sl-s"></path><path d="m4 7 1-4 1.155.578A4 4 0 0 0 7.945 4h8.11a4 4 0 0 0 1.79-.422L19 3l1 4-.088-.265A4 4 0 0 0 16.116 4H15c-1 0-2 1-2 3h-2c0-2-1-3-2-3H7.884a4 4 0 0 0-3.796 2.735L4 7Z" class="Vector 35"></path></g></symbol><symbol id="font-outline-24" viewBox="0 0 24 24"><g class="font-outline"><path d="M6.155 3.578 5 3l-1 7s1-2 4-2h2v7c0 2-1 3-2 3v3h8v-3c-1 0-2-1-2-3V8h2c3 0 4 2 4 2l-1-7-1.155.578a4 4 0 0 1-1.79.422h-8.11a4 4 0 0 1-1.79-.422Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-s"></path></g></symbol><symbol id="foundry-24" viewBox="0 0 24 24"><g class="foundry"><path d="M3.993 21A.994.994 0 0 1 3 20V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16c0 .552-.442 1-.995 1H3.993Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M8 9V7h8v2" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M12 7v9" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M11 17h2" class="fill-none stroke-current stroke-2 sl-s"></path></g></symbol><symbol id="frame-24" viewBox="0 0 24 24"><g class="frame"><path d="M6 6h12v12H6z" class="fill-(--icon-fill)"></path><path d="M3 6h18" class="stroke-current stroke-2 sl-r"></path><path d="M6 3v18" class="stroke-current stroke-2 sl-r"></path><path d="M18 3v18" class="stroke-current stroke-2 sl-r"></path><path d="M3 18h18" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="home-24" viewBox="0 0 24 24"><g class="home"><path d="m12 3-8 7v11h5v-8h6v8h5V10l-8-7Z" class="fill-(--icon-fill)"></path><path d="m2 12 10-9 10 9" class="fill-none stroke-current stroke-2 sl-s"></path><path d="M4 11v10h5v-7.93h6V21h5V11" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M9 20h6" class="stroke-current stroke-2 sl-s"></path></g></symbol><symbol id="link-24" viewBox="0 0 24 24"><g class="link"><path d="m18.364 13.207 1.768-1.768a5 5 0 1 0-7.071-7.07l-2.829 2.828a5 5 0 0 0 0 7.07 6.81 6.81 0 0 0 1.633 1.197m-6.229-3.671L3.868 13.56a5 5 0 0 0 7.071 7.07l2.829-2.828a5 5 0 0 0 0-7.07 6.796 6.796 0 0 0-1.633-1.197" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="move-24" viewBox="0 0 24 24"><g class="move"><path d="m9 18 3 3 3-3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m15 6-3-3-3 3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m6 9-3 3 3 3" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M15 12h4.5" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M4.5 12H9" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M12 4.5V9" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M12 15v4.5" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m18 15 3-3-3-3" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="navigation-24" viewBox="0 0 24 24"><g class="navigation"><path d="M21 5H3" class="stroke-current stroke-2 sl-r"></path><path d="M19 12H5" class="stroke-current stroke-2 sl-r"></path><path d="M21 19H3" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="note-24" viewBox="0 0 24 24"><g class="note"><path d="M7.707 3.293A1 1 0 0 1 8.414 3H19a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7.414a1 1 0 0 1 .293-.707l3.414-3.414Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M8 13h8" class="stroke-current stroke-2 sl-r"></path><path d="M12 9h4" class="stroke-current stroke-2 sl-r"></path><path d="M8 17h8" class="stroke-current stroke-2 sl-r"></path><path d="M9 3v3a2 2 0 0 1-2 2H4" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="note-pencil-24" viewBox="0 0 24 24"><g class="note-pencil"><rect width="16" height="18" x="4" y="3" class="fill-(--icon-fill)" rx="1"></rect><path d="M13 3H5a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V10" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M8 17h8" class="stroke-current stroke-2 sl-r"></path><path d="M8 14h8" class="stroke-current stroke-2 sl-r"></path><path d="m18 3-5 5v2h2l5-5-2-2Z" class="Vector 33"></path></g></symbol><symbol id="note-plus-24" viewBox="0 0 24 24"><g class="note-plus"><rect width="16" height="18" x="4" y="3" class="fill-(--icon-fill)" rx="1"></rect><path d="M13 21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v10" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M8 7h3" class="stroke-current stroke-2 sl-r"></path><path d="M8 11h8" class="stroke-current stroke-2 sl-r"></path><path d="M15 18h4" class="stroke-current stroke-2 sl-r"></path><path d="M17 16v4" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="notepad-24" viewBox="0 0 24 24"><g class="notepad"><path d="M6.496 21A1.497 1.497 0 0 1 5 19.5V5a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14.5c0 .828-.669 1.5-1.497 1.5H6.496Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M9 2v4" class="stroke-current stroke-2 sl-r"></path><path d="M15 2v4" class="stroke-current stroke-2 sl-r"></path><path d="M9 16h6" class="stroke-current stroke-2 sl-r"></path><path d="M9 12h6" class="stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="palette-24" viewBox="0 0 24 24"><g class="palette"><path d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10v1.32a.68.68 0 0 1-.68.68h-4.653A2.667 2.667 0 0 0 14 16.667v4.654a.68.68 0 0 1-.68.679H12C6.477 22 2 17.523 2 12Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><circle cx="12" cy="6" r="1" class="fill-current stroke-current stroke-1"></circle><circle cx="8" cy="8" r="1" class="fill-current stroke-current stroke-1"></circle><circle cx="6" cy="12" r="1" class="fill-current stroke-current stroke-1"></circle><circle cx="8" cy="16" r="1" class="fill-current stroke-current stroke-1"></circle></g></symbol><symbol id="pen-24" viewBox="0 0 24 24"><g class="pen"><path d="M16 22H8c0-3-4-7-4-7l8-13 8 13s-4 4-4 7Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M12 2v9" class="stroke-current stroke-2 sl-r"></path><circle cx="12" cy="14" r="2" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r"></circle><path d="M7 22h10" class="stroke-current stroke-2 sl-s"></path></g></symbol><symbol id="person-24" viewBox="0 0 24 24"><g class="person"><path d="M14.478 14.186V13.8c1.215-.926 2.012-1.813 2.012-3.6V7.5c0-1.556 0-2.777-.905-3.639C14.84 3.151 13.79 3 12.898 3c-.81 0-.898.836-2.215.836-1.833 0-3.186 1.864-3.186 3.625V10.2c0 1.787.796 2.687 2.012 3.6v.373c-.122 1.556-1.256 1.556-2.823 2.018a18.32 18.32 0 0 0-2.106.759C3.62 17.374 3 18.287 3 19.29V21h18v-1.697c0-1.003-.608-1.916-1.58-2.34a19.11 19.11 0 0 0-2.106-.759c-1.567-.463-2.715-.463-2.836-2.018Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="play-24" viewBox="0 0 24 24"><g class="play"><path d="M5 3.7a1 1 0 0 1 1.486-.875l14.94 8.3a1 1 0 0 1 0 1.75l-14.94 8.3A1 1 0 0 1 5 20.3V3.7Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="plus-24" viewBox="0 0 24 24"><g class="plus"><path d="M4.5 12h15" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M12 4.5v15" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="publication-24" viewBox="0 0 24 24"><g class="publication"><path d="M4.5 21A1.5 1.5 0 0 1 3 19.5v-15A1.5 1.5 0 0 1 4.5 3h15A1.5 1.5 0 0 1 21 4.5v15a1.5 1.5 0 0 1-1.5 1.5h-15Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M13.5 12a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M6 8h4" class="stroke-current stroke-2"></path><path d="M6 12h4" class="stroke-current stroke-2"></path><path d="M6 16h12" class="stroke-current stroke-2"></path></g></symbol><symbol id="puzzle-24" viewBox="0 0 24 24"><g class="puzzle"><path d="M4 5.5A1.5 1.5 0 0 1 5.5 4h11A1.5 1.5 0 0 1 18 5.5V9s4-2 4 3-4 3-4 3v3.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 18.5V15s4 1.5 4-3-4-3-4-3V5.5Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="rectangle-24" viewBox="0 0 24 24"><g class="rectangle"><rect width="16" height="16" x="4" y="4" class="fill-(--icon-fill) stroke-current stroke-2 sl-r" rx="1.5"></rect></g></symbol><symbol id="search-24" viewBox="0 0 24 24"><g class="search"><path d="m19 19 1 1" class="stroke-current stroke-4 sl-r"></path><path d="m17 17 1 1" class="stroke-current stroke-4 sl-s"></path><path d="M10.5 18a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="settings-24" viewBox="0 0 24 24"><g class="settings"><path d="M8 9v12" class="stroke-current stroke-2 sl-r"></path><circle cx="8" cy="6" r="3" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></circle><path d="M16 3v12" class="stroke-current stroke-2 sl-r"></path><circle cx="16" cy="18" r="3" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></circle></g></symbol><symbol id="shadow-24" viewBox="0 0 24 24"><g class="shadow"><circle cx="12" cy="10" r="6" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></circle><path d="M18.983 19A10.955 10.955 0 0 1 12 21.5c-2.651 0-5.083-.938-6.983-2.5" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="shapes-24" viewBox="0 0 24 24"><g class="shapes"><circle cx="17.5" cy="17.5" r="3.5" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></circle><path d="M10 14H3v7h7v-7Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M8 10h8l-4-7-4 7Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="share-24" viewBox="0 0 24 24"><g class="share"><rect width="14" height="11" x="5" y="10" class="fill-(--icon-fill)" rx="1"></rect><path d="M8 10H6.5A1.5 1.5 0 0 0 5 11.5v8A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5v-8a1.5 1.5 0 0 0-1.5-1.5H16" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M12 3v11" class="fill-none stroke-current stroke-2 sl-r"></path><path d="m15 6-3-3-3 3" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="sidebar-bottom-24" viewBox="0 0 24 24"><g class="sidebar-bottom"><path d="M4.5 20A1.5 1.5 0 0 1 3 18.5v-3A1.5 1.5 0 0 1 4.5 14h15a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-15Z" class="fill-(--icon-fill)"></path><path d="M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r"></path><path d="M3 14h18" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="sidebar-bottom-closed-24" viewBox="0 0 24 24"><g class="sidebar-bottom-closed"><path d="M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r"></path><path d="M3 14h18" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="sidebar-left-24" viewBox="0 0 24 24"><g class="sidebar-left"><path d="M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h3A1.5 1.5 0 0 1 9 5.5v13A1.5 1.5 0 0 1 7.5 20h-3Z" class="fill-(--icon-fill)"></path><path d="M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r"></path><path d="M9 4v15" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="sidebar-left-closed-24" viewBox="0 0 24 24"><g class="sidebar-left-closed"><path d="M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r"></path><path d="M9 4v15" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="sidebar-right-24" viewBox="0 0 24 24"><g class="sidebar-right"><path d="M16.5 20a1.5 1.5 0 0 1-1.5-1.5v-13A1.5 1.5 0 0 1 16.5 4h3A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-3Z" class="fill-(--icon-fill)"></path><path d="M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r"></path><path d="M15 4v15" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="sidebar-right-closed-24" viewBox="0 0 24 24">
1<path stroke="color(display-p3 .0353 .1804 .1412)" d="M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15ZM15 4v15" class="slc-r sl-r stroke-2"></path></symbol><symbol id="square-info-24" viewBox="0 0 24 24"><g class="square-info"><path d="M3.993 21A.994.994 0 0 1 3 20V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16c0 .552-.442 1-.995 1H3.993Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M10 11h2v6" class="stroke-current stroke-2 sl-r"></path><path d="M10 17h4" class="stroke-current stroke-2 sl-r"></path><circle cx="11.5" cy="7.5" r=".5" class="fill-current stroke-current stroke-2 sl-r"></circle></g></symbol><symbol id="star-24" viewBox="0 0 24 24"><g class="star"><path d="M11.11 3.231a1 1 0 0 1 1.78 0l2.19 4.263a1 1 0 0 0 .73.53l4.73.766a1 1 0 0 1 .55 1.692l-3.378 3.4a1 1 0 0 0-.278.858l.734 4.736a1 1 0 0 1-1.44 1.045l-4.277-2.161a1 1 0 0 0-.902 0l-4.277 2.16a1 1 0 0 1-1.44-1.045l.734-4.736a1 1 0 0 0-.278-.858l-3.378-3.4a1 1 0 0 1 .55-1.692l4.73-.766a1 1 0 0 0 .73-.53l2.19-4.263Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="star-square-24" viewBox="0 0 24 24"><g class="star-square"><path d="M4.5 21A1.5 1.5 0 0 1 3 19.5v-15A1.5 1.5 0 0 1 4.5 3h15A1.5 1.5 0 0 1 21 4.5v15a1.5 1.5 0 0 1-1.5 1.5h-15Z" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M11.784 6.618a.25.25 0 0 1 .432 0l1.676 2.858a.25.25 0 0 0 .162.118l3.23
16.71a.25.25 0 0 1 .133.41l-2.2 2.478a.25.25 0 0 0-.062.19l.324 3.298a.25.25 0 0 1-.349.253L12.1 15.606a.25.25 0 0 0-.2 0l-3.036 1.327a.25.25 0 0 1-.349-.253l.324-3.298a.25.25 0 0 0-.062-.19l-2.2-2.477a.25.25 0 0 1 .133-.41l3.236-.711a.25.25 0 0 0 .162-.118l1.676-2.858Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="timer-24" viewBox="0 0 24 24"><g class="timer"><path d="M6 17h2v4H6z" class="Rectangle 152"></path><path d="M16 17h2v4h-2z" class="Rectangle 153"></path><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M12 8v5.25L14 15" class="stroke-current stroke-2 sl-r"></path><g class="fill-current stroke-current stroke-2 sl-r"><path fill-rule="evenodd" d="M8.199 4.959a8.023 8.023 0 0 0-3.81 4.572 3 3 0 1 1 3.81-4.572Z" clip-rule="evenodd"></path><path d="m8.199 4.959.476.88a1 1 0 0 0 .257-1.56l-.733.68Zm-3.81 4.572-.539.843a1 1 0 0 0 1.49-.535l-.952-.308Zm3.81-4.572-.476-.88a9.023 9.023 0 0 0-4.286 5.143l.951.309.952.308a7.023 7.023 0 0 1 3.335-4l-.476-.88Zm-3.81 4.572.537-.843A1.998 1.998 0 0 1 4 7H2c0 1.42.74 2.665 1.85 3.374l.538-.843ZM3 7h1a2 2 0 0 1 2-2V3a4 4 0 0 0-4 4h1Zm3-3v1c.58 0 1.1.245 1.466.64l.733-.681.733-.68A3.992 3.992 0 0 0 6 3v1Z"></path></g><g class="fill-current stroke-current stroke-2 sl-r"><path fill-rule="evenodd" d="M15.801 4.959a8.023 8.023 0 0 1 3.81 4.572 3 3 0 1 0-3.81-4.572Z" clip-rule="evenodd"></path><path d="m15.801 4.959-.476.88a1 1 0 0 1-.256-1.56l.732.68Zm3.81 4.572.539.843a1 1 0 0 1-1.49-.535l.952-.308Zm-3.81-4.572.476-.88a9.023 9.023 0 0 1 4.286 5.143l-.951.309-.952.308a7.023 7.023 0 0 0-3.335-4l.476-.88Zm3.81 4.572-.537-.843A2 2 0 0 0 20 7h2c0 1.42-.74 2.665-1.85 3.374l-.538-.843ZM21 7h-1a2 2 0 0 0-2-2V3a4 4 0 0 1 4 4h-1Zm-3-3v1c-.58 0-1.1.245-1.466.64l-.733-.681-.732-.68A3.992 3.992 0 0 1 18 3v1Z"></path></g></g></symbol><symbol id="type-24" viewBox="0 0 24 24"><g class="type"><path d="m12 3 3 6.5V16H6l6-13Z" class="fill-(--icon-fill)"></path><path d="M12 2a1 1 0 0 1 .912.59L15 7.23v4.873l-3-6.666L4.547 22H2.354l8.734-19.41A1 1 0 0 1 12 2Z" class="fill-current"></path><path d="M6 16h9" class="fill-none stroke-current stroke-2"></path><path d="M16 3h2v18h-2" class="fill-none stroke-current stroke-2 sl-r"></path><path d="M20 3h-2v18h2" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="vector-square-24" viewBox="0 0 24 24"><g class="vector-square"><path d="M6 19a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12c0 .552-.442 1-.994 1H6Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M7 3H3v4h4V3Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M7 17H3v4h4v-4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M21 3h-4v4h4V3Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M21 17h-4v4h4v-4Z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></symbol><symbol id="views-24" viewBox="0 0 24 24"><g class="views"><g class="fill-(--icon-fill) stroke-current stroke-2 sl-r"><path d="M4 9h4v12H4z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M8 5h4v16H8z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M12 9h4v12h-4z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path><path d="M16 3h4v18h-4z" class="fill-(--icon-fill) stroke-current stroke-2 sl-r"></path></g></g></symbol><symbol id="website-24" viewBox="0 0 24 24"><g class="website"><rect width="18" height="12" x="3" y="8" class="fill-(--icon-fill)" rx="1"></rect><path d="M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z" class="fill-(--icon-fill-bg) stroke-current stroke-2 sl-r"></path><path d="M4 8h16" class="stroke-current stroke-2 sl-r"></path><path d="M11 12h6" class="stroke-current stroke-2 sl-r"></path><path d="M11 15h4" class="stroke-current stroke-2 sl-r"></path><path d="M8 8v11" class="fill-none stroke-current stroke-2 sl-r"></path></g></symbol></defs></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden;display:none"><defs><symbol id="logo-32" viewBox="0 0 32 32" fill="none"><title>iamsteve</title><path d="M17.5 30.5C16.65 26.02 17.91 20.71 19.5 18.5C22.47 18.4 25.62 17.68 28.06 15.5C30.04 13.49 30.43 10.58 30.5 8.5L24.5 7.5L22.5 3.5L21.5 4.5L19.5 1.5L17.83 2.41C17.83 2.41 15 0.56 11.5 2.5C8.41 4.37 7 7 7.5 11.5C8 16 5.079 18.921 1.5 22.5C1.5 22.5 7 23 10 24.5C13 26 17.5 30.5 17.5 30.5Z" class="fill-(--icon-fill)"></path><path d="M17.5 30.5C16.65 26.02 17.91 20.71 19.5 18.5C22.47 18.4 25.62 17.68 28.06 15.5C30.04 13.49 30.43 10.58 30.5 8.5L24.5 7.5L22.5 3.5L21.5 4.5L19.5 1.5L17.83 2.41C17.83 2.41 15 0.56 11.5 2.5C8.40996 4.37 6.72996 7.69 7.49996 11.5C7.99996 13.95 9.75996 16.5 12.5 16.5C16.5 16.5 18.25 12.36 18.5 7.5" class="stroke-current stroke-2 sl-r"></path><path d="M1.5 22.5C4.41 20.2 7.87 16.23 7.5 11.5" class="stroke-current stroke-2 sl-r"></path></symbol><symbol id="logo-24" viewBox="0 0 24 24" fill="none"><title>iamsteve</title><path d="M13.1379 23C12.4931 19.6014 13.449 15.5731 14.6552 13.8966C16.9083 13.8207 19.2979 13.2745 21.149 11.6207C22.651 10.0959 22.9469 7.88828 23 6.31034L18.4483 5.55172L16.931 2.51724L16.1724 3.27586L14.6552 1L13.3883 1.69034C13.3883 1.69034 11.2414 0.286897 8.58621 1.75862C6.24207 3.17724 5.17241 5.17241 5.55173 8.58621C5.93104 12 3.7151 14.2159 1 16.931C1 16.931 5.17242 17.3103 7.44828 18.4483C9.72414 19.5862 13.1379 23 13.1379 23Z" class="fill-(--icon-fill)"></path><path d="M13.3701 23C12.7201 19.6 13.7501 15.8 14.9601 14.13C17.2101 14.05 19.2901 13.29 21.1501 11.64C22.6501 10.12 22.9501 8.37 23.0001 6.8L18.1901 5.82L16.8201 2.38L16.1301 3.07L14.7501 1.01L13.3901 1.7C13.3901 1.7 10.7301 0.610002 8.07014 2.08C5.73014 3.5 4.54014 6.34 5.13014 9.23C5.51014 11.09 7.19014 12.7 9.27014 12.7C11.8501 12.7 13.3801 9.25 13.3801 5.14" class="stroke-current stroke-2 sl-r"></path><path d="M1 16.81C3.21 15.06 5.32 12.27 5.04 8.68" class="stroke-current stroke-2 sl-r"></path></symbol><symbol id="bmc-24" viewBox="0 0 24 24" fill="none"><g><path fill="light-dark(#0D0C22, #fff)" d="m18.319 6.118-.016-.01-.037-.01a.09.09 0 0 0 .053.02Z"></path><path fill="light-dark(#0D0C22, #fff)" d="m18.326 6.115-.007-.001v.004a.014.014 0 0 0 .007-.003Z"></path><path fill="light-dark(#0D0C22, #fff)" d="M18.319 6.118h.003v-.002l-.003.002ZM18.536 7.686l.027-.014.01-.005.009-.01a.154.154 0 0 0-.046.03ZM18.365 6.152l-.026-.024-.018-.009c.01.016.025.028.044.033ZM11.783 21.403a.135.135 0 0 0-.053.04l.016-.01.037-.03ZM15.605 20.689c0-.023-.011-.018-.009.061 0-.006.003-.013.004-.019l.005-.042ZM15.209 21.403a.136.136 0 0 0-.053.04l.016-.01.037-.03ZM9.091 21.573a.
1117.117 0 0 0-.056-.025l.045.022.011.003ZM8.486 21.022a.164.164 0 0 0-.022-.066.53.53 0 0 1 .021.065v.001Z"></path><path fill="#FD0" d="M12.554 11.163c-.831.338-1.775.722-2.998.722-.512-.001-1.02-.068-1.514-.199l.846 8.253c.03.345.196.667.464.901.267.235.618.365.983.365 0 0 1.199.06 1.6.06.43 0 1.721-.06 1.721-.06.364 0 .715-.13.983-.365.268-.234.433-.556.463-.9l.906-9.12a4.034 4.034 0 0 0-1.274-.22c-.796 0-1.438.261-2.18.563Z"></path><path fill="light-dark(#0D0C22, #fff)" d="m5.424 7.642.015.013.009.005a.143.143 0 0 0-.024-.018Z"></path><path fill="light-dark(#0D0C22, #fff)" d="m19.92 6.88-.128-.61c-.114-.548-.373-1.066-.965-1.264-.19-.063-.405-.09-.55-.222-.146-.13-.189-.334-.222-.523-.063-.347-.121-.694-.185-1.04-.055-.297-.099-.631-.242-.904-.187-.367-.575-.58-.96-.723-.198-.07-.4-.129-.604-.177-.964-.242-1.976-.33-2.967-.381a26.207 26.207 0 0 0-3.569.056c-.883.077-1.813.169-2.653.46-.306.105-.623.233-.856.458-.286.277-.38.705-.17 1.05.148.245.4.418.667.533.347.147.71.26 1.083.335 1.037.218 2.11.303 3.17.34 1.175.045 2.35.008 3.52-.11.289-.03.577-.066.865-.108.34-.05.557-.471.457-.765-.12-.35-.441-.487-.805-.434l-.16.023-.039.005-.369.042c-.254.026-.51.047-.765.064a27.06 27.06 0 0 1-3.41.006 22.59 22.59 0 0 1-1.116-.099l-.11-.013-.024-.003-.114-.016A12.615 12.615 0 0 1 8 2.742a.106.106 0 0 1-.059-.035.097.097 0 0 1 0-.125.106.106 0 0 1 .06-.035h.004a11.865 11.865 0 0 1 .807-.135h.002c.127-.008.254-.03.38-.044a25.44 25.44 0 0 1 3.304-.11 23.378 23.378 0 0 1 1.946.132l.132.016.088.012c.258.037.514.08.77.133.378.078.863.104 1.031.497.054.125.078.264.108.395l.037.167a.058.058 0 0 1 .003.01l.267 1.183a.206.206 0 0 1-.036.17.224.224 0 0 1-.156.09h-.002l-.055.008-.053.006a31.726 31.726 0 0 1-1.525.154 37.255 37.255 0 0 1-3.05.117 37.61 37.61 0 0 1-4.531-.279l-.123-.016a27.776 27.776 0 0 1-.28-.038c-.314-.045-.626-.1-.939-.148-.378-.06-.74-.03-1.082.148-.281.146-.509.37-.652.642-.148.29-.192.606-.258.917-.066.312-.168.647-.13.967.084.69.592 1.252 1.323 1.377a40.263 40.263 0 0 0 10.94.345.49.49 0 0 1 .38.126.442.442 0 0 1 .136.36l-.07.64a471003.246 471003.246 0 0 1-.981 9.08c-.04.376-.045.763-.12 1.135-.119.583-.535.942-1.141 1.073a8.34 8.34 0 0 1-1.694.188c-.632.003-1.263-.023-1.895-.02-.675.003-1.5-.056-2.022-.533-.457-.419-.52-1.075-.583-1.643l-.247-2.253-.457-4.176-.297-2.701-.014-.134c-.036-.322-.276-.638-.654-.622-.324.014-.692.276-.654.622l.22 2.003.453 4.143.388 3.532c.024.225.048.452.074.677.142 1.232 1.133 1.897 2.359 2.084.716.11 1.45.132 2.177.143.932.014 1.873.048 2.79-.112 1.357-.237 2.377-1.099 2.522-2.436l.125-1.158.413-3.831.45-4.173.207-1.913a.434.434 0 0 1 .12-.254.474.474 0 0 1 .256-.136c.389-.072.76-.195 1.036-.476.44-.447.527-1.03.372-1.618Zm-14.61.413c.007-.003-.004.045-.009.068 0-.034.001-.064.01-.068Zm.039.277c.003-.002.012.01.022.024-.015-.013-.024-.023-.023-.024Zm.037.046c.02.035.013.022 0 0Zm.074.058h.002c0 .002.003.004.005.006a.048.048 0 0 0-.007-.006Zm13.034-.086c-.14.126-.35.184-.557.214-2.33.328-4.693.495-7.048.421-1.686-.055-3.354-.232-5.022-.456-.164-.022-.34-.05-.453-.165-.212-.216-.108-.651-.053-.912.05-.24.147-.558.446-.592.468-.053 1.01.135 1.472.201.557.081 1.115.146 1.676.194 2.392.207 4.825.175 7.206-.128.435-.055.867-.12 1.298-.193.384-.066.81-.188 1.042.19.159.257.18.602.156.893a.488.488 0 0 1-.163.333Z"></path></g></symbol><symbol id="figma-16" fill="none" viewBox="0 0 24 24"><path class="stroke-current" stroke-width="1.5" d="M19.935 4.518a3.74 3.74 0 0 1-3.74 3.741h-3.839V.777h3.838a3.74 3.74 0 0 1 3.741 3.741Z"></path><path class="stroke-current" stroke-width="1.5" d="M4.777 4.518A3.74 3.74 0 0 0 8.518 8.26h3.838V.777H8.518a3.74 3.74 0 0 0-3.74 3.741Z"></path><path class="stroke-current" stroke-width="1.5" d="M4.777 12a3.74 3.74 0 0 0 3.741 3.741h3.838V8.259H8.518A3.74 3.74 0 0 0 4.778 12Z"></path><path class="stroke-current" stroke-width="1.5" d="M4.777 19.482c0 2.066 1.7 3.74 3.765 3.74 2.093 0 3.814-1.696 3.814-3.789v-3.692H8.518a3.74 3.74 0 0 0-3.74 3.74ZM12.356 12a3.741 3.741 0 0 0 3.741 3.741h.097a3.74 3.74 0 0 0 0-7.482h-.097A3.74 3.74 0 0 0 12.357 12Z"></path></symbol><symbol id="github-16" fill="fill-current" viewBox="0 0 24 24"><g class="fill-current"><path fill-rule="evenodd" d="M12 .5a12.043 12.043 0 0 0-7.773 2.847A11.917 11.917 0 0 0 .16 10.522a11.877 11.877 0 0 0 1.576 8.086 11.99 11.99 0 0 0 6.469 5.145c.596.11.82-.259.82-.573 0-.314-.011-1.225-.015-2.22-3.339.72-4.044-1.41-4.044-1.41-.544-1.383-1.331-1.746-1.331-1.746-1.09-.739.081-.725.081-.725 1.206.085 1.84 1.23 1.84 1.23 1.07 1.824 2.808 1.297 3.491.989.108-.773.42-1.298.763-1.597-2.666-.3-5.468-1.324-5.468
1-5.896a4.607 4.607 0 0 1 1.236-3.202c-.123-.3-.535-1.514.117-3.162 0 0 1.008-.32 3.3 1.223a11.453 11.453 0 0 1 6.01 0c2.29-1.543 3.296-1.223 3.296-1.223.654 1.644.243 2.857.12 3.162a4.597 4.597 0 0 1 1.238 3.206c0 4.582-2.808 5.592-5.479 5.886.43.372.813 1.097.813 2.211 0 1.597-.014 2.88-.014 3.274 0 .318.216.69.825.573a11.99 11.99 0 0 0 6.47-5.146 11.877 11.877 0 0 0 1.575-8.087 11.917 11.917 0 0 0-4.07-7.175A12.043 12.043 0 0 0 12.004.5H12Z" clip-rule="evenodd"></path><path class="stroke-current" d="M4.544 17.632c-.025.06-.12.077-.198.036a.302.302 0 0 1-.018-.011c-.065-.04-.11-.105-.093-.16a.079.079 0 0 1 .007-.017c.032-.055.121-.067.195-.028a.31.31 0 0 1 .018.01c.067.043.114.112.091.166 0 .001 0 .003-.002.004Z"></path><path d="M5.031 18.171a.2.2 0 0 1-.246-.055c-.078-.083-.094-.197-.034-.249.06-.051.167-.027.244.055.078.083.096.198.036.25ZM5.504 18.857c-.073.051-.198 0-.268-.103a.197.197 0 0 1 0-.284c.074-.05.199 0 .268.1.07.101.072.236 0 .287ZM6.146 19.52c-.065.074-.199.054-.308-.045-.11-.098-.135-.233-.07-.304.066-.071.2-.051.313.046.113.096.135.233.065.304ZM7.046 19.908c-.03.093-.165.134-.3.095-.135-.04-.224-.15-.199-.245.026-.095.163-.138.3-.095.138.044.225.148.2.245ZM8.028 19.975c0 .097-.111.18-.255.182-.143.002-.26-.077-.26-.174 0-.097.111-.18.255-.182.143-.002.26.076.26.174ZM8.942 19.823c.018.097-.082.198-.225.221-.143.024-.268-.033-.286-.128-.018-.095.086-.198.225-.223.139-.026.268.033.286.13Z"></path></g></symbol><symbol id="github-24" fill="fill-current" viewBox="0 0 24 24"><g class="fill-current"><path fill-rule="evenodd" d="M12 .5a12.043 12.043 0 0 0-7.773 2.847A11.917 11.917 0 0 0 .16 10.522a11.877 11.877 0 0 0 1.576 8.086 11.99 11.99 0 0 0 6.469 5.145c.596.11.82-.259.82-.573 0-.314-.011-1.225-.015-2.22-3.339.72-4.044-1.41-4.044-1.41-.544-1.383-1.331-1.746-1.331-1.746-1.09-.739.081-.725.081-.725 1.206.085 1.84 1.23 1.84 1.23 1.07 1.824 2.808 1.297 3.491.989.108-.773.42-1.298.763-1.597-2.666-.3-5.468-1.324-5.468-5.896a4.607 4.607 0 0 1 1.236-3.202c-.123-.3-.535-1.514.117-3.162 0 0 1.008-.32 3.3 1.223a11.453 11.453 0 0 1 6.01 0c2.29-1.543 3.296-1.223 3.296-1.223.654 1.644.243 2.857.12 3.162a4.597 4.597 0 0 1 1.238 3.206c0 4.582-2.808 5.592-5.479 5.886.43.372.813 1.097.813 2.211 0 1.597-.014 2.88-.014 3.274 0 .318.216.69.825.573a11.99 11.99 0 0 0 6.47-5.146 11.877 11.877 0 0 0 1.575-8.087 11.917 11.917 0 0 0-4.07-7.175A12.043 12.043 0 0 0 12.004.5H12Z" clip-rule="evenodd"></path><path class="stroke-current" d="M4.544 17.632c-.025.06-.12.077-.198.036a.302.302 0 0 1-.018-.011c-.065-.04-.11-.105-.093-.16a.079.079 0 0 1 .007-.017c.032-.055.121-.067.195-.028a.31.31 0 0 1 .018.01c.067.043.114.112.091.166 0 .001 0 .003-.002.004Z"></path><path d="M5.031 18.171a.2.2 0 0 1-.246-.055c-.078-.083-.094-.197-.034-.249.06-.051.167-.027.244.055.078.083.096.198.036.25ZM5.504 18.857c-.073.051-.198 0-.268-.103a.197.197 0 0 1 0-.284c.074-.05.199 0 .268.1.07.101.072.236 0 .287ZM6.146 19.52c-.065.074-.199.054-.308-.045-.11-.098-.135-.233-.07-.304.066-.071.2-.051.313.046.113.096.135.233.065.304ZM7.046 19.908c-.03.093-.165.134-.3.095-.135-.04-.224-.15-.199-.245.026-.095.163-.138.3-.095.138.044.225.148.2.245ZM8.028 19.975c0 .097-.111.18-.255.182-.143.002-.26-.077-.26-.174 0-.097.111-.18.255-.182.143-.002.26.076.26.174ZM8.942 19.823c.018.097-.082.198-.225.221-.143.024-.268-.033-.286-.128-.018-.095.086-.198.225-.223.139-.026.268.033.286.13Z"></path></g></symbol><symbol id="linkedin-16" fill="none" viewBox="0 0 24 24"><path class="fill-current" d="M22.223 0H1.772C.792 0 0 .773 0 1.73v20.536C0 23.222.792 24 1.772 24h20.451c.98 0 1.777-.778 1.777-1.73V1.73C24 .773 23.203 0 22.223 0ZM7.12 20.452H3.558V8.995H7.12v11.457ZM5.34 7.434a2.064 2.064 0 1 1 0-4.125 2.063 2.063 0 0 1 0 4.125Zm15.112 13.018h-3.558v-5.57c0-1.326-.024-3.037-1.852-3.037-1.851 0-2.133 1.449-2.133 2.944v5.663H9.356V8.995h3.413v1.566h.047c.473-.9 1.636-1.852 3.365-1.852 3.605 0 4.27 2.372 4.27 5.457v6.286Z"></path></symbol><symbol id="mastodon-16" fill="none" viewBox="0 0 24 24"><path class="fill-current" d="M21.5 8.395c0-4.556-2.897-5.892-2.897-5.892-2.842-1.345-10.391-1.331-13.206 0 0 0-2.897 1.336-2.897 5.892 0 5.424-.3 12.16 4.802 13.552 1.842.501 3.425.61 4.698.534 2.31-.131 3.606-.848 3.606-.848l-.077-1.73s-1.65.535-3.506.474c-1.838-.066-3.775-.207-4.075-2.532a4.952 4.952 0 0 1-.04-.651c3.892.98 7.212.426 8.126.314 2.551-.314 4.775-1.936 5.057-3.417.445-2.335.409-5.696.409-5.696Zm-3.415 5.869h-2.12V8.911c0-2.33-2.91-2.419-2.91.323v2.93H10.95v-2.93c0-2.742-2.911-2.653-2.911-.323v5.353H5.915c0-5.723-.236-6.933.837-8.203 1.178-1.355 3.63-1.444 4.72.286L12 7.26l.528-.914c1.095-1.74 3.5
151-1.631 4.72-.286 1.078 1.28.837 2.484.837 8.203Z"></path></symbol><symbol id="x-16" viewBox="0 0 24 24" fill="none"><path d="M18.244 2.25H21.552L14.325 10.51L22.827 21.75H16.17L10.956 14.933L4.99003 21.75H1.68003L9.41003 12.915L1.25403 2.25H8.08003L12.793 8.481L18.244 2.25ZM17.083 19.77H18.916L7.08403 4.126H5.11703L17.083 19.77Z" class="fill-current"></path></symbol></defs></svg><div class="grid layout relative gap-x-4 xl:gap-x-6 2xl:gap-x-8 max-w-[1728px] mx-auto items-baseline"><ul role="list" id="accessibility-links" class="sr-only focus-within:not-sr-only focus-within:fixed focus-within:top-2 focus-within:left-2 focus-within:z-[1000] focus-within:bg-fern-1200 focus-within:text-fern-100 focus-within:p-8 focus-within:flex focus-within:flex-col focus-within:gap-2 rounded-md"><li><a href="#content" class="text-lg underline underline-offset-3 [text-decoration-thickness:.25px]">Skip to main content</a></li><li><a href="#nav" class="text-lg underline underline-offset-3 [text-decoration-thickness:.25px]">Skip to nav</a></li></ul><header class="grid grid-cols-subgrid col-start-margin-start col-end-margin-end relative z-10" id="top"><div class="col-container md:col-content lg:col-page flex items-center align-center justify-between gap-8 text-emphasis"><span class="flex py-4 sm:px-4 sm:-mx-4 lg:py-6.5 xl:px-8 xl:-mx-8 2xl:pt-7 2xl:pb-4 rounded-full relative"><span class="absolute col-container lg:col-content h-[4px] top-1/2 -translate-y-1/2 right-0 left-0 bg-[url(/images/texture.png)] dark:bg-[url(/images/texture-dark.png)] bg-size-[172px_auto] bg-blend-multiply dark:bg-blend-color-dodge bg-canvas z-[-1]" aria-hidden="true"></span><a class="flex" aria-label="iamsteve.me homepage" href="/"><svg width="32" height="32" viewBox="0 0 32 32" class="shrink-0 text-current icon-header max-lg:hidden" aria-hidden="true"><use xlink:href="#logo-32"></use></svg><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 text-current icon-header lg:hidden" aria-hidden="true"><use xlink:href="#logo-24"></use></svg></a></span><nav class="flex justify-between max-md:hidden bg-[url(/images/texture.png)] dark:bg-[url(/images/texture-dark.png)] bg-size-[172px_auto] bg-blend-multiply dark:bg-blend-color-dodge bg-canvas py-4 sm:px-4 lg:py-6.5 lg:-mx-4 xl:px-8 xl:-mx-8 2xl:py-7" id="nav"><ul class="flex justify-between md:gap-8 2xl:py-0.5 items-center"><li class="relative -mr-1 group/library"><button class="flex items-center gap-1 text-base font-ui lowercase leading-none relative lg:gap-2 lg:text-xl/none lg:py-1 xl:py-0.5 header-module__bY5_QG__link header-module__bY5_QG__start" data-rac="" type="button" tabindex="0" aria-haspopup="true" aria-expanded="false" id="react-aria-_R_2l35b_" data-react-aria-pressable="true"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon-header text-current" aria-hidden="true"><use xlink:href="#book-24"></use></svg>Library<svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 icon-header text-current" aria-hidden="true"><use xlink:href="#angle-down-16"></use></svg></button></li><li><a class="flex items-center gap-1 text-base font-ui lowercase leading-none relative lg:gap-2 lg:text-xl/none lg:py-1 xl:py-0.5 header-module__bY5_QG__link header-module__bY5_QG__start" href="/notes"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon-header text-current" aria-hidden="true"><use xlink:href="#notepad-24"></use></svg>Notes</a></li><li><a class="flex items-center gap-1 text-base font-ui lowercase leading-none relative lg:gap-2 lg:text-xl/none lg:py-1 xl:py-0.5 header-module__bY5_QG__link header-module__bY5_QG__start" href="/about"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon-header text-current" aria-hidden="true"><use xlink:href="#person-24"></use></svg>About</a></li><li aria-hidden="true" class="w-0.5 h-7 bg-border-medium"></li><li><button class="cursor-default transition-opacity duration-200 flex items-center gap-2 text-base font-ui lowercase leading-none relative lg:text-xl/none lg:py-1 xl:py-0.5" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-label="Search" id="react-aria-_R_3l35b_"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon-header text-current" aria-hidden="true"><use xlink:href="#search-24"></use></svg><kbd class="hidden any-pointer-fine:flex items-center font-sans gap-0.5 text-sm font-medium px-1 bg-surface-raised text-body shadow-placed rounded-xs">
1<svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current" aria-label="Command"><use xlink:href="#cmd-16"></use></svg><span class="relative top-px uppercase">K</span></kbd></button><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--></li></ul></nav><nav class="flex justify-between md:hidden max-lg:fixed max-lg:left-1/2 max-lg:-translate-x-1/2 max-lg:z-100 isolate max-lg:px-6 max-lg:gap-6 max-lg:rounded-full max-lg:shadow-placed max-lg:bg-white/80 dark:max-lg:bg-fern-1200/90 max-lg:backdrop-blur-sm max-lg:backdrop-brightness-100 max-lg:backdrop-contrast-100 max-lg:backdrop-saturate-150 max-lg:transition-all max-lg:duration-200 max-lg:ease-out header-module__bY5_QG__tabbar" id="tabbar"><ul class="flex justify-between max-lg:gap-4"><li><a class="flex items-center gap-1 text-base font-ui lowercase leading-none relative max-lg:text-[12px] max-lg:font-sans max-lg:font-medium max-lg:flex-col max-lg:flex-1 max-lg:justify-center max-lg:py-3 header-module__bY5_QG__link header-module__bY5_QG__start max-lg:text-fern-700 dark:max-lg:text-fern-400" href="/"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon-header text-current" aria-hidden="true"><use xlink:href="#home-24"></use></svg>Home</a></li><li><a class="flex items-center gap-1 text-base font-ui lowercase leading-none relative max-lg:text-[12px] max-lg:font-sans max-lg:font-medium max-lg:flex-col max-lg:flex-1 max-lg:justify-center max-lg:py-3 header-module__bY5_QG__link header-module__bY5_QG__start max-lg:text-fern-700 dark:max-lg:text-fern-400" href="/category/design"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon-header text-current" aria-hidden="true"><use xlink:href="#pen-24"></use></svg>Design</a></li><li><a class="flex items-center gap-1 text-base font-ui lowercase leading-none relative max-lg:text-[12px] max-lg:font-sans max-lg:font-medium max-lg:flex-col max-lg:flex-1 max-lg:justify-center max-lg:py-3 header-module__bY5_QG__link header-module__bY5_QG__start max-lg:text-fern-700 dark:max-lg:text-fern-400" href="/category/code"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon-header text-current" aria-hidden="true"><use xlink:href="#code-24"></use></svg>Code</a></li><li><a class="flex items-center gap-1 text-base font-ui lowercase leading-none relative max-lg:text-[12px] max-lg:font-sans max-lg:font-medium max-lg:flex-col max-lg:flex-1 max-lg:justify-center max-lg:py-3 header-module__bY5_QG__link header-module__bY5_QG__start max-lg:text-fern-700 dark:max-lg:text-fern-400" href="/notes"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon-header text-current" aria-hidden="true"><use xlink:href="#notepad-24"></use></svg>Notes</a></li><li><a class="flex items-center gap-1 text-base font-ui lowercase leading-none relative max-lg:text-[12px] max-lg:font-sans max-lg:font-medium max-lg:flex-col max-lg:flex-1 max-lg:justify-center max-lg:py-3 header-module__bY5_QG__link header-module__bY5_QG__start max-lg:text-fern-700 dark:max-lg:text-fern-400" href="/collections"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon-header text-current" aria-hidden="true"><use xlink:href="#collections-24"></use></svg>Collections</a></li><li><button class="cursor-default transition-opacity duration-200 flex items-center gap-1 text-base font-ui lowercase leading-none relative max-lg:text-[12px] max-lg:font-sans max-lg:font-medium max-lg:flex-col max-lg:flex-1 max-lg:justify-center max-lg:py-3 header-module__bY5_QG__link header-module__bY5_QG__start max-lg:text-fern-700 dark:max-lg:text-fern-400" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-label="Search" id="react-aria-_R_3735b_"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon-header text-current" aria-hidden="true"><use xlink:href="#search-24"></use></svg>Search</button><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--></li></ul></nav><button data-state="closed" class="toggle-nav md:hidden" data-rac="" type="button" tabindex="0" aria-expanded="false" id="react-aria-_R_935bH1_" data-react-aria-pressable="true" aria-label="Toggle navigation menu"><div class="relative before:z-1 before:-inset-y-10 before:-inset-x-4 before:absolute"><span class="block w-[24px] h-[24px] relative"><span class="h-[2px] w-[20px] bg-emphasis block rounded absolute"></span><span class="h-[2px] w-[16px] bg-emphasis block rounded absolute"></span><span class="h-[2px] w-[20px] bg-emphasis block rounded absolute "></span></span></div></button></div></header>
1<main class="grid grid-cols-subgrid col-start-container-start col-end-container-end gap-y-8 sm:gap-y-12 md:gap-y-18 md:frame md:frame-24 md:frame-outset-top-sm lg:frame-outset-top-md 2xl:frame-40 2xl:frame-outset-top md:pt-12 2xl:pt-10 pb-18 sm:mb-18" id="content"><svg width="962" height="46" fill="none" viewBox="0 0 962 46" class="col-start-1 col-end-3 row-start-1 max-w-[initial] justify-self-end self-start mt-3 drop-shadow-placed max-2xl:hidden" aria-hidden="true"><path class="fill-lowlight" d="M5 45h34V1H5C2.79 1 1 2.79 1 5v36c0 2.21 1.79 4 4 4Z"></path><path class="fill-border" d="M1 5v8h38V1H5C2.79 1 1 2.79 1 5Z" opacity="0.4"></path><path class="fill-border" d="M1 33v8c0 2.21 1.79 4 4 4h34V33H1Z" opacity="0.5"></path><path class="stroke-accent" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M851 45V33l6-10-6-10V1l72.188 14.438L961 23l-37.812 7.563L851 45Z"></path><path class="fill-foreground" d="M851 45V33l6-10-6-10V1l110 22-110 22Z"></path><path class="fill-surface-100" d="M851 1v12l49 10-49 10v12l110-22L851 1Z"></path><path class="fill-subtle stroke-surface" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m961 23-36-7.2v14.4l36-7.2Z"></path><path class="stroke-border" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="2" d="M851 45V33l6-10-6-10V1l110 22-110 22Z"></path><path class="fill-muted" d="M925 26.19v4.08L960.98 23l-10.1-2.04L925 26.19Z"></path><path class="stroke-border" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m961 23-36-7.2v14.4l36-7.2Z"></path><path class="fill-surface" d="M135 1v43.91L851 45l5-7-5-5 6-10-6-10 5-5-5-6.91L135 1Z"></path><path class="fill-surface-150" d="M851 1H135v12h716l5-5-5-7Z"></path><path class="fill-lowlight" d="M135 33v12h716l5-7-5-5H135Z"></path><path class="fill-foreground" d="M851 33H135v-2h717.2l-1.2 2Zm1.2-18H135v-2h716l1.2 2Z"></path><path class="fill-surface" d="M39 1v44h96V1H39Z"></path><path class="fill-surface-150" d="M39 33v12h96V33H39Zm0-32v12h96V1H39Z"></path><path class="fill-foreground" d="M39 31v2h96v-2H39Zm0-18v2h96v-2H39Z"></path><path class="fill-surface-150" d="M118 1v44h4V1h-4Zm-8 0v44h4V1h-4ZM59 1v44h4V1h-4Zm-8 0v44h4V1h-4Z"></path><path class="stroke-border" stroke-linejoin="round" stroke-width="2" d="M39 1v44h96V1H39Zm96 0v44h716l5-7-4.5-5 6-10-6.5-10 5-5-5-7H135Z"></path><path class="stroke-border" stroke-width="2" d="M5 45h34V1H5C2.79 1 1 2.79 1 5v36c0 2.21 1.79 4 4 4Z"></path></svg><header class="max-md:frame max-md:frame-24 grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 col-container md:col-content max-md:px-8 max-md:py-8"><div class="flex flex-col gap-4 md:col-span-1"><h1 class="w-full text-heading font-display lowercase self-start min-w-0 min-h-0 font-variation-bold lg:font-variation-extrabold text-3xl xs:text-5xl lg:text-7xl">Blog</h1><p class="md:text-lg lg:text-xl text-ui-body sm:max-w-[34ch] desc max-md:mb-2">Tips and tutorials about the design and build of web interfaces</p></div><button class="flex items-center gap-2 w-full text-left px-3 py-2.5 rounded-sm bg-surface shadow-placed text-base lg:text-lg font-ui lowercase leading-none text-body hover:text-heading transition-colors duration-200 ease-linear outline-none focus-visible:ring-2 focus-visible:ring-cornflour-600 dark:focus-visible:ring-fern-400 cursor-default md:hidden" data-rac="" type="button" tabindex="0" aria-haspopup="true" aria-expanded="false" id="react-aria-_R_14lubsnl5b_" data-react-aria-pressable="true"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 text-current icon-header" aria-hidden="true"><use xlink:href="#folder-24"></use></svg><span class="truncate">Categories</span><svg width="16" height="16" viewBox="0 0 16 16" class="text-current icon-header ml-auto shrink-0" aria-hidden="true"><use xlink:href="#angle-down-16"></use></svg></button><ul class="max-md:hidden md:col-span-1 grid grid-cols-2 gap-x-8 self-end column-categories -mb-2 lg:-mb-3">
1<li class="self-end"><a class="py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current" rel="category tag" href="/category/design"><svg width="24" height="24" viewBox="0 0 24 24" class="icon-header text-current shrink-0"><use xlink:href="#pen-24"></use></svg>Design</a></li><li class="self-end"><a class="py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current" rel="category tag" href="/category/quick-tip"><svg width="24" height="24" viewBox="0 0 24 24" class="icon-header text-current shrink-0"><use xlink:href="#bolt-24"></use></svg>Quick tip</a></li><li class="self-end"><a class="py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current" rel="category tag" href="/category/typography"><svg width="24" height="24" viewBox="0 0 24 24" class="icon-header text-current shrink-0"><use xlink:href="#type-24"></use></svg>Typography</a></li>
1<li class="self-end"><a class="py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current" rel="category tag" href="/category/colour"><svg width="24" height="24" viewBox="0 0 24 24" class="icon-header text-current shrink-0"><use xlink:href="#palette-24"></use></svg>Colour</a></li><li class="self-end"><a class="py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current" rel="category tag" href="/category/resources"><svg width="24" height="24" viewBox="0 0 24 24" class="icon-header text-current shrink-0"><use xlink:href="#settings-24"></use></svg>Resources</a></li><li class="self-end"><a class="py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current" rel="category tag" href="/category/visual-design"><svg width="24" height="24" viewBox="0 0 24 24" class="icon-header text-current shrink-0"><use xlink:href="#vector-square-24"></use></svg>Visual design</a></li>
1<li class="self-end"><a class="py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current" rel="category tag" href="/category/code"><svg width="24" height="24" viewBox="0 0 24 24" class="icon-header text-current shrink-0"><use xlink:href="#code-24"></use></svg>Code</a></li><li class="self-end"><a class="py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current" rel="category tag" href="/category/animation"><svg width="24" height="24" viewBox="0 0 24 24" class="icon-header text-current shrink-0"><use xlink:href="#play-24"></use></svg>Animation</a></li><li class="self-end"><a class="py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current" rel="category tag" href="/category/css"><svg width="24" height="24" viewBox="0 0 24 24" class="icon-header text-current shrink-0"><use xlink:href="#css-24"></use></svg>CSS</a></li>
1<li class="self-end"><a class="py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current" rel="category tag" href="/category/patterns"><svg width="24" height="24" viewBox="0 0 24 24" class="icon-header text-current shrink-0"><use xlink:href="#puzzle-24"></use></svg>Patterns</a></li><li class="self-end"><a class="py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current" rel="category tag" href="/category/javascript"><svg width="24" height="24" viewBox="0 0 24 24" class="icon-header text-current shrink-0"><use xlink:href="#note-24"></use></svg>JavaScript</a></li></ul></header><div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 col-container md:col-content gap-8"><article class="@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card"><a title="" class="relative flex items-center justify-center" style="background-color:#fcf9f8" aria-labelledby="title-0177-using-analytics-again-with-simple-analytics.md" href="/blog/using-analytics-again-with-simple-analytics"><img alt="Using analytics again with simple analytics" loading="lazy" width="384" height="240" decoding="async" data-nimg="1" class="@lg/card:hidden w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 240'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/0177-simple-analytics-featured-image-medium.svg"/><img alt="Using analytics again with simple analytics" aria-hidden="true" loading="lazy" width="592" height="368" decoding="async" data-nimg="1" class="hidden @lg/card:block w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 592 368'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/0177-simple-analytics-featured-image.svg"/></a><div class="flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12"><div class="flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px"><a class="flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-200))] category" href="/category/website"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-
1picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#folder-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8">Website</span></a><p class="flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#calendar-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8"><time dateTime="2025-03-10T12:43:42.460Z" class="date">10th Mar 2025</time></span></p></div><div class="flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12"><h2 class="p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl" id="title-0177-using-analytics-again-with-simple-analytics.md"><a class="text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1" href="/blog/using-analytics-again-with-simple-analytics">Using analytics again with simple analytics</a></h2><div class="flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3"><p className="font-body">I was seeing an increase in my âserverlessâ usage and it didnât make sense. So I decided to add Simple Analytics and wanted to share a review of this privacy focused service.</p></div><div class="sr-only" aria-hidden="true" tabindex="-1"><a class="author vcard url fn" rel="author" tabindex="-1" href="/about">Steve McKinney</a> <time dateTime="2025-03-10T12:43:42.460Z" class="updated" tabindex="-1"><time dateTime="2025-03-10T12:43:42.460Z" class="date">10th Mar 2025</time></time></div></div></div></article><article class="@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card"><a title="" class="relative flex items-center justify-center" style="background-color:#fcf9f8" aria-labelledby="title-0176-rules-i-follow-when-typesetting.md" href="/blog/rules-i-follow-when-typesetting"><img alt="Rules I follow when typesetting" loading="lazy" width="384" height="240" decoding="async" data-nimg="1" class="@lg/card:hidden w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 240'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/0176-typesetting-featured-image-medium.svg"/><img alt="Rules I follow when typesetting" aria-hidden="true" loading="lazy" width="592" height="368" decoding="async" data-nimg="1" class="hidden @lg/card:block w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 592 368'%3E%3Cfilter id='b' color-interpolation-filters='
1sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/0176-typesetting-featured-image.svg"/></a><div class="flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12"><div class="flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px"><a class="flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-neutral-02-600),var(--color-neutral-02-200))] category" href="/category/typography"><span class="flex-[0_0_auto] bg-surface dark:bg-neutral-02-300 dark:ring-1 dark:ring-neutral-02-300 dark:group-hover/badge:ring-neutral-02-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-neutral-02-600),var(--color-neutral-02-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#type-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8">Typography</span></a><p class="flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#calendar-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8"><time dateTime="2025-03-10T08:37:00.168Z" class="date">10th Mar 2025</time></span></p></div><div class="flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12"><h2 class="p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl" id="title-0176-rules-i-follow-when-typesetting.md"><a class="text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1" href="/blog/rules-i-follow-when-typesetting">Rules I follow when typesetting</a></h2><div class="flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3"><p className="font-body">Iâve developed some habits over the years when it comes to the display of text in a design with the aim of readability and aesthetic balance. And it feels like it could be useful to document this.</p></div><div class="sr-only" aria-hidden="true" tabindex="-1"><a class="author vcard url fn" rel="author" tabindex="-1" href="/about">Steve McKinney</a> <time dateTime="2026-03-28T21:47:00.168Z" class="updated" tabindex="-1"><time dateTime="2026-03-28T21:47:00.168Z" class="date">28th Mar 2026</time></time></div></div></div></article><article class="@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-
1picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card"><a title="" class="relative flex items-center justify-center" style="background-color:#fcf9f8" aria-labelledby="title-0175-bento-layout-css-grid.md" href="/blog/bento-layout-css-grid"><img alt="Bento grid layout with CSS grid and container queries" loading="lazy" width="384" height="240" decoding="async" data-nimg="1" class="@lg/card:hidden w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 240'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/0175-bento-grid-featured-image-medium.svg"/><img alt="Bento grid layout with CSS grid and container queries" aria-hidden="true" loading="lazy" width="592" height="368" decoding="async" data-nimg="1" class="hidden @lg/card:block w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 592 368'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/0175-bento-grid-featured-image.svg"/></a><div class="flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12"><div class="flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px"><a class="flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-fern-700),var(--color-fern-200))] category" href="/category/patterns"><span class="flex-[0_0_auto] bg-surface dark:bg-fern-300 dark:ring-1 dark:ring-fern-300 dark:group-hover/badge:ring-fern-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-fern-700),var(--color-fern-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#puzzle-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8">Patterns</span></a><p class="flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-
1picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#calendar-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8"><time dateTime="2024-07-02T14:58:09.706Z" class="date">2nd Jul 2024</time></span></p></div><div class="flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12"><h2 class="p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl" id="title-0175-bento-layout-css-grid.md"><a class="text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1" href="/blog/bento-layout-css-grid">Bento grid layout with CSS grid and container queries</a></h2><div class="flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3"><p className="font-body">Bento grids offer a unique layout challenge for CSS. With the use of Tailwind you can create a flexible layout with modern CSS grid and @container queries.</p></div><div class="sr-only" aria-hidden="true" tabindex="-1"><a class="author vcard url fn" rel="author" tabindex="-1" href="/about">Steve McKinney</a> <time dateTime="2026-06-12T20:45:00.000Z" class="updated" tabindex="-1"><time dateTime="2026-06-12T20:45:00.000Z" class="date">12th Jun 2026</time></time></div></div></div></article><article class="@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card"><a title="" class="relative flex items-center justify-center" style="background-color:#f9f3f1" aria-labelledby="title-0174-about-version-8.md" href="/blog/about-version-8"><img alt="About version 8" loading="lazy" width="384" height="240" decoding="async" data-nimg="1" class="@lg/card:hidden w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 240'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/about-version-8-featured-image-medium.svg"/><img alt="About version 8" aria-hidden="true" loading="lazy" width="592" height="368" decoding="async" data-nimg="1" class="hidden @lg/card:block w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 592 368'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'
1/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/about-version-8-featured-image-large.svg"/></a><div class="flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12"><div class="flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px"><a class="flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-200))] category" href="/category/website"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#folder-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8">Website</span></a><p class="flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#calendar-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8"><time dateTime="2024-02-29T11:13:38.269Z" class="date">29th Feb 2024</time></span></p></div><div class="flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12"><h2 class="p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl" id="title-0174-about-version-8.md"><a class="text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1" href="/blog/about-version-8">About version 8</a></h2><div class="flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3"><p className="font-body">Design and development decisions for the 8th version of this website. New design, using Next.js App Router and pretty much all in on Tailwind.</p></div><div class="sr-only" aria-hidden="true" tabindex="-1"><a class="author vcard url fn" rel="author" tabindex="-1" href="/about">Steve McKinney</a> <time dateTime="2024-02-29T11:13:38.269Z" class="updated" tabindex="-1"><time dateTime="2024-02-29T11:13:38.269Z" class="date">29th Feb 2024</time></time></div></div></div></article><article class="@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-
1picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card"><a title="" class="relative flex items-center justify-center" style="background-color:#f9f3f1" aria-labelledby="title-0173-about-version-7/index.md" href="/blog/about-version-7"><img alt="About version 7" loading="lazy" width="384" height="240" decoding="async" data-nimg="1" class="@lg/card:hidden w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 240'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/about-version-7-featured-image-medium.svg"/><img alt="About version 7" aria-hidden="true" loading="lazy" width="592" height="368" decoding="async" data-nimg="1" class="hidden @lg/card:block w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 592 368'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/about-version-7-featured-image-large.svg"/></a><div class="flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12"><div class="flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px"><a class="flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-200))] category" href="/category/website"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#folder-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8">Website</span></a><p class="flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-
1picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#calendar-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8"><time dateTime="2024-02-29T10:13:38.269Z" class="date">29th Feb 2024</time></span></p></div><div class="flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12"><h2 class="p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl" id="title-0173-about-version-7/index.md"><a class="text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1" href="/blog/about-version-7">About version 7</a></h2><div class="flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3"><p className="font-body">How I moved 140 posts from a database CMS to a static site in Next.js. No redesign just website rebuild and some hindsight into the decision making.</p></div><div class="sr-only" aria-hidden="true" tabindex="-1"><a class="author vcard url fn" rel="author" tabindex="-1" href="/about">Steve McKinney</a> <time dateTime="2024-02-29T10:13:38.269Z" class="updated" tabindex="-1"><time dateTime="2024-02-29T10:13:38.269Z" class="date">29th Feb 2024</time></time></div></div></div></article><article class="@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card"><a title="" class="relative flex items-center justify-center" style="background-color:#f9f3f1" aria-labelledby="title-0172-the-best-ink-trap-typefaces-for-websites.md" href="/blog/the-best-ink-trap-typefaces-for-websites"><img alt="The best ink trap typefaces for websites" loading="lazy" width="384" height="240" decoding="async" data-nimg="1" class="@lg/card:hidden w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 240'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/the-best-ink-trap-typefaces-for-websites-featured-image-medium.svg"/><img alt="The best ink trap typefaces for websites" aria-hidden="true" loading="lazy" width="592" height="368" decoding="async" data-nimg="1" class="hidden @lg/card:block w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 592 368'%3E%3Cfilter id='b' color-interpolation-filters='
1sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/the-best-ink-trap-typefaces-for-websites-featured-image-large.svg"/></a><div class="flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12"><div class="flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px"><a class="flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-neutral-02-600),var(--color-neutral-02-200))] category" href="/category/typography"><span class="flex-[0_0_auto] bg-surface dark:bg-neutral-02-300 dark:ring-1 dark:ring-neutral-02-300 dark:group-hover/badge:ring-neutral-02-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-neutral-02-600),var(--color-neutral-02-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#type-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8">Typography</span></a><p class="flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#calendar-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8"><time dateTime="2021-07-28T10:28:00+00:00" class="date">28th Jul 2021</time></span></p></div><div class="flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12"><h2 class="p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl" id="title-0172-the-best-ink-trap-typefaces-for-websites.md"><a class="text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1" href="/blog/the-best-ink-trap-typefaces-for-websites">The best ink trap typefaces for websites</a></h2><div class="flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3"><p className="font-body">A look at type that features prominent cuts or tapering into the type and a variety of recommendations you can use in your designs.</p></div><div class="sr-only" aria-hidden="true" tabindex="-1"><a class="author vcard url fn" rel="author" tabindex="-1" href="/about">Steve McKinney</a> <time dateTime="2026-06-12T20:45:00+00:00" class="updated" tabindex="-1"><time dateTime="2026-06-12T20:45:00+00:00" class="date">12th Jun 2026</time></time></div></div></div></article><article class="@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-
1picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card"><a title="" class="relative flex items-center justify-center" style="background-color:#f8fbfc" aria-labelledby="title-0170-atomic-font-size-management-with-sass.md" href="/blog/atomic-font-size-management-with-sass"><img alt="âAtomicâ font size management with Sass" loading="lazy" width="384" height="240" decoding="async" data-nimg="1" class="@lg/card:hidden w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 240'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/[email protected]"/><img alt="âAtomicâ font size management with Sass" aria-hidden="true" loading="lazy" width="738" height="492" decoding="async" data-nimg="1" class="hidden @lg/card:block w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 738 492'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/[email protected]"/></a><div class="flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12"><div class="flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px"><a class="flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-grass-600),var(--color-grass-200))] category" href="/category/css"><span class="flex-[0_0_auto] bg-surface dark:bg-grass-300 dark:ring-1 dark:ring-grass-300 dark:group-hover/badge:ring-grass-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-grass-600),var(--color-grass-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#css-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8">CSS</span></a><p class="flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-
1picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#calendar-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8"><time dateTime="2018-06-13T06:27:00+00:00" class="date">13th Jun 2018</time></span></p></div><div class="flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12"><h2 class="p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl" id="title-0170-atomic-font-size-management-with-sass.md"><a class="text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1" href="/blog/atomic-font-size-management-with-sass">âAtomicâ font size management with Sass</a></h2><div class="flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3"><p className="font-body">In a responsive world, managing font sizes can be tricky. So how can an atomic approach help?</p></div><div class="sr-only" aria-hidden="true" tabindex="-1"><a class="author vcard url fn" rel="author" tabindex="-1" href="/about">Steve McKinney</a> <time dateTime="2019-10-10T11:44:17+00:00" class="updated" tabindex="-1"><time dateTime="2019-10-10T11:44:17+00:00" class="date">10th Oct 2019</time></time></div></div></div></article><article class="@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card"><a title="" class="relative flex items-center justify-center" style="background-color:#daf4ed" aria-labelledby="title-0169-tips-for-using-colour-effectively-in-web-illustration.md" href="/blog/tips-for-using-colour-effectively-in-web-illustration"><img alt="Tips for using colour effectively in web illustration" loading="lazy" width="384" height="240" decoding="async" data-nimg="1" class="@lg/card:hidden w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 240'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/[email protected]"/><img alt="Tips for using colour effectively in web illustration" aria-hidden="true" loading="lazy" width="738" height="492" decoding="async" data-nimg="1" class="hidden @lg/card:block w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 738 492'%3E%3Cfilter id='b' color-interpolation-filters='
1sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/[email protected]"/></a><div class="flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12"><div class="flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px"><a class="flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-200))] category" href="/category/colour"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#palette-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8">Colour</span></a><p class="flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#calendar-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8"><time dateTime="2018-05-10T12:22:00+00:00" class="date">10th May 2018</time></span></p></div><div class="flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12"><h2 class="p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl" id="title-0169-tips-for-using-colour-effectively-in-web-illustration.md"><a class="text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1" href="/blog/tips-for-using-colour-effectively-in-web-illustration">Tips for using colour effectively in web illustration</a></h2><div class="flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3"><p className="font-body">Our websites can offer us an important advantage when it comes to choosing colour for illustrationâconstraint.</p></div><div class="sr-only" aria-hidden="true" tabindex="-1"><a class="author vcard url fn" rel="author" tabindex="-1" href="/about">Steve McKinney</a> <time dateTime="2021-07-13T17:31:38+00:00" class="updated" tabindex="-1"><time dateTime="2021-07-13T17:31:38+00:00" class="date">13th Jul 2021</time></time></div></div></div></article><article class="@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-
1picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card"><a title="" class="relative flex items-center justify-center" style="background-color:#fff3f0" aria-labelledby="title-0168-nice-and-easy-lazy-loading-with-lazysizes-js.md" href="/blog/nice-and-easy-lazy-loading-with-lazysizes-js"><img alt="Nice and easy lazy loading with lazysizes.js" loading="lazy" width="384" height="240" decoding="async" data-nimg="1" class="@lg/card:hidden w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 240'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/lazyloading-featured-image-medium.png"/><img alt="Nice and easy lazy loading with lazysizes.js" aria-hidden="true" loading="lazy" width="738" height="492" decoding="async" data-nimg="1" class="hidden @lg/card:block w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 738 492'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/lazyloading-featured-image.png"/></a><div class="flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12"><div class="flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px"><a class="flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-fern-700),var(--color-fern-200))] category" href="/category/patterns"><span class="flex-[0_0_auto] bg-surface dark:bg-fern-300 dark:ring-1 dark:ring-fern-300 dark:group-hover/badge:ring-fern-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-fern-700),var(--color-fern-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#puzzle-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8">Patterns</span></a><p class="flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-
1picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#calendar-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8"><time dateTime="2018-02-11T19:58:00+00:00" class="date">11th Feb 2018</time></span></p></div><div class="flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12"><h2 class="p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl" id="title-0168-nice-and-easy-lazy-loading-with-lazysizes-js.md"><a class="text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1" href="/blog/nice-and-easy-lazy-loading-with-lazysizes-js">Nice and easy lazy loading with lazysizes.js</a></h2><div class="flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3"><p className="font-body">Lazy loading doesnât have to be difficult, hereâs how to add smooth loading images to your website.</p></div><div class="sr-only" aria-hidden="true" tabindex="-1"><a class="author vcard url fn" rel="author" tabindex="-1" href="/about">Steve McKinney</a> <time dateTime="2019-10-04T07:21:26+00:00" class="updated" tabindex="-1"><time dateTime="2019-10-04T07:21:26+00:00" class="date">4th Oct 2019</time></time></div></div></div></article><article class="@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card"><a title="" class="relative flex items-center justify-center" style="background-color:#fffbee" aria-labelledby="title-0167-a-year-in-writing-2017.md" href="/blog/a-year-in-writing-2017"><img alt="A year in writing â 2017" loading="lazy" width="384" height="240" decoding="async" data-nimg="1" class="@lg/card:hidden w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 240'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/[email protected]"/><img alt="A year in writing â 2017" aria-hidden="true" loading="lazy" width="738" height="492" decoding="async" data-nimg="1" class="hidden @lg/card:block w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 738 492'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'
1/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/[email protected]"/></a><div class="flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12"><div class="flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px"><a class="flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-200))] category" href="/category/website"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#folder-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8">Website</span></a><p class="flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#calendar-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8"><time dateTime="2018-01-28T14:06:00+00:00" class="date">28th Jan 2018</time></span></p></div><div class="flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12"><h2 class="p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl" id="title-0167-a-year-in-writing-2017.md"><a class="text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1" href="/blog/a-year-in-writing-2017">A year in writing â 2017</a></h2><div class="flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3"><p className="font-body">This year I took it at a slower pace with the articles. It was a year I felt I didnât focus so much on this website, so I was quite surprised to see the website continue to grow.</p></div><div class="sr-only" aria-hidden="true" tabindex="-1"><a class="author vcard url fn" rel="author" tabindex="-1" href="/about">Steve McKinney</a> <time dateTime="2019-10-04T07:21:53+00:00" class="updated" tabindex="-1"><time dateTime="2019-10-04T07:21:53+00:00" class="date">4th Oct 2019</time></time></div></div></div></article><article class="@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-
1picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card"><a title="" class="relative flex items-center justify-center" style="background-color:#fefbed" aria-labelledby="title-0166-illustrator-tip-which-stroke-alignment.md" href="/blog/illustrator-tip-which-stroke-alignment"><img alt="Illustrator quick tip: which stroke alignment?" loading="lazy" width="384" height="240" decoding="async" data-nimg="1" class="@lg/card:hidden w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 240'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/[email protected]"/><img alt="Illustrator quick tip: which stroke alignment?" aria-hidden="true" loading="lazy" width="738" height="492" decoding="async" data-nimg="1" class="hidden @lg/card:block w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 738 492'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/[email protected]"/></a><div class="flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12"><div class="flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px"><a class="flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-dandelion-600),var(--color-dandelion-200))] category" href="/category/quick-tip"><span class="flex-[0_0_auto] bg-surface dark:bg-dandelion-300 dark:ring-1 dark:ring-dandelion-200 dark:group-hover/badge:ring-dandelion-0 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-dandelion-600),var(--color-dandelion-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#bolt-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8">Quick tip</span></a><p class="flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-
1picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#calendar-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8"><time dateTime="2017-09-21T08:00:00+00:00" class="date">21st Sep 2017</time></span></p></div><div class="flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12"><h2 class="p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl" id="title-0166-illustrator-tip-which-stroke-alignment.md"><a class="text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1" href="/blog/illustrator-tip-which-stroke-alignment">Illustrator quick tip: which stroke alignment?</a></h2><div class="flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3"><p className="font-body">There are three types of stroke alignment, so when and where is each useful?</p></div><div class="sr-only" aria-hidden="true" tabindex="-1"><a class="author vcard url fn" rel="author" tabindex="-1" href="/about">Steve McKinney</a> <time dateTime="2019-10-04T07:22:23+00:00" class="updated" tabindex="-1"><time dateTime="2019-10-04T07:22:23+00:00" class="date">4th Oct 2019</time></time></div></div></div></article><article class="@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card"><a title="" class="relative flex items-center justify-center" style="background-color:#f7fbfb" aria-labelledby="title-0165-search-overlay-with-smooth-reveal-animation.md" href="/blog/search-overlay-with-smooth-reveal-animation"><img alt="Search overlay with smooth reveal animation" loading="lazy" width="384" height="240" decoding="async" data-nimg="1" class="@lg/card:hidden w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 240'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/[email protected]"/><img alt="Search overlay with smooth reveal animation" aria-hidden="true" loading="lazy" width="738" height="492" decoding="async" data-nimg="1" class="hidden @lg/card:block w-full" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 738 492'%3E%3Cfilter id='b' color-interpolation-filters='
1sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'/%3E%3C/svg%3E")" src="/images/blog/[email protected]"/></a><div class="flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12"><div class="flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px"><a class="flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-magenta-600),var(--color-magenta-200))] category" href="/category/animation"><span class="flex-[0_0_auto] bg-surface dark:bg-magenta-300 dark:ring-1 dark:ring-magenta-300 dark:group-hover/badge:ring-magenta-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-magenta-600),var(--color-magenta-800))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#play-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8">Animation</span></a><p class="flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only"><span class="flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 icon text-current"><use xlink:href="#calendar-24"></use></svg></span><span class="pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8"><time dateTime="2017-08-16T12:15:00+00:00" class="date">16th Aug 2017</time></span></p></div><div class="flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12"><h2 class="p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl" id="title-0165-search-overlay-with-smooth-reveal-animation.md"><a class="text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1" href="/blog/search-overlay-with-smooth-reveal-animation">Search overlay with smooth reveal animation</a></h2><div class="flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3"><p className="font-body">A common part of a website is the ability to search. Depending on how important search is to your website can define much of how it looks and how itâs prioritised in the design.</p></div><div class="sr-only" aria-hidden="true" tabindex="-1"><a class="author vcard url fn" rel="author" tabindex="-1" href="/about">Steve McKinney</a> <time dateTime="2019-10-04T07:23:53+00:00" class="updated" tabindex="-1"><time dateTime="2019-10-04T07:23:53+00:00" class="date">4th Oct 2019</time></time></div></div></div></article></div><div class="col-content"><nav class="flex justify-between items-center -my-2 relative"><button class="flex items-center gap-1 text-xl font-ui lowercase leading-[1.1428571429] py-2 cursor-not-allowed disabled:text-ui-body/70" disabled=""><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 text-current icon stroke-current relative -top-px"><use xlink:href="#angle-left-24"></use></svg>Newer</button><span class="absolute left-1/2 transform -translate-x-1/2 text-xl font-ui lowercase text-ui-body flex items-center gap-1 leading-[1.1428571429] py-2" style="font-variant-numeric:lining-nums tabular-nums ordinal;font-feature-settings:'dlig' on, 'case' on">1<!-- --> of <!-- -->12</span><a class="flex items-center gap-1 text-xl font-ui lowercase leading-[1.1428571429] py-2 transition duration-200 hover:text-link-hover" rel="next" href="/blog/page/2">Older<svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 text-current icon stroke-current relative -top-px"><use xlink:href="#angle-right-24"></use></svg></a></nav></div><!--$--><!--/$--></main><!--$?--><template id="B:0"></template><div class="col-start-container-start col-end-container-end h-[600px]"></div><!--/$--><footer class="col-content flex flex-col max-md:items-center md:flex-row gap-8 pt-18 pb-18 md:py-18"><p class="flex flex-1 max-md:flex-col max-md:items-center gap-1 text-balance text-center"><svg width="24" height="24" viewBox="0 0 24 24" class="shrink-0 text-current icon-header"><use xlink:href="#bee-24"></use></svg> Designed in Manchester using Figma & Next.js</p><ul class="flex gap-8"><li><a href="#top" class="text-emphasis hover:text-link-hover transition duration-200 ease-linear">Top</a></li><li><a class="text-emphasis hover:text-link-hover transition duration-200 ease-linear" href="/feed.xml">RSS</a></li><li><p class="text-ui-body">©<!-- --> <a class="text-ui-body hover:text-link-hover transition duration-200 ease-linear" href="/">iamsteve</a> <!-- -->2026</p></li></ul></footer><div class="col-container relative -top-4 pb-24 flex flex-row items-center gap-8"><span class="flex-1 bg-dash-image h-[2px]" aria-hidden="true"></span><svg width="32" height="32" viewBox="0 0 32 32" class="shrink-0 icon-header text-emphasis"><use xlink:href="#logo-32"></use></svg><span class="flex-1 bg-dash-image h-[2px]" aria-hidden="true"></span></div></div>
1<script>requestAnimationFrame(function(){$RT=performance.now()});</script>
1<script src="/_next/static/chunks/2twfjdkphd1bd.js" id="_R_" async=""></script>
1<div hidden id="S:0"><aside class="grid grid-flow-dense grid-cols-2 sm:grid-cols-[repeat(16,minmax(min-content,1fr))] grid-rows-[repeat(auto-fill,minmax(min-content,1fr))] gap-px col-start-container-start col-end-container-end shadow-placed rounded-lg lg:rounded-xl overflow-hidden"><section class="col-span-full lg:col-span-8 xl:col-span-7 row-span-10 bg-surface py-12 px-8 sm:px-12 sm:py-12 md:px-[5vmax] xl:py-16 xl:px-24 flex flex-col items-center gap-8"><header class="flex flex-col gap-2 items-center"><svg width="96" height="96" fill="none" viewBox="0 0 96 96" class="mb-2 illo-cool" aria-hidden="true"><rect x="4" y="16" width="88" height="64" rx="8" class="fill-surface-100"></rect><path d="M5 76L36.8202 44.9198C43.0367 38.8479 52.9633 38.8479 59.1798 44.9198L91 76L89.3431 77.6569C87.8429 79.1571 85.808 80 83.6863 80H12.8063C10.9897 80 9.22719 79.3818 7.80869 78.247L5 76Z" class="fill-subtle"></path><path d="M10 80H86.5L90.375 77.5L48 40L5.625 77.5L10 80Z" class="fill-surface"></path><path d="M88.3906 18.2209L60.219 51.5459C53.8274 59.1066 42.1726 59.1066 35.781 51.5459L7.62366 18.2377" class="stroke-subtle" stroke-width="8"></path><path d="M6.625 78L42.6275 45.3693C45.6762 42.6061 50.3238 42.6061 53.3725 45.3693L89.375 78" class="stroke-muted" stroke-width="2"></path><path d="M11 16H85.5L89.375 18.5L59.8376 50.9823C53.4896 57.9631 42.5104 57.9631 36.1624 50.9823L6.625 18.5L11 16Z" class="fill-foreground"></path><path d="M86.1426 16.0547L68.6875 35.25L56.8782 48.2367C52.1172 53.4723 43.8828 53.4723 39.1218 48.2367L9.85742 16.0547H86.1426Z" class="fill-foreground"></path><path d="M6.625 18.5L36.1624 50.9823C42.5104 57.9631 53.4896 57.9631 59.8376 50.9823L89.375 18.5" class="stroke-border" stroke-width="2"></path><rect x="4" y="16" width="88" height="64" rx="8" class="stroke-border" stroke-width="2"></rect></svg><h2 class="text-3xl sm:text-5xl font-display font-variation-bold lowercase text-heading text-center">Get the articles</h2><p class="m-0 text-base text-ui-body text-balance text-center max-w-[40ch]">Join the RSS alternative and I'll notify you when the latest posts go out. Unsubscribe at anytime.</p></header><div class="w-full"><form class="@container flex flex-col gap-10"><div class="@container flex flex-col @xl:flex-row gap-6"><div class="flex flex-col @xl:w-2/5"><label for="input-name-footer" class="font-sans text-base font-medium lowercase text-emphasis leading-none mb-1">First name</label><p class="text-sm text-ui-body opacity-80 leading-none mb-3">What do you go by?</p><input type="text" class="form-input border-0 w-full text-base bg-linear-to-b from-[rgb(79_64_63/0.03)] from-0% to-[rgb(79_64_63/0)] to-100% px-4 py-3 rounded-sm placeholder-fern-1100/30 shadow-[0_-1px_rgb(79_64_63/0.2),0_0_0_1px_rgb(79_64_63/0.1)] dark:shadow-[inset_0_0_0_1px_var(--color-surface-02)] focus-visible:shadow-[0_-1px_rgb(79_64_63/0.2),0_0_0_1px_rgb(79_127_218),0_0_0_6px_rgb(79_127_218/0.08)] dark:focus-visible:shadow-[0_-1px_var(--color-cornflour-600),0_0_0_6px_color-mix(in_srgb,_var(--color-cornflour-600),transparent_80%)] bg-input" id="input-name-footer" name="fields[first_name]"/></div><div class="flex flex-col @xl:w-3/5"><label for="input-email-footer" class="font-sans text-base font-medium lowercase text-emphasis leading-none mb-1">Email</label><p class="text-sm text-ui-body opacity-80 leading-none mb-3">Your best email address</p><input type="email" autoComplete="email" autoCapitalize="none" class="form-input border-0 w-full text-base bg-linear-to-b from-[rgb(79_64_63/0.03)] from-0% to-[rgb(79_64_63/0)] to-100% px-4 py-3 rounded-sm placeholder-fern-1100/30 shadow-[0_-1px_rgb(79_64_63/0.2),0_0_0_1px_rgb(79_64_63/0.1)] dark:shadow-[inset_0_0_0_1px_var(--color-surface-02)] focus-visible:shadow-[0_-1px_rgb(79_64_63/0.2),0_0_0_1px_rgb(79_127_218),0_0_0_6px_rgb(79_127_218/0.08)] dark:focus-visible:shadow-[0_-1px_var(--color-cornflour-600),0_0_0_6px_color-mix(in_srgb,_var(--color-cornflour-600),transparent_80%)] bg-input" id="input-email-footer" required="" name="email_address"/></div></div><div class="flex flex-col-reverse @sm:flex-row gap-4 items-center justify-between">
1<p class="m-0 p-0 text-fern-700 flex-1 text-center @sm:text-left">Join <!-- -->700<!-- -->+ designers</p><button theme="dandelion" aria-label="Subscribe to the newsletter" class="select-none font-ui text-base/tight lowercase text-center button-dandelion button-dandelion select-none w-full @sm:w-auto @sm:grow-0 flex-auto font-ui text-base/tight lowercase text-center"><span>Sign me up</span></button></div></form></div><p class="text-ui-body text-balance text-sm text-center max-w-[55ch]">You will receive two emails to begin with. One to confirm your subscription and then your welcome emailâthanks in advance!</p></section><div class="@container/about col-span-full sm:col-span-8 xl:col-span-9 row-span-7 bg-surface py-12 px-8 sm:px-12 sm:py-12 xl:px-18 content-end dark:shadow-[-1px_1px_0_0_var(--color-surface-02)]"><h3 class="text-heading font-display font-variation-bold text-lg sm:text-3xl lowercase flex gap-2 mb-3">About the website</h3><div class="flex flex-col @md:flex-row gap-x-6 gap-y-2"><p class="text-ui-body text-base flex-1">Hi, Iâm Steve McKinney, I write this small publication focusing on the design and build of websites. The aim is to bridge the gap between your design tool and code. And look at the craft behind creating websites.</p><p class="text-ui-body text-base flex-1">This is a broad topic in itself, which feels challenging to achieve. But it remains a way to encourage self learning and sharing what I knowâ¦<a class="font-semibold text-link hover:text-link-hover transition duration-200 ease" href="/about">continue reading</a></p></div></div><div class="col-span-1 sm:col-span-8 lg:col-span-4 xl:col-span-5 row-span-3 bg-surface py-12 px-8 sm:px-12 sm:py-12 xl:px-18 flex flex-col justify-end dark:shadow-[-1px_0_0_0_var(--color-surface-02)]"><h3 class="text-heading font-display font-variation-bold text-lg sm:text-3xl lowercase mb-4">Site</h3><ul class="flex flex-row flex-wrap gap-x-6 gap-y-2 sm:gap-y-4"><li><a class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200" href="/"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#home-16"></use></svg>Home</a></li><li><a class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200" href="/blog"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#folder-16"></use></svg>Archive</a></li><li><a class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200" href="/category/design"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#pen-16"></use></svg>Design</a></li><li><a class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200" href="/category/code"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#code-16"></use></svg>Code</a></li><li><a class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200" href="/collections"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#collections-16"></use></svg>Collections</a></li><li><a class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200" href="/notes"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#notepad-16"></use></svg>Notes</a></li><li><a class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200" href="/uses"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#settings-16"></use></svg>Uses</a></li><li><a class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200" href="/about">
1<svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#person-16"></use></svg>About</a></li><li><a class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200" href="/contact"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#envelope-16"></use></svg>Contact</a></li><li><a class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200" href="/newsletter"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#airplane-16"></use></svg>Newsletter</a></li></ul></div><div class="col-span-1 sm:col-span-8 lg:col-span-4 xl:col-span-4 row-span-1 bg-surface py-8 sm:p-12 flex items-center justify-center dark:shadow-[-1px_1px_var(--color-surface-02)]"><a rel="noopener noreferrer" href="https://v7.iamsteve.me" class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200">Old design<svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#external-16"></use></svg></a></div><div class="col-span-1 sm:col-span-8 lg:col-span-4 xl:col-span-4 row-span-2 bg-surface py-12 px-8 sm:px-12 sm:py-12 xl:px-18 flex flex-col justify-end dark:shadow-[-1px_0_var(--color-surface-02)]"><h3 class="text-heading font-display font-variation-bold text-lg sm:text-3xl lowercase mb-4">Elsewhere</h3><ul class="flex flex-row flex-wrap gap-x-6 gap-y-2 sm:gap-y-4"><li><a rel="noopener noreferrer" href="https://x.com/irsteve" class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#x-16"></use></svg>x.com</a></li><li><a rel="noopener noreferrer" href="https://www.figma.com/@stevemckinney" class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#figma-16"></use></svg>Figma</a></li><li><a rel="noopener noreferrer" href="https://github.com/stevemckinney" class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#github-16"></use></svg>Github</a></li><li><a rel="noopener noreferrer" href="https://www.linkedin.com/in/steve-mckinney-5b5836102/" class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#linkedin-16"></use></svg>Linkedin</a></li><li><a rel="me" href="https://mastodon.design/@steve" class="flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200"><svg width="16" height="16" viewBox="0 0 16 16" class="shrink-0 text-current icon-header"><use xlink:href="#mastodon-16"></use></svg>Mastodon</a></li></ul></div></aside></div>
1<script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; 2$RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")</script>
2<script>(self.__next_f=self.__next_f||[]).push([0])</script>
2<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n69:I[51137,[\"/_next/static/chunks/2317sa_4mq8sr.js\",\"/_next/static/chunks/0agl4fg0_1a_y.js\",\"/_next/static/chunks/11lkkyb-gcm2d.js\",\"/_next/static/chunks/0sqa-0011n2kn.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/0u6v7a6-c9no0.css\",\"style\"]\n:HL[\"/_next/static/chunks/0nchaizb147_e.css\",\"style\"]\n:HL[\"https://use.typekit.net/bvl2qse.css\",\"style\"]\n"])</script>
2<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"blog\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(blog)\",{\"children\":[\"blog\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0u6v7a6-c9no0.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0nchaizb147_e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/2317sa_4mq8sr.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0agl4fg0_1a_y.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/11lkkyb-gcm2d.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/0sqa-0011n2kn.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"overflow-x-hidden lg:overflow-x-clip\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"black-translucent\"}],[\"$\",\"meta\",null,{\"name\":\"apple-mobile-web-app-title\",\"content\":\"iamsteve\"}],[\"$\",\"meta\",null,{\"name\":\"apple-mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",null,{\"name\":\"mobile-web-app-title\",\"content\":\"iamsteve\"}],[\"$\",\"meta\",null,{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://use.typekit.net\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://use.typekit.net\"}],[\"$\",\"link\",null,{\"rel\":\"stylesheet\",\"href\":\"https://use.typekit.net/bvl2qse.css\",\"precedence\":\"default\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@graph\\\":[{\\\"@type\\\":\\\"Organization\\\",\\\"@id\\\":\\\"https://iamsteve.me/#organization\\\",\\\"name\\\":\\\"iamsteve\\\",\\\"url\\\":\\\"https://iamsteve.me\\\",\\\"logo\\\":{\\\"@type\\\":\\\"ImageObject\\\",\\\"url\\\":\\\"https://iamsteve.me/images/logo.svg\\\"}},{\\\"@type\\\":\\\"WebSite\\\",\\\"@id\\\":\\\"https://iamsteve.me/#website\\\",\\\"url\\\":\\\"https://iamsteve.me\\\",\\\"name\\\":\\\"iamsteve\\\",\\\"description\\\":\\\"A blog by Steve McKinney about the design and build of websites. Bridging the gap between your design tool and code, with a focus on typography, CSS and visual craft.\\\",\\\"publisher\\\":{\\\"@id\\\":\\\"https://iamsteve.me/#organization\\\"}},{\\\"@type\\\":\\\"Person\\\",\\\"@id\\\":\\\"https://iamsteve.me/#person\\\",\\\"name\\\":\\\"Steve McKinney\\\",\\\"url\\\":\\\"https://iamsteve.me\\\",\\\"sameAs\\\":[\\\"https://twitter.com/irsteve\\\",\\\"https://instagram.com/stevemckinney\\\",\\\"https://www.linkedin.com/in/smcknny/\\\"],\\\"homeLocation\\\":{\\\"@type\\\":\\\"City\\\",\\\"name\\\":\\\"Manchester\\\"},\\\"jobTitle\\\":\\\"User interface designer\\\",\\\"knowsAbout\\\":[\\\"Web Design\\\",\\\"Visual Design\\\",\\\"UI Design\\\",\\\"Typography\\\",\\\"CSS\\\"],\\\"worksFor\\\":{\\\"@id\\\":\\\"https://iamsteve.me/#organization\\\"}}]}\"}}]]}],[\"$\",\"body\",null,{\"className\":\"antialiased min-w-screen min-h-screen bg-[url(/images/texture.png)] dark:bg-[url(/images/texture-dark.png)] bg-size-[172px_auto] bg-blend-multiply dark:bg-blend-color-dodge bg-canvas text-body overflow-x-hidden lg:overflow-x-clip\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"aria-hidden\":\"true\",\"style\":{\"position\":\"absolute\",\"width\":0,\"height\":0,\"overflow\":\"hidden\",\"display\":\"none\"},\"children\":[\"$\",\"defs\",null,{\"children\":[[\"$\",\"symbol\",null,{\"id\":\" checkmark-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"checkmark / checkmark\",\"children\":[\"$\",\"path\",null,{\"d\":\"m3 8 3 3 7-7\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}],[\"$\",\"symbol\",null,{\"id\":\" checkmark-underline-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"checkmark / underline\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 15h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m3 8 3 3 7-7\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}],[\"$\",\"symbol\",null,{\"id\":\"about-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.84335,9.69765l-.00229-.031a4.25032,4.25032,0,0,0,1.49227-3.33334v-2c0-1.20734,0-2-.66666-2.66666a2.44912,2.44912,0,0,0-2-.66667c-.60143,0-.66029.54257-1.645.64876a2.72461,2.72461,0,0,0-2.355,2.74544V6.33333A4.25032,4.25032,0,0,0,6.15894,9.66667l-.0023.03113C6.06721,10.90871,5.223,10.908,4.063,11.26685a12.9908,12.9908,0,0,0-1.56186.59426,1.99748,1.99748,0,0,0-1.16784,1.82032V14a1,1,0,0,0,1,1H13.66667a1,1,0,0,0,1-1v-.3186a1.9975,1.9975,0,0,0-1.1678-1.82031,12.99024,12.99024,0,0,0-1.56184-.59427C10.777,10.90791,9.93278,10.90862,9.84335,9.69765Z\"}]}],\"$L2\",\"$L3\",\"$L4\",\"$L5\",\"$L6\",\"$L7\",\"$L8\",\"$L9\",\"$La\",\"$Lb\",\"$Lc\",\"$Ld\",\"$Le\",\"$Lf\",\"$L10\",\"$L11\",\"$L12\",\"$L13\",\"$L14\",\"$L15\",\"$L16\",\"$L17\",\"$L18\",\"$L19\",\"$L1a\",\"$L1b\",\"$L1c\",\"$L1d\",\"$L1e\",\"$L1f\",\"$L20\",\"$L21\",\"$L22\",\"$L23\",\"$L24\",\"$L25\",\"$L26\",\"$L27\",\"$L28\",\"$L29\",\"$L2a\",\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\",\"$L3e\",\"$L3f\",\"$L40\",\"$L41\",\"$L42\",\"$L43\",\"$L44\",\"$L45\",\"$L46\",\"$L47\",\"$L48\",\"$L49\",\"$L4a\",\"$L4b\",\"$L4c\",\"$L4d\",\"$L4e\",\"$L4f\",\"$L50\",\"$L51\",\"$L52\",\"$L53\",\"$L54\",\"$L55\",\"$L56\",\"$L57\",\"$L58\",\"$L59\",\"$L5a\",\"$L5b\",\"$L5c\",\"$L5d\",\"$L5e\",\"$L5f\"]}]}],\"$L60\",\"$L61\",\"$L62\"]}],\"$L63\"]}]]}],{\"children\":[\"$L64\",{\"children\":[\"$L65\",{\"children\":[\"$L66\",{}
2,null,false,null]},null,false,\"$@67\"]},null,false,null]},null,false,null],\"$L68\",false]],\"m\":\"$undefined\",\"G\":[\"$69\",[\"$L6a\",\"$L6b\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"AeIQWSkcucwMkNpg1maBI\"}\n"])</script>
2<script>self.__next_f.push([1,"c2:I[5008,[\"/_next/static/chunks/2317sa_4mq8sr.js\",\"/_next/static/chunks/0agl4fg0_1a_y.js\",\"/_next/static/chunks/11lkkyb-gcm2d.js\",\"/_next/static/chunks/0sqa-0011n2kn.js\"],\"default\"]\nc3:I[62878,[\"/_next/static/chunks/0r_wt5r3dc9tp.js\",\"/_next/static/chunks/31pt8a7ru2j-u.js\"],\"default\"]\nc4:I[45825,[\"/_next/static/chunks/0r_wt5r3dc9tp.js\",\"/_next/static/chunks/31pt8a7ru2j-u.js\"],\"default\"]\nc5:I[31490,[\"/_next/static/chunks/2317sa_4mq8sr.js\",\"/_next/static/chunks/0agl4fg0_1a_y.js\",\"/_next/static/chunks/11lkkyb-gcm2d.js\",\"/_next/static/chunks/0sqa-0011n2kn.js\",\"/_next/static/chunks/2cu8-jfr1i4z0.js\"],\"\"]\nc6:\"$Sreact.suspense\"\nc7:I[40588,[\"/_next/static/chunks/2317sa_4mq8sr.js\",\"/_next/static/chunks/0agl4fg0_1a_y.js\",\"/_next/static/chunks/11lkkyb-gcm2d.js\",\"/_next/static/chunks/0sqa-0011n2kn.js\"],\"default\"]\ncf:I[32214,[\"/_next/static/chunks/2317sa_4mq8sr.js\",\"/_next/static/chunks/0agl4fg0_1a_y.js\",\"/_next/static/chunks/11lkkyb-gcm2d.js\",\"/_next/static/chunks/0sqa-0011n2kn.js\"],\"\"]\nd1:I[62895,[\"/_next/static/chunks/0r_wt5r3dc9tp.js\",\"/_next/static/chunks/31pt8a7ru2j-u.js\"],\"OutletBoundary\"]\nd4:I[62895,[\"/_next/static/chunks/0r_wt5r3dc9tp.js\",\"/_next/static/chunks/31pt8a7ru2j-u.js\"],\"ViewportBoundary\"]\nd6:I[62895,[\"/_next/static/chunks/0r_wt5r3dc9tp.js\",\"/_next/static/chunks/31pt8a7ru2j-u.js\"],\"MetadataBoundary\"]\n2:[\"$\",\"symbol\",null,{\"id\":\"accessibility-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"accessibility\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M8 4C8.552 4 9 3.552 9 3C9 2.448 8.552 2 8 2C7.448 2 7 2.448 7 3C7 3.552 7.448 4 8 4Z\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 6C12 6 9.682 7 8 7C6.318 7 4 6 4 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 7H7V11H9Z\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M7 11L6 14\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 11L10 14\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n3:[\"$\",\"symbol\",null,{\"id\":\"airplane-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"airplane\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M15 8 5 14v-4l3-2-3-2V2l10 6Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2 8H1\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M13 8H8\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"2\",\"cy\":\"4\",\"r\":\"1\",\"className\":\"fill-current\"}],[\"$\",\"circle\",null,{\"cx\":\"2\",\"cy\":\"12\",\"r\":\"1\",\"className\":\"fill-current\"}]]}]}]\n4:[\"$\",\"symbol\",null,{\"id\":\"align-centre-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"align-centre\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 2h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2 14h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 6h8\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 10h8\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n5:[\"$\",\"symbol\",null,{\"id\":\"align-left-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"align-left\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 2h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2 6h8\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2 10h6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2 14h10\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n6:[\"$\",\"symbol\",null,{\"id\":\"align-right-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"align-right\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 2h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 6h8\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 10h6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 14h10\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n7:[\"$\",\"symbol\",null,{\"id\":\"all-16\",\"viewBox\":\"0 0 16"])</script>
2<script>self.__next_f.push([1," 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"all\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M6 2H2v4h4V2Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 2h-4v4h4V2Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 10H2v4h4v-4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 10h-4v4h4v-4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\n8:[\"$\",\"symbol\",null,{\"id\":\"angle-down-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"angle-down\",\"children\":[\"$\",\"path\",null,{\"d\":\"m2 5 6 6 6-6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\n9:[\"$\",\"symbol\",null,{\"id\":\"angle-left-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"angle-left\",\"children\":[\"$\",\"path\",null,{\"d\":\"M10 2 4 8l6 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\na:[\"$\",\"symbol\",null,{\"id\":\"angle-right-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"angle-right\",\"children\":[\"$\",\"path\",null,{\"d\":\"m6 2 6 6-6 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\nb:[\"$\",\"symbol\",null,{\"id\":\"angle-up-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"angle-up\",\"children\":[\"$\",\"path\",null,{\"d\":\"m2 11 6-6 6 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\nc:[\"$\",\"symbol\",null,{\"id\":\"arrow-down-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"arrow-down\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M8 14V2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m4 10 4 4 4-4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\nd:[\"$\",\"symbol\",null,{\"id\":\"arrow-left-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"arrow-left\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 8h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 4 2 8l4 4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\ne:[\"$\",\"symbol\",null,{\"id\":\"arrow-right-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"arrow-right\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M14 8H2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m10 12 4-4-4-4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\nf:[\"$\",\"symbol\",null,{\"id\":\"arrow-up-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"arrow-up\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M8 2v12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 6 8 2 4 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n10:[\"$\",\"symbol\",null,{\"id\":\"autolayout-h-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"autolayout / h\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"4\",\"height\":\"12\",\"x\":\"2\",\"y\":\"2\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"4\",\"height\":\"12\",\"x\":\"10\",\"y\":\"2\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"rx\":\"1\"}]]}]}]\n11:[\"$\",\"symbol\",null,{\"id\":\"autolayout-v-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"autolayout / v\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"12\",\"height\":\"4\",\"x\":\"2\",\"y\":\"2\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"12\",\"height\":\"4\",\"x\":\"2\",\"y\":\"10\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"rx\":\"1\"}]]}]}]\n12:[\"$\",\"symbol\",null,{\"id\":\"blog-16\",\"viewBox\":\"0 0 16 16\",\"children\":[[\"$\",\"polygon\",null,{\"className\":\"fill-s1\",\"points\":\"10.667 13.333 5.333 13.333 3 7 8 1 13 7 10.667 13.333\"}],[\"$\",\"rect\",null,{\"x\":\"4\",\"y\":\"13\",\"width\":\"8\",\"height\"
2:\"2\",\"transform\":\"translate(16 28) rotate(180)\"}],[\"$\",\"line\",null,{\"x1\":\"8\",\"y1\":\"1\",\"x2\":\"8\",\"y2\":\"8\"}]]}]\n13:[\"$\",\"symbol\",null,{\"id\":\"bolt-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"bolt\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9 6 8 1l-5 9h4l1 5 5-9H9Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n14:[\"$\",\"symbol\",null,{\"id\":\"book-16\",\"viewBox\":\"0 0 16 16\",\"children\":[[\"$\","])</script>
2<script>self.__next_f.push([1,"\"path\",null,{\"stroke\":\"color(display-p3 .0353 .1804 .1412)\",\"d\":\"M12 14V9H3v4a1 1 0 0 0 1 1h8Zm-1 0h2\",\"className\":\"slc-r sl-r stroke-2\"}],[\"$\",\"path\",null,{\"className\":\"fill-(--icon-fill) stroke-2\",\"stroke\":\"color(display-p3 .0353 .1804 .1412)\",\"d\":\"M13 11V2H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h9Z\"}]]}]\n15:[\"$\",\"symbol\",null,{\"id\":\"bookmark-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"bookmark\",\"children\":[\"$\",\"path\",null,{\"d\":\"M5 2H11V14L8 12L5 14Z\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\n16:[\"$\",\"symbol\",null,{\"id\":\"box-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"box\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4 14a1 1 0 0 1-1-1V6h10v7a1 1 0 0 1-1 1H4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 9h4\",\"className\":\"stroke-current stroke-2\"}],[\"$\",\"path\",null,{\"d\":\"M2.5 6a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-11Z\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n17:[\"$\",\"symbol\",null,{\"id\":\"bulb-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"bulb\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M8 1.159C6 1.159 4 2.492 4 5.159C4 7.825 6 7.825 6 10.492V12H10V10.492C10 7.825 12 7.825 12 5.159C12 2.492 10 1.159 8 1.159Z\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 13C10 14 9 15 8 15C7 15 6 14 6 13C6 12.381 6 12 6 12H10C10 12 10 12.381 10 13Z\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n18:[\"$\",\"symbol\",null,{\"id\":\"calendar-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"calendar\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"12\",\"height\":\"10\",\"x\":\"2\",\"y\":\"3\",\"className\":\"fill-current stroke-current stroke-2 sl-r\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"M3 5h10\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"rect\",null,{\"width\":\"10\",\"height\":\"6\",\"x\":\"3\",\"y\":\"6\",\"className\":\"fill-(--icon-fill)\",\"rx\":\".5\"}]]}]}]\n19:[\"$\",\"symbol\",null,{\"id\":\"caret-down-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"caret-down\",\"children\":[\"$\",\"path\",null,{\"d\":\"m12 6-4 6-4-6h8Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n1a:[\"$\",\"symbol\",null,{\"id\":\"caret-left-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"caret-left\",\"children\":[\"$\",\"path\",null,{\"d\":\"M10 4 4 8l6 4V4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n1b:[\"$\",\"symbol\",null,{\"id\":\"caret-right-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"caret-right\",\"children\":[\"$\",\"path\",null,{\"d\":\"m6 4 6 4-6 4V4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n1c:[\"$\",\"symbol\",null,{\"id\":\"caret-up-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"caret-up\",\"children\":[\"$\",\"path\",null,{\"d\":\"M12 11 8 5l-4 6h8Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n1d:[\"$\",\"symbol\",null,{\"id\":\"category-16\",\"viewBox\":\"0 0 16 16\",\"children\":[[\"$\",\"rect\",null,{\"className\":\"b\",\"x\":\"1\",\"y\":\"6\",\"width\":\"14\",\"height\":\"8\"}],[\"$\",\"polygon\",null,{\"className\":\"b\",\"points\":\"15 6 1 6 1 2 7 2 7.667 3 15 3 15 6\"}]]}]\n1e:[\"$\",\"symbol\",null,{\"id\":\"checkbox-16\",\"viewBox\":\"0 0 16 16\",\"children\":[[\"$\",\"title\",null,{\"children\":\"checkbox\"}],[\"$\",\"polyline\",null,{\"points\":\"3 8 6 11 13 4\"}]]}]\n1f:[\"$\",\"symbol\",null,{\"id\":\"checkmark-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"checkmark\",\"children\":[\"$\",\"path\",null,{\"d\":\"m3 8 3 3 7-7\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\n20:[\"$\",\"symbol\",null,{\"id\":\"clipboard-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"clipboard\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 2h10v12H3z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M7 2h2v1H7z\",\"className\":\"fill-none stroke-current stroke-2 sl-s\"}]]}]}]\n21:[\"$\",\"symbol\",null,{\"id\":\"clipboard-success-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"clipboard-success\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 2h10v12H3z\",\"className\":\"fill-success\"}],[\"$\",\"path\",null,{\"d\":\""])</script>
2<script>self.__next_f.push([1,"M7 2h2v1H7z\",\"className\":\"fill-none stroke-current stroke-2 sl-s\"}],[\"$\",\"path\",null,{\"d\":\"m6 9 1 1 3-3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n22:[\"$\",\"symbol\",null,{\"id\":\"close-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"close\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12 12 4 4\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m12 4-8 8\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\n23:[\"$\",\"symbol\",null,{\"id\":\"cmd-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"cmd\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 14a2 2 0 0 0 2-2V4a2 2 0 1 0-2 2h8a2 2 0 1 0-2-2v8a2 2 0 1 0 2-2H4a2 2 0 1 0 0 4Z\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\n24:[\"$\",\"symbol\",null,{\"id\":\"code-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"code\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"14\",\"height\":\"12\",\"x\":\"1\",\"y\":\"2\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"m5 6 2 2-2 2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 10h2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n25:[\"$\",\"symbol\",null,{\"id\":\"collections-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"collections\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M7 3H3v11h4V3Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10.864 3 7 4.035 9.686 14.06l3.864-1.035L10.864 3Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\n26:[\"$\",\"symbol\",null,{\"id\":\"comment-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"comment\",\"children\":[\"$\",\"path\",null,{\"d\":\"M11 2H5a3 3 0 0 0-3 3v8a1 1 0 0 0 1.6.8l1.333-1a4 4 0 0 1 2.4-.8H11a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n27:[\"$\",\"symbol\",null,{\"id\":\"component-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"component\",\"children\":[[\"$\",\"path\",null,{\"d\":\"m5 5 3-3 3 3-3 3z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m2 8 3-3 3 3-3 3z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m5 11 3-3 3 3-3 3z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m8 8 3-3 3 3-3 3z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\n28:[\"$\",\"symbol\",null,{\"id\":\"component-instance-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"component / instance\",\"children\":[\"$\",\"path\",null,{\"d\":\"M7.293 1.636a1 1 0 0 1 1.414 0l5.657 5.657a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 0 1-1.414 0L1.636 8.707a1 1 0 0 1 0-1.414l5.657-5.657Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n29:[\"$\",\"symbol\",null,{\"id\":\"contact-16\",\"viewBox\":\"0 0 16 16\",\"children\":[[\"$\",\"polyline\",null,{\"className\":\"fill-s1 sw-2\",\"points\":\"2 5.286 1 6 1 15 15 15 15 6 13.999 5.285\"}],[\"$\",\"polygon\",null,{\"className\":\"fill-(--icon-fill)\",\"points\":\"14 7 14 3 2 3 2 7 1 7 8 11 15 7 14 7\"}],[\"$\",\"polyline\",null,{\"className\":\"sw-2\",\"points\":\"1 7 8 11 15 7\"}],[\"$\",\"line\",null,{\"className\":\"sw-2\",\"x1\":\"10.79676\",\"y1\":\"2.99769\",\"x2\":\"8\",\"y2\":\"1\"}],[\"$\",\"line\",null,{\"className\":\"sw-2\",\"x1\":\"8\",\"y1\":\"1\",\"x2\":\"5.20058\",\"y2\":\"2.99958\"}],[\"$\",\"polyline\",null,{\"className\":\"sw-2\",\"points\":\"2 7 2 3 14 3 14 7\"}]]}]\n2a:[\"$\",\"symbol\",null,{\"id\":\"copy-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"copy\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M5 6H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}
2],[\"$\",\"rect\",null,{\"width\":\"8\",\"height\":\"8\",\"x\":\"6\",\"y\":\"2\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"rx\":\"1\"}]]}]}]\n2b:[\"$\",\"symbol\",null,{\"id\":\"copy-alternate-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"copy-alternate\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M5 6H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"rect\",null,{\"width\":\"8\",\"height\":\"8\",\"x\":\""])</script>
2<script>self.__next_f.push([1,"6\",\"y\":\"2\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"rx\":\"1\"}]]}]}]\n2c:[\"$\",\"symbol\",null,{\"id\":\"copy-success-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"copy-success\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 2h10v12H3z\",\"className\":\"fill-success\"}],[\"$\",\"path\",null,{\"d\":\"M7 2h2v1H7z\",\"className\":\"fill-none stroke-current stroke-2 sl-s\"}],[\"$\",\"path\",null,{\"d\":\"m6 9 1 1 3-3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n2d:[\"$\",\"symbol\",null,{\"id\":\"css-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"css\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4 2h8v4l2 2-2 2v4H4v-4L2 8l2-2V2Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M6 2h-.5A1.5 1.5 0 0 0 4 3.5v2.293a.5.5 0 0 1-.146.353l-1.5 1.5a.5.5 0 0 0 0 .708l1.5 1.5a.5.5 0 0 1 .146.353V12.5A1.5 1.5 0 0 0 5.5 14H6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 2h.5A1.5 1.5 0 0 1 12 3.5v2.293a.5.5 0 0 0 .146.353l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 0-.146.353V12.5a1.5 1.5 0 0 1-1.5 1.5H10\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n2e:[\"$\",\"symbol\",null,{\"id\":\"cursor-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"cursor\",\"children\":[\"$\",\"path\",null,{\"d\":\"m3.606 1.988 10.404 6.07-6.069.866-3.468 5.202-.867-12.138Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n2f:[\"$\",\"symbol\",null,{\"id\":\"date-16\",\"viewBox\":\"0 0 16 16\",\"children\":[[\"$\",\"path\",null,{\"className\":\"stroke-currentcolor fill-s1\",\"d\":\"M14,15H2a1,1,0,0,1-1-1V3H15V14A1,1,0,0,1,14,15Z\"}],[\"$\",\"rect\",null,{\"className\":\"fill-current\",\"x\":\"4\",\"y\":\"7\",\"width\":\"2\",\"height\":\"2\",\"rx\":\"1\",\"ry\":\"1\"}],[\"$\",\"rect\",null,{\"className\":\"fill-current\",\"x\":\"7\",\"y\":\"7\",\"width\":\"2\",\"height\":\"2\",\"rx\":\"1\",\"ry\":\"1\"}],[\"$\",\"rect\",null,{\"className\":\"fill-current\",\"x\":\"10\",\"y\":\"7\",\"width\":\"2\",\"height\":\"2\",\"rx\":\"1\",\"ry\":\"1\"}],[\"$\",\"rect\",null,{\"className\":\"fill-current\",\"x\":\"4\",\"y\":\"10\",\"width\":\"2\",\"height\":\"2\",\"rx\":\"1\",\"ry\":\"1\"}],[\"$\",\"rect\",null,{\"className\":\"fill-current\",\"x\":\"7\",\"y\":\"10\",\"width\":\"2\",\"height\":\"2\",\"rx\":\"1\",\"ry\":\"1\"}],[\"$\",\"rect\",null,{\"className\":\"fill-current\",\"x\":\"10\",\"y\":\"10\",\"width\":\"2\",\"height\":\"2\",\"rx\":\"1\",\"ry\":\"1\"}],[\"$\",\"path\",null,{\"className\":\"fill-none stroke-currentcolor\",\"d\":\"M2,1H14a1,1,0,0,1,1,1V3a0,0,0,0,1,0,0H1A0,0,0,0,1,1,3V2A1,1,0,0,1,2,1Z\"}]]}]\n30:[\"$\",\"symbol\",null,{\"id\":\"design-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"design\",\"children\":[[\"$\",\"g\",null,{\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-s\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 12c0-2.76 2.24-5 5-5s5 2.24 5 5\"}],[\"$\",\"path\",null,{\"d\":\"M3 12c0-2.76 2.24-5 5-5s5 2.24 5 5\"}]]}],[\"$\",\"path\",null,{\"d\":\"M2 7h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 6H7v2h2V6Z\",\"className\":\"fill-current stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\",\"className\":\"fill-current stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\",\"className\":\"fill-current stroke-current stroke-2 sl-r\"}]]}]}]\n31:[\"$\",\"symbol\",null,{\"id\":\"download-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"download\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 15h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"g\",null,{\"className\":\"fill-none stroke-current stroke-2 sl-r\",\"children\":[[\"$\",\"path\",null,{\"d\":\"m5 8 3 3 3-3\"}],[\"$\",\"path\",null,{\"d\":\"m5 8 3 3 3-3\"}]]}],[\"$\",\"path\",null,{\"d\":\"M8 1v9\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n32:[\"$\",\"symbol\",null,{\"id\":\"dropdown-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"path\",null,{\"d\":\"M8.27,10.58a.5.5,0,0,1-.54,0l-5.7-7A.5.5,0,0,1,2.3,3h11.4a.5.5,0,0,1,.27.92Z\"}]}]\n33:[\"$\",\"symbol\",null,{\"id\":\"enlarge-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"enlarge\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 11v3h3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 5V2h-3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d"])</script>
2<script>self.__next_f.push([1,"\":\"M5 2H2v3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m14 2-4 4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m6 10-4 4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m2 2 4 4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m10 10 4 4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M11 14h3v-3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n34:[\"$\",\"symbol\",null,{\"id\":\"enter-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"enter\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 8h10V4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 6 2 8l2 2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n35:[\"$\",\"symbol\",null,{\"id\":\"envelope-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"envelope\",\"children\":[[\"$\",\"g\",null,{\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 5.29 1 6v9h14V6l-1-.72\"}],[\"$\",\"path\",null,{\"d\":\"M2 5.29 1 6v9h14V6l-1-.72\"}]]}],[\"$\",\"path\",null,{\"d\":\"M14 7V3H2v4H1l7 4 7-4h-1Z\",\"className\":\"fill-(--icon-fill-bg)\"}],[\"$\",\"path\",null,{\"d\":\"m1 7 7 4 7-4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10.8 3 8 1\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 1 5.2 3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2 7V3h12v4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n36:[\"$\",\"symbol\",null,{\"id\":\"expand-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"expand\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M10 2h4v4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 2H2v4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 14h4v-4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 14H2v-4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n37:[\"$\",\"symbol\",null,{\"id\":\"external-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"external\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"8\",\"height\":\"8\",\"x\":\"3\",\"y\":\"5\",\"className\":\"fill-(--icon-fill)\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"m7 9 7-7\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 2h5v5\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 5H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n38:[\"$\",\"symbol\",null,{\"id\":\"external-1-16\",\"viewBox\":\"0 0 16 16\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M6 10L14 2\",\"className\":\"stroke-current stroke-2 slc-r sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 2L14 2L14 6\",\"className\":\"stroke-current stroke-2 slc-r sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V10\",\"className\":\"stroke-current stroke-2 slc-r sl-r\"}]]}]\n39:[\"$\",\"symbol\",null,{\"id\":\"folder-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"folder\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 6h12v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3 3a1 1 0 0 1 1-1h2l2 1h4a1 1 0 0 1 1 1v2H3V3Z\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n3a:[\"$\",\"symbol\",null,{\"id\":\"font-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"font\",\"children\":[[\"$\",\"path\",null,{\"d\":\"m3 4 .625-2 .535.214a4 4 0 0 0 1.485.286h4.71a4 4 0 0 0 1.485-.286L12.375 2 13 4a2.438 2.438 0 0 0-2.25-1.5H10C9.375 2.5 8 3 8 4c0-1-1.375-1.5-2-1.5h-.75C4.266 2.5 3.378 3.092 3 4Z\",\"className\":\"Vector 35\"}],[\"$\",\"path\",null,{\"d\":\"M8 3v10\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 14h4Z\",\"className\":\"fill-none stroke-current stroke-2 sl-s\"}]]}]}]\n3b:[\"$\",\"symbol\",null,{\"id\":\"font-outline-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"path\",null,{\"className\":\"fill-(--icon-fil"])</script>
2<script>self.__next_f.push([1,"l) stroke-2\",\"stroke\":\"color(display-p3 .0353 .1804 .1412)\",\"d\":\"M4.104 2.385 3.334 2l-.667 4.667s.666-1.334 2.666-1.334h1.334V10c0 1.333-.667 2-1.334 2v2h5.334v-2c-.667 0-1.334-.667-1.334-2V5.333h1.334c2 0 2.666 1.334 2.666 1.334L12.667 2l-.77.385c-.37.185-.78.282-1.193.282H5.296c-.414 0-.822-.097-1.192-.282Z\"}]}]\n3c:[\"$\",\"symbol\",null,{\"id\":\"foundry-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"foundry\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2.662 14C2.294 14 2 13.702 2 13.333V2.667C2 2.298 2.298 2 2.667 2C6.222 2 9.778 2 13.333 2C13.702 2 14 2.298 14 2.667V13.333C14 13.702 13.705 14 13.337 14C11.259 14 4.882 14 2.662 14Z\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M5 6V5H11V6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 5V11\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M7 11H9\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n3d:[\"$\",\"symbol\",null,{\"id\":\"frame-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"frame\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4 4h8v8H4z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M2 4h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 2v12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 2v12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2 12h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n3e:[\"$\",\"symbol\",null,{\"id\":\"home-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"home\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M15 7 8 1 1 7h1v8h4V9h4v6h4V7h1Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"m1 7 7-6 7 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2 6.33V15h4V9h4v6h4V6.33\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 14h4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n3f:[\"$\",\"symbol\",null,{\"id\":\"link-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"link\",\"children\":[\"$\",\"path\",null,{\"d\":\"M13.084 7.337a3.126 3.126 0 1 0-4.42-4.421l-1.77 1.768a3.126 3.126 0 0 0 0 4.421m-3.978-.442a3.126 3.126 0 1 0 4.42 4.421l1.77-1.768a3.126 3.126 0 0 0 0-4.421\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\n40:[\"$\",\"symbol\",null,{\"id\":\"move-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"move\",\"children\":[[\"$\",\"path\",null,{\"d\":\"m6 12 2 2 2-2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 4 8 2 6 4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 6 2 8l2 2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 8h3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3 8h3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 3v3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 10v3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m12 10 2-2-2-2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n41:[\"$\",\"symbol\",null,{\"id\":\"navigation-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"navigation\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M13 4H3\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M13 12H3\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\n42:[\"$\",\"symbol\",null,{\"id\":\"newsletter-16\",\"viewBox\":\"0 0 16 16\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M15 8 5 14v-4l3-2-3-2V2l10 6Z\",\"fill\":\"#EEEAEC\",\"className\":\"stroke-currentcolor\"}],[\"$\",\"path\",null,{\"d\":\"M2 8H1M13 8H8\",\"className\":\"stroke-currentcolor\"}],[\"$\",\"circle\",null,{\"cx\":\"2\",\"cy\":\"4\",\"r\":\"1\",\"className\":\"fill-current\",\"stroke\":\"none\"}],[\"$\",\"circle\",null,{\"cx\":\"2\",\"cy\":\"12\",\"r\":\"1\",\"className\":\"fill-current\",\"stroke\":\"none\"}]]}]\n43:[\"$\",\"symbol\",null,{\"id\":\"note-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"note\",\"children\":[[\"$\",\"g\",null,{\"className\":\"fi"])</script>
2<script>self.__next_f.push([1,"ll-(--icon-fill) stroke-current stroke-2 sl-r\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3.5 14a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H12a1 1 0 0 1 1 1v6l-5 5H3.5Z\"}],[\"$\",\"path\",null,{\"d\":\"M8 14v-4a1 1 0 0 1 1-1h4m-5 5H3.5a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H12a1 1 0 0 1 1 1v6m-5 5 5-5\"}]]}],[\"$\",\"path\",null,{\"d\":\"M10 6H6\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\n44:[\"$\",\"symbol\",null,{\"id\":\"note-pencil-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"note-pencil\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"10.667\",\"height\":\"12\",\"x\":\"2.667\",\"y\":\"2\",\"className\":\"fill-(--icon-fill)\",\"rx\":\".667\"}],[\"$\",\"path\",null,{\"d\":\"M10 10H6\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8.667 2H3.333a.667.667 0 0 0-.666.667v10.666c0 .368.298.667.666.667h9.334a.667.667 0 0 0 .666-.667V6.667\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 2 8.667 5.333v1.334H10l3.333-3.334L12 2Z\",\"className\":\"Vector 33\"}]]}]}]\n45:[\"$\",\"symbol\",null,{\"id\":\"note-plus-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"note-plus\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"10\",\"height\":\"12\",\"x\":\"3\",\"y\":\"2\",\"className\":\"fill-(--icon-fill)\",\"rx\":\".667\"}],[\"$\",\"path\",null,{\"d\":\"M10 6H6\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8.333 14H3.667A.667.667 0 0 1 3 13.333V2.667C3 2.298 3.298 2 3.667 2h8.666c.368 0 .667.298.667.667V8\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M11.5 12.5h3\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M13 11v3\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\n46:[\"$\",\"symbol\",null,{\"id\":\"notepad-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"notepad\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4 14a1 1 0 0 1-1-1V2.667C3 2.298 3.298 2 3.667 2h8.666c.368 0 .667.298.667.667V13c0 .552-.444 1-.996 1H4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 2v2\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 2v2\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 7h2\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 10h4\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\n47:[\"$\",\"symbol\",null,{\"id\":\"palette-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"palette\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 8a6 6 0 1 1 12 0v1.547c0 .25-.203.453-.453.453h-2.214c-.736 0-1.333.597-1.333 1.333v2.214c0 .25-.203.453-.453.453H8a6 6 0 0 1-6-6Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"8\",\"cy\":\"5\",\"r\":\"1\",\"className\":\"fill-current\"}],[\"$\",\"circle\",null,{\"cx\":\"7\",\"cy\":\"10\",\"r\":\"1\",\"className\":\"fill-current\"}],[\"$\",\"circle\",null,{\"cx\":\"5\",\"cy\":\"7\",\"r\":\"1\",\"className\":\"fill-current\"}]]}]}]\n48:[\"$\",\"symbol\",null,{\"id\":\"pen-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"pen\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M11 15H5c0-3-3-6-3-6l6-8 6 8s-3 3-3 6Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 2v7\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"8\",\"cy\":\"9\",\"r\":\"1\",\"className\":\"fill-current stroke-current stroke-1 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 15h8\",\"className\":\"fill-none stroke-current stroke-2 sl-s\"}]]}]}]\n49:[\"$\",\"symbol\",null,{\"id\":\"person-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"person\",\"children\":[\"$\",\"path\",null,{\"d\":\"M9.84 9.7v-.03c.9-.72 1.49-1.94 1.49-3.33v-2c0-1.21 0-2-.67-2.67C10 1 9.33 1 8.67 1c-.6 0-.66.54-1.64.65-1.37.15-2.36 1.37-2.3
26 2.74v1.94c0 1.39.59 2.62 1.49 3.33v.03c-.09 1.21-.93 1.21-2.09 1.57-.62.19-1.14.4-1.56.59-.71.33-1.17 1.04-1.17 1.82V14c0 .55.45 1 1 1h11.33c.55 0 1-.45 1-1v-.32c0-.78-.45-1.49-1.17-1.82-.42-.19-.95-.4-1.56-.59-1.16-.36-2.01-.36-2.1-1.57Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n4a:[\"$\",\"symbol\",null,{\"id\":\"play-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"play\",\"children\":[\"$\",\"path\",null,{\"d\":\"M3 2.741a1"])</script>
2<script>self.__next_f.push([1," 1 0 0 1 1.504-.864l9.015 5.26a1 1 0 0 1 0 1.727l-9.015 5.259A1 1 0 0 1 3 13.259V2.741Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n4b:[\"$\",\"symbol\",null,{\"id\":\"plus-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"plus\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 8h10\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 3v10\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n4c:[\"$\",\"symbol\",null,{\"id\":\"publication-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"publication\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 14C2.448 14 2 13.552 2 13V3C2 2.448 2.448 2 3 2H13C13.552 2 14 2.448 14 3V13C14 13.552 13.552 14 13 14Z\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M5 6H11\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 9H10\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n4d:[\"$\",\"symbol\",null,{\"id\":\"puzzle-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"puzzle\",\"children\":[\"$\",\"path\",null,{\"d\":\"M2 2.5a.5.5 0 0 1 .5-.5h8.889a.5.5 0 0 1 .5.5v2.645c0 .382.424.642.793.544C13.604 5.444 15 5.489 15 8c0 2.512-1.396 2.556-2.318 2.311-.37-.098-.793.162-.793.544V13.5a.5.5 0 0 1-.5.5H2.5a.5.5 0 0 1-.5-.5v-2.732c0-.362.38-.618.734-.55.92.177 2.377.092 2.377-2.218S3.654 5.605 2.734 5.782C2.38 5.85 2 5.594 2 5.232V2.5Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n4e:[\"$\",\"symbol\",null,{\"id\":\"rectangle-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"rectangle\",\"children\":[\"$\",\"rect\",null,{\"width\":\"10\",\"height\":\"10\",\"x\":\"3\",\"y\":\"3\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"rx\":\"1\"}]}]}]\n4f:[\"$\",\"symbol\",null,{\"id\":\"save-16\",\"viewBox\":\"0 0 16 16\",\"children\":[[\"$\",\"line\",null,{\"x1\":\"2\",\"y1\":\"15\",\"x2\":\"14\",\"y2\":\"15\"}],[\"$\",\"polyline\",null,{\"className\":\"fill-s1\",\"points\":\"5 8 8 11 11 8\"}],[\"$\",\"line\",null,{\"x1\":\"8\",\"y1\":\"1\",\"x2\":\"8\",\"y2\":\"10\"}]]}]\n50:[\"$\",\"symbol\",null,{\"id\":\"saved-16\",\"viewBox\":\"0 0 16 16\",\"children\":[[\"$\",\"line\",null,{\"x1\":\"2\",\"y1\":\"15\",\"x2\":\"14\",\"y2\":\"15\"}],[\"$\",\"polyline\",null,{\"points\":\"3 8 6 11 13 4\"}]]}]\n51:[\"$\",\"symbol\",null,{\"id\":\"search-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"search\",\"children\":[[\"$\",\"path\",null,{\"d\":\"m11 11 2 2\",\"className\":\"fill-none stroke-current stroke-4 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"7\",\"cy\":\"7\",\"r\":\"5\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\n52:[\"$\",\"symbol\",null,{\"id\":\"search-small-16\",\"viewBox\":\"0 0 16 16\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M11 11L14 14\",\"className\":\"sw-4\"}],[\"$\",\"circle\",null,{\"cx\":\"7\",\"cy\":\"7\",\"r\":\"5\",\"className\":\"fill-(--icon-fill) sw-2\"}]]}]\n53:[\"$\",\"symbol\",null,{\"id\":\"settings-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"settings\",\"children\":[[\"$\",\"circle\",null,{\"cx\":\"5\",\"cy\":\"4\",\"r\":\"2\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"11\",\"cy\":\"12\",\"r\":\"2\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M5 6v9\",\"className\":\"fill-none stroke-current stroke-2\"}],[\"$\",\"path\",null,{\"d\":\"M11 1v9\",\"className\":\"fill-none stroke-current stroke-2\"}]]}]}]\n54:[\"$\",\"symbol\",null,{\"id\":\"shadow-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"shadow\",\"children\":[[\"$\",\"circle\",null,{\"cx\":\"8\",\"cy\":\"6\",\"r\":\"4\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3.101 12a6.977 6.977 0 0 0 4.9 2 6.977 6.977 0 0 0 4.898-2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n55:[\"$\",\"symbol\",null,{\"id\":\"shapes-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"shapes\",\"children\":[[\"$\",\"circle\",null,{\"cx\":\"4\",\"cy\":\"12\",\"r\":\"2\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"12\",\"cy\":\"4\",\"r\":\"2\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 10h-4v4h4v-4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null"])</script>
2<script>self.__next_f.push([1,",{\"d\":\"M6 2H2v4h4V2Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\n56:[\"$\",\"symbol\",null,{\"id\":\"share-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"share\",\"children\":[\"$\",\"g\",null,{\"className\":\"Group 2\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"10\",\"height\":\"6\",\"x\":\"3\",\"y\":\"7\",\"className\":\"fill-(--icon-fill)\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"M5.143 7H3.5a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.5-.5h-1.643\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 3v6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 4 8 2 6 4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]}]\n57:[\"$\",\"symbol\",null,{\"id\":\"sidebar-left-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"sidebar-left\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3.5 14A1.5 1.5 0 0 1 2 12.5v-9A1.5 1.5 0 0 1 3.5 2h1A1.5 1.5 0 0 1 6 3.5v9A1.5 1.5 0 0 1 4.5 14h-1Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"rect\",null,{\"width\":\"12\",\"height\":\"12\",\"x\":\"2\",\"y\":\"2\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"M6 3v10\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n58:[\"$\",\"symbol\",null,{\"id\":\"sidebar-right-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"sidebar-right\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M11.5 14a1.5 1.5 0 0 1-1.5-1.5v-9A1.5 1.5 0 0 1 11.5 2h1A1.5 1.5 0 0 1 14 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-1Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"rect\",null,{\"width\":\"12\",\"height\":\"12\",\"x\":\"2\",\"y\":\"2\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"M10 3v10\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n59:[\"$\",\"symbol\",null,{\"id\":\"star-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"star\",\"children\":[\"$\",\"path\",null,{\"d\":\"M7.407 2.154a.667.667 0 0 1 1.186 0l1.36 2.647c.097.188.277.32.486.353l2.937.476a.667.667 0 0 1 .367 1.128l-2.097 2.11a.666.666 0 0 0-.186.572l.456 2.94a.667.667 0 0 1-.96.698l-2.655-1.342a.667.667 0 0 0-.602 0l-2.655 1.342a.667.667 0 0 1-.96-.697l.456-2.94a.667.667 0 0 0-.186-.572L2.257 6.758a.667.667 0 0 1 .367-1.128l2.937-.476a.667.667 0 0 0 .486-.353l1.36-2.647Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n5a:[\"$\",\"symbol\",null,{\"id\":\"tab-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"tab\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M13 8H2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 12L13 8L9 4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 4V12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n5b:[\"$\",\"symbol\",null,{\"id\":\"time-16\",\"viewBox\":\"0 0 16 16\",\"children\":[[\"$\",\"circle\",null,{\"className\":\"fill-s1\",\"cx\":\"8\",\"cy\":\"9\",\"r\":\"5.5\"}],[\"$\",\"line\",null,{\"x1\":\"2\",\"y1\":\"3.5\",\"x2\":\"4\",\"y2\":\"1.5\"}],[\"$\",\"line\",null,{\"x1\":\"14\",\"y1\":\"3.5\",\"x2\":\"12\",\"y2\":\"1.5\"}],[\"$\",\"polyline\",null,{\"points\":\"8 7 8 9 10 9\"}]]}]\n5c:[\"$\",\"symbol\",null,{\"id\":\"timer-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"timer\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M8 14.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m2 3.5 2-2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m14 3.5-2-2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 7v2h2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n5d:[\"$\",\"symbol\",null,{\"id\":\"type-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"type\",\"children\":[[\"$\",\"path\",null,{\"d\":\"m8 3 1 1v6H5l3-7Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"g\",null,{\"className\":\"mask-type-16\",\"children\":[[\"$\",\"mask\",null,{\"id\":\"type-16-a\",\"width\":\"8\",\"height\"
2:\"14\",\"x\":\"1\",\"y\":\"1\",\"maskUnits\":\"userSpaceOnUse\",\"style\":{\"maskType\":\"alpha\"},\"children\":[\"$\",\"path\",null,{\"d\":\"M1 1h8v14H1z\"}]}],[\"$\",\"g\",null,{\"mask\":\"url(#type-16-a)\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4 "])</script>
2<script>self.__next_f.push([1,"11h5\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2 16 7.76 2 14 16\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]]}],[\"$\",\"path\",null,{\"d\":\"M11 2h1v12h-1\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M13 2h-1v12h1\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n5e:[\"$\",\"symbol\",null,{\"id\":\"vector-square-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"vector-square\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4 13a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v8c0 .552-.444 1-.996 1H4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 2H2v2h2V2Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 12H2v2h2v-2Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 2h-2v2h2V2Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 12h-2v2h2v-2Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\n5f:[\"$\",\"symbol\",null,{\"id\":\"views-16\",\"viewBox\":\"0 0 16 16\",\"children\":[\"$\",\"g\",null,{\"className\":\"views\",\"children\":[\"$\",\"g\",null,{\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 4h4v10H2z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 6h4v8H6z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 2h4v12h-4z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]}]\n"])</script>
2<script>self.__next_f.push([1,"60:[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"aria-hidden\":\"true\",\"style\":{\"position\":\"absolute\",\"width\":0,\"height\":0,\"overflow\":\"hidden\",\"display\":\"none\"},\"children\":[\"$\",\"defs\",null,{\"children\":[[\"$\",\"symbol\",null,{\"id\":\"accessibility-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"accessibility\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-1 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M16 10s-2.318 1-4 1-4-1-4-1\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M13 11h-2v4h2v-4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m11 15-1 3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m13 15 1 3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}],[\"$\",\"symbol\",null,{\"id\":\"airplane-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"airplane\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M22 12 8 21v-6l4-3-4-3V3l14 9Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M22 12 8 21v-6l4-3-4-3V3l14 9Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M21 12h-9\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3 8h1\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3 16h1\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2 12h4\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}],[\"$\",\"symbol\",null,{\"id\":\"align-centre-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"align-centre\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 3h18\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3 21h18\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 9h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 15h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}],[\"$\",\"symbol\",null,{\"id\":\"align-left-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"align-left\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 3h18\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3 9h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3 15h9\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3 21h15\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}],[\"$\",\"symbol\",null,{\"id\":\"align-right-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"align-right\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 3h18\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 9h12\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 15h9\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 21h15\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}],[\"$\",\"symbol\",null,{\"id\":\"all-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"all\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M7 3H3v4h4V3Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 3h-4v4h4V3Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 10h-4v4h4v-4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 17h-4v4h4v-4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M7 17H3v4h4v-4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M7 10H3v4h4v-4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M21 3h-4v4h4V3Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M21 17h-4v4h4v-4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M21 10h-4v4h4v-4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}],[\"$\",\"symbol\",null,{\"id\":\"angle-down-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"angle-down\",\"children\":[\"$\",\"path\",null,{\"d\":\"m4 8 8 8 8-8\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}],[\"$\",\"symbol\",null,{\"id\":\"angle-left-24\",\"viewBox\":\"0 0 24 24\",\"children\":\"$L6c\"}],\"$L6d\",\"$L6e\",\"$L6f\",\"$L70\",\"$L71\",\"$L72\",\"$L73\",\"$L74\",\"$L75\",\"$L76\",\"$L77\",\"$L78\",\"$L79\",\"$L7a\",\"$L7b\",\"$L7c\",\"$L7d\",\"$L7e\",\"$L7f\",\"$L80\",\"$L81\",\"$L82\",\"$L83\",\"$L84\",\"$L85\",\"$L86\",\"$L87\",\"$L88\",\"$L89\",\"$L8a\",\"$L8b\",\"$L8c\",\"$L8d\",\"$L8e\",\"$L8f\",\"$L90\",\"$L91\",\"$L92\",\"$L93\",\"$L94\",\"$L95\",\"$L96\",\"$L97\",\"$L98\",\"$L99\",\"$L9a\",\"$L9b\",\"$L9c\",\"$L9d\",\"$L9e\",\"$L9f\",\"$La0\",\"$La1\",\"$La2\",\"$La3\",\"$La4\",\"$La5\",\"$La6\",\"$La7\",\"$La8\",\"$La9\",\"$Laa\",\"$Lab\",\"$Lac\",\"$Lad\",\"$Lae\",\"$Laf\",\"$Lb0\",\"$Lb1\",\"$Lb2\",\"$Lb3\",\"$Lb4\",\"$Lb5\",\"$Lb6\",\"$Lb7\",\"$Lb8\",\"$Lb9\",\"$Lba\"]}]}]\n"])</script>
2<script>self.__next_f.push([1,"bb:Ta9a,"])</script>
2<script>self.__next_f.push([1,"m19.92 6.88-.128-.61c-.114-.548-.373-1.066-.965-1.264-.19-.063-.405-.09-.55-.222-.146-.13-.189-.334-.222-.523-.063-.347-.121-.694-.185-1.04-.055-.297-.099-.631-.242-.904-.187-.367-.575-.58-.96-.723-.198-.07-.4-.129-.604-.177-.964-.242-1.976-.33-2.967-.381a26.207 26.207 0 0 0-3.569.056c-.883.077-1.813.169-2.653.46-.306.105-.623.233-.856.458-.286.277-.38.705-.17 1.05.148.245.4.418.667.533.347.147.71.26 1.083.335 1.037.218 2.11.303 3.17.34 1.175.045 2.35.008 3.52-.11.289-.03.577-.066.865-.108.34-.05.557-.471.457-.765-.12-.35-.441-.487-.805-.434l-.16.023-.039.005-.369.042c-.254.026-.51.047-.765.064a27.06 27.06 0 0 1-3.41.006 22.59 22.59 0 0 1-1.116-.099l-.11-.013-.024-.003-.114-.016A12.615 12.615 0 0 1 8 2.742a.106.106 0 0 1-.059-.035.097.097 0 0 1 0-.125.106.106 0 0 1 .06-.035h.004a11.865 11.865 0 0 1 .807-.135h.002c.127-.008.254-.03.38-.044a25.44 25.44 0 0 1 3.304-.11 23.378 23.378 0 0 1 1.946.132l.132.016.088.012c.258.037.514.08.77.133.378.078.863.104 1.031.497.054.125.078.264.108.395l.037.167a.058.058 0 0 1 .003.01l.267 1.183a.206.206 0 0 1-.036.17.224.224 0 0 1-.156.09h-.002l-.055.008-.053.006a31.726 31.726 0 0 1-1.525.154 37.255 37.255 0 0 1-3.05.117 37.61 37.61 0 0 1-4.531-.279l-.123-.016a27.776 27.776 0 0 1-.28-.038c-.314-.045-.626-.1-.939-.148-.378-.06-.74-.03-1.082.148-.281.146-.509.37-.652.642-.148.29-.192.606-.258.917-.066.312-.168.647-.13.967.084.69.592 1.252 1.323 1.377a40.263 40.263 0 0 0 10.94.345.49.49 0 0 1 .38.126.442.442 0 0 1 .136.36l-.07.64a471003.246 471003.246 0 0 1-.981 9.08c-.04.376-.045.763-.12 1.135-.119.583-.535.942-1.141 1.073a8.34 8.34 0 0 1-1.694.188c-.632.003-1.263-.023-1.895-.02-.675.003-1.5-.056-2.022-.533-.457-.419-.52-1.075-.583-1.643l-.247-2.253-.457-4.176-.297-2.701-.014-.134c-.036-.322-.276-.638-.654-.622-.324.014-.692.276-.654.622l.22 2.003.453 4.143.388 3.532c.024.225.048.452.074.677.142 1.232 1.133 1.897 2.359 2.084.716.11 1.45.132 2.177.143.932.014 1.873.048 2.79-.112 1.357-.237 2.377-1.099 2.522-2.436l.125-1.158.413-3.831.45-4.173.207-1.913a.434.434 0 0 1 .12-.254.474.474 0 0 1 .256-.136c.389-.072.76-.195 1.036-.476.44-.447.527-1.03.372-1.618Zm-14.61.413c.007-.003-.004.045-.009.068 0-.034.001-.064.01-.068Zm.039.277c.003-.002.012.01.022.024-.015-.013-.024-.023-.023-.024Zm.037.046c.02.035.013.022 0 0Zm.074.058h.002c0 .002.003.004.005.006a.048.048 0 0 0-.007-.006Zm13.034-.086c-.14.126-.35.184-.557.214-2.33.328-4.693.495-7.048.421-1.686-.055-3.354-.232-5.022-.456-.164-.022-.34-.05-.453-.165-.212-.216-.108-.651-.053-.912.05-.24.147-.558.446-.592.468-.053 1.01.135 1.472.201.557.081 1.115.146 1.676.194 2.392.207 4.825.175 7.206-.128.435-.055.867-.12 1.298-.193.384-.066.81-.188 1.042.19.159.257.18.602.156.893a.488.488 0 0 1-.163.333Z"])</script>
2<script>self.__next_f.push([1,"61:[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"aria-hidden\":\"true\",\"style\":{\"position\":\"absolute\",\"width\":0,\"height\":0,\"overflow\":\"hidden\",\"display\":\"none\"},\"children\":[\"$\",\"defs\",null,{\"children\":[[\"$\",\"symbol\",null,{\"id\":\"logo-32\",\"viewBox\":\"0 0 32 32\",\"fill\":\"none\",\"children\":[[\"$\",\"title\",null,{\"children\":\"iamsteve\"}],[\"$\",\"path\",null,{\"d\":\"M17.5 30.5C16.65 26.02 17.91 20.71 19.5 18.5C22.47 18.4 25.62 17.68 28.06 15.5C30.04 13.49 30.43 10.58 30.5 8.5L24.5 7.5L22.5 3.5L21.5 4.5L19.5 1.5L17.83 2.41C17.83 2.41 15 0.56 11.5 2.5C8.41 4.37 7 7 7.5 11.5C8 16 5.079 18.921 1.5 22.5C1.5 22.5 7 23 10 24.5C13 26 17.5 30.5 17.5 30.5Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M17.5 30.5C16.65 26.02 17.91 20.71 19.5 18.5C22.47 18.4 25.62 17.68 28.06 15.5C30.04 13.49 30.43 10.58 30.5 8.5L24.5 7.5L22.5 3.5L21.5 4.5L19.5 1.5L17.83 2.41C17.83 2.41 15 0.56 11.5 2.5C8.40996 4.37 6.72996 7.69 7.49996 11.5C7.99996 13.95 9.75996 16.5 12.5 16.5C16.5 16.5 18.25 12.36 18.5 7.5\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M1.5 22.5C4.41 20.2 7.87 16.23 7.5 11.5\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}],[\"$\",\"symbol\",null,{\"id\":\"logo-24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"children\":[[\"$\",\"title\",null,{\"children\":\"iamsteve\"}],[\"$\",\"path\",null,{\"d\":\"M13.1379 23C12.4931 19.6014 13.449 15.5731 14.6552 13.8966C16.9083 13.8207 19.2979 13.2745 21.149 11.6207C22.651 10.0959 22.9469 7.88828 23 6.31034L18.4483 5.55172L16.931 2.51724L16.1724 3.27586L14.6552 1L13.3883 1.69034C13.3883 1.69034 11.2414 0.286897 8.58621 1.75862C6.24207 3.17724 5.17241 5.17241 5.55173 8.58621C5.93104 12 3.7151 14.2159 1 16.931C1 16.931 5.17242 17.3103 7.44828 18.4483C9.72414 19.5862 13.1379 23 13.1379 23Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M13.3701 23C12.7201 19.6 13.7501 15.8 14.9601 14.13C17.2101 14.05 19.2901 13.29 21.1501 11.64C22.6501 10.12 22.9501 8.37 23.0001 6.8L18.1901 5.82L16.8201 2.38L16.1301 3.07L14.7501 1.01L13.3901 1.7C13.3901 1.7 10.7301 0.610002 8.07014 2.08C5.73014 3.5 4.54014 6.34 5.13014 9.23C5.51014 11.09 7.19014 12.7 9.27014 12.7C11.8501 12.7 13.3801 9.25 13.3801 5.14\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M1 16.81C3.21 15.06 5.32 12.27 5.04 8.68\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}],[\"$\",\"symbol\",null,{\"id\":\"bmc-24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"children\":[\"$\",\"g\",null,{\"children\":[[\"$\",\"path\",null,{\"fill\":\"light-dark(#0D0C22, #fff)\",\"d\":\"m18.319 6.118-.016-.01-.037-.01a.09.09 0 0 0 .053.02Z\"}],[\"$\",\"path\",null,{\"fill\":\"light-dark(#0D0C22, #fff)\",\"d\":\"m18.326 6.115-.007-.001v.004a.014.014 0 0 0 .007-.003Z\"}],[\"$\",\"path\",null,{\"fill\":\"light-dark(#0D0C22, #fff)\",\"d\":\"M18.319 6.118h.003v-.002l-.003.002ZM18.536 7.686l.027-.014.01-.005.009-.01a.154.154 0 0 0-.046.03ZM18.365 6.152l-.026-.024-.018-.009c.01.016.025.028.044.033ZM11.783 21.403a.135.135 0 0 0-.053.04l.016-.01.037-.03ZM15.605 20.689c0-.023-.011-.018-.009.061 0-.006.003-.013.004-.019l.005-.042ZM15.209 21.403a.136.136 0 0 0-.053.04l.016-.01.037-.03ZM9.091 21.573a.117.117 0 0 0-.056-.025l.045.022.011.003ZM8.486 21.022a.164.164 0 0 0-.022-.066.53.53 0 0 1 .021.065v.001Z\"}
2],[\"$\",\"path\",null,{\"fill\":\"#FD0\",\"d\":\"M12.554 11.163c-.831.338-1.775.722-2.998.722-.512-.001-1.02-.068-1.514-.199l.846 8.253c.03.345.196.667.464.901.267.235.618.365.983.365 0 0 1.199.06 1.6.06.43 0 1.721-.06 1.721-.06.364 0 .715-.13.983-.365.268-.234.433-.556.463-.9l.906-9.12a4.034 4.034 0 0 0-1.274-.22c-.796 0-1.438.261-2.18.563Z\"}],[\"$\",\"path\",null,{\"fill\":\"light-dark(#0D0C22, #fff)\",\"d\":\"m5.424 7.642.015.013.009.005a.143.143 0 0 0-.024-.018Z\"}],[\"$\",\"path\",null,{\"fill\":\"light-dark(#0D0C22, #fff)\",\"d\":\"$bb\"}]]}]}],\"$Lbc\",\"$Lbd\",\"$Lbe\",\"$Lbf\",\"$Lc0\",\"$Lc1\"]}]}]\n"])</script>
2<script>self.__next_f.push([1,"62:[\"$\",\"div\",null,{\"className\":\"grid layout relative gap-x-4 xl:gap-x-6 2xl:gap-x-8 max-w-[1728px] mx-auto items-baseline\",\"children\":[[\"$\",\"$Lc2\",null,{}],[\"$\",\"$Lc3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"grid grid-cols-subgrid col-container flex flex-col relative gap-8 pb-7.5\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"col-content text-7xl font-variation-extrabold font-display text-heading\",\"children\":\"404\"}],[\"$\",\"p\",null,{\"className\":\"col-content mb-2 text-ui-body max-w-prose\",\"children\":[\"Thereâs a chance youâre here because a redirect went wrong or I guess youâve made a typo, no problem. If you believe the page should be here, please\",\" \",[\"$\",\"$Lc5\",null,{\"href\":\"/contact\",\"className\":\"text-underline\",\"children\":\"contact me\"}],\".\"]}],[\"$\",\"$Lc5\",null,{\"href\":\"/\",\"theme\":\"dandelion\",\"className\":\"select-none font-ui text-base/tight lowercase text-center button-dandelion col-content max-w-max self-start flex-auto\",\"children\":\"Back to homepage\"}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$c6\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"col-start-container-start col-end-container-end h-[600px]\"}],\"children\":[\"$\",\"aside\",null,{\"className\":\"grid grid-flow-dense grid-cols-2 sm:grid-cols-[repeat(16,minmax(min-content,1fr))] grid-rows-[repeat(auto-fill,minmax(min-content,1fr))] gap-px col-start-container-start col-end-container-end shadow-placed rounded-lg lg:rounded-xl overflow-hidden\",\"children\":[[\"$\",\"section\",null,{\"className\":\"col-span-full lg:col-span-8 xl:col-span-7 row-span-10 bg-surface py-12 px-8 sm:px-12 sm:py-12 md:px-[5vmax] xl:py-16 xl:px-24 flex flex-col items-center gap-8\",\"children\":[[\"$\",\"header\",null,{\"className\":\"flex flex-col gap-2 items-center\",\"children\":[[\"$\",\"svg\",null,{\"width\":96,\"height\":96,\"fill\":\"none\",\"viewBox\":\"0 0 96 96\",\"className\":\"mb-2 illo-cool\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"rect\",null,{\"x\":\"4\",\"y\":\"16\",\"width\":\"88\",\"height\":\"64\",\"rx\":\"8\",\"className\":\"fill-surface-100\"}],[\"$\",\"path\",null,{\"d\":\"M5 76L36.8202 44.9198C43.0367 38.8479 52.9633 38.8479 59.1798 44.9198L91 76L89.3431 77.6569C87.8429 79.1571 85.808 80 83.6863 80H12.8063C10.9897 80 9.22719 79.3818 7.80869 78.247L5 76Z\",\"className\":\"fill-subtle\"}],[\"$\",\"path\",null,{\"d\":\"M10 80H86.5L90.375 77.5L48 40L5.625 77.5L10 80Z\",\"className\":\"fill-surface\"}],[\"$\",\"path\",null,{\"d\":\"M88.3906 18.2209L60.219 51.5459C53.8274 59.1066 42.1726 59.1066 35.781 51.5459L7.62366 18.2377\",\"className\":\"stroke-subtle\",\"strokeWidth\":\"8\"}],[\"$\",\"path\",null,{\"d\":\"M6.625 78L42.6275 45.3693C45.6762 42.6061 50.3238 42.6061 53.3725 45.3693L89.375 78\",\"className\":\"stroke-muted\",\"strokeWidth\":\"2\"}],[\"$\",\"path\",null,{\"d\":\"M11 16H85.5L89.375 18.5L59.8376 50.9823C53.4896 57.9631 42.5104 57.9631 36.1624 50.9823L6.625 18.5L11 16Z\",\"className\":\"fill-foreground\"}],[\"$\",\"path\",null,{\"d\":\"M86.1426 16.0547L68.6875 35.25L56.8782 48.2367C52.1172 53.4723 43.8828 53.4723 39.1218 48.2367L9.85742 16.0547H86.1426Z\",\"className\":\"fill-foreground\"}],[\"$\",\"path\",null,{\"d\":\"M6.625 18.5L36.1624 50.9823C42.5104 57.9631 53.4896 57.9631 59.8376 50.9823L89.375 18.5\",\"className\":\"stroke-border\",\"strokeWidth\":\"2\"}],[\"$\",\"rect\",null,{\"x\":\"4\",\"y\":\"16\",\"width\":\"88\",\"height\":\"64\",\"rx\":\"8\",\"className\":\"stroke-border\",\"strokeWidth\":\"2\"}]]}],[\"$\",\"h2\",null,{\"className\":\"text-3xl sm:text-5xl font-display font-variation-bold lowercase text-heading text-center\",\"children\":\"Get the articles\"}],[\"$\",\"p\",null,{\"className\":\"m-0 text-base text-ui-body text-balance text-center max-w-[40ch]\",\"children\":\"Join the RSS alternative and I'll notify you when the latest posts go out. Unsubscribe at anytime.\"}]]}],[\"$\",\"$Lc7\",null,{\"children\":\"$Lc8\"}],[\"$\",\"p\",null,{\"className\":\"text-ui-body text-balance text-sm text-center max-w-[55ch]\",\"children\":\"You will receive two emails to begin with. One to confirm your subscription and then your welcome emailâthanks in advance!\"}]]}],\"$Lc9\",\"$Lca\",\"$Lcb\",\"$Lcc\"]}]}],\"$Lcd\",\"$Lce\"]}]\n"])</script>
2<script>self.__next_f.push([1,"63:[\"$\",\"$Lcf\",null,{\"src\":\"https://api.iamsteve.me/latest.js\"}]\n"])</script>
2<script>self.__next_f.push([1,"64:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"main\",null,{\"className\":\"grid grid-cols-subgrid col-start-container-start col-end-container-end gap-y-8 sm:gap-y-12 md:gap-y-18 md:frame md:frame-24 md:frame-outset-top-sm lg:frame-outset-top-md 2xl:frame-40 2xl:frame-outset-top md:pt-12 2xl:pt-10 pb-18 sm:mb-18\",\"id\":\"content\",\"children\":[\"$\",\"$Lc3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"grid grid-cols-subgrid col-container flex flex-col relative gap-8 pb-7.5\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"col-content text-7xl font-variation-extrabold font-display text-heading\",\"children\":\"404\"}],[\"$\",\"p\",null,{\"className\":\"col-content mb-2 text-ui-body max-w-prose\",\"children\":[\"Thereâs a chance youâre here because a redirect went wrong or I guess youâve made a typo, no problem. If you believe the page should be here, please\",\" \",[\"$\",\"$Lc5\",null,{\"href\":\"/contact\",\"className\":\"text-underline\",\"children\":\"contact me\"}],\".\"]}],[\"$\",\"$Lc5\",null,{\"href\":\"/\",\"theme\":\"dandelion\",\"className\":\"select-none font-ui text-base/tight lowercase text-center button-dandelion col-content max-w-max self-start flex-auto\",\"children\":\"Back to homepage\"}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]\n"])</script>
2<script>self.__next_f.push([1,"65:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$Lc3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n66:[\"$\",\"$1\",\"c\",{\"children\":[\"$Ld0\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/2cu8-jfr1i4z0.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Ld1\",null,{\"children\":[\"$\",\"$c6\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@d2\"}]}]]}]\nd3:[]\n67:\"$Wd3\"\n68:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Ld4\",null,{\"children\":\"$Ld5\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Ld6\",null,{\"children\":[\"$\",\"$c6\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Ld7\"}]}]}],null]}]\n6a:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0u6v7a6-c9no0.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n6b:[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0nchaizb147_e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script>
2<script>self.__next_f.push([1,"da:I[59802,[\"/_next/static/chunks/2317sa_4mq8sr.js\",\"/_next/static/chunks/0agl4fg0_1a_y.js\",\"/_next/static/chunks/11lkkyb-gcm2d.js\",\"/_next/static/chunks/0sqa-0011n2kn.js\",\"/_next/static/chunks/2cu8-jfr1i4z0.js\"],\"default\"]\n6c:[\"$\",\"g\",null,{\"className\":\"angle-left\",\"children\":[\"$\",\"path\",null,{\"d\":\"m16 4-8 8 8 8\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]\n6d:[\"$\",\"symbol\",null,{\"id\":\"angle-right-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"angle-right\",\"children\":[\"$\",\"path\",null,{\"d\":\"m8 4 8 8-8 8\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\n6e:[\"$\",\"symbol\",null,{\"id\":\"angle-up-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"angle-up\",\"children\":[\"$\",\"path\",null,{\"d\":\"m4 16 8-8 8 8\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\n6f:[\"$\",\"symbol\",null,{\"id\":\"arrow-down-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"arrow-down\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12 22V2\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m6 16 6 6 6-6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n70:[\"$\",\"symbol\",null,{\"id\":\"arrow-left-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"arrow-left\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 12h20\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m8 6-6 6 6 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n71:[\"$\",\"symbol\",null,{\"id\":\"arrow-right-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"arrow-right\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M22 12H2\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m16 18 6-6-6-6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n72:[\"$\",\"symbol\",null,{\"id\":\"arrow-up-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"arrow-up\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12 2v20\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m18 8-6-6-6 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n73:[\"$\",\"symbol\",null,{\"id\":\"bee-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"bee\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M10 6c0-3-1-4-4-4\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 6c0-3 1-4 4-4\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z\",\"className\":\"fill-current stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 21a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z\",\"className\":\"fill-dandelion-100 dark:fill-fern-900 stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M7 12c3.871 1.341 6.058 1.325 10 0\",\"className\":\"path\"}],[\"$\",\"path\",null,{\"d\":\"M7 16c3.871 1.341 6.058 1.325 10 0\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M22 17.667A8.667 8.667 0 0 0 13.333 9H12v1.333A8.667 8.667 0 0 0 20.667 19c.736 0 1.333-.597 1.333-1.333Z\",\"className\":\"fill-dandelion-0 dark:fill-fern-900 stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2 17.667A8.667 8.667 0 0 1 10.667 9H12v1.333A8.667 8.667 0 0 1 3.333 19 1.333 1.333 0 0 1 2 17.667Z\",\"className\":\"fill-dandelion-0 dark:fill-fern-900 stroke-current stroke-2 sl-r\"}]]}]}]\n74:[\"$\",\"symbol\",null,{\"id\":\"bolt-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"bolt\",\"children\":[\"$\",\"path\",null,{\"d\":\"m13 10-1-8-6 12h5l1 8 6-12h-5Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n75:[\"$\",\"symbol\",null,{\"id\":\"book-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"book\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M16 21h3\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M19 17V3H6.5A1.5 1.5 0 0 0 5 4.5v11A1.5 1.5 0 0 0 6.5 17H19Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M5 15v4.5A1.5 1.5 0 0 0 6.5 21H18v-4\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\"}]]}]}]\n76:[\"$\",\"symbol\",null,{\"id\":\"bookmark-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"bookmark\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"18\",\"height\"
2:\"11\",\"x\":\"3\",\"y\":\"9"])</script>
2<script>self.__next_f.push([1,"\",\"className\":\"fill-(--icon-fill)\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 9h10\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M18 9h3\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14 4h4v12l-2-2-2 2V4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\n77:[\"$\",\"symbol\",null,{\"id\":\"box-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"box\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4 9h16v9.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5V9Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"rect\",null,{\"width\":\"18\",\"height\":\"4\",\"x\":\"3\",\"y\":\"5\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"M9 13h6\",\"className\":\"stroke-current stroke-2\"}]]}]}]\n78:[\"$\",\"symbol\",null,{\"id\":\"bulb-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"bulb\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12 2C9 2 6 4 6 8s3 4 3 8v2h6v-2c0-4 3-4 3-8s-3-6-6-6Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2\"}],[\"$\",\"path\",null,{\"d\":\"M9 15h6\",\"className\":\"stroke-current stroke-2\"}],[\"$\",\"path\",null,{\"d\":\"M15 19a3 3 0 1 1-6 0v-1h6v1Z\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2\"}]]}]}]\nd8:T169f,"])</script>
2<script>self.__next_f.push([1,"M20.2147 6.41468L20.0827 5.74859C19.9642 5.15096 19.6952 4.58625 19.0818 4.37025C18.8851 4.30114 18.662 4.27146 18.5113 4.12841C18.3605 3.98539 18.3159 3.76325 18.2811 3.55725C18.2165 3.17917 18.1558 2.80076 18.0896 2.42332C18.0324 2.09883 17.9872 1.73431 17.8384 1.43662C17.6447 1.03691 17.2427 0.803144 16.843 0.648488C16.6382 0.572029 16.4291 0.50735 16.2169 0.454765C15.2183 0.1913 14.1683 0.0944382 13.1409 0.039227C11.9078 -0.0288182 10.6713 -0.00831713 9.4411 0.100573C8.52544 0.183874 7.56101 0.284611 6.69088 0.601349C6.37285 0.71726 6.04513 0.856417 5.80331 1.10213C5.50658 1.40401 5.40972 1.87089 5.62636 2.24735C5.78038 2.51469 6.04126 2.70357 6.31797 2.82853C6.67838 2.98953 7.05478 3.11204 7.44092 3.19403C8.51608 3.43166 9.62967 3.52496 10.7281 3.56469C11.9455 3.61381 13.1649 3.57399 14.3765 3.44553C14.6762 3.4126 14.9753 3.3731 15.2738 3.32705C15.6254 3.27312 15.8511 2.81335 15.7475 2.49305C15.6235 2.11014 15.2903 1.96162 14.9135 2.01942C14.858 2.02812 14.8027 2.03619 14.7472 2.04426L14.7072 2.05008C14.5795 2.06623 14.4519 2.08128 14.3242 2.09528C14.0606 2.12369 13.7962 2.14694 13.5313 2.16503C12.9378 2.20635 12.3428 2.2254 11.748 2.22637C11.1636 2.22637 10.5789 2.2099 9.9958 2.17148C9.72976 2.15405 9.46435 2.13187 9.1996 2.10496C9.07917 2.09237 8.95906 2.07914 8.83896 2.06428L8.72465 2.04976L8.6998 2.04621L8.5813 2.0291C8.33915 1.9926 8.09699 1.95064 7.85742 1.89994C7.83325 1.89457 7.81162 1.88114 7.79612 1.86182C7.78062 1.8425 7.77217 1.81848 7.77217 1.79372C7.77217 1.76896 7.78062 1.74493 7.79612 1.72562C7.81162 1.70631 7.83325 1.69286 7.85742 1.68749H7.86194C8.06955 1.64326 8.27876 1.60548 8.48863 1.57255C8.5586 1.56157 8.62876 1.55081 8.69915 1.54026H8.70108C8.83249 1.53155 8.96455 1.50798 9.09531 1.49248C10.233 1.37414 11.3775 1.33379 12.5207 1.37172C13.0757 1.38787 13.6304 1.42048 14.1828 1.47666C14.3016 1.48893 14.4198 1.50184 14.538 1.51637C14.5832 1.52186 14.6287 1.52832 14.6742 1.53381L14.7659 1.54704C15.0333 1.58687 15.2992 1.63519 15.5637 1.69202C15.9557 1.77725 16.4591 1.80502 16.6334 2.23444C16.689 2.37069 16.7142 2.52212 16.7448 2.66514L16.7839 2.84757C16.7849 2.85084 16.7857 2.8542 16.7862 2.85758C16.8785 3.28808 16.9709 3.71857 17.0635 4.14907C17.0703 4.18088 17.0704 4.21374 17.064 4.2456C17.0575 4.27748 17.0445 4.30765 17.0259 4.3343C17.0072 4.36093 16.9832 4.38342 16.9555 4.40039C16.9278 4.41735 16.8968 4.4284 16.8646 4.43289H16.862L16.8055 4.44064L16.7497 4.44805C16.5727 4.47109 16.3956 4.49262 16.2182 4.51264C15.8689 4.55246 15.519 4.58689 15.1686 4.61596C14.4722 4.67385 13.7745 4.71184 13.0754 4.72993C12.7191 4.73939 12.363 4.74382 12.007 4.74316C10.5899 4.74206 9.17402 4.65968 7.76637 4.49648C7.61397 4.47841 7.46158 4.45903 7.30917 4.43934C7.42735 4.45452 7.22329 4.42771 7.18197 4.42191C7.0851 4.40834 6.98824 4.39425 6.89138 4.37962C6.56624 4.33085 6.24306 4.2708 5.91856 4.21816C5.52627 4.1536 5.1511 4.18589 4.79626 4.37962C4.50499 4.539 4.26925 4.78341 4.12049 5.08025C3.96744 5.39666 3.92192 5.74116 3.85347 6.08116C3.78502 6.42114 3.67847 6.78695 3.71883 7.13598C3.80568 7.88925 4.33229 8.50141 5.08975 8.63831C5.80233 8.76745 6.51879 8.87206 7.23717 8.96118C10.0592 9.3068 12.9102 9.34814 15.741 9.08452C15.9715 9.06299 16.2017 9.03954 16.4316 9.01413C16.5034 9.00625 16.5761 9.01451 16.6443 9.03834C16.7125 9.06217 16.7745 9.10095 16.8257 9.15184C16.877 9.20273 16.9162 9.26445 16.9405 9.33245C16.9649 9.40048 16.9737 9.47308 16.9663 9.54493L16.8946 10.2417C16.7502 11.6496 16.6058 13.0575 16.4613 14.4652C16.3107 15.9435 16.159 17.4218 16.0064 18.8998C15.9634 19.3162 15.9203 19.7324 15.8773 20.1484C15.8359 20.5582 15.8301 20.9808 15.7523 21.3857C15.6296 22.0224 15.1986 22.4134 14.5696 22.5564C13.9934 22.6876 13.4048 22.7565 12.8138 22.7617C12.1587 22.7653 11.504 22.7362 10.8488 22.7398C10.1495 22.7437 9.29292 22.6792 8.75308 22.1586C8.27876 21.7015 8.21322 20.9856 8.14865 20.3666C8.06256 19.5471 7.97721 18.7279 7.8926 17.9086L7.41799 13.3532L7.11094 10.4057C7.10576 10.357 7.1006 10.3089 7.09576 10.2598C7.05895 9.90817 6.81001 9.56399 6.41772 9.58174C6.08195 9.59659 5.70031 9.88202 5.7397 10.2598L5.96731 12.445L6.43806 16.9652C6.57217 18.2492 6.70595 19.5333 6.8394 20.8177C6.86524 21.0637 6.88944 21.3105 6.91656 21.5565C7.06412 22.901 8.09085 23.6255 9.36233 23.8294C10.1049 23.949 10.8656 23.9735 11.6192 23.9857C12.5853 24.0013 13.561 24.0385 14.5112 23.8634C15.9192 23.605 16.9757 22.6649 17.1264 21.2065C17.1695 20.7854 17.2126 20.3643 17.2556 19.9431C17.3987 18.55 17.5417 17.1568 17.6844 15.7635L18.1513 11.211L18.3653 9.12456C18.376 9.02109 18.4197 8.92382 18.4899 8.84713C18.5602 8.77043 18.6532 8.71838 18.7554 8.69868C19.158 8.62022 19.5428 8.48622 19.8292 8.17982C20.2851 7.69197 20.3759 7.05591 20.2147 6.41468ZM5.06909 6.86477C5.07522 6.86186 5.06392 6.91448 5.05908 6.93902C5.05811 6.90189 5.06005 6.86895 5.06909 6.86477ZM5.10816 7.16697C5.11138 7.1647 5.12107 7.17763 5.13108 7.19313C5.1159 7.17891 5.10622 7.16827 5.10783 7.16697H5.10816ZM5.14658 7.21766C5.16046 7.24123 5.16789 7.25609 5.14658 7.21766V7.21766ZM5.22374 7.28029H5.22568C5.22568 7.28257 5.22923 7.28482 5.23052 7.28709C5.22838 7.28459 5.226 7.28232 5.22342 7.28029H5.22374ZM18.7366 7.18666C18.592 7.3242 18.374 7.38814 18.1587 7.42011C15.7436 7.7785 13.2933 7.95995 10.8517 7.87988C9.10435 7.82015 7.37537 7.62609 5.64542 7.38168C5.47591 7.35779 5.29219 7.32679 5.17563 7.20184C4.95608 6.96614 5.06392 6.49152 5.12107 6.20675C5.17338 5.94586 5.27347 5.59814 5.58375 5.561C6.06806 5.50418 6.63049 5.70855 7.10965 5.7812C7.68651 5.86923 8.26553 5.93973 8.84669 5.99268C11.327 6.2187 13.849 6.1835 16.3183 5.85289C16.7684 5.79239 17.2169 5.72211 17.6637 5.64205C18.0618 5.57068 18.5032 5.4367 18.7437 5.849C18.9087 6.12991 18.9307 6.50573 18.9052 6.82311C18.8973 6.96139 18.8369 7.09145 18.7363 7.18666H18.7366Z"])</script>
2<script>self.__next_f.push([1,"79:[\"$\",\"symbol\",null,{\"id\":\"buy-coffee-24\",\"viewBox\":\"0 0 24 24\",\"children\":[[\"$\",\"g\",null,{\"clipPath\":\"url(#buy-coffee-24-clip0)\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M18.5546 5.58282L18.5381 5.57314L18.5 5.56152C18.5153 5.57445 18.5345 5.58196 18.5546 5.58282Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M18.7948 7.29739L18.7764 7.30255L18.7948 7.29739Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M18.5617 5.58018C18.5593 5.57988 18.557 5.57934 18.5548 5.57855C18.5547 5.58007 18.5547 5.58161 18.5548 5.58313C18.5573 5.58279 18.5597 5.58178 18.5617 5.58018Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M18.5552 5.58302H18.5576V5.58148L18.5552 5.58302Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M18.7803 7.29427L18.808 7.27847L18.8184 7.27266L18.8277 7.26266C18.8101 7.27024 18.7941 7.28096 18.7803 7.29427Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M18.6027 5.62028L18.5755 5.59444L18.5571 5.58444C18.567 5.60189 18.5834 5.61477 18.6027 5.62028Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M11.7789 22.2583C11.7572 22.2677 11.7382 22.2823 11.7236 22.3009L11.7407 22.29C11.7524 22.2793 11.7688 22.2667 11.7789 22.2583Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M15.7414 21.4786C15.7414 21.4542 15.7295 21.4587 15.7324 21.5457C15.7324 21.5388 15.7353 21.5317 15.7366 21.5249C15.7382 21.5094 15.7395 21.4942 15.7414 21.4786Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M15.3306 22.2583C15.3089 22.2677 15.29 22.2823 15.2754 22.3009L15.2925 22.29C15.3041 22.2793 15.3206 22.2667 15.3306 22.2583Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M8.98829 22.4437C8.97183 22.4294 8.9517 22.42 8.93018 22.4164C8.94761 22.4249 8.96504 22.4333 8.97666 22.4397L8.98829 22.4437Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M8.36033 21.8423C8.35776 21.8169 8.34996 21.7923 8.3374 21.77C8.3463 21.7931 8.35373 21.8169 8.35968 21.8409L8.36033 21.8423Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M12.5783 11.0868C11.7163 11.4559 10.738 11.8743 9.47003 11.8743C8.93963 11.8733 8.41178 11.8005 7.90088 11.658L8.7778 20.6614C8.80884 21.0376 8.98027 21.3885 9.25805 21.6443C9.53582 21.9 9.89963 22.0419 10.2772 22.0419C10.2772 22.0419 11.5206 22.1064 11.9355 22.1064C12.382 22.1064 13.721 22.0419 13.721 22.0419C14.0985 22.0419 14.4622 21.8998 14.7399 21.6441C15.0177 21.3883 15.189 21.0376 15.2201 20.6614L16.1593 10.7123C15.7396 10.5689 15.316 10.4737 14.8384 10.4737C14.0125 10.4734 13.3471 10.7578 12.5783 11.0868Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M5.18652 7.24561L5.20137 7.25951L5.21106 7.26534C5.2036 7.25792 5.19538 7.2513 5.18652 7.24561Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"$d8\",\"className\":\"fill-current\"}]]}],\"$Ld9\"]}]\n"])</script>
2<script>self.__next_f.push([1,"7a:[\"$\",\"symbol\",null,{\"id\":\"calendar-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"calendar\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"20\",\"height\":\"16\",\"x\":\"2\",\"y\":\"4\",\"className\":\"fill-current stroke-current stroke-2 sl-r\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"18\",\"height\":\"12\",\"x\":\"3\",\"y\":\"7\",\"className\":\"fill-(--icon-fill)\",\"rx\":\".5\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"5\",\"y\":\"15\",\"className\":\"fill-current\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"5\",\"y\":\"12\",\"className\":\"fill-current\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"8\",\"y\":\"15\",\"className\":\"fill-current\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"8\",\"y\":\"12\",\"className\":\"fill-current\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"8\",\"y\":\"9\",\"className\":\"fill-current\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"11\",\"y\":\"15\",\"className\":\"fill-current\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"14\",\"y\":\"15\",\"className\":\"fill-current\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"11\",\"y\":\"12\",\"className\":\"fill-current\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"11\",\"y\":\"9\",\"className\":\"fill-current\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"14\",\"y\":\"12\",\"className\":\"fill-current\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"17\",\"y\":\"12\",\"className\":\"fill-current\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"14\",\"y\":\"9\",\"className\":\"fill-current\",\"rx\":\"1\"}],[\"$\",\"rect\",null,{\"width\":\"2\",\"height\":\"2\",\"x\":\"17\",\"y\":\"9\",\"className\":\"fill-current\",\"rx\":\"1\"}]]}]}]\n"])</script>
2<script>self.__next_f.push([1,"7b:[\"$\",\"symbol\",null,{\"id\":\"caret-down-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"caret-down\",\"children\":[\"$\",\"path\",null,{\"d\":\"m17 9-5 8-5-8h10Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n7c:[\"$\",\"symbol\",null,{\"id\":\"caret-left-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"caret-left\",\"children\":[\"$\",\"path\",null,{\"d\":\"m15 7-8 5 8 5V7Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n7d:[\"$\",\"symbol\",null,{\"id\":\"caret-right-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"caret-right\",\"children\":[\"$\",\"path\",null,{\"d\":\"m9 7 8 5-8 5V7Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n7e:[\"$\",\"symbol\",null,{\"id\":\"caret-up-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"caret-up\",\"children\":[\"$\",\"path\",null,{\"d\":\"m17 15-5-8-5 8h10Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n7f:[\"$\",\"symbol\",null,{\"id\":\"checkmark-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"checkmark\",\"children\":[\"$\",\"path\",null,{\"d\":\"m4 13 5 4L20 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\n80:[\"$\",\"symbol\",null,{\"id\":\"checkmark-underline-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"checkmark-underline\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 22.5h18\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m4 13 5 4L20 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n81:[\"$\",\"symbol\",null,{\"id\":\"clipboard-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"clipboard\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M6.496 21A1.497 1.497 0 0 1 5 19.5V5a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14.5c0 .828-.669 1.5-1.497 1.5H6.496Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 5h8v1H8z\",\"className\":\"fill-current stroke-current stroke-2 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"12\",\"cy\":\"4\",\"r\":\"2\",\"className\":\"stroke-current stroke-2 sl-r fill-(--icon-fill)\"}]]}]}]\n82:[\"$\",\"symbol\",null,{\"id\":\"clipboard-success-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"clipboard-success\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M6.496 21A1.497 1.497 0 0 1 5 19.5V5a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14.5c0 .828-.669 1.5-1.497 1.5H6.496Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 5h8v1H8z\",\"className\":\"fill-current stroke-current stroke-2 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"12\",\"cy\":\"4\",\"r\":\"2\",\"className\":\"stroke-current stroke-2 sl-r fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"m15 11-4 4-2-2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n83:[\"$\",\"symbol\",null,{\"id\":\"clock-reverse-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"clock-reverse\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M3 9s1.988-2.32 2.727-3.192c.176-.208.382-.436.587-.615C9.1 2.753 13.09 2.237 16.5 4.206a9 9 0 0 1-9 15.588\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m15 15-3-3V8\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3 5v4h4\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\n84:[\"$\",\"symbol\",null,{\"id\":\"close-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"close\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M19 19 5 5\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M19 5 5 19\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\n85:[\"$\",\"symbol\",null,{\"id\":\"cmd-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"cmd\",\"children\":[\"$\",\"path\",null,{\"d\":\"M6 21a3 3 0 0 0 3-3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 0 6Z\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\n86:[\"$\",\"symbol\",null,{\"id\":\"code-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"code\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3.993 20A.994.994 0 0 1 3 19V5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v14c0 .552-.442 1-.995 1H3.993Z\",\"className\":\"fill-(--icon-fil"])</script>
2<script>self.__next_f.push([1,"l) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m7 12 2 2-2 2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 16h3\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\n87:[\"$\",\"symbol\",null,{\"id\":\"collections-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"collections\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M8 6H3v15h5V6Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m17.812 4.005-4.83 1.294 4.209 15.706 4.83-1.294-4.21-15.706Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M13 3H8v18h5V3Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\n88:[\"$\",\"symbol\",null,{\"id\":\"comment-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"comment\",\"children\":[\"$\",\"path\",null,{\"d\":\"M16.5 3h-9A4.5 4.5 0 0 0 3 7.5v12c0 1.236 1.411 1.942 2.4 1.2l2-1.5A6 6 0 0 1 11 18h5.5a4.5 4.5 0 0 0 4.5-4.5v-6A4.5 4.5 0 0 0 16.5 3Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n89:[\"$\",\"symbol\",null,{\"id\":\"component-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"component\",\"children\":[[\"$\",\"path\",null,{\"d\":\"m14.632 12 3.684-3.684L22 12l-3.684 3.684z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8.316 18.316 12 14.632l3.684 3.684L12 22z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8.316 5.684 12 2l3.684 3.684L12 9.368z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m2 12 3.684-3.684L9.368 12l-3.684 3.684z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\n8a:[\"$\",\"symbol\",null,{\"id\":\"copy-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"copy\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M8 9H4.5A1.5 1.5 0 0 0 3 10.5v9A1.5 1.5 0 0 0 4.5 21h10a1.5 1.5 0 0 0 1.5-1.5V15\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\"}],[\"$\",\"rect\",null,{\"width\":\"13\",\"height\":\"12\",\"x\":\"8\",\"y\":\"3\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"rx\":\"1.5\"}]]}]}]\n8b:[\"$\",\"symbol\",null,{\"id\":\"css-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"css\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M6 2h12v6.667L21 12l-3 3.333V22H6v-6.667L3 12l3-3.333V2Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M9 2H7.417a1.5 1.5 0 0 0-1.5 1.5v4.979a.5.5 0 0 1-.124.33L3.288 11.67a.5.5 0 0 0 0 .658l2.505 2.863a.5.5 0 0 1 .124.33V20.5a1.5 1.5 0 0 0 1.5 1.5H9\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M15 2h1.583a1.5 1.5 0 0 1 1.5 1.5v4.979a.5.5 0 0 0 .124.33l2.505 2.862a.5.5 0 0 1 0 .658l-2.505 2.863a.5.5 0 0 0-.124.33V20.5a1.5 1.5 0 0 1-1.5 1.5H15\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n8c:[\"$\",\"symbol\",null,{\"id\":\"cursor-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"cursor\",\"children\":[\"$\",\"path\",null,{\"d\":\"m4 4 18 6-9 3-3 9L4 4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\n8d:[\"$\",\"symbol\",null,{\"id\":\"design-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"design\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4 15c0-4.416 3.584-8 8-8s8 3.584 8 8\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M20 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 7h16\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 7a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z\",\"className\":\"fill-current stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 5H2v4h4V5Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M22 5h-4v4h4V5Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\n8e:[\"$\",\"symbol\",null,{\"id\":\"download-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"stroke\":\"color(display-p3 .0353 .1804 .1412)\",\"d\":\"M3 22.5h1"])</script>
2<script>self.__next_f.push([1,"8m-13.5-9L12 18l4.5-4.5M12 3v13.5\",\"className\":\"slc-r sl-r stroke-2\"}]}]\n8f:[\"$\",\"symbol\",null,{\"id\":\"enlarge-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"enlarge\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3 18v3h3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M21 6V3h-3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 3H3v3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m21 3-6 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m9 15-6 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m3 3 6 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m15 15 6 6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M18 21h3v-3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n90:[\"$\",\"symbol\",null,{\"id\":\"enter-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"enter\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4.5 12h15V6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m6 9-3 3 3 3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n91:[\"$\",\"symbol\",null,{\"id\":\"envelope-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"envelope\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M21 10v11H3V10l9 6 9-6Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M5 4h14v6h2l-9 6-9-6h2V4Z\",\"className\":\"fill-(--icon-fill-bg)\"}],[\"$\",\"path\",null,{\"d\":\"M19 8.222 21 10v11H3V10l2-1.778\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M14.25 4 12 2 9.75 4\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m3 10 9 6 9-6\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M19 11V4H5v7\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n92:[\"$\",\"symbol\",null,{\"id\":\"external-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"external\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"13\",\"height\":\"13\",\"x\":\"4\",\"y\":\"7\",\"className\":\"fill-(--icon-fill)\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"m12 12 8-8\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M15 4h5v5\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9.333 7H5.5A1.5 1.5 0 0 0 4 8.5v10A1.5 1.5 0 0 0 5.5 20h10a1.5 1.5 0 0 0 1.5-1.5v-3.833\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n93:[\"$\",\"symbol\",null,{\"id\":\"folder-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"folder\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M20 19.003A.997.997 0 0 1 19 20H5a1 1 0 0 1-1-1V5.5A1.5 1.5 0 0 1 5.5 4H8l1 1h9.5c.828 0 1.5.67 1.5 1.498v12.505Z\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M2.05 9.545A.5.5 0 0 1 2.548 9h18.905a.5.5 0 0 1 .497.545l-.826 9.09A1.5 1.5 0 0 1 19.63 20H4.37a1.5 1.5 0 0 1-1.494-1.364l-.826-9.09Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\n94:[\"$\",\"symbol\",null,{\"id\":\"font-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"font\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M12 5v15\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 21h6Z\",\"className\":\"fill-none stroke-current stroke-2 sl-s\"}],[\"$\",\"path\",null,{\"d\":\"m4 7 1-4 1.155.578A4 4 0 0 0 7.945 4h8.11a4 4 0 0 0 1.79-.422L19 3l1 4-.088-.265A4 4 0 0 0 16.116 4H15c-1 0-2 1-2 3h-2c0-2-1-3-2-3H7.884a4 4 0 0 0-3.796 2.735L4 7Z\",\"className\":\"Vector 35\"}]]}]}]\n95:[\"$\",\"symbol\",null,{\"id\":\"font-outline-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"font-outline\",\"children\":[\"$\",\"path\",null,{\"d\":\"M6.155 3.578 5 3l-1 7s1-2 4-2h2v7c0 2-1 3-2 3v3h8v-3c-1 0-2-1-2-3V8h2c3 0 4 2 4 2l-1-7-1.155.578a4 4 0 0 1-1.79.422h-8.11a4 4 0 0 1-1.79-.422Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-s\"}]}]}]\n96:[\"$\",\"symbol\",null,{\"id\":\"foundry-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"foundry\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3.993 21A.994.994 0 0 1 3 20V4a1 1"])</script>
2<script>self.__next_f.push([1," 0 0 1 1-1h16a1 1 0 0 1 1 1v16c0 .552-.442 1-.995 1H3.993Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 9V7h8v2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 7v9\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M11 17h2\",\"className\":\"fill-none stroke-current stroke-2 sl-s\"}]]}]}]\n97:[\"$\",\"symbol\",null,{\"id\":\"frame-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"frame\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M6 6h12v12H6z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M3 6h18\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 3v18\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M18 3v18\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3 18h18\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\n98:[\"$\",\"symbol\",null,{\"id\":\"home-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"home\",\"children\":[[\"$\",\"path\",null,{\"d\":\"m12 3-8 7v11h5v-8h6v8h5V10l-8-7Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"m2 12 10-9 10 9\",\"className\":\"fill-none stroke-current stroke-2 sl-s\"}],[\"$\",\"path\",null,{\"d\":\"M4 11v10h5v-7.93h6V21h5V11\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 20h6\",\"className\":\"stroke-current stroke-2 sl-s\"}]]}]}]\n99:[\"$\",\"symbol\",null,{\"id\":\"link-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"link\",\"children\":[\"$\",\"path\",null,{\"d\":\"m18.364 13.207 1.768-1.768a5 5 0 1 0-7.071-7.07l-2.829 2.828a5 5 0 0 0 0 7.07 6.81 6.81 0 0 0 1.633 1.197m-6.229-3.671L3.868 13.56a5 5 0 0 0 7.071 7.07l2.829-2.828a5 5 0 0 0 0-7.07 6.796 6.796 0 0 0-1.633-1.197\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]}]}]\n9a:[\"$\",\"symbol\",null,{\"id\":\"move-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"move\",\"children\":[[\"$\",\"path\",null,{\"d\":\"m9 18 3 3 3-3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m15 6-3-3-3 3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m6 9-3 3 3 3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M15 12h4.5\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4.5 12H9\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 4.5V9\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 15v4.5\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m18 15 3-3-3-3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\n9b:[\"$\",\"symbol\",null,{\"id\":\"navigation-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"navigation\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M21 5H3\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M19 12H5\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M21 19H3\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\n9c:[\"$\",\"symbol\",null,{\"id\":\"note-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"note\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M7.707 3.293A1 1 0 0 1 8.414 3H19a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7.414a1 1 0 0 1 .293-.707l3.414-3.414Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 13h8\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 9h4\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 17h8\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 3v3a2 2 0 0 1-2 2H4\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\n9d:[\"$\",\"symbol\",null,{\"id\":\"note-pencil-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"note-pencil\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"16\",\"height\"
2:\"18\",\"x\":\"4\",\"y\":\"3\",\"className\":\"fill-(--icon-fill)\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"M13 3H5a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V10\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 17h8\",\"className\":\"st"])</script>
2<script>self.__next_f.push([1,"roke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 14h8\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m18 3-5 5v2h2l5-5-2-2Z\",\"className\":\"Vector 33\"}]]}]}]\n9e:[\"$\",\"symbol\",null,{\"id\":\"note-plus-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"note-plus\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"16\",\"height\":\"18\",\"x\":\"4\",\"y\":\"3\",\"className\":\"fill-(--icon-fill)\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"M13 21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v10\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 7h3\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 11h8\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M15 18h4\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M17 16v4\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\n9f:[\"$\",\"symbol\",null,{\"id\":\"notepad-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"notepad\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M6.496 21A1.497 1.497 0 0 1 5 19.5V5a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14.5c0 .828-.669 1.5-1.497 1.5H6.496Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 2v4\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M15 2v4\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 16h6\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 12h6\",\"className\":\"stroke-current stroke-2 sl-r\"}]]}]}]\na0:[\"$\",\"symbol\",null,{\"id\":\"palette-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"palette\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10v1.32a.68.68 0 0 1-.68.68h-4.653A2.667 2.667 0 0 0 14 16.667v4.654a.68.68 0 0 1-.68.679H12C6.477 22 2 17.523 2 12Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"12\",\"cy\":\"6\",\"r\":\"1\",\"className\":\"fill-current stroke-current stroke-1\"}],[\"$\",\"circle\",null,{\"cx\":\"8\",\"cy\":\"8\",\"r\":\"1\",\"className\":\"fill-current stroke-current stroke-1\"}],[\"$\",\"circle\",null,{\"cx\":\"6\",\"cy\":\"12\",\"r\":\"1\",\"className\":\"fill-current stroke-current stroke-1\"}],[\"$\",\"circle\",null,{\"cx\":\"8\",\"cy\":\"16\",\"r\":\"1\",\"className\":\"fill-current stroke-current stroke-1\"}]]}]}]\na1:[\"$\",\"symbol\",null,{\"id\":\"pen-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"pen\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M16 22H8c0-3-4-7-4-7l8-13 8 13s-4 4-4 7Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 2v9\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"12\",\"cy\":\"14\",\"r\":\"2\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M7 22h10\",\"className\":\"stroke-current stroke-2 sl-s\"}]]}]}]\na2:[\"$\",\"symbol\",null,{\"id\":\"person-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"person\",\"children\":[\"$\",\"path\",null,{\"d\":\"M14.478 14.186V13.8c1.215-.926 2.012-1.813 2.012-3.6V7.5c0-1.556 0-2.777-.905-3.639C14.84 3.151 13.79 3 12.898 3c-.81 0-.898.836-2.215.836-1.833 0-3.186 1.864-3.186 3.625V10.2c0 1.787.796 2.687 2.012 3.6v.373c-.122 1.556-1.256 1.556-2.823 2.018a18.32 18.32 0 0 0-2.106.759C3.62 17.374 3 18.287 3 19.29V21h18v-1.697c0-1.003-.608-1.916-1.58-2.34a19.11 19.11 0 0 0-2.106-.759c-1.567-.463-2.715-.463-2.836-2.018Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\na3:[\"$\",\"symbol\",null,{\"id\":\"play-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"play\",\"children\":[\"$\",\"path\",null,{\"d\":\"M5 3.7a1 1 0 0 1 1.486-.875l14.94 8.3a1 1 0 0 1 0 1.75l-14.94 8.3A1 1 0 0 1 5 20.3V3.7Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\na4:[\"$\",\"symbol\",null,{\"id\":\"plus-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"plus\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4.5 12h15\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 4.5v15\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\na5:[\"$\",\"symbol\",null,{\"id\":\"publication-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",nu"])</script>
2<script>self.__next_f.push([1,"ll,{\"className\":\"publication\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4.5 21A1.5 1.5 0 0 1 3 19.5v-15A1.5 1.5 0 0 1 4.5 3h15A1.5 1.5 0 0 1 21 4.5v15a1.5 1.5 0 0 1-1.5 1.5h-15Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M13.5 12a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M6 8h4\",\"className\":\"stroke-current stroke-2\"}],[\"$\",\"path\",null,{\"d\":\"M6 12h4\",\"className\":\"stroke-current stroke-2\"}],[\"$\",\"path\",null,{\"d\":\"M6 16h12\",\"className\":\"stroke-current stroke-2\"}]]}]}]\na6:[\"$\",\"symbol\",null,{\"id\":\"puzzle-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"puzzle\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 5.5A1.5 1.5 0 0 1 5.5 4h11A1.5 1.5 0 0 1 18 5.5V9s4-2 4 3-4 3-4 3v3.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 18.5V15s4 1.5 4-3-4-3-4-3V5.5Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\na7:[\"$\",\"symbol\",null,{\"id\":\"rectangle-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"rectangle\",\"children\":[\"$\",\"rect\",null,{\"width\":\"16\",\"height\":\"16\",\"x\":\"4\",\"y\":\"4\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"rx\":\"1.5\"}]}]}]\na8:[\"$\",\"symbol\",null,{\"id\":\"search-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"search\",\"children\":[[\"$\",\"path\",null,{\"d\":\"m19 19 1 1\",\"className\":\"stroke-current stroke-4 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m17 17 1 1\",\"className\":\"stroke-current stroke-4 sl-s\"}],[\"$\",\"path\",null,{\"d\":\"M10.5 18a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\na9:[\"$\",\"symbol\",null,{\"id\":\"settings-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"settings\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M8 9v12\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"8\",\"cy\":\"6\",\"r\":\"3\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M16 3v12\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"16\",\"cy\":\"18\",\"r\":\"3\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\naa:[\"$\",\"symbol\",null,{\"id\":\"shadow-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"shadow\",\"children\":[[\"$\",\"circle\",null,{\"cx\":\"12\",\"cy\":\"10\",\"r\":\"6\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M18.983 19A10.955 10.955 0 0 1 12 21.5c-2.651 0-5.083-.938-6.983-2.5\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\nab:[\"$\",\"symbol\",null,{\"id\":\"shapes-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"shapes\",\"children\":[[\"$\",\"circle\",null,{\"cx\":\"17.5\",\"cy\":\"17.5\",\"r\":\"3.5\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 14H3v7h7v-7Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 10h8l-4-7-4 7Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\nac:[\"$\",\"symbol\",null,{\"id\":\"share-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"share\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"14\",\"height\":\"11\",\"x\":\"5\",\"y\":\"10\",\"className\":\"fill-(--icon-fill)\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"M8 10H6.5A1.5 1.5 0 0 0 5 11.5v8A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5v-8a1.5 1.5 0 0 0-1.5-1.5H16\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 3v11\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"m15 6-3-3-3 3\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\nad:[\"$\",\"symbol\",null,{\"id\":\"sidebar-bottom-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"sidebar-bottom\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4.5 20A1.5 1.5 0 0 1 3 18.5v-3A1.5 1.5 0 0 1 4.5 14h15a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-15Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z\",\"className\":\"fill-(--icon-fill"])</script>
2<script>self.__next_f.push([1,"-bg) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3 14h18\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\nae:[\"$\",\"symbol\",null,{\"id\":\"sidebar-bottom-closed-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"sidebar-bottom-closed\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M3 14h18\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\naf:[\"$\",\"symbol\",null,{\"id\":\"sidebar-left-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"sidebar-left\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h3A1.5 1.5 0 0 1 9 5.5v13A1.5 1.5 0 0 1 7.5 20h-3Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 4v15\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\nb0:[\"$\",\"symbol\",null,{\"id\":\"sidebar-left-closed-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"sidebar-left-closed\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M9 4v15\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\nb1:[\"$\",\"symbol\",null,{\"id\":\"sidebar-right-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"sidebar-right\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M16.5 20a1.5 1.5 0 0 1-1.5-1.5v-13A1.5 1.5 0 0 1 16.5 4h3A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-3Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M15 4v15\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\nb2:[\"$\",\"symbol\",null,{\"id\":\"sidebar-right-closed-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"stroke\":\"color(display-p3 .0353 .1804 .1412)\",\"d\":\"M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15ZM15 4v15\",\"className\":\"slc-r sl-r stroke-2\"}]}]\nb3:[\"$\",\"symbol\",null,{\"id\":\"square-info-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"square-info\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3.993 21A.994.994 0 0 1 3 20V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16c0 .552-.442 1-.995 1H3.993Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 11h2v6\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M10 17h4\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"circle\",null,{\"cx\":\"11.5\",\"cy\":\"7.5\",\"r\":\".5\",\"className\":\"fill-current stroke-current stroke-2 sl-r\"}]]}]}]\nb4:[\"$\",\"symbol\",null,{\"id\":\"star-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"star\",\"children\":[\"$\",\"path\",null,{\"d\":\"M11.11 3.231a1 1 0 0 1 1.78 0l2.19 4.263a1 1 0 0 0 .73.53l4.73.766a1 1 0 0 1 .55 1.692l-3.378 3.4a1 1 0 0 0-.278.858l.734 4.736a1 1 0 0 1-1.44 1.045l-4.277-2.161a1 1 0 0 0-.902 0l-4.277 2.16a1 1 0 0 1-1.44-1.045l.734-4.736a1 1 0 0 0-.278-.858l-3.378-3.4a1 1 0 0 1 .55-1.692l4.73-.766a1 1 0 0 0 .73-.53l2.19-4.263Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]}]}]\nb5:[\"$\",\"symbol\",null,{\"id\":\"star-square-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"star-square\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4.5 21A1.5 1.5 0 0 1 3 19.5v-15A1.5 1.5 0 0 1 4.5 3h15A1.5 1.5 0 0 1 21 4.5v15a1.5 1.5 0 0 1-1.5 1.5h-15Z\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M11.784 6.618a.25.25 0 0 1 .432 0l1.676 2.858a.25.25 0 0 0 .162.118l3.23
26.71a.25.25 0 0 1 .133.41l-2.2 2.478a.25.25 0 0 0-.062.19l.324 3.298a.25.25 0 "])</script>
2<script>self.__next_f.push([1,"0 1-.349.253L12.1 15.606a.25.25 0 0 0-.2 0l-3.036 1.327a.25.25 0 0 1-.349-.253l.324-3.298a.25.25 0 0 0-.062-.19l-2.2-2.477a.25.25 0 0 1 .133-.41l3.236-.711a.25.25 0 0 0 .162-.118l1.676-2.858Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\n"])</script>
2<script>self.__next_f.push([1,"b6:[\"$\",\"symbol\",null,{\"id\":\"timer-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"timer\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M6 17h2v4H6z\",\"className\":\"Rectangle 152\"}],[\"$\",\"path\",null,{\"d\":\"M16 17h2v4h-2z\",\"className\":\"Rectangle 153\"}],[\"$\",\"path\",null,{\"d\":\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 8v5.25L14 15\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"g\",null,{\"className\":\"fill-current stroke-current stroke-2 sl-r\",\"children\":[[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M8.199 4.959a8.023 8.023 0 0 0-3.81 4.572 3 3 0 1 1 3.81-4.572Z\",\"clipRule\":\"evenodd\"}],[\"$\",\"path\",null,{\"d\":\"m8.199 4.959.476.88a1 1 0 0 0 .257-1.56l-.733.68Zm-3.81 4.572-.539.843a1 1 0 0 0 1.49-.535l-.952-.308Zm3.81-4.572-.476-.88a9.023 9.023 0 0 0-4.286 5.143l.951.309.952.308a7.023 7.023 0 0 1 3.335-4l-.476-.88Zm-3.81 4.572.537-.843A1.998 1.998 0 0 1 4 7H2c0 1.42.74 2.665 1.85 3.374l.538-.843ZM3 7h1a2 2 0 0 1 2-2V3a4 4 0 0 0-4 4h1Zm3-3v1c.58 0 1.1.245 1.466.64l.733-.681.733-.68A3.992 3.992 0 0 0 6 3v1Z\"}]]}],[\"$\",\"g\",null,{\"className\":\"fill-current stroke-current stroke-2 sl-r\",\"children\":[[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M15.801 4.959a8.023 8.023 0 0 1 3.81 4.572 3 3 0 1 0-3.81-4.572Z\",\"clipRule\":\"evenodd\"}],[\"$\",\"path\",null,{\"d\":\"m15.801 4.959-.476.88a1 1 0 0 1-.256-1.56l.732.68Zm3.81 4.572.539.843a1 1 0 0 1-1.49-.535l.952-.308Zm-3.81-4.572.476-.88a9.023 9.023 0 0 1 4.286 5.143l-.951.309-.952.308a7.023 7.023 0 0 0-3.335-4l.476-.88Zm3.81 4.572-.537-.843A2 2 0 0 0 20 7h2c0 1.42-.74 2.665-1.85 3.374l-.538-.843ZM21 7h-1a2 2 0 0 0-2-2V3a4 4 0 0 1 4 4h-1Zm-3-3v1c-.58 0-1.1.245-1.466.64l-.733-.681-.732-.68A3.992 3.992 0 0 1 18 3v1Z\"}]]}]]}]}]\n"])</script>
2<script>self.__next_f.push([1,"b7:[\"$\",\"symbol\",null,{\"id\":\"type-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"type\",\"children\":[[\"$\",\"path\",null,{\"d\":\"m12 3 3 6.5V16H6l6-13Z\",\"className\":\"fill-(--icon-fill)\"}],[\"$\",\"path\",null,{\"d\":\"M12 2a1 1 0 0 1 .912.59L15 7.23v4.873l-3-6.666L4.547 22H2.354l8.734-19.41A1 1 0 0 1 12 2Z\",\"className\":\"fill-current\"}],[\"$\",\"path\",null,{\"d\":\"M6 16h9\",\"className\":\"fill-none stroke-current stroke-2\"}],[\"$\",\"path\",null,{\"d\":\"M16 3h2v18h-2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M20 3h-2v18h2\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\nb8:[\"$\",\"symbol\",null,{\"id\":\"vector-square-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"vector-square\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M6 19a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12c0 .552-.442 1-.994 1H6Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M7 3H3v4h4V3Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M7 17H3v4h4v-4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M21 3h-4v4h4V3Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M21 17h-4v4h4v-4Z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]\nb9:[\"$\",\"symbol\",null,{\"id\":\"views-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"views\",\"children\":[\"$\",\"g\",null,{\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M4 9h4v12H4z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 5h4v16H8z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M12 9h4v12h-4z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M16 3h4v18h-4z\",\"className\":\"fill-(--icon-fill) stroke-current stroke-2 sl-r\"}]]}]}]}]\nba:[\"$\",\"symbol\",null,{\"id\":\"website-24\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"website\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"18\",\"height\":\"12\",\"x\":\"3\",\"y\":\"8\",\"className\":\"fill-(--icon-fill)\",\"rx\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"M4.5 20A1.5 1.5 0 0 1 3 18.5v-13A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-15Z\",\"className\":\"fill-(--icon-fill-bg) stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M4 8h16\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M11 12h6\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M11 15h4\",\"className\":\"stroke-current stroke-2 sl-r\"}],[\"$\",\"path\",null,{\"d\":\"M8 8v11\",\"className\":\"fill-none stroke-current stroke-2 sl-r\"}]]}]}]\nbc:[\"$\",\"symbol\",null,{\"id\":\"figma-16\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"children\":[[\"$\",\"path\",null,{\"className\":\"stroke-current\",\"strokeWidth\":\"1.5\",\"d\":\"M19.935 4.518a3.74 3.74 0 0 1-3.74 3.741h-3.839V.777h3.838a3.74 3.74 0 0 1 3.741 3.741Z\"}],[\"$\",\"path\",null,{\"className\":\"stroke-current\",\"strokeWidth\":\"1.5\",\"d\":\"M4.777 4.518A3.74 3.74 0 0 0 8.518 8.26h3.838V.777H8.518a3.74 3.74 0 0 0-3.74 3.741Z\"}],[\"$\",\"path\",null,{\"className\":\"stroke-current\",\"strokeWidth\":\"1.5\",\"d\":\"M4.777 12a3.74 3.74 0 0 0 3.741 3.741h3.838V8.259H8.518A3.74 3.74 0 0 0 4.778 12Z\"}],[\"$\",\"path\",null,{\"className\":\"stroke-current\",\"strokeWidth\":\"1.5\",\"d\":\"M4.777 19.482c0 2.066 1.7 3.74 3.765 3.74 2.093 0 3.814-1.696 3.814-3.789v-3.692H8.518a3.74 3.74 0 0 0-3.74 3.74ZM12.356 12a3.741 3.741 0 0 0 3.741 3.741h.097a3.74 3.74 0 0 0 0-7.482h-.097A3.74 3.74 0 0 0 12.357 12Z\"}]]}]\n"])</script>
2<script>self.__next_f.push([1,"bd:[\"$\",\"symbol\",null,{\"id\":\"github-16\",\"fill\":\"fill-current\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"fill-current\",\"children\":[[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 .5a12.043 12.043 0 0 0-7.773 2.847A11.917 11.917 0 0 0 .16 10.522a11.877 11.877 0 0 0 1.576 8.086 11.99 11.99 0 0 0 6.469 5.145c.596.11.82-.259.82-.573 0-.314-.011-1.225-.015-2.22-3.339.72-4.044-1.41-4.044-1.41-.544-1.383-1.331-1.746-1.331-1.746-1.09-.739.081-.725.081-.725 1.206.085 1.84 1.23 1.84 1.23 1.07 1.824 2.808 1.297 3.491.989.108-.773.42-1.298.763-1.597-2.666-.3-5.468-1.324-5.468-5.896a4.607 4.607 0 0 1 1.236-3.202c-.123-.3-.535-1.514.117-3.162 0 0 1.008-.32 3.3 1.223a11.453 11.453 0 0 1 6.01 0c2.29-1.543 3.296-1.223 3.296-1.223.654 1.644.243 2.857.12 3.162a4.597 4.597 0 0 1 1.238 3.206c0 4.582-2.808 5.592-5.479 5.886.43.372.813 1.097.813 2.211 0 1.597-.014 2.88-.014 3.274 0 .318.216.69.825.573a11.99 11.99 0 0 0 6.47-5.146 11.877 11.877 0 0 0 1.575-8.087 11.917 11.917 0 0 0-4.07-7.175A12.043 12.043 0 0 0 12.004.5H12Z\",\"clipRule\":\"evenodd\"}],[\"$\",\"path\",null,{\"className\":\"stroke-current\",\"d\":\"M4.544 17.632c-.025.06-.12.077-.198.036a.302.302 0 0 1-.018-.011c-.065-.04-.11-.105-.093-.16a.079.079 0 0 1 .007-.017c.032-.055.121-.067.195-.028a.31.31 0 0 1 .018.01c.067.043.114.112.091.166 0 .001 0 .003-.002.004Z\"}],[\"$\",\"path\",null,{\"d\":\"M5.031 18.171a.2.2 0 0 1-.246-.055c-.078-.083-.094-.197-.034-.249.06-.051.167-.027.244.055.078.083.096.198.036.25ZM5.504 18.857c-.073.051-.198 0-.268-.103a.197.197 0 0 1 0-.284c.074-.05.199 0 .268.1.07.101.072.236 0 .287ZM6.146 19.52c-.065.074-.199.054-.308-.045-.11-.098-.135-.233-.07-.304.066-.071.2-.051.313.046.113.096.135.233.065.304ZM7.046 19.908c-.03.093-.165.134-.3.095-.135-.04-.224-.15-.199-.245.026-.095.163-.138.3-.095.138.044.225.148.2.245ZM8.028 19.975c0 .097-.111.18-.255.182-.143.002-.26-.077-.26-.174 0-.097.111-.18.255-.182.143-.002.26.076.26.174ZM8.942 19.823c.018.097-.082.198-.225.221-.143.024-.268-.033-.286-.128-.018-.095.086-.198.225-.223.139-.026.268.033.286.13Z\"}]]}]}]\n"])</script>
2<script>self.__next_f.push([1,"be:[\"$\",\"symbol\",null,{\"id\":\"github-24\",\"fill\":\"fill-current\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"g\",null,{\"className\":\"fill-current\",\"children\":[[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 .5a12.043 12.043 0 0 0-7.773 2.847A11.917 11.917 0 0 0 .16 10.522a11.877 11.877 0 0 0 1.576 8.086 11.99 11.99 0 0 0 6.469 5.145c.596.11.82-.259.82-.573 0-.314-.011-1.225-.015-2.22-3.339.72-4.044-1.41-4.044-1.41-.544-1.383-1.331-1.746-1.331-1.746-1.09-.739.081-.725.081-.725 1.206.085 1.84 1.23 1.84 1.23 1.07 1.824 2.808 1.297 3.491.989.108-.773.42-1.298.763-1.597-2.666-.3-5.468-1.324-5.468-5.896a4.607 4.607 0 0 1 1.236-3.202c-.123-.3-.535-1.514.117-3.162 0 0 1.008-.32 3.3 1.223a11.453 11.453 0 0 1 6.01 0c2.29-1.543 3.296-1.223 3.296-1.223.654 1.644.243 2.857.12 3.162a4.597 4.597 0 0 1 1.238 3.206c0 4.582-2.808 5.592-5.479 5.886.43.372.813 1.097.813 2.211 0 1.597-.014 2.88-.014 3.274 0 .318.216.69.825.573a11.99 11.99 0 0 0 6.47-5.146 11.877 11.877 0 0 0 1.575-8.087 11.917 11.917 0 0 0-4.07-7.175A12.043 12.043 0 0 0 12.004.5H12Z\",\"clipRule\":\"evenodd\"}],[\"$\",\"path\",null,{\"className\":\"stroke-current\",\"d\":\"M4.544 17.632c-.025.06-.12.077-.198.036a.302.302 0 0 1-.018-.011c-.065-.04-.11-.105-.093-.16a.079.079 0 0 1 .007-.017c.032-.055.121-.067.195-.028a.31.31 0 0 1 .018.01c.067.043.114.112.091.166 0 .001 0 .003-.002.004Z\"}],[\"$\",\"path\",null,{\"d\":\"M5.031 18.171a.2.2 0 0 1-.246-.055c-.078-.083-.094-.197-.034-.249.06-.051.167-.027.244.055.078.083.096.198.036.25ZM5.504 18.857c-.073.051-.198 0-.268-.103a.197.197 0 0 1 0-.284c.074-.05.199 0 .268.1.07.101.072.236 0 .287ZM6.146 19.52c-.065.074-.199.054-.308-.045-.11-.098-.135-.233-.07-.304.066-.071.2-.051.313.046.113.096.135.233.065.304ZM7.046 19.908c-.03.093-.165.134-.3.095-.135-.04-.224-.15-.199-.245.026-.095.163-.138.3-.095.138.044.225.148.2.245ZM8.028 19.975c0 .097-.111.18-.255.182-.143.002-.26-.077-.26-.174 0-.097.111-.18.255-.182.143-.002.26.076.26.174ZM8.942 19.823c.018.097-.082.198-.225.221-.143.024-.268-.033-.286-.128-.018-.095.086-.198.225-.223.139-.026.268.033.286.13Z\"}]]}]}]\n"])</script>
2<script>self.__next_f.push([1,"bf:[\"$\",\"symbol\",null,{\"id\":\"linkedin-16\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"className\":\"fill-current\",\"d\":\"M22.223 0H1.772C.792 0 0 .773 0 1.73v20.536C0 23.222.792 24 1.772 24h20.451c.98 0 1.777-.778 1.777-1.73V1.73C24 .773 23.203 0 22.223 0ZM7.12 20.452H3.558V8.995H7.12v11.457ZM5.34 7.434a2.064 2.064 0 1 1 0-4.125 2.063 2.063 0 0 1 0 4.125Zm15.112 13.018h-3.558v-5.57c0-1.326-.024-3.037-1.852-3.037-1.851 0-2.133 1.449-2.133 2.944v5.663H9.356V8.995h3.413v1.566h.047c.473-.9 1.636-1.852 3.365-1.852 3.605 0 4.27 2.372 4.27 5.457v6.286Z\"}]}]\nc0:[\"$\",\"symbol\",null,{\"id\":\"mastodon-16\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"className\":\"fill-current\",\"d\":\"M21.5 8.395c0-4.556-2.897-5.892-2.897-5.892-2.842-1.345-10.391-1.331-13.206 0 0 0-2.897 1.336-2.897 5.892 0 5.424-.3 12.16 4.802 13.552 1.842.501 3.425.61 4.698.534 2.31-.131 3.606-.848 3.606-.848l-.077-1.73s-1.65.535-3.506.474c-1.838-.066-3.775-.207-4.075-2.532a4.952 4.952 0 0 1-.04-.651c3.892.98 7.212.426 8.126.314 2.551-.314 4.775-1.936 5.057-3.417.445-2.335.409-5.696.409-5.696Zm-3.415 5.869h-2.12V8.911c0-2.33-2.91-2.419-2.91.323v2.93H10.95v-2.93c0-2.742-2.911-2.653-2.911-.323v5.353H5.915c0-5.723-.236-6.933.837-8.203 1.178-1.355 3.63-1.444 4.72.286L12 7.26l.528-.914c1.095-1.74 3.5
251-1.631 4.72-.286 1.078 1.28.837 2.484.837 8.203Z\"}]}]\nc1:[\"$\",\"symbol\",null,{\"id\":\"x-16\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"children\":[\"$\",\"path\",null,{\"d\":\"M18.244 2.25H21.552L14.325 10.51L22.827 21.75H16.17L10.956 14.933L4.99003 21.75H1.68003L9.41003 12.915L1.25403 2.25H8.08003L12.793 8.481L18.244 2.25ZM17.083 19.77H18.916L7.08403 4.126H5.11703L17.083 19.77Z\",\"className\":\"fill-current\"}]}]\nc9:[\"$\",\"div\",null,{\"className\":\"@container/about col-span-full sm:col-span-8 xl:col-span-9 row-span-7 bg-surface py-12 px-8 sm:px-12 sm:py-12 xl:px-18 content-end dark:shadow-[-1px_1px_0_0_var(--color-surface-02)]\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-heading font-display font-variation-bold text-lg sm:text-3xl lowercase flex gap-2 mb-3\",\"children\":\"About the website\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-col @md:flex-row gap-x-6 gap-y-2\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-ui-body text-base flex-1\",\"children\":\"Hi, Iâm Steve McKinney, I write this small publication focusing on the design and build of websites. The aim is to bridge the gap between your design tool and code. And look at the craft behind creating websites.\"}],[\"$\",\"p\",null,{\"className\":\"text-ui-body text-base flex-1\",\"children\":[\"This is a broad topic in itself, which feels challenging to achieve. But it remains a way to encourage self learning and sharing what I knowâ¦\",[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"font-semibold text-link hover:text-link-hover transition duration-200 ease\",\"children\":\"continue reading\"}]]}]]}]]}]\n"])</script>
2<script>self.__next_f.push([1,"ca:[\"$\",\"div\",null,{\"className\":\"col-span-1 sm:col-span-8 lg:col-span-4 xl:col-span-5 row-span-3 bg-surface py-12 px-8 sm:px-12 sm:py-12 xl:px-18 flex flex-col justify-end dark:shadow-[-1px_0_0_0_var(--color-surface-02)]\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-heading font-display font-variation-bold text-lg sm:text-3xl lowercase mb-4\",\"children\":\"Site\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-row flex-wrap gap-x-6 gap-y-2 sm:gap-y-4\",\"children\":[[\"$\",\"li\",\"/\",{\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"home\",\"size\":16,\"variant\":\"header\"}],\"Home\"]}]}],[\"$\",\"li\",\"/blog\",{\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/blog\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"folder\",\"size\":16,\"variant\":\"header\"}],\"Archive\"]}]}],[\"$\",\"li\",\"/category/design\",{\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/design\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"pen\",\"size\":16,\"variant\":\"header\"}],\"Design\"]}]}],[\"$\",\"li\",\"/category/code\",{\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/code\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"code\",\"size\":16,\"variant\":\"header\"}],\"Code\"]}]}],[\"$\",\"li\",\"/collections\",{\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/collections\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"collections\",\"size\":16,\"variant\":\"header\"}],\"Collections\"]}]}],[\"$\",\"li\",\"/notes\",{\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/notes\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"notepad\",\"size\":16,\"variant\":\"header\"}],\"Notes\"]}]}],[\"$\",\"li\",\"/uses\",{\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/uses\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"settings\",\"size\":16,\"variant\":\"header\"}],\"Uses\"]}]}],[\"$\",\"li\",\"/about\",{\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"person\",\"size\":16,\"variant\":\"header\"}],\"About\"]}]}],[\"$\",\"li\",\"/contact\",{\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/contact\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"envelope\",\"size\":16,\"variant\":\"header\"}],\"Contact\"]}]}],[\"$\",\"li\",\"/newsletter\",{\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/newsletter\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"airplane\",\"size\":16,\"variant\":\"header\"}],\"Newsletter\"]}]}]]}]]}]\n"])</script>
2<script>self.__next_f.push([1,"cb:[\"$\",\"div\",null,{\"className\":\"col-span-1 sm:col-span-8 lg:col-span-4 xl:col-span-4 row-span-1 bg-surface py-8 sm:p-12 flex items-center justify-center dark:shadow-[-1px_1px_var(--color-surface-02)]\",\"children\":[\"$\",\"a\",null,{\"rel\":\"noopener noreferrer\",\"href\":\"https://v7.iamsteve.me\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[\"Old design\",[\"$\",\"$Lda\",null,{\"icon\":\"external\",\"variant\":\"header\",\"size\":16}]]}]}]\n"])</script>
2<script>self.__next_f.push([1,"cc:[\"$\",\"div\",null,{\"className\":\"col-span-1 sm:col-span-8 lg:col-span-4 xl:col-span-4 row-span-2 bg-surface py-12 px-8 sm:px-12 sm:py-12 xl:px-18 flex flex-col justify-end dark:shadow-[-1px_0_var(--color-surface-02)]\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-heading font-display font-variation-bold text-lg sm:text-3xl lowercase mb-4\",\"children\":\"Elsewhere\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-row flex-wrap gap-x-6 gap-y-2 sm:gap-y-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"rel\":\"noopener noreferrer\",\"href\":\"https://x.com/irsteve\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"x\",\"size\":16,\"variant\":\"header\"}],\"x.com\"]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"rel\":\"noopener noreferrer\",\"href\":\"https://www.figma.com/@stevemckinney\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"figma\",\"size\":16,\"variant\":\"header\"}],\"Figma\"]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"rel\":\"noopener noreferrer\",\"href\":\"https://github.com/stevemckinney\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"github\",\"size\":16,\"variant\":\"header\"}],\"Github\"]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"rel\":\"noopener noreferrer\",\"href\":\"https://www.linkedin.com/in/steve-mckinney-5b5836102/\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"linkedin\",\"size\":16,\"variant\":\"header\"}],\"Linkedin\"]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"rel\":\"me\",\"href\":\"https://mastodon.design/@steve\",\"className\":\"flex flex-row items-center gap-2 text-base font-ui lowercase text-body hover:text-link-hover transition duration-200\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"mastodon\",\"size\":16,\"variant\":\"header\"}],\"Mastodon\"]}]}]]}]]}]\n"])</script>
2<script>self.__next_f.push([1,"cd:[\"$\",\"footer\",null,{\"className\":\"col-content flex flex-col max-md:items-center md:flex-row gap-8 pt-18 pb-18 md:py-18\",\"children\":[[\"$\",\"p\",null,{\"className\":\"flex flex-1 max-md:flex-col max-md:items-center gap-1 text-balance text-center\",\"children\":[[\"$\",\"$Lda\",null,{\"icon\":\"bee\",\"variant\":\"header\"}],\" Designed in Manchester using Figma \u0026 Next.js\"]}],[\"$\",\"ul\",null,{\"className\":\"flex gap-8\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#top\",\"className\":\"text-emphasis hover:text-link-hover transition duration-200 ease-linear\",\"children\":\"Top\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/feed.xml\",\"className\":\"text-emphasis hover:text-link-hover transition duration-200 ease-linear\",\"children\":\"RSS\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"p\",null,{\"className\":\"text-ui-body\",\"children\":[\"©\",\" \",[\"$\",\"$Lc5\",null,{\"href\":\"/\",\"className\":\"text-ui-body hover:text-link-hover transition duration-200 ease-linear\",\"children\":\"iamsteve\"}],\" \",\"2026\"]}]}]]}]]}]\nce:[\"$\",\"div\",null,{\"className\":\"col-container relative -top-4 pb-24 flex flex-row items-center gap-8\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-1 bg-dash-image h-[2px]\",\"aria-hidden\":\"true\"}],[\"$\",\"$Lda\",null,{\"icon\":\"logo\",\"className\":\"text-emphasis\",\"variant\":\"header\",\"size\":32}],[\"$\",\"span\",null,{\"className\":\"flex-1 bg-dash-image h-[2px]\",\"aria-hidden\":\"true\"}]]}]\n"])</script>
2<script>self.__next_f.push([1,"d9:[\"$\",\"defs\",null,{\"children\":[\"$\",\"clipPath\",null,{\"id\":\"buy-coffee-24-clip0\",\"children\":[\"$\",\"rect\",null,{\"width\":\"24\",\"height\":\"24\",\"className\":\"fill-(--icon-fill)\"}]}]}]\n"])</script>
2<script>self.__next_f.push([1,"db:I[7219,[\"/_next/static/chunks/2317sa_4mq8sr.js\",\"/_next/static/chunks/0agl4fg0_1a_y.js\",\"/_next/static/chunks/11lkkyb-gcm2d.js\",\"/_next/static/chunks/0sqa-0011n2kn.js\",\"/_next/static/chunks/2cu8-jfr1i4z0.js\"],\"default\"]\n"])</script>
2<script>self.__next_f.push([1,"d0:[[\"$\",\"svg\",null,{\"width\":962,\"height\":46,\"fill\":\"none\",\"viewBox\":\"0 0 962 46\",\"className\":\"col-start-1 col-end-3 row-start-1 max-w-[initial] justify-self-end self-start mt-3 drop-shadow-placed max-2xl:hidden\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",null,{\"className\":\"fill-lowlight\",\"d\":\"M5 45h34V1H5C2.79 1 1 2.79 1 5v36c0 2.21 1.79 4 4 4Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-border\",\"d\":\"M1 5v8h38V1H5C2.79 1 1 2.79 1 5Z\",\"opacity\":0.4}],[\"$\",\"path\",null,{\"className\":\"fill-border\",\"d\":\"M1 33v8c0 2.21 1.79 4 4 4h34V33H1Z\",\"opacity\":0.5}],[\"$\",\"path\",null,{\"className\":\"stroke-accent\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":\"2\",\"d\":\"M851 45V33l6-10-6-10V1l72.188 14.438L961 23l-37.812 7.563L851 45Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-foreground\",\"d\":\"M851 45V33l6-10-6-10V1l110 22-110 22Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-surface-100\",\"d\":\"M851 1v12l49 10-49 10v12l110-22L851 1Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-subtle stroke-surface\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":\"2\",\"d\":\"m961 23-36-7.2v14.4l36-7.2Z\"}],[\"$\",\"path\",null,{\"className\":\"stroke-border\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"bevel\",\"strokeWidth\":\"2\",\"d\":\"M851 45V33l6-10-6-10V1l110 22-110 22Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-muted\",\"d\":\"M925 26.19v4.08L960.98 23l-10.1-2.04L925 26.19Z\"}],[\"$\",\"path\",null,{\"className\":\"stroke-border\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":\"2\",\"d\":\"m961 23-36-7.2v14.4l36-7.2Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-surface\",\"d\":\"M135 1v43.91L851 45l5-7-5-5 6-10-6-10 5-5-5-6.91L135 1Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-surface-150\",\"d\":\"M851 1H135v12h716l5-5-5-7Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-lowlight\",\"d\":\"M135 33v12h716l5-7-5-5H135Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-foreground\",\"d\":\"M851 33H135v-2h717.2l-1.2 2Zm1.2-18H135v-2h716l1.2 2Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-surface\",\"d\":\"M39 1v44h96V1H39Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-surface-150\",\"d\":\"M39 33v12h96V33H39Zm0-32v12h96V1H39Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-foreground\",\"d\":\"M39 31v2h96v-2H39Zm0-18v2h96v-2H39Z\"}],[\"$\",\"path\",null,{\"className\":\"fill-surface-150\",\"d\":\"M118 1v44h4V1h-4Zm-8 0v44h4V1h-4ZM59 1v44h4V1h-4Zm-8 0v44h4V1h-4Z\"}],[\"$\",\"path\",null,{\"className\":\"stroke-border\",\"strokeLinejoin\":\"round\",\"strokeWidth\":\"2\",\"d\":\"M39 1v44h96V1H39Zm96 0v44h716l5-7-4.5-5 6-10-6.5-10 5-5-5-7H135Z\"}],[\"$\",\"path\",null,{\"className\":\"stroke-border\",\"strokeWidth\":\"2\",\"d\":\"M5 45h34V1H5C2.79 1 1 2.79 1 5v36c0 2.21 1.79 4 4 4Z\"}]]}],[\"$\",\"header\",null,{\"className\":\"max-md:frame max-md:frame-24 grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 col-container md:col-content max-md:px-8 max-md:py-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-4 md:col-span-1\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"w-full text-heading font-display lowercase self-start min-w-0 min-h-0 font-variation-bold lg:font-variation-extrabold text-3xl xs:text-5xl lg:text-7xl\",\"children\":\"Blog\"}],[\"$\",\"p\",null,{\"className\":\"md:text-lg lg:text-xl text-ui-body sm:max-w-[34ch] desc max-md:mb-2\",\"children\":\"Tips and tutorials about the design and build of web interfaces\"}]]}],[\"$\",\"$Ldb\",null,{\"items\":[{\"title\":\"Design\",\"slug\":\"/category/design\",\"slugAsParams\":\"design\",\"description\":\"From speedy workflow based quick tips and resources, practical techniques to create well designed interfaces\",\"parent\":false,\"theme\":\"rio\",\"icon\":\"pen\",\"exclude\":false},{\"title\":\"Quick tip\",\"slug\":\"/category/quick-tip\",\"slugAsParams\":\"quick-tip\",\"description\":\"Short posts covering a technique or feature to help you figure something out and get back to designing\",\"parent\":\"design\",\"theme\":\"dandelion\",\"icon\":\"bolt\",\"exclude\":false},{\"title\":\"Typography\",\"slug\":\"/category/typography\",\"slugAsParams\":\"typography\",\"description\":\"The latest type trends, alternatives to popular typefaces and typography techniques\",\"parent\":\"design\",\"theme\":\"neutral-02\",\"
2icon\":\"type\",\"exclude\":false},{\"title\":\"Colour\",\"slug\":\"/category/colour\",\"slugAsParams\":\"colour\",\"description\":\"A fundamental skill within design, itâs a balance through brand, emotion, accessibility and usability\",\"parent\":\"design\",\"theme\":\"cornflour\",\"icon\":\"palette\",\"exclude\":false},{\"title\":\"Resources\",\"slug\":\"/category/resources\",\"slugAsParams\":\"resources\",\"description\":\"Collections of links or specific articles, to things I wish I had written or designed\",\"parent\":\"design\",\"theme\":\"fern\",\"icon\":\"settings\",\"exclude\":false},{\"title\":\"Visual design\",\"slug\":\"/category/visual-design\",\"slugAsParams\":\"visual-design\",\"description\":\"Looking at how we design the interfaces we use and a look at the how and why behind visual techniques\",\"parent\":\"design\",\"theme\":\"lavender\",\"icon\":\"vector-square\",\"exclude\":false},{\"title\":\"Code\",\"slug\":\"/category/code\",\"slugAsParams\":\"code\",\"description\":\"Building interfaces with CSS and JavaScript, from implementation details to development workflows\",\"parent\":false,\"theme\":\"dandelion\",\"icon\":\"code\",\"exclude\":false},{\"title\":\"Animation\",\"slug\":\"/category/animation\",\"slugAsParams\":\"animation\",\"description\":\"Add some motion and interactivity to your interfaces using animation techniques and libraries like Framer Motion\",\"parent\":\"code\",\"theme\":\"magenta\",\"icon\":\"play\",\"exclude\":false},{\"title\":\"CSS\",\"slug\":\"/category/css\",\"slugAsParams\":\"css\",\"description\":\"Dive deeper into the powerful and versatile styling language that can transform your interfaces\",\"parent\":\"code\",\"theme\":\"grass\",\"icon\":\"css\",\"exclude\":false},{\"title\":\"Patterns\",\"slug\":\"/category/patterns\",\"slugAsParams\":\"patterns\",\"description\":\"Reusable techniques that you can apply to your projects that solve common problems and challenges\",\"parent\":\"code\",\"theme\":\"fern\",\"icon\":\"puzzle\",\"exclude\":false},{\"title\":\"JavaScript\",\"slug\":\"/category/javascript\",\"slugAsParams\":\"javascript\",\"description\":\"Enhance your interfaces with dynamic and interactive features to build upon the foundations of your markup\",\"parent\":\"code\",\"theme\":\"magenta\",\"icon\":\"note\",\"exclude\":false}],\"label\":\"Categories\",\"icon\":\"folder\",\"className\":\"md:hidden\"}],\"$Ldc\"]}],\"$Ldd\",\"$Lde\"]\n"])</script>
2<script>self.__next_f.push([1,"e2:I[7428,[\"/_next/static/chunks/2317sa_4mq8sr.js\",\"/_next/static/chunks/0agl4fg0_1a_y.js\",\"/_next/static/chunks/11lkkyb-gcm2d.js\",\"/_next/static/chunks/0sqa-0011n2kn.js\",\"/_next/static/chunks/2cu8-jfr1i4z0.js\"],\"Image\"]\nf0:I[13858,[\"/_next/static/chunks/2317sa_4mq8sr.js\",\"/_next/static/chunks/0agl4fg0_1a_y.js\",\"/_next/static/chunks/11lkkyb-gcm2d.js\",\"/_next/static/chunks/0sqa-0011n2kn.js\",\"/_next/static/chunks/2cu8-jfr1i4z0.js\"],\"default\"]\n"])</script>
2<script>self.__next_f.push([1,"dc:[\"$\",\"ul\",null,{\"className\":\"max-md:hidden md:col-span-1 grid grid-cols-2 gap-x-8 self-end column-categories -mb-2 lg:-mb-3\",\"children\":[[\"$\",\"li\",\"Design\",{\"className\":\"self-end\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/design\",\"className\":\"py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current\",\"rel\":\"category tag\",\"children\":[[\"$\",\"$Lda\",null,{\"className\":\"text-current shrink-0\",\"icon\":\"pen\",\"size\":24,\"variant\":\"header\"}],\"Design\"]}]}],[\"$\",\"li\",\"Quick tip\",{\"className\":\"self-end\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/quick-tip\",\"className\":\"py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current\",\"rel\":\"category tag\",\"children\":[[\"$\",\"$Lda\",null,{\"className\":\"text-current shrink-0\",\"icon\":\"bolt\",\"size\":24,\"variant\":\"header\"}],\"Quick tip\"]}]}],[\"$\",\"li\",\"Typography\",{\"className\":\"self-end\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/typography\",\"className\":\"py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current\",\"rel\":\"category tag\",\"children\":[[\"$\",\"$Lda\",null,{\"className\":\"text-current shrink-0\",\"icon\":\"type\",\"size\":24,\"variant\":\"header\"}],\"Typography\"]}]}],[\"$\",\"li\",\"Colour\",{\"className\":\"self-end\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/colour\",\"className\":\"py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current\",\"rel\":\"category tag\",\"children\":[[\"$\",\"$Lda\",null,{\"className\":\"text-current shrink-0\",\"icon\":\"palette\",\"size\":24,\"variant\":\"header\"}],\"Colour\"]}]}],[\"$\",\"li\",\"Resources\",{\"className\":\"self-end\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/resources\",\"className\":\"py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current\",\"rel\":\"category tag\",\"children\":[[\"$\",\"$Lda\",null,{\"className\":\"text-current shrink-0\",\"icon\":\"settings\",\"size\":24,\"variant\":\"header\"}],\"Resources\"]}]}],[\"$\",\"li\",\"Visual design\",{\"className\":\"self-end\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/visual-design\",\"className\":\"py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current\",\"rel\":\"category tag\",\"children\":[[\"$\",\"$Lda\",null,{\"className\":\"text-current shrink-0\",\"icon\":\"vector-square\",\"size\":24,\"variant\":\"header\"}],\"Visual design\"]}]}],[\"$\",\"li\",\"Code\",{\"className\":\"self-end\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/code\",\"className\":\"py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current\",\"rel\":\"category tag\",\"children\":[[\"$\",\"$Lda\",null,{\"className\":\"text-current shrink-0\",\"icon\":\"code\",\"size\":24,\"variant\":\"header\"}],\"Code\"]}]}],[\"$\",\"li\",\"Animation\",{\"className\":\"self-end\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/animation\",\"className\":\"py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current\",\"rel\":\"category tag\",\"children\":[[\"$\",\"$Lda\",null,{\"className\":\"text-current shrink-0\",\"icon\":\"play\",\"size\":24,\"variant\":\"header\"}],\"Animation\"]}]}],[\"$\",\"li\",\"CSS\",{\"className\":\"self-end\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/css\",\"className\":\"py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current\",\"rel\":\"category tag\",\"children\":[\"$Ldf\",\"CSS\"]}]}],\"$Le0\",\"$Le1\"]}]\n"])</script>
2<script>self.__next_f.push([1,"dd:[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 col-container md:col-content gap-8\",\"children\":[[\"$\",\"$1\",\"0177-using-analytics-again-with-simple-analytics.md\",{\"children\":[[\"$\",\"article\",null,{\"className\":\"@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/blog/using-analytics-again-with-simple-analytics\",\"title\":\"\",\"className\":\"relative flex items-center justify-center\",\"style\":{\"backgroundColor\":\"#fcf9f8\"},\"aria-labelledby\":\"title-0177-using-analytics-again-with-simple-analytics.md\",\"children\":[[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/0177-simple-analytics-featured-image-medium.svg\",\"width\":384,\"height\":240,\"alt\":\"Using analytics again with simple analytics\",\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"className\":\"@lg/card:hidden w-full\",\"quality\":100,\"unoptimized\":true}],[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/0177-simple-analytics-featured-image.svg\",\"width\":592,\"height\":368,\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"alt\":\"Using analytics again with simple analytics\",\"aria-hidden\":true,\"className\":\"hidden @lg/card:block w-full\",\"quality\":100,\"unoptimized\":true}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px\",\"children\":[[[\"$\",\"$Lc5\",\"Website\",{\"href\":\"/category/website\",\"className\":\"flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-200))] category\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"folder\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"Website\"}]]}]],[\"$\",\"p\",null,{\"className\":\"flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"calendar\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"$Le3\"}]]}]]}],\"$Le4\"]}]]}],false,false,false]}],\"$Le5\",\"$Le6\",\"$Le7\",\"$Le8\",\"$Le9\",\"$Lea\",\"$Leb\",\"$Lec\",\"$Led\",\"$Lee\",\"$Lef\"]}]\n"])</script>
2<script>self.__next_f.push([1,"de:[\"$\",\"div\",null,{\"className\":\"col-content\",\"children\":[\"$\",\"$Lf0\",null,{\"total\":12,\"current\":1}]}]\n"])</script>
2<script>self.__next_f.push([1,"df:[\"$\",\"$Lda\",null,{\"className\":\"text-current shrink-0\",\"icon\":\"css\",\"size\":24,\"variant\":\"header\"}]\ne0:[\"$\",\"li\",\"Patterns\",{\"className\":\"self-end\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/patterns\",\"className\":\"py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current\",\"rel\":\"category tag\",\"children\":[[\"$\",\"$Lda\",null,{\"className\":\"text-current shrink-0\",\"icon\":\"puzzle\",\"size\":24,\"variant\":\"header\"}],\"Patterns\"]}]}]\ne1:[\"$\",\"li\",\"JavaScript\",{\"className\":\"self-end\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/category/javascript\",\"className\":\"py-2 md:py-3 text-base md:text-lg lg:text-xl text-emphasis hover:text-link-hover transition-all duration-200 ease-linear font-ui lowercase leading-none flex gap-2 items-center text-current\",\"rel\":\"category tag\",\"children\":[[\"$\",\"$Lda\",null,{\"className\":\"text-current shrink-0\",\"icon\":\"note\",\"size\":24,\"variant\":\"header\"}],\"JavaScript\"]}]}]\ne3:[\"$\",\"time\",null,{\"dateTime\":\"2025-03-10T12:43:42.460Z\",\"className\":\"date\",\"children\":\"10th Mar 2025\"}]\n"])</script>
2<script>self.__next_f.push([1,"e4:[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl\",\"id\":\"title-0177-using-analytics-again-with-simple-analytics.md\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/blog/using-analytics-again-with-simple-analytics\",\"className\":\"text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1\",\"children\":\"Using analytics again with simple analytics\"}]}],[\"$\",\"div\",null,{\"className\":\"flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp className=\\\"font-body\\\"\u003eI was seeing an increase in my âserverlessâ usage and it didnât make sense. So I decided to add Simple Analytics and wanted to share a review of this privacy focused service.\u003c/p\u003e\"}}],[\"$\",\"div\",null,{\"className\":\"sr-only\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"author vcard url fn\",\"rel\":\"author\",\"tabIndex\":\"-1\",\"children\":\"Steve McKinney\"}],\" \",[\"$\",\"time\",null,{\"dateTime\":\"2025-03-10T12:43:42.460Z\",\"className\":\"updated\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2025-03-10T12:43:42.460Z\",\"className\":\"date\",\"children\":\"10th Mar 2025\"}]}]]}]]}]\n"])</script>
2<script>self.__next_f.push([1,"e5:[\"$\",\"$1\",\"0176-rules-i-follow-when-typesetting.md\",{\"children\":[[\"$\",\"article\",null,{\"className\":\"@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/blog/rules-i-follow-when-typesetting\",\"title\":\"\",\"className\":\"relative flex items-center justify-center\",\"style\":{\"backgroundColor\":\"#fcf9f8\"},\"aria-labelledby\":\"title-0176-rules-i-follow-when-typesetting.md\",\"children\":[[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/0176-typesetting-featured-image-medium.svg\",\"width\":384,\"height\":240,\"alt\":\"Rules I follow when typesetting\",\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"className\":\"@lg/card:hidden w-full\",\"quality\":100,\"unoptimized\":true}],[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/0176-typesetting-featured-image.svg\",\"width\":592,\"height\":368,\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"alt\":\"Rules I follow when typesetting\",\"aria-hidden\":true,\"className\":\"hidden @lg/card:block w-full\",\"quality\":100,\"unoptimized\":true}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px\",\"children\":[[\"$undefined\",[\"$\",\"$Lc5\",\"Typography\",{\"href\":\"/category/typography\",\"className\":\"flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-neutral-02-600),var(--color-neutral-02-200))] category\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-neutral-02-300 dark:ring-1 dark:ring-neutral-02-300 dark:group-hover/badge:ring-neutral-02-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-neutral-02-600),var(--color-neutral-02-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"type\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"Typography\"}]]}]],[\"$\",\"p\",null,{\"className\":\"flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"calendar\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2025-03-10T08:37:00.168Z\",\"className\":\"date\",\"children\":\"10th Mar 2025\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12\",\"children\":[\"$Lf1\",\"$Lf2\",\"$Lf3\"]}]]}]]}],false,false,false]}]\n"])</script>
2<script>self.__next_f.push([1,"e6:[\"$\",\"$1\",\"0175-bento-layout-css-grid.md\",{\"children\":[[\"$\",\"article\",null,{\"className\":\"@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/blog/bento-layout-css-grid\",\"title\":\"\",\"className\":\"relative flex items-center justify-center\",\"style\":{\"backgroundColor\":\"#fcf9f8\"},\"aria-labelledby\":\"title-0175-bento-layout-css-grid.md\",\"children\":[[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/0175-bento-grid-featured-image-medium.svg\",\"width\":384,\"height\":240,\"alt\":\"Bento grid layout with CSS grid and container queries\",\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"className\":\"@lg/card:hidden w-full\",\"quality\":100,\"unoptimized\":true}],[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/0175-bento-grid-featured-image.svg\",\"width\":592,\"height\":368,\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"alt\":\"Bento grid layout with CSS grid and container queries\",\"aria-hidden\":true,\"className\":\"hidden @lg/card:block w-full\",\"quality\":100,\"unoptimized\":true}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px\",\"children\":[[\"$undefined\",[\"$\",\"$Lc5\",\"Patterns\",{\"href\":\"/category/patterns\",\"className\":\"flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-fern-700),var(--color-fern-200))] category\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-fern-300 dark:ring-1 dark:ring-fern-300 dark:group-hover/badge:ring-fern-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-fern-700),var(--color-fern-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"puzzle\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"Patterns\"}]]}]],[\"$\",\"p\",null,{\"className\":\"flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"calendar\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2024-07-02T14:58:09.706Z\",\"className\":\"date\",\"children\":\"2nd Jul 2024\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12\",\"children\":[\"$Lf4\",\"$Lf5\",\"$Lf6\"]}]]}]]}],false,false,false]}]\n"])</script>
2<script>self.__next_f.push([1,"e7:[\"$\",\"$1\",\"0174-about-version-8.md\",{\"children\":[[\"$\",\"article\",null,{\"className\":\"@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/blog/about-version-8\",\"title\":\"\",\"className\":\"relative flex items-center justify-center\",\"style\":{\"backgroundColor\":\"#f9f3f1\"},\"aria-labelledby\":\"title-0174-about-version-8.md\",\"children\":[[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/about-version-8-featured-image-medium.svg\",\"width\":384,\"height\":240,\"alt\":\"About version 8\",\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"className\":\"@lg/card:hidden w-full\",\"quality\":100,\"unoptimized\":true}],[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/about-version-8-featured-image-large.svg\",\"width\":592,\"height\":368,\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"alt\":\"About version 8\",\"aria-hidden\":true,\"className\":\"hidden @lg/card:block w-full\",\"quality\":100,\"unoptimized\":true}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px\",\"children\":[[[\"$\",\"$Lc5\",\"Website\",{\"href\":\"/category/website\",\"className\":\"flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-200))] category\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"folder\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"Website\"}]]}]],[\"$\",\"p\",null,{\"className\":\"flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"calendar\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2024-02-29T11:13:38.269Z\",\"className\":\"date\",\"children\":\"29th Feb 2024\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl\",\"id\":\"title-0174-about-version-8.md\",\"children\":\"$Lf7\"}],\"$Lf8\",\"$Lf9\"]}]]}]]}],false,false,false]}]\n"])</script>
2<script>self.__next_f.push([1,"e8:[\"$\",\"$1\",\"0173-about-version-7/index.md\",{\"children\":[[\"$\",\"article\",null,{\"className\":\"@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/blog/about-version-7\",\"title\":\"\",\"className\":\"relative flex items-center justify-center\",\"style\":{\"backgroundColor\":\"#f9f3f1\"},\"aria-labelledby\":\"title-0173-about-version-7/index.md\",\"children\":[[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/about-version-7-featured-image-medium.svg\",\"width\":384,\"height\":240,\"alt\":\"About version 7\",\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"className\":\"@lg/card:hidden w-full\",\"quality\":100,\"unoptimized\":true}],[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/about-version-7-featured-image-large.svg\",\"width\":592,\"height\":368,\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"alt\":\"About version 7\",\"aria-hidden\":true,\"className\":\"hidden @lg/card:block w-full\",\"quality\":100,\"unoptimized\":true}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px\",\"children\":[[[\"$\",\"$Lc5\",\"Website\",{\"href\":\"/category/website\",\"className\":\"flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-200))] category\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"folder\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"Website\"}]]}]],[\"$\",\"p\",null,{\"className\":\"flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"calendar\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2024-02-29T10:13:38.269Z\",\"className\":\"date\",\"children\":\"29th Feb 2024\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl\",\"id\":\"title-0173-about-version-7/index.md\",\"children\":\"$Lfa\"}],\"$Lfb\",\"$Lfc\"]}]]}]]}],false,false,false]}]\n"])</script>
2<script>self.__next_f.push([1,"e9:[\"$\",\"$1\",\"0172-the-best-ink-trap-typefaces-for-websites.md\",{\"children\":[[\"$\",\"article\",null,{\"className\":\"@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/blog/the-best-ink-trap-typefaces-for-websites\",\"title\":\"\",\"className\":\"relative flex items-center justify-center\",\"style\":{\"backgroundColor\":\"#f9f3f1\"},\"aria-labelledby\":\"title-0172-the-best-ink-trap-typefaces-for-websites.md\",\"children\":[[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/the-best-ink-trap-typefaces-for-websites-featured-image-medium.svg\",\"width\":384,\"height\":240,\"alt\":\"The best ink trap typefaces for websites\",\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"className\":\"@lg/card:hidden w-full\",\"quality\":100,\"unoptimized\":true}],[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/the-best-ink-trap-typefaces-for-websites-featured-image-large.svg\",\"width\":592,\"height\":368,\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"alt\":\"The best ink trap typefaces for websites\",\"aria-hidden\":true,\"className\":\"hidden @lg/card:block w-full\",\"quality\":100,\"unoptimized\":true}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px\",\"children\":[[\"$undefined\",[\"$\",\"$Lc5\",\"Typography\",{\"href\":\"/category/typography\",\"className\":\"flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-neutral-02-600),var(--color-neutral-02-200))] category\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-neutral-02-300 dark:ring-1 dark:ring-neutral-02-300 dark:group-hover/badge:ring-neutral-02-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-neutral-02-600),var(--color-neutral-02-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"type\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"Typography\"}]]}]],[\"$\",\"p\",null,{\"className\":\"flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"calendar\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2021-07-28T10:28:00+00:00\",\"className\":\"date\",\"children\":\"28th Jul 2021\"}]}]]}]]}],\"$Lfd\"]}]]}],false,false,false]}]\n"])</script>
2<script>self.__next_f.push([1,"ea:[\"$\",\"$1\",\"0170-atomic-font-size-management-with-sass.md\",{\"children\":[[\"$\",\"article\",null,{\"className\":\"@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/blog/atomic-font-size-management-with-sass\",\"title\":\"\",\"className\":\"relative flex items-center justify-center\",\"style\":{\"backgroundColor\":\"#f8fbfc\"},\"aria-labelledby\":\"title-0170-atomic-font-size-management-with-sass.md\",\"children\":[[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/[email protected]\",\"width\":384,\"height\":240,\"alt\":\"âAtomicâ font size management with Sass\",\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"className\":\"@lg/card:hidden w-full\",\"quality\":100,\"unoptimized\":true}],[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/[email protected]\",\"width\":738,\"height\":492,\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"alt\":\"âAtomicâ font size management with Sass\",\"aria-hidden\":true,\"className\":\"hidden @lg/card:block w-full\",\"quality\":100,\"unoptimized\":true}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px\",\"children\":[[\"$undefined\",[\"$\",\"$Lc5\",\"CSS\",{\"href\":\"/category/css\",\"className\":\"flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-grass-600),var(--color-grass-200))] category\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-grass-300 dark:ring-1 dark:ring-grass-300 dark:group-hover/badge:ring-grass-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-grass-600),var(--color-grass-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"css\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"CSS\"}]]}]],[\"$\",\"p\",null,{\"className\":\"flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"calendar\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2018-06-13T06:27:00+00:00\",\"className\":\"date\",\"children\":\"13th Jun 2018\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12\",\"children\":[\"$Lfe\",\"$Lff\",\"$L100\"]}]]}]]}],false,false,false]}]\n"])</script>
2<script>self.__next_f.push([1,"eb:[\"$\",\"$1\",\"0169-tips-for-using-colour-effectively-in-web-illustration.md\",{\"children\":[[\"$\",\"article\",null,{\"className\":\"@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/blog/tips-for-using-colour-effectively-in-web-illustration\",\"title\":\"\",\"className\":\"relative flex items-center justify-center\",\"style\":{\"backgroundColor\":\"#daf4ed\"},\"aria-labelledby\":\"title-0169-tips-for-using-colour-effectively-in-web-illustration.md\",\"children\":[[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/[email protected]\",\"width\":384,\"height\":240,\"alt\":\"Tips for using colour effectively in web illustration\",\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"className\":\"@lg/card:hidden w-full\",\"quality\":100,\"unoptimized\":true}],[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/[email protected]\",\"width\":738,\"height\":492,\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"alt\":\"Tips for using colour effectively in web illustration\",\"aria-hidden\":true,\"className\":\"hidden @lg/card:block w-full\",\"quality\":100,\"unoptimized\":true}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px\",\"children\":[[\"$undefined\",[\"$\",\"$Lc5\",\"Colour\",{\"href\":\"/category/colour\",\"className\":\"flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-200))] category\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"palette\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"Colour\"}]]}]],[\"$\",\"p\",null,{\"className\":\"flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"calendar\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2018-05-10T12:22:00+00:00\",\"className\":\"date\",\"children\":\"10th May 2018\"}]}]]}]]}],\"$L101\"]}]]}],false,false,false]}]\n"])</script>
2<script>self.__next_f.push([1,"ec:[\"$\",\"$1\",\"0168-nice-and-easy-lazy-loading-with-lazysizes-js.md\",{\"children\":[[\"$\",\"article\",null,{\"className\":\"@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/blog/nice-and-easy-lazy-loading-with-lazysizes-js\",\"title\":\"\",\"className\":\"relative flex items-center justify-center\",\"style\":{\"backgroundColor\":\"#fff3f0\"},\"aria-labelledby\":\"title-0168-nice-and-easy-lazy-loading-with-lazysizes-js.md\",\"children\":[[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/lazyloading-featured-image-medium.png\",\"width\":384,\"height\":240,\"alt\":\"Nice and easy lazy loading with lazysizes.js\",\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"className\":\"@lg/card:hidden w-full\",\"quality\":100,\"unoptimized\":true}],[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/lazyloading-featured-image.png\",\"width\":738,\"height\":492,\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"alt\":\"Nice and easy lazy loading with lazysizes.js\",\"aria-hidden\":true,\"className\":\"hidden @lg/card:block w-full\",\"quality\":100,\"unoptimized\":true}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px\",\"children\":[[\"$undefined\",[\"$\",\"$Lc5\",\"Patterns\",{\"href\":\"/category/patterns\",\"className\":\"flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-fern-700),var(--color-fern-200))] category\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-fern-300 dark:ring-1 dark:ring-fern-300 dark:group-hover/badge:ring-fern-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-fern-700),var(--color-fern-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"puzzle\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"Patterns\"}]]}]],[\"$\",\"p\",null,{\"className\":\"flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"calendar\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2018-02-11T19:58:00+00:00\",\"className\":\"date\",\"children\":\"11th Feb 2018\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12\",\"children\":[\"$L102\",\"$L103\",\"$L104\"]}]]}]]}],false,false,false]}]\n"])</script>
2<script>self.__next_f.push([1,"ed:[\"$\",\"$1\",\"0167-a-year-in-writing-2017.md\",{\"children\":[[\"$\",\"article\",null,{\"className\":\"@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/blog/a-year-in-writing-2017\",\"title\":\"\",\"className\":\"relative flex items-center justify-center\",\"style\":{\"backgroundColor\":\"#fffbee\"},\"aria-labelledby\":\"title-0167-a-year-in-writing-2017.md\",\"children\":[[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/[email protected]\",\"width\":384,\"height\":240,\"alt\":\"A year in writing â 2017\",\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"className\":\"@lg/card:hidden w-full\",\"quality\":100,\"unoptimized\":true}],[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/[email protected]\",\"width\":738,\"height\":492,\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"alt\":\"A year in writing â 2017\",\"aria-hidden\":true,\"className\":\"hidden @lg/card:block w-full\",\"quality\":100,\"unoptimized\":true}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px\",\"children\":[[[\"$\",\"$Lc5\",\"Website\",{\"href\":\"/category/website\",\"className\":\"flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-200))] category\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"folder\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"Website\"}]]}]],[\"$\",\"p\",null,{\"className\":\"flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"calendar\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2018-01-28T14:06:00+00:00\",\"className\":\"date\",\"children\":\"28th Jan 2018\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12\",\"children\":[\"$L105\",\"$L106\",\"$L107\"]}]]}]]}],false,false,false]}]\n"])</script>
2<script>self.__next_f.push([1,"ee:[\"$\",\"$1\",\"0166-illustrator-tip-which-stroke-alignment.md\",{\"children\":[[\"$\",\"article\",null,{\"className\":\"@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/blog/illustrator-tip-which-stroke-alignment\",\"title\":\"\",\"className\":\"relative flex items-center justify-center\",\"style\":{\"backgroundColor\":\"#fefbed\"},\"aria-labelledby\":\"title-0166-illustrator-tip-which-stroke-alignment.md\",\"children\":[[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/[email protected]\",\"width\":384,\"height\":240,\"alt\":\"Illustrator quick tip: which stroke alignment?\",\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"className\":\"@lg/card:hidden w-full\",\"quality\":100,\"unoptimized\":true}],[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/[email protected]\",\"width\":738,\"height\":492,\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"alt\":\"Illustrator quick tip: which stroke alignment?\",\"aria-hidden\":true,\"className\":\"hidden @lg/card:block w-full\",\"quality\":100,\"unoptimized\":true}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px\",\"children\":[[\"$undefined\",[\"$\",\"$Lc5\",\"Quick tip\",{\"href\":\"/category/quick-tip\",\"className\":\"flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-dandelion-600),var(--color-dandelion-200))] category\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-dandelion-300 dark:ring-1 dark:ring-dandelion-200 dark:group-hover/badge:ring-dandelion-0 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-dandelion-600),var(--color-dandelion-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"bolt\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"Quick tip\"}]]}]],[\"$\",\"p\",null,{\"className\":\"flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"calendar\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2017-09-21T08:00:00+00:00\",\"className\":\"date\",\"children\":\"21st Sep 2017\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12\",\"children\":[\"$L108\",\"$L109\",\"$L10a\"]}]]}]]}],false,false,false]}]\n"])</script>
2<script>self.__next_f.push([1,"ef:[\"$\",\"$1\",\"0165-search-overlay-with-smooth-reveal-animation.md\",{\"children\":[[\"$\",\"article\",null,{\"className\":\"@container/card group/card isolate flex flex-col self-start rounded-lg shadow-placed hover:shadow-picked active:shadow-reduced dark:active:shadow-[inset_0_0_0_1px_var(--color-surface-02)] bg-surface active:bg-surface-pressed active:scale-[.99375] bg-clip-padding transition duration-200 ease-in overflow-hidden relative h-full card\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/blog/search-overlay-with-smooth-reveal-animation\",\"title\":\"\",\"className\":\"relative flex items-center justify-center\",\"style\":{\"backgroundColor\":\"#f7fbfb\"},\"aria-labelledby\":\"title-0165-search-overlay-with-smooth-reveal-animation.md\",\"children\":[[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/[email protected]\",\"width\":384,\"height\":240,\"alt\":\"Search overlay with smooth reveal animation\",\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"className\":\"@lg/card:hidden w-full\",\"quality\":100,\"unoptimized\":true}],[\"$\",\"$Le2\",null,{\"src\":\"/images/blog/[email protected]\",\"width\":738,\"height\":492,\"blurDataURL\":\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\",\"placeholder\":\"blur\",\"alt\":\"Search overlay with smooth reveal animation\",\"aria-hidden\":true,\"className\":\"hidden @lg/card:block w-full\",\"quality\":100,\"unoptimized\":true}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex flex-col flex-auto relative py-8 @lg/card:pb-10.5 @lg/card:pt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-6 relative z-2 overflow-x-auto pb-4 @lg/card:pb-5 px-8 @lg/card:px-12 pt-px -mt-px\",\"children\":[[\"$undefined\",\"$undefined\",[\"$\",\"$Lc5\",\"Animation\",{\"href\":\"/category/animation\",\"className\":\"flex flex-[0_0_auto] font-variation-medium group/badge transition-all duration-100 ease-linear text-emphasis gap-3 hover:text-[light-dark(var(--color-magenta-600),var(--color-magenta-200))] category\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-magenta-300 dark:ring-1 dark:ring-magenta-300 dark:group-hover/badge:ring-magenta-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-magenta-600),var(--color-magenta-800))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"play\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":\"Animation\"}]]}]],[\"$\",\"p\",null,{\"className\":\"flex flex-[0_0_auto] font-variation-medium text-emphasis gap-3 sr-only @lg/card:not-sr-only\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex-[0_0_auto] bg-surface dark:bg-cornflour-500 dark:ring-1 dark:ring-cornflour-300 dark:group-hover/badge:ring-cornflour-100 shadow-reduced dark:shadow-none group-hover/badge:shadow-picked group-active/badge:shadow-reduced flex items-center justify-center transition-all duration-100 ease-linear w-8 h-8 rounded-sm text-[light-dark(var(--color-cornflour-700),var(--color-cornflour-900))]\",\"children\":[\"$\",\"$Lda\",null,{\"className\":\"text-current\",\"icon\":\"calendar\",\"size\":24,\"variant\":\"default\"}]}],[\"$\",\"span\",null,{\"className\":\"pt-[2px] text-base font-medium flex-[0_0_auto] transition-all duration-100 ease-linear font-body leading-none rounded flex items-center text-current relative top-px h-8\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2017-08-16T12:15:00+00:00\",\"className\":\"date\",\"children\":\"16th Aug 2017\"}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12\",\"children\":[\"$L10b\",\"$L10c\",\"$L10d\"]}]]}]]}],false,false,false]}]\n"])</script>
2<script>self.__next_f.push([1,"f1:[\"$\",\"h2\",null,{\"className\":\"p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl\",\"id\":\"title-0176-rules-i-follow-when-typesetting.md\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/blog/rules-i-follow-when-typesetting\",\"className\":\"text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1\",\"children\":\"Rules I follow when typesetting\"}]}]\nf2:[\"$\",\"div\",null,{\"className\":\"flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp className=\\\"font-body\\\"\u003eIâve developed some habits over the years when it comes to the display of text in a design with the aim of readability and aesthetic balance. And it feels like it could be useful to document this.\u003c/p\u003e\"}}]\nf3:[\"$\",\"div\",null,{\"className\":\"sr-only\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"author vcard url fn\",\"rel\":\"author\",\"tabIndex\":\"-1\",\"children\":\"Steve McKinney\"}],\" \",[\"$\",\"time\",null,{\"dateTime\":\"2026-03-28T21:47:00.168Z\",\"className\":\"updated\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2026-03-28T21:47:00.168Z\",\"className\":\"date\",\"children\":\"28th Mar 2026\"}]}]]}]\nf4:[\"$\",\"h2\",null,{\"className\":\"p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl\",\"id\":\"title-0175-bento-layout-css-grid.md\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/blog/bento-layout-css-grid\",\"className\":\"text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1\",\"children\":\"Bento grid layout with CSS grid and container queries\"}]}]\nf5:[\"$\",\"div\",null,{\"className\":\"flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp className=\\\"font-body\\\"\u003eBento grids offer a unique layout challenge for CSS. With the use of Tailwind you can create a flexible layout with modern CSS grid and @container queries.\u003c/p\u003e\"}}]\nf6:[\"$\",\"div\",null,{\"className\":\"sr-only\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"author vcard url fn\",\"rel\":\"author\",\"tabIndex\":\"-1\",\"children\":\"Steve McKinney\"}],\" \",[\"$\",\"time\",null,{\"dateTime\":\"2026-06-12T20:45:00.000Z\",\"className\":\"updated\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2026-06-12T20:45:00.000Z\",\"className\":\"date\",\"children\":\"12th Jun 2026\"}]}]]}]\nf7:[\"$\",\"$Lc5\",null,{\"href\":\"/blog/about-version-8\",\"className\":\"text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1\",\"children\":\"About version 8\"}]\nf8:[\"$\",\"div\",null,{\"className\":\"flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp className=\\\"font-body\\\"\u003eDesign and development decisions for the 8th version of this website. New design, using Next.js App Router and pretty much all in on Tailwind.\u003c/p\u003e\"}}]\nf9:[\"$\",\"div\",null,{\"className\":\"sr-only\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"author vcard url fn\",\"rel\":\"author\",\"tabIndex\":\"-1\",\"children\":\"Steve McKinney\"}],\" \",[\"$\",\"time\",null,{\"dateTime\":\"2024-02-29T11:13:38.269Z\",\"className\":\"updated\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2024-02-29T11:13:38.269Z\",\"className\":\"date\",\"children\":\"29th Feb 2024\"}]}]]}]\nfa:[\"$\",\"$Lc5\",null,{\"href\":\"/blog/about-version-7\",\"className\":\"text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absol"])</script>
2<script>self.__next_f.push([1,"ute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1\",\"children\":\"About version 7\"}]\nfb:[\"$\",\"div\",null,{\"className\":\"flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp className=\\\"font-body\\\"\u003eHow I moved 140 posts from a database CMS to a static site in Next.js. No redesign just website rebuild and some hindsight into the decision making.\u003c/p\u003e\"}}]\nfc:[\"$\",\"div\",null,{\"className\":\"sr-only\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"author vcard url fn\",\"rel\":\"author\",\"tabIndex\":\"-1\",\"children\":\"Steve McKinney\"}],\" \",[\"$\",\"time\",null,{\"dateTime\":\"2024-02-29T10:13:38.269Z\",\"className\":\"updated\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2024-02-29T10:13:38.269Z\",\"className\":\"date\",\"children\":\"29th Feb 2024\"}]}]]}]\n"])</script>
2<script>self.__next_f.push([1,"fd:[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl\",\"id\":\"title-0172-the-best-ink-trap-typefaces-for-websites.md\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/blog/the-best-ink-trap-typefaces-for-websites\",\"className\":\"text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1\",\"children\":\"The best ink trap typefaces for websites\"}]}],[\"$\",\"div\",null,{\"className\":\"flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp className=\\\"font-body\\\"\u003eA look at type that features prominent cuts or tapering into the type and a variety of recommendations you can use in your designs.\u003c/p\u003e\"}}],[\"$\",\"div\",null,{\"className\":\"sr-only\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"author vcard url fn\",\"rel\":\"author\",\"tabIndex\":\"-1\",\"children\":\"Steve McKinney\"}],\" \",[\"$\",\"time\",null,{\"dateTime\":\"2026-06-12T20:45:00+00:00\",\"className\":\"updated\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2026-06-12T20:45:00+00:00\",\"className\":\"date\",\"children\":\"12th Jun 2026\"}]}]]}]]}]\n"])</script>
2<script>self.__next_f.push([1,"fe:[\"$\",\"h2\",null,{\"className\":\"p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl\",\"id\":\"title-0170-atomic-font-size-management-with-sass.md\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/blog/atomic-font-size-management-with-sass\",\"className\":\"text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1\",\"children\":\"âAtomicâ font size management with Sass\"}]}]\nff:[\"$\",\"div\",null,{\"className\":\"flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp className=\\\"font-body\\\"\u003eIn a responsive world, managing font sizes can be tricky. So how can an atomic approach help?\u003c/p\u003e\"}}]\n100:[\"$\",\"div\",null,{\"className\":\"sr-only\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"author vcard url fn\",\"rel\":\"author\",\"tabIndex\":\"-1\",\"children\":\"Steve McKinney\"}],\" \",[\"$\",\"time\",null,{\"dateTime\":\"2019-10-10T11:44:17+00:00\",\"className\":\"updated\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2019-10-10T11:44:17+00:00\",\"className\":\"date\",\"children\":\"10th Oct 2019\"}]}]]}]\n"])</script>
2<script>self.__next_f.push([1,"101:[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2.5 px-8 pt-[.8125rem] @lg/card:pt-2 @lg/card:gap-3 @lg/card:px-12\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl\",\"id\":\"title-0169-tips-for-using-colour-effectively-in-web-illustration.md\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/blog/tips-for-using-colour-effectively-in-web-illustration\",\"className\":\"text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1\",\"children\":\"Tips for using colour effectively in web illustration\"}]}],[\"$\",\"div\",null,{\"className\":\"flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp className=\\\"font-body\\\"\u003eOur websites can offer us an important advantage when it comes to choosing colour for illustrationâconstraint.\u003c/p\u003e\"}}],[\"$\",\"div\",null,{\"className\":\"sr-only\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"author vcard url fn\",\"rel\":\"author\",\"tabIndex\":\"-1\",\"children\":\"Steve McKinney\"}],\" \",[\"$\",\"time\",null,{\"dateTime\":\"2021-07-13T17:31:38+00:00\",\"className\":\"updated\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2021-07-13T17:31:38+00:00\",\"className\":\"date\",\"children\":\"13th Jul 2021\"}]}]]}]]}]\n"])</script>
2<script>self.__next_f.push([1,"102:[\"$\",\"h2\",null,{\"className\":\"p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl\",\"id\":\"title-0168-nice-and-easy-lazy-loading-with-lazysizes-js.md\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/blog/nice-and-easy-lazy-loading-with-lazysizes-js\",\"className\":\"text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1\",\"children\":\"Nice and easy lazy loading with lazysizes.js\"}]}]\n103:[\"$\",\"div\",null,{\"className\":\"flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp className=\\\"font-body\\\"\u003eLazy loading doesnât have to be difficult, hereâs how to add smooth loading images to your website.\u003c/p\u003e\"}}]\n104:[\"$\",\"div\",null,{\"className\":\"sr-only\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"author vcard url fn\",\"rel\":\"author\",\"tabIndex\":\"-1\",\"children\":\"Steve McKinney\"}],\" \",[\"$\",\"time\",null,{\"dateTime\":\"2019-10-04T07:21:26+00:00\",\"className\":\"updated\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2019-10-04T07:21:26+00:00\",\"className\":\"date\",\"children\":\"4th Oct 2019\"}]}]]}]\n105:[\"$\",\"h2\",null,{\"className\":\"p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl\",\"id\":\"title-0167-a-year-in-writing-2017.md\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/blog/a-year-in-writing-2017\",\"className\":\"text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1\",\"children\":\"A year in writing â 2017\"}]}]\n106:[\"$\",\"div\",null,{\"className\":\"flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp className=\\\"font-body\\\"\u003eThis year I took it at a slower pace with the articles. It was a year I felt I didnât focus so much on this website, so I was quite surprised to see the website continue to grow.\u003c/p\u003e\"}}]\n107:[\"$\",\"div\",null,{\"className\":\"sr-only\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"author vcard url fn\",\"rel\":\"author\",\"tabIndex\":\"-1\",\"children\":\"Steve McKinney\"}],\" \",[\"$\",\"time\",null,{\"dateTime\":\"2019-10-04T07:21:53+00:00\",\"className\":\"updated\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2019-10-04T07:21:53+00:00\",\"className\":\"date\",\"children\":\"4th Oct 2019\"}]}]]}]\n108:[\"$\",\"h2\",null,{\"className\":\"p-0 m-0 leading-none text-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl\",\"id\":\"title-0166-illustrator-tip-which-stroke-alignment.md\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/blog/illustrator-tip-which-stroke-alignment\",\"className\":\"text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1\",\"children\":\"Illustrator quick tip: which stroke alignment?\"}]}]\n109:[\"$\",\"div\",null,{\"className\":\"flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp className=\\\"font-body\\\"\u003eThere are three types of stroke alignment, so when and where is each useful?\u003c/p\u003e\"}}]\n10a:[\"$\",\"div\",null,{\"className\":\"sr-only\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"author vcard url fn\",\"rel\":\"author\",\"tabIndex\":\"-1\",\"children\":\"Steve McKinney\"}],\" \",[\"$\",\"time\",null,{\"dateTime\":\"2019-10-04T07:22:23+00:00\",\"className\":\"updated\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2019-10-04T07:22:23+00:00\",\"className\":\"date\",\"children\":\"4th Oct 2019\"}]}]]}]\n10b:[\"$\",\"h2\",null,{\"className\":\"p-0 m-0 leading-none te"])</script>
2<script>self.__next_f.push([1,"xt-balance lowercase font-display font-variation-bold hyphens-auto text-3xl @lg/card:text-5xl\",\"id\":\"title-0165-search-overlay-with-smooth-reveal-animation.md\",\"children\":[\"$\",\"$Lc5\",null,{\"href\":\"/blog/search-overlay-with-smooth-reveal-animation\",\"className\":\"text-heading group-hover/card:text-[light-dark(var(--color-fern-800),var(--color-white))] transition duration-200 ease-out before:content-[''] before:absolute before:inset-0 before:cursor-pointer before:rounded-md @lg/card:before:rounded-lg before:z-1\",\"children\":\"Search overlay with smooth reveal animation\"}]}]\n10c:[\"$\",\"div\",null,{\"className\":\"flex-auto md:text-lg text-ui-body line-clamp-4 @lg/card:line-clamp-3\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cp className=\\\"font-body\\\"\u003eA common part of a website is the ability to search. Depending on how important search is to your website can define much of how it looks and how itâs prioritised in the design.\u003c/p\u003e\"}}]\n10d:[\"$\",\"div\",null,{\"className\":\"sr-only\",\"aria-hidden\":\"true\",\"tabIndex\":\"-1\",\"children\":[[\"$\",\"$Lc5\",null,{\"href\":\"/about\",\"className\":\"author vcard url fn\",\"rel\":\"author\",\"tabIndex\":\"-1\",\"children\":\"Steve McKinney\"}],\" \",[\"$\",\"time\",null,{\"dateTime\":\"2019-10-04T07:23:53+00:00\",\"className\":\"updated\",\"tabIndex\":\"-1\",\"children\":[\"$\",\"time\",null,{\"dateTime\":\"2019-10-04T07:23:53+00:00\",\"className\":\"date\",\"children\":\"4th Oct 2019\"}]}]]}]\n"])</script>
2<script>self.__next_f.push([1,"d5:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes, viewport-fit=cover\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"rgb(241 232 228)\"}]]\n"])</script>
2<script>self.__next_f.push([1,"10e:I[77549,[\"/_next/static/chunks/0r_wt5r3dc9tp.js\",\"/_next/static/chunks/31pt8a7ru2j-u.js\"],\"IconMark\"]\nd2:null\n"])</script>
2<script>self.__next_f.push([1,"d7:[[\"$\",\"title\",\"0\",{\"children\":\"Blog archive ⢠iamsteve\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Tips and tutorials about the design and build of web interfaces\"}],[\"$\",\"meta\",\"2\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"3\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://iamsteve.me/blog\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:title\",\"content\":\"iamsteve ⢠design \u0026 code blog\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:description\",\"content\":\"A blog by Steve McKinney about the design and build of websites. Bridging the gap between your design tool and code, with a focus on typography, CSS and visual craft.\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:url\",\"content\":\"https://iamsteve.me\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:site_name\",\"content\":\"iamsteve\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:locale\",\"content\":\"en_GB\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image\",\"content\":\"https://iamsteve.me/images/twitter-card.png\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image:height\",\"content\":\"600\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:alt\",\"content\":\"iamsteve â design and code blog\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:site\",\"content\":\"@irsteve\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:creator\",\"content\":\"@irsteve\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"iamsteve.me ⢠design \u0026 code blog\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"A blog by Steve McKinney about the design and build of websites. Bridging the gap between your design tool and code, with a focus on typography, CSS and visual craft.\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image\",\"content\":\"https://iamsteve.me/images/twitter-card.png\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image:alt\",\"content\":\"iamsteve â design and code blog\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image:height\",\"content\":\"600\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0wbxx1jac1un_.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/icon.svg?icon.27188g3n6dpua.svg\",\"sizes\":\"any\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"26\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?apple-icon.1himecj5p-ewa.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"}],[\"$\",\"$L10e\",\"27\",{}]]\n"])</script>
2<script>self.__next_f.push([1,"10f:I[63786,[\"/_next/static/chunks/2317sa_4mq8sr.js\",\"/_next/static/chunks/0agl4fg0_1a_y.js\",\"/_next/static/chunks/11lkkyb-gcm2d.js\",\"/_next/static/chunks/0sqa-0011n2kn.js\"],\"default\"]\nc8:[\"$\",\"$L10f\",null,{\"className\":\"$undefined\",\"unique\":\"footer\",\"initialCount\":700}]\n"])</script>
2<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"b17982b985db499fb61de957784195df","r":1,"spa":2}' crossorigin="anonymous"></script>
2 3</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.