*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}*{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (min-width: 1200px)and (orientation: landscape){.site{height:100%;display:grid;gap:var(--site-padding);grid-template-columns:[side-start] 1fr [side-end patterns-start] minmax(auto, 42%) [patterns-end];grid-template-rows:[skip] auto [skip-end header-start] 1fr [header-end pinboard-start] auto [pinboard-end footer-start] auto [footer-end];height:100%;overflow-y:hidden}}.site__skip-to-content{display:flex;justify-content:center;line-height:3;background-color:hsl(var(--color-hs-accent) 50%/0.5);text-transform:uppercase;font-feature-settings:"c2sc","smcp";font-weight:625;grid-column:1/-1}.site__skip-to-content:focus{color:var(--color-highlight);text-decoration-color:currentColor}.site__skip-to-content:not(:where(:active, :focus, :focus-within)){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.site__header{padding:var(--site-padding);padding-block-end:0;overflow:auto}@media screen and (min-width: 1200px)and (orientation: landscape){.site__header{grid-column:side-start/side-end;grid-row:header-start/header-end;display:flex;flex-direction:column;place-content:center;height:100%}}.site__pinboard{padding:var(--site-padding)}@media screen and (min-width: 1200px)and (orientation: landscape){.site__pinboard{padding:0;grid-row:pinboard-start/pinboard-end}}.site__content{background-color:#fff;border-radius:1.5em;box-shadow:0 0 0 2px var(--color-primary);padding:var(--site-padding);transition-property:transform,opacity;transition-duration:var(--base-animation-duration);transition-timing-function:var(--base-easing)}.site__content :where(a[target])::after{content:"↗"}.site__browse-button{margin-block-end:1em}.site__patterns{padding-inline:var(--site-padding);padding-inline-start:var(--site-padding);padding-inline-end:var(--site-padding);position:relative;padding-block-end:var(--site-padding);perspective:700px}@media screen and (min-width: 1200px)and (orientation: landscape){.site__patterns{padding-block-end:0;margin-block-start:0}}.site__patterns::after{background-color:#fff;border-radius:1.5em;box-shadow:0 0 0 2px var(--color-primary);--offset: clamp(70px, 20vw, 202px);content:"";position:absolute;height:calc(100% - var(--offset));bottom:0;left:0;right:0;z-index:-1}@media screen and (min-width: 1200px)and (orientation: landscape){.site__patterns::after{content:none}}@media screen and (min-width: 1200px)and (orientation: landscape){.site__patterns{grid-column:patterns-start/patterns-end;grid-row:1/-1;padding-inline:0;height:100%;overflow-y:auto}@supports not (padding-inline: 0){.site__patterns{padding-inline-start:var(--site-padding);padding-inline-end:var(--site-padding)}}}.site__footer{padding:var(--site-padding)}@media screen and (min-width: 1200px)and (orientation: landscape){.site__footer{grid-column:side-start/side-end;grid-row:footer-start/footer-end}}.site.vers--page{display:flex;flex-direction:column}@media screen and (min-width: 1200px)and (orientation: landscape){.site.vers--page{display:grid}}.site.vers--page .site__header{padding-block-end:var(--site-padding)}.site.vers--page .site__content{position:relative;flex:1}.site.vers--page .site__content :where(h1, h2, h3, h5, h6){line-height:1.25;margin-block-end:1em}.site.vers--page .site__content :where(h1, h2, h3, h5, h6):not(:first-child){margin-top:1.5em}.site.vers--page .site__content :where(p, li){line-height:1.5;font-weight:425;font-size:.85em}@media screen and (min-width: 720px){.site.vers--page .site__content :where(p, li){font-size:1em}}.site.vers--page .site__content :where(p + p){margin-block-start:1em}.site.vers--page .site__content :where(ul, ol, dl):not(:first-child){margin-block-start:1em}@media screen and (max-width: 1199px){.site.vers--page .site__content{border-end-end-radius:0;border-end-start-radius:0}}@media screen and (min-width: 1200px)and (orientation: landscape){.site.vers--page .site__content{grid-column:patterns-start/patterns-end;grid-row:1/-1;z-index:1;height:100%;overflow-y:auto;padding:calc(var(--site-padding) * 2);border-start-end-radius:0;border-end-end-radius:0}}.site.vers--page .site__content::after{content:"";position:absolute;display:block;inset-block-end:-2px;inset-inline:0;height:2px;background-color:#fff}@supports not (inset-inline: 0){.site.vers--page .site__content::after{bottom:-2px;left:0}}@media screen and (min-width: 1200px)and (orientation: landscape){.site.vers--page .site__content::after{content:none}}.site.vers--page .site__footer{background-color:#fff}@media screen and (min-width: 1200px)and (orientation: landscape){.site.vers--page .site__footer{background-color:transparent}}.site.vers--single-pattern{display:flex;flex-direction:column}@media screen and (min-width: 1200px)and (orientation: landscape){.site.vers--single-pattern{display:grid;gap:0}}.site.vers--single-pattern .site__header{padding:var(--site-padding)}.site.vers--single-pattern .site__patterns{display:none}@media screen and (min-width: 1200px)and (orientation: landscape){.site.vers--single-pattern .site__patterns{display:block}}.site.vers--single-pattern .site__content{border-end-end-radius:0;border-end-start-radius:0;position:relative;flex:1;display:flex;flex-direction:column;align-items:center}@media screen and (min-width: 1200px)and (orientation: landscape){.site.vers--single-pattern .site__content{grid-column:patterns-start/patterns-end;grid-row:header-start/footer-end;box-shadow:none;border-radius:none;background-color:transparent;z-index:1;height:100%;overflow-y:auto;padding:calc(var(--site-padding) * 2)}}.site.vers--single-pattern .site__content::after{content:"";position:absolute;display:block;inset-block-end:-2px;inset-inline:0;height:2px;background-color:#fff}@supports not (inset-inline: 0){.site.vers--single-pattern .site__content::after{bottom:-2px;left:0}}@media screen and (min-width: 1200px)and (orientation: landscape){.site.vers--single-pattern .site__content::after{content:none}}.site.vers--single-pattern .site__footer{background-color:#fff}@media screen and (min-width: 1200px)and (orientation: landscape){.site.vers--single-pattern .site__footer{background-color:transparent}}@media screen and (min-width: 1200px)and (orientation: landscape){.site.is--showing-pattern-details .pattern-list{transform:translateZ(-100px);opacity:.5;filter:blur(10px)}}.site.is--showing-patterns-navigation .site__content{transform:translateY(25%);opacity:0}:root{--color-hs-sandwisp: 58 83%;--color-hs-accent: var(--color-hs-sandwisp);--color-accent: hsl(var(--color-hs-accent) 77%);--color-hs-woodybrown: 345 19%;--color-hs-primary: var(--color-hs-woodybrown);--color-primary: hsl(var(--color-hs-primary) 25%);--color-hs-blue-marguerite: 233 44%;--color-hs-highlight: var(--color-hs-blue-marguerite);--color-highlight: hsl(var(--color-hs-highlight) 41%);--base-spacing: 1.5em;--base-padding: 1em;--base-easing: cubic-bezier(0.85, 0, 0.15, 1);--base-animation-duration: 1ms}@media(prefers-reduced-motion: no-preference){:root{--base-animation-duration: 300ms}}@media screen and (min-width: 1200px)and (orientation: landscape){:root{height:100%}}body{--site-padding: clamp(var(--base-spacing), 3vmax, var(--base-spacing) * 3.33);background-color:var(--color-accent);font-family:"Work Sans",system-ui,sans-serif;color:var(--color-primary)}a{color:var(--color-highlight);text-decoration-thickness:.15em}a:is(:hover,:focus,[aria-current]){color:hsl(var(--color-hs-highlight) 15%);text-decoration-color:hsl(var(--color-hs-accent) 50%)}.tile{background-color:#fff;border-radius:3px;padding:clamp(.25em, 5%, .5em);border:2px solid var(--color-override, var(--color-primary));transition-property:border-color;transition-duration:var(--base-animation-duration);transition-timing-function:var(--base-easing)}.card{background-color:#fff;box-shadow:0px 1px 1px rgba(0,0,0,.08),0px 1px 2px rgba(0,0,0,.04),0px 4px 6px rgba(0,0,0,.02),0px 8px 25px rgba(0,0,0,.02)}.pattern{background-color:#fff;border-radius:3px;padding:clamp(.25em, 5%, .5em);border:2px solid var(--color-override, var(--color-primary));transition-property:border-color;transition-duration:var(--base-animation-duration);transition-timing-function:var(--base-easing);background-color:#fff;box-shadow:0px 1px 1px rgba(0,0,0,.08),0px 1px 2px rgba(0,0,0,.04),0px 4px 6px rgba(0,0,0,.02),0px 8px 25px rgba(0,0,0,.02);aspect-ratio:1/1;position:relative;display:flex}.pattern__svg{display:block;width:100%;height:100%}.pattern__link{display:block;text-align:center;font-size:.75em;font-weight:500}@media(hover: none){.pattern__link{background-color:#fff;box-shadow:0px 1px 1px rgba(0,0,0,.08),0px 1px 2px rgba(0,0,0,.04),0px 4px 6px rgba(0,0,0,.02),0px 8px 25px rgba(0,0,0,.02);background-color:#fff;border-radius:3px;padding:clamp(.25em, 5%, .5em);border:2px solid var(--color-override, var(--color-primary));transition-property:border-color;transition-duration:var(--base-animation-duration);transition-timing-function:var(--base-easing);position:absolute;inset-block-end:1em;inset-inline-end:1em}@supports not (inset-inline: 0){.pattern__link{bottom:1em;right:1em}}}.pattern__link::before{content:"";position:absolute;inset:0;z-index:1}.pattern__link::after{content:"";position:absolute;inset:0;background-color:var(--color-accent);mix-blend-mode:darken;width:0;opacity:0;z-index:1;transition-property:width,opacity;transition-duration:var(--base-animation-duration),calc(var(--base-animation-duration)/2.5);transition-timing-function:var(--base-easing),linear;transition-delay:0ms,calc(var(--base-animation-duration)/2.5)}@media screen and (min-width: 1200px)and (orientation: landscape){.pattern__link::after{background-color:hsl(var(--color-hs-accent) 66%)}}@media(hover: hover){.pattern__link:is(:hover,:focus)::after{width:100%;opacity:1}.pattern__link>:where(.icon, .text){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}.pattern__link>.icon svg{display:block;width:1em;height:auto;transform:rotate(-90deg)}.pattern__link>.text{line-height:2}.pattern.vers--rect{aspect-ratio:831/203}.button{--inset-shadow-size: -3px;font-family:var(--typeface-headings);font-weight:725;color:var(--color-primary);font-feature-settings:"c2sc","smcp";display:inline-flex;border:2px solid var(--color-primary);border-radius:4px;padding:.5em 1em;line-height:1;background-color:#fff;box-shadow:inset 0px var(--inset-shadow-size) rgba(0,0,0,.15),0px 1px 1px rgba(0,0,0,.25),0px 1px 1px rgba(0,0,0,.08),0px 1px 2px rgba(0,0,0,.04),0px 4px 6px rgba(0,0,0,.02),0px 8px 25px rgba(0,0,0,.02)}.button:is(:hover,:focus){cursor:pointer;color:var(--color-highlight);transform:translateY(1px)}.button:active{--inset-shadow-size: 0;transform:translateY(1px)}.category{font-size:.9em;font-weight:600;font-feature-settings:"c2sc","smcp";background-color:var(--color-accent);border-radius:2px;line-height:1;padding:.2em .3em;display:inline-flex;align-items:center}.prev-next{display:flex;flex-direction:column;gap:.5em}.prev-next__label{font-size:.85em;text-transform:uppercase;font-feature-settings:"c2sc","smcp";font-weight:775;white-space:nowrap}@media screen and (min-width: 720px){.prev-next__label{font-size:1em}}.update{display:flex;flex-direction:column;gap:1em}.update__header{display:flex;align-items:center;justify-content:space-between}.update__version{margin:0;margin-block-end:0 !important}.update__content :where(ul, ol, dl){padding-inline-start:2em}.menu{list-style:none;padding-inline-start:0;display:flex;justify-content:center;flex-wrap:wrap;gap:.5em}.menu__item{display:flex;align-items:center}.menu__item+.menu__item::before{content:"-";display:inline-block;margin-inline-end:.5em}.mobile-navigation__close-button{display:none}@media screen and (max-width: 1199px)and (orientation: portrait){.mobile-navigation:not([hidden]){position:fixed;inset-block-start:0;inset-inline:0;z-index:2;display:flex;flex-direction:column;gap:var(--site-padding);align-items:center;padding:calc(var(--site-padding) * 2) var(--site-padding)}@supports not (inset-inline: 0){.mobile-navigation:not([hidden]){top:0;left:0}}.mobile-navigation:not([hidden])::before{content:"";position:absolute;height:100vh;inset:0;z-index:-1;backdrop-filter:blur(5px);background-image:url("/svg/pattern/35.svg")}.mobile-navigation:not([hidden])::after{content:"";position:absolute;inset:0;background-color:#fff;border-radius:1.5em;box-shadow:0 0 0 2px var(--color-primary);border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:1.5em;border-end-end-radius:1.5em;z-index:-1}.mobile-navigation:not([hidden])+.site__content{filter:blur(1px)}.mobile-navigation:not([hidden]) .mobile-navigation__close-button{display:block}.mobile-navigation:not([hidden]) .mobile-navigation__menu{margin:0}}.logo{--margin-block-start-end: clamp(var(--base-spacing), 10vh, var(--base-spacing) * 3);display:flex;flex-direction:column;text-align:center;margin-block:var(--margin-block-start-end);margin-block-start:var(--margin-block-start-end);margin-block-end:var(--margin-block-start-end);line-height:1}.logo__headline{font-weight:775;margin-block-end:max(.3em, 10px);font-size:clamp(2em, 3.5vmax, 4em);color:var(--color-primary);text-decoration:none;text-align:center;max-width:19ch;align-self:center;white-space:pre}.logo__headline>a{color:inherit;text-decoration:inherit}.logo__subheadline{font-size:1em;font-weight:475}@media screen and (min-width: 1200px){.logo__subheadline{font-size:1.5em}}.logo__menu-button{display:none}.logo__menu{font-size:.875em;margin-block-start:2em;font-weight:675;display:block}@media screen and (max-width: 1199px)and (orientation: portrait){.logo.compact{margin-block:0;margin-block-start:0;margin-block-end:0;display:grid;grid-template-columns:1fr auto;column-gap:1em;text-align:left;align-items:center}.logo.compact .logo__headline{text-align:inherit;font-size:1.5em}.logo.compact .logo__subheadline{font-size:.85em;grid-row:2;line-height:1.25}.logo.compact .logo__menu-button{display:inline-flex !important}}@media screen and (max-width: 1199px)and (orientation: portrait)and (min-width: 720px){.logo.compact .logo__menu-button{display:none}}@media screen and (max-width: 1199px)and (orientation: portrait){.logo.compact .logo__menu{grid-column:2/-1;grid-row:1/2;margin:0;justify-content:flex-end}.logo.compact .logo__menu[hidden]{display:none}}@media screen and (max-width: 1199px)and (orientation: portrait)and (min-width: 720px){.logo.compact .logo__menu{display:flex}}.pattern-list{--gap: clamp(.5em, 1.25vw, 1.5em);--columns: 3;--column-gaps: calc(var(--gap) * (var(--columns) - 1) );--vertical-offset: calc( ( ((100% - (var(--site-padding) * 2)) - var(--column-gaps) ) / var(--columns)) / 1.6 );list-style:none;margin-block-start:0;padding-inline-start:0;padding-block-start:var(--vertical-offset);gap:var(--gap);display:grid;grid-template-columns:repeat(var(--columns), clamp(68px, (100% - var(--column-gaps)) / var(--columns), 202px));justify-content:center;transform:translateZ(0);opacity:1;transition-property:transform,opacity,filter;transition-duration:var(--base-animation-duration);transition-timing-function:var(--base-easing)}@media screen and (min-width: 1200px)and (orientation: landscape){.pattern-list{--columns: 4;justify-content:end;padding-inline-end:var(--gap);padding-block-end:var(--gap);margin-block-start:2em}}.pattern-list__item{margin:0}.pattern-list__item:hover{--color-override: var(--color-highlight)}.pattern-list__item[aria-current]{position:relative;--color-override: var(--color-highlight)}.pattern-list__item[aria-current]::after{content:"";position:absolute;inset:0;background-color:var(--color-override);mix-blend-mode:screen}@media screen and (max-width: 1199px){.pattern-list__item:nth-child(3n-1){transform:translateY(calc(-50% - calc(var(--gap)) / 2))}}@media screen and (min-width: 1200px){.pattern-list__item:nth-child(even){transform:translateY(calc(-50% - calc(var(--gap)) / 2))}}.pin{padding:1em;border-radius:3px;background-color:hsl(var(--color-hs-primary) 25%/5%);border:1px solid hsl(var(--color-hs-primary) 25%/10%);position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:1em}.pin:is(:hover,:focus){color:var(--color-highlight)}@media screen and (min-width: 1200px)and (orientation: landscape){.pin{background-color:transparent;border:none;padding:0}}.pin__version{order:1;line-height:1;font-size:.875em}.pin__name{order:2;line-height:1;font-size:.875em}.pin__link{order:3}.pin__link{display:block;width:100%;text-align:center;font-size:.875em;line-height:1}.pin__link::before{content:"";position:absolute;inset:0}@media(hover: hover){.pin__link{position:absolute;inset:0;opacity:0}}.updates-list{padding-inline-start:0;display:flex;flex-direction:column;gap:var(--site-padding);margin-block-start:var(--site-padding) !important}.updates-list__item{font-size:1em !important}.pattern-entry{display:flex;flex-direction:column;gap:var(--site-padding);max-width:min(100%, 640px);margin:0 auto}@media screen and (min-width: 1200px)and (orientation: landscape){.pattern-entry{background-color:#fff;border-radius:3px;padding:clamp(.25em, 5%, .5em);border:2px solid var(--color-override, var(--color-primary));transition-property:border-color;transition-duration:var(--base-animation-duration);transition-timing-function:var(--base-easing);background-color:#fff;box-shadow:0px 1px 1px rgba(0,0,0,.08),0px 1px 2px rgba(0,0,0,.04),0px 4px 6px rgba(0,0,0,.02),0px 8px 25px rgba(0,0,0,.02);padding:var(--site-padding);border-radius:inherit;border-end-start-radius:1.5em;border-end-end-radius:1.5em}}.pattern-entry__pattern{display:flex;flex-direction:column;gap:var(--site-padding)}@media screen and (min-width: 1200px)and (orientation: landscape){.pattern-entry__pattern{flex-direction:column;gap:calc(var(--site-padding) / 2)}}.pattern-entry__pattern>.pattern{margin-block-end:0}@media screen and (min-width: 1200px)and (orientation: landscape){.pattern-entry__pattern>.pattern{width:100%}}.pattern-entry__pattern-caption{display:flex;flex-direction:column;gap:calc(var(--site-padding) / 2)}.pattern-entry__title{line-height:1;font-size:1.5em}@media screen and (min-width: 720px){.pattern-entry__title{font-size:1.75em}}@media screen and (min-width: 1200px)and (orientation: landscape){.pattern-entry__title{font-size:2em}}.pattern-entry__category-list{list-style-type:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5em}.pattern-entry__code{overflow:auto;font-size:.7em;border-radius:5px;overflow:hidden}@media screen and (min-width: 1200px)and (orientation: landscape){.pattern-entry__code{font-size:.85em}}.pattern-entry__code>pre{margin:0 !important;padding:clamp(1em, 3vw, 2em) !important}.pattern-entry__copy-button{margin-inline-start:auto}.pattern-entry__prev-next{display:flex;gap:var(--site-padding)}.pattern-entry__prev-next>*{flex:50%;max-width:50%}.pattern-entry__prev-next>*.vers--next{margin-inline-start:auto;text-align:end}.pattern-entry__prev-next>*.vers--previous{margin-inline-end:auto}.footer{text-align:center}