:root{--grid-max-width: 101.75rem;--grid-columns: 1;--grid-gutter: var(--space-s-l, clamp(1.00rem, calc(0.60rem + 1.98vw), 2.25rem));--typography-size--1: clamp(0.89rem, calc(0.89rem + 0.01vw), 0.90rem);--typography-size-0: clamp(1.00rem, calc(0.97rem + 0.16vw), 1.13rem);--typography-size-1: clamp(1.13rem, calc(1.05rem + 0.35vw), 1.41rem);--typography-size-2: clamp(1.27rem, calc(1.14rem + 0.62vw), 1.76rem);--typography-size-3: clamp(1.42rem, calc(1.23rem + 0.97vw), 2.20rem);--typography-size-4: clamp(1.60rem, calc(1.32rem + 1.43vw), 2.75rem);--typography-size-5: clamp(1.80rem, calc(1.39rem + 2.04vw), 3.43rem);--typography-size-6: clamp(2.03rem, calc(1.46rem + 2.83vw), 4.29rem);--space-100: clamp(0.25rem, calc(0.23rem + 0.08vw), 0.31rem);--space-200: clamp(0.50rem, calc(0.48rem + 0.08vw), 0.56rem);--space-300: clamp(0.75rem, calc(0.72rem + 0.16vw), 0.88rem);--space-400: clamp(1.00rem, calc(0.97rem + 0.16vw), 1.13rem);--space-500: clamp(1.50rem, calc(1.45rem + 0.23vw), 1.69rem);--space-600: clamp(2.00rem, calc(1.94rem + 0.31vw), 2.25rem);--space-700: clamp(3.00rem, calc(2.91rem + 0.47vw), 3.38rem);--space-800: clamp(4.00rem, calc(3.88rem + 0.63vw), 4.50rem);--space-900: clamp(6.00rem, calc(5.81rem + 0.94vw), 6.75rem);--space-100--200: clamp(0.25rem, calc(0.17rem + 0.39vw), 0.56rem);--space-200--300: clamp(0.50rem, calc(0.41rem + 0.47vw), 0.88rem);--space-300--400: clamp(0.75rem, calc(0.66rem + 0.47vw), 1.13rem);--space-400--500: clamp(1.00rem, calc(0.83rem + 0.86vw), 1.69rem);--space-500--600: clamp(1.50rem, calc(1.31rem + 0.94vw), 2.25rem);--space-600--700: clamp(2.00rem, calc(1.66rem + 1.72vw), 3.38rem);--space-700--800: clamp(3.00rem, calc(2.63rem + 1.88vw), 4.50rem);--space-800--900: clamp(4.00rem, calc(3.31rem + 3.44vw), 6.75rem);--space-grid: clamp(1.00rem, calc(0.69rem + 1.56vw), 2.25rem);--red: #fe0927;--blue: #40d6f c;--orange: #ff7f00;--pink: #fe0984;--yellow: #f2ff00;--green: #00ff38;--purple: #a80fff;--red-rgb: 254, 9, 39;--blue-rgb: 64, 214, 252;--orange-rgb: 255, 127, 0;--pink-rgb: 254, 9, 132;--yellow-rgb: 242, 255, 0;--green-rgb: 0, 255, 56;--purple-rgb: 168, 15, 255;--color-primary-rgb: var(--pink-rgb);--color-primary: rgb(var(--color-primary-rgb));--color-light: color-mix(in srgb, rgb(var(--color-primary-rgb)) 4%, #ffffff);--color-dark: color-mix(in srgb, rgb(var(--color-primary-rgb)) 4%, #000000);--page-bg-color: color-mix(in srgb, rgb(var(--color-primary-rgb)), hsl(0, 0%, 0%) 92%);--color-foreground: var(--color-dark);--color-background: var(--color-light)}*,*::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}}html{background-color:var(--page-bg-color);padding-inline:var(--grid-gutter);margin-inline:auto}body{background-color:var(--color-background);background-image:url("https://assets.codepen.io/26/subtle-dots.png");background-attachment:fixed;color:var(--color-foreground);font-family:"Overpass Mono",monospace;font-weight:300;font-size:var(--typography-size-0);line-height:1.6;padding:0 var(--grid-gutter);display:grid;gap:var(--grid-gutter);grid-template-columns:repeat(var(--grid-columns), 1fr);grid-template-rows:max-content max-content 1fr}h1,h2,h3,h4,h5,h6,.dt-c-header__title{font-family:"Audiowide",cursive}time>p{font-size:var(--typography-size-1)}a{text-decoration:none}.card-body h5{text-decoration:none}.card img,.eleventy-plugin-youtube-embed{aspect-ratio:16/9;object-fit:cover;padding:0;width:calc(100% + 2rem);margin:0 -1rem 0 -1rem;max-width:unset}.card{border:1px solid rgba(var(--color-primary-rgb), 0.5);border-radius:4px;padding:1rem;display:grid;grid-row:auto/span var(--card-rows, 4);row-gap:.5rem;background-color:rgba(var(--color-primary-rgb), 0.025)}.card-body{display:flex;flex-direction:column}.card:hover{border-color:rgba(var(--color-primary-rgb), 0.75)}.card-title{margin-bottom:0;letter-spacing:.025rem}.card-title a{position:relative}.card-title a[href]::after{content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0}.card-date,.card-author{font-size:var(--typography-size--1)}.card-date{margin-block-start:var(--space-100--200)}.card-text{margin-top:1rem}.card-paywall{align-self:end}.dt-c-header__title{font-size:var(--typography-size-3)}a:visited{color:var(--color-foreground)}.card-img-top{height:auto;max-width:100%}.card-title{font-size:var(--typography-size-2)}.card-title a{color:currentColor}section{display:grid;grid-column:1/-1;gap:4rem 2rem}@media(min-width: 900px){section{grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));grid-template-rows:max-content 1fr}section .card{grid-row:span 3;display:grid;grid-template-rows:subgrid}}.dt-c-header{grid-column:1/-1}.sr-c-content{display:grid;grid-column:auto/span var(--grid-columns);grid-template-columns:subgrid}.dt-c-header__title{color:var(--color-primary)}.dt-c-header__title a{color:currentColor}.select-items{grid-column:1/-1;display:flex;gap:1.5rem;align-items:space-between}.select-items fieldset{border:0}card-tag{font-size:var(--typography-size--1);color:inherit;word-wrap:balance;word-break:break-word}.card-body{gap:1rem}.controls{display:flex;flex-wrap:wrap}.select-items{display:grid;grid-template-columns:1fr}fieldset{all:unset}.tag-button{all:unset;border:1px solid rgba(var(--color-primary-rgb), 0.5);padding:.25rem .5rem;border-radius:4px;cursor:pointer}#tagButtons{display:flex;gap:1rem;align-items:center}.sr-c-content{row-gap:2rem}.controls{gap:1rem}select{border:1px solid var(--color-primary);padding:.5rem 1rem;background:none;appearance:none;border-radius:4px;-moz-appearance:none;-webkit-appearance:none;background-image:url("/images/arrow.svg");background-position:right .5rem center;background-repeat:no-repeat;background-size:1rem;padding-right:1.5rem}select::-ms-expand{display:none}button:hover,button.active{border-color:rgba(var(--color-primary-rgb), 0.75)}.card--video{--card-rows: 2}.card--tools{--card-rows: 2}.card--tools img{max-width:calc(100% + 2rem)}