/* -------------------------------------------------
	GLOBAL RESET
	A Combination of Eric Meyer's CSS Reset and Normalize.css
	http://meyerweb.com/eric/tools/css/reset/ 
	v2.0 | 20110126
	License: none (public domain)

	normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
	display: block; }
body {
	line-height: 1; }
ol, ul {
	list-style: none; }
summary {
	display: list-item; }
blockquote, q {
	quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none; }
table {
	border-collapse: collapse;
	border-spacing: 0; }
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible; }
pre, code, kbd, samp {
	font-family: monospace, monospace;
	font-size: 1rem; }
a {
	background-color: transparent;
	text-decoration-thickness: var(--border-thin);
	text-underline-offset: var(--space-2xs);
	transition: all var(--transition-fast) var(--transition-inout); }
abbr[title] {
	border-block-end: none;
	text-decoration: underline;
	text-decoration: underline dotted; }
small {
	font-size: 80%; }
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline; }
sub {
	bottom: -0.25em; }
sup {
	top: -0.5em; }
img {
	border-style: none; }
button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0; }
button, input {
	overflow: visible; }
button, select { 
	text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] {
	-webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText; }
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal; }
progress {
	vertical-align: baseline; }
textarea {
	overflow: auto; }
[type="checkbox"], [type="radio"] {
	box-sizing: border-box;
	padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
	height: auto; }
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px; }
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none; }
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit; }
template {
	display: none; }
[hidden] {
	display: none; }

/* -----------------------------------------------
GLOBAL VARIABLES
----------------------------------------------- */

:root {
	color-scheme: light dark;
	&[data-color-scheme~="light"] {
		color-scheme: light;
	}
	&[data-color-scheme~="dark"] {
		color-scheme: dark;
	}
	
	--f-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', Ubuntu, ui-sans-serif, Arial, sans-serif;
	--f-serif: 'Zodiak', Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
	--f-mono: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Inconsolata', ui-monospace, Monaco, Consolas, monospace;
	
	--c-purple-500: hsla(253,25%,23%,1);
	--c-purple-400: hsla(253,35%,38%,1);
	--c-purple-300: hsla(253,44%,53%,1);
	--c-purple-200: hsla(253,49%,63%,1);
	--c-purple-100: hsla(253,54%,73%,1);
	--c-purple-300-0: hsla(253,44%,53%,0);
	--c-purple-300-10: hsla(253,44%,53%,0.1);
	--c-purple-300-25: hsla(253,44%,53%,0.25);
	--c-blue-500: hsla(205,43%,24%,1);
	--c-blue-400: hsla(205,53%,39%,1);
	--c-blue-300: hsla(205,63%,54%,1);
	--c-blue-200: hsla(205,68%,64%,1);
	--c-blue-100: hsla(205,73%,74%,1);
	--c-blue-300-10: hsla(205,63%,54%,0.1);
	--c-blue-300-25: hsla(205,63%,54%,0.25);
	--c-green-500: hsla(108,56%,30%,1);
	--c-green-400: hsla(108,56%,40%,1);
	--c-green-300: hsla(108,56%,50%,1);
	--c-green-200: hsla(108,56%,60%,1);
	--c-green-100: hsla(108,56%,70%,1);
	--c-green-300-10: hsla(108,56%,50%,0.1);
	--c-green-300-25: hsla(108,56%,50%,0.25);
	--c-yellow-500: hsla(47,85%,37%,1);
	--c-yellow-400: hsla(47,85%,47%,1);
	--c-yellow-300: hsla(47,85%,57%,1);
	--c-yellow-200: hsla(47,90%,67%,1);
	--c-yellow-100: hsla(47,95%,77%,1);
	--c-yellow-300-10: hsla(47,85%,57%,0.1);
	--c-yellow-300-25: hsla(47,85%,57%,0.25);
	--c-orange-500: hsla(32,92%,37%,1);
	--c-orange-400: hsla(32,92%,47%,1);
	--c-orange-300: hsla(32,92%,57%,1);
	--c-orange-200: hsla(32,92%,67%,1);
	--c-orange-100: hsla(32,92%,77%,1);
	--c-orange-300-10: hsla(32,92%,57%,0.1);
	--c-orange-300-25: hsla(32,92%,57%,0.25);
	--c-red-500: hsla(0,92%,37%,1);
	--c-red-400: hsla(0,92%,47%,1);
	--c-red-300: hsla(0,92%,57%,1);
	--c-red-200: hsla(0,92%,67%,1);
	--c-red-100: hsla(0,92%,77%,1);
	--c-red-300-10: hsla(0,92%,57%,0.1);
	--c-red-300-25: hsla(0,92%,57%,0.25);
	--c-neutral-dark-grey: hsla(240,6%,21%,1);
	--c-neutral-med-grey: hsla(240,3%,35%,1);
	--c-neutral-mid-grey: hsla(240,2%,48%,1);
	--c-neutral-light-grey: hsla(240,6%,81%,1);
	--c-neutral-lighter-grey: hsla(240,10%,88%,1);
	--c-neutral-off-white: hsla(240,27%,96%,1);
	--c-neutral-white-100: hsla(0,0%,100%,1);
	--c-neutral-black-100: hsla(0,0%,0%,1);
	--c-neutral-white-90: hsla(0,0%,100%,0.9);
	--c-neutral-black-90: hsla(0,0%,0%,0.9);
	--c-neutral-white-75: hsla(0,0%,100%,0.75);
	--c-neutral-black-75: hsla(0,0%,0%,0.75);
	--c-neutral-white-50: hsla(0,0%,100%,0.5);
	--c-neutral-black-50: hsla(0,0%,0%,0.5);
	--c-neutral-white-25: hsla(0,0%,100%,0.25);
	--c-neutral-black-25: hsla(0,0%,0%,0.25);
	--c-neutral-white-10: hsla(0,0%,100%,0.1);
	--c-neutral-black-10: hsla(0,0%,0%,0.1);
	--c-neutral-white-5: hsla(0,0%,100%,0.05);
	--c-neutral-black-5: hsla(0,0%,0%,0.05);
	--c-neutral-white-0: hsla(0,0%,100%,0);
	--c-neutral-black-0: hsla(0,0%,0%,0);
	
	--c-glint: light-dark(var(--c-neutral-white-25),var(--c-neutral-white-5));
	--c-fade: light-dark(var(--c-purple-300-10),var(--c-neutral-black-25));
	--c-fade-end: light-dark(var(--c-purple-300-0),var(--c-neutral-black-0));
	
	--g-purple: linear-gradient(0deg, var(--c-purple-400) 0%, var(--c-purple-300) 15%, var(--c-purple-300) 85%, var(--c-purple-200) 100%);
	--g-purple-dark: linear-gradient(0deg, var(--c-purple-400) 0%, var(--c-purple-300) 100%);
	--g-blue: linear-gradient(0deg, var(--c-blue-400) 0%, var(--c-blue-300) 15%, var(--c-blue-300) 85%, var(--c-blue-200) 100%);
	--g-blue-dark: linear-gradient(0deg, var(--c-blue-300) 0%, var(--c-blue-200) 100%);
	--g-yellow: linear-gradient(0deg, var(--c-yellow-400) 0%, var(--c-yellow-300) 15%, var(--c-yellow-300) 85%, var(--c-yellow-200) 100%);
	--g-yellow-dark: linear-gradient(0deg, var(--c-yellow-300) 0%, var(--c-yellow-200) 100%);
	--g-glint: linear-gradient(0deg, var(--c-neutral-white-0) 0%, var(--c-glint) 100%);
	--g-fade: linear-gradient(0deg, var(--c-fade-end) 0%, var(--c-fade) 100%);
	--g-shine: linear-gradient(15deg, var(--c-neutral-white-0) 0%, var(--c-glint) 100%);
	--g-grade: linear-gradient(0deg, var(--c-fade) 0%, var(--c-glint) 100%);
	
	--c-text: light-dark(var(--c-neutral-dark-grey),var(--c-neutral-white-90));
	--c-heading: light-dark(var(--c-neutral-black-100),var(--c-neutral-white-100));
	--c-icon: light-dark(var(--c-neutral-dark-grey),var(--c-neutral-white-100));
	--c-primary: light-dark(var(--c-purple-300),var(--c-yellow-300));
	--c-reverse: light-dark(var(--c-neutral-white-100),var(--c-neutral-dark-grey));
	--c-link: light-dark(var(--c-blue-400),var(--c-yellow-300));
	--c-link-v-light: color-mix(in oklab, var(--c-blue-400), var(--c-text) 67%);
	--c-link-v-dark: color-mix(in oklab, var(--c-yellow-300), var(--c-text) 75%);
	--c-link-visited: light-dark(var(--c-link-v-light),var(--c-link-v-dark));
	--c-link-hover: light-dark(var(--c-purple-500),var(--c-yellow-200));
	--c-link-active: light-dark(var(--c-neutral-black-100),var(--c-neutral-white-100));
	--c-danger: light-dark(var(--c-red-300),var(--c-red-200));
	--c-danger-hover: light-dark(var(--c-red-500),var(--c-neutral-white-100));
	--c-secondary: light-dark(var(--c-blue-300),var(--c-blue-200));
	--c-secondary-hover: light-dark(var(--c-blue-400),var(--c-blue-100));
	--c-bg-selected: light-dark(var(--c-purple-300),var(--c-yellow-300));
	--c-bg-selected-hover: light-dark(var(--c-purple-400),var(--c-yellow-200));
	--c-bg-body: light-dark(var(--c-neutral-off-white),var(--c-purple-500));
	--c-bg-accent: light-dark(var(--c-neutral-black-10),var(--c-neutral-white-10));
	--c-bg-contrast: light-dark(var(--c-neutral-black-25),var(--c-neutral-white-25));
	--c-bg-shade: var(--c-neutral-black-10);
	--c-bg-darken: var(--c-neutral-black-25);
	--c-bg-tint: var(--c-neutral-white-10);
	--c-bg-lighten: var(--c-neutral-white-25);
	--c-bg-link: light-dark(var(--c-purple-300-10),var(--c-neutral-black-25));
	--c-bg-danger: light-dark(var(--c-red-300-10),var(--c-red-300-25));
	--c-bg-pre: light-dark(var(--c-purple-500),var(--c-neutral-black-25));
	--c-text-pre: var(--c-neutral-white-100);
	--c-bg-highlight: light-dark(var(--c-purple-300-10),var(--c-neutral-white-10));
	--c-btn-primary: var(--g-purple);
	--c-btn-primary-hover: var(--g-purple-dark);
	
	--c-bg-card: light-dark(var(--c-neutral-white-50),var(--c-neutral-black-10));
	--c-bg-card-hover: light-dark(var(--c-neutral-white-100),var(--c-neutral-black-25));
	--c-border-card: var(--c-neutral-black-10);
	--c-border-card-hover: var(--c-neutral-black-25);

	--elevation-selected: 2;
	--elevation-menu: 10;
	--elevation-notification: 100;
	--elevation-overlay: 999;
	--elevation-modal: 1000;

	--font-size-tiny: clamp(0.64rem, calc(0.5843rem + 0.2783vw), 0.8rem);
	--font-size-small: clamp(0.8rem, calc(0.7304rem + 0.3478vw), 1rem);
	--font-size-body: clamp(1rem, calc(0.913rem + 0.4348vw), 1.25rem);
	--font-size-large: clamp(1.25rem, calc(1.1413rem + 0.5435vw), 1.5625rem);
	--font-size-h6: clamp(1.25rem, calc(1.1413rem + 0.5435vw), 1.5625rem);
	--font-size-h5: clamp(1.5625rem, calc(1.4266rem + 0.6793vw), 1.9531rem);
	--font-size-h4: clamp(1.9531rem, calc(1.7833rem + 0.8492vw), 2.4414rem);
	--font-size-h3: clamp(2.4414rem, calc(2.2291rem + 1.0615vw), 3.0518rem);
	--font-size-h2: clamp(3.0518rem, calc(2.7864rem + 1.3269vw), 3.8147rem);
	--font-size-h1: clamp(3.8147rem, calc(3.483rem + 1.6586vw), 4.7684rem);
	
	--font-weight-thin: 100;
	--font-weight-xlight: 200;
	--font-weight-light: 300;
	--font-weight-reg: 400;
	--font-weight-med: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-xbold: 800;
	--font-weight-black: 900;
	
	--line-height-tiny: 1.5rem;
	--line-height-small: clamp(1.25rem, calc(1.163rem + 0.4348vw), 1.5rem);
	--line-height-tight: clamp(1.25rem, calc(1.163rem + 0.4348vw), 1.5rem);
	--line-height-body: clamp(1.5rem, calc(1.3261rem + 0.8696vw), 2rem);
	--line-height-large: clamp(1.5rem, calc(1.3261rem + 0.8696vw), 2rem);
	--line-height-btn: 1;
	--line-height-h6: clamp(1.25rem, calc(1.163rem + 0.4348vw), 1.5rem);
	--line-height-h5: clamp(1.5rem, calc(1.3261rem + 0.8696vw), 2rem);
	--line-height-h4: clamp(2rem, calc(1.8261rem + 0.8696vw), 2.5rem);
	--line-height-h3: clamp(2.5rem, calc(2.3261rem + 0.8696vw), 3rem);
	--line-height-h2: clamp(3rem, calc(2.6522rem + 1.7391vw), 4rem);
	--line-height-h1: clamp(4rem, calc(3.6522rem + 1.7391vw), 5rem);

	--space-4xl: clamp(4.81rem, calc(4.40rem + 2.07vw), 6.00rem); /* 76-96px */
	--space-3xl: clamp(3.63rem, calc(3.32rem + 1.52vw), 4.50rem); /* 58-72px */
	--space-2xl: clamp(2.38rem, calc(2.16rem + 1.09vw), 3.00rem); /* 38-48px */
	--space-xl: clamp(1.63rem, calc(1.49rem + 0.65vw), 2.00rem); /* 26-32px */
	--space-l: clamp(1.19rem, calc(1.08rem + 0.54vw), 1.50rem); /* 19-24px */
	--space-xm: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem); /* 16-20px */
	--space-m: clamp(0.81rem, calc(0.75rem + 0.33vw), 1.00rem); /* 13-16px */
	--space-s: clamp(0.63rem, calc(0.58rem + 0.22vw), 0.75rem); /* 10-12px */
	--space-xs: clamp(0.38rem, calc(0.33rem + 0.22vw), 0.50rem); /* 6-8px */
	--space-2xs: clamp(0.19rem, calc(0.17rem + 0.11vw), 0.25rem); /* 3-4px */
	--space-3xs: 0.13rem; /* 2px */
	--space-single: 1px;
	--space-none: 0;
	
	--transition-fast: 0.25s;
	--transition-med: 0.5s;
	--transition-slow: 1s;

	--transition-bounce: cubic-bezier(0.5, -0.7, 0.5, 1.7);
	--transition-inout: ease-in-out;
	
	--border-thickest: var(--space-s);
	--border-thicker: var(--space-xs);
	--border-thick: var(--space-2xs);
	--border-med: var(--space-3xs);
	--border-thin: var(--space-single);
	--border-none: 0;
	
	--radius-circle: 50%;
	--radius-l: var(--space-m);
	--radius-m: var(--space-s);
	--radius-m-left: var(--space-s) 0 0 var(--space-s);
	--radius-m-right: 0 var(--space-s) var(--space-s) 0;
	--radius-s: var(--space-2xs);
	--radius-s-left: var(--space-2xs) 0 0 var(--space-2xs);
	--radius-s-right: 0 var(--space-2xs) var(--space-2xs) 0;
	--radius-none: 0;
	
	--opacity-100: 1;
	--opacity-90: 0.9;
	--opacity-75: 0.75;
	--opacity-67: 0.67;
	--opacity-50: 0.5;
	--opacity-33: 0.33;
	--opacity-25: 0.25;
	--opacity-10: 0.1;
	--opacity-0: 0;
	
	--shadow-shallow: 0 var(--space-single) var(--space-3xs) var(--c-neutral-black-25);
	--shadow-moderate: 0 var(--space-3xs) var(--space-2xs) var(--c-neutral-black-25);
	--shadow-soft: 0 var(--space-2xs) var(--space-m) var(--c-neutral-black-10);
	--shadow-deep: 0 var(--space-xs) var(--space-s) var(--c-neutral-black-50);
	--shadow-glass: 0 var(--space-2xs) 0 var(--c-purple-300-25);
	--shadow-none: none;
	
	--line-length: 65ch;
}

/* -----------------------------------------------
BASICS
----------------------------------------------- */

* {
	box-sizing: border-box;
}

:focus, :focus img {
	outline-offset: var(--border-med);
	outline: var(--border-med) solid var(--c-text);
}

@view-transition {
	navigation: auto;
}

/* -----------------------------------------------
TYPOGRAPHY
----------------------------------------------- */

@font-face {
	font-family: 'Zodiak';
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
	font-named-instance: 'Regular';
	src: url('/https/stegrainer.com/-/fonts/Zodiak-Variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Zodiak';
	font-weight: 100 900;
	font-display: swap;
	font-style: italic;
	font-named-instance: 'Italic';
	src: url('/https/stegrainer.com/-/fonts/Zodiak-VariableItalic.woff2') format('woff2');
}

html {
	font-family: var(--f-sans);
	/* font-size: 125%; */
}
body {
	accent-color: var(--c-primary);
	background: var(--c-bg-body);
	color: var(--c-text);
	font-size: var(--font-size-body);
}
h1, h2, h3, h4, h5, h6, blockquote {
	font-family: var(--f-serif);
}
h1, h2, h3, h4, h5, h6 {
	color: var(--c-heading);
	text-wrap: balance;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration: none;
}
h1 {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-black);
	line-height: var(--line-height-h1);
	margin-block-end: var(--space-xl);
}
h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-xbold);
	line-height: var(--line-height-h2);
	margin-block-end: var(--space-xl);
}
h3 {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-h3);
	margin-block-end: var(--space-l);
}
h4 {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-h4);
	margin-block-end: var(--space-l);
}
h5 {
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-med);
	line-height: var(--line-height-h5);
	margin-block-end: var(--space-l);
}
h6 {
	font-size: var(--font-size-h6);
	font-weight: var(--font-weight-reg);
	line-height: var(--line-height-h6);
	margin-block-end: var(--space-l);
}
p, main ol, main ul, dd, figure, pre, code, label {
	line-height: var(--line-height-body);
}
p, main ol, main ul, dd, figure, pre, table {
	margin-block-end: var(--space-l);
}
p {
	max-width: var(--line-length);
}
blockquote {
	box-shadow: inset 0 2px 0 var(--c-bg-accent),
							inset 0 -2px 0 var(--c-bg-accent);
	font-size: var(--font-size-body);
	font-style: italic;
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-body);
	margin: 0 0 var(--space-l);
	max-width: var(--line-length);
	padding: var(--space-s) 0 var(--space-s) var(--space-xl);
}
blockquote cite {
	display: block;
	font-style: normal;
}
blockquote cite::before {
	content: '\2014';
	display: inline-block;
	font-style: normal;
	margin-inline-end: var(--space-s);
}
strong, b {
	font-weight: var(--font-weight-bold);
}
em, i {
	font-style: italic;
}
.large, .subtitle, .intro, blockquote.pull {
	font-size: var(--font-size-large);
	line-height: var(--line-height-large);
}
.small {
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}
.tiny {
	font-size: var(--font-size-tiny);
	line-height: var(--line-height-tiny);
}
.subtitle, .intro, blockquote.pull {
	font-weight: var(--font-weight-light);
}
.subtitle {
	opacity: var(--opacity-75);
}
pre, code {
	font-family: var(--f-mono);
}
pre {
	background: var(--c-bg-pre);
	color: var(--c-text-pre);
	direction: ltr;
	hyphens: none;
	overflow-x: auto;
	padding: var(--space-s) var(--space-l);
	tab-size: 2;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
}
.mute {
	opacity: var(--opacity-75);
}
.tight {
	line-height: var(--line-height-tight);
}

/* -----------------------------------------------
GENERAL
----------------------------------------------- */

a:link {
	color: var(--c-link);
}
a:visited {
	color: var(--c-link-visited);
}
a:not(:is(:hover, :focus)) {
	text-decoration-color: color-mix(in hsl, currentColor, transparent 67%);
}
a:hover, a:focus {
	color: var(--c-link-hover);
	text-decoration-thickness: var(--border-med);
}
a:active {
	color: var(--c-link-active);
}

a.skip-link {
	background: var(--c-link);
	color: var(--c-reverse);
	display: block;
	left: 0;
	padding: var(--space-m);
	position: absolute;
	text-align: center;
	top: 0;
	transform: translateY(-100%);
	transition: transform var(--transition-fast) var(--transition-bounce);
	width: 100%;
	z-index: 10;
}
a.skip-link:focus {
	transform: translateY(0);
}
.copyable::after, .copied::after {
	aspect-ratio: 1 / 1;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: inline-block;
	height: auto;
	margin: var(--space-2xs) 0 0 var(--space-xs);
	opacity: var(--opacity-25);
	transition: opacity  var(--transition-fast) var(--transition-inout);
	width: var(--space-m);
}
.copyable::after {
	background-image: url('/https/stegrainer.com/-/img/icons/copy.svg');
}
.copied::after {
	background-image: url('/https/stegrainer.com/-/img/icons/check-circle.svg');
	opacity: var(--opacity-75);
}
.copyable:hover::after {
	opacity: var(--opacity-50);
}
.copied:hover::after {
	opacity: var(--opacity-100);
}
main ul:not([class]), main ol:not([class]) {
	margin: 0 0 var(--space-l) var(--space-xl);
	max-width: var(--line-length);
}
main ul:not([class]) ul:not([class]), main ol:not([class]) ol:not([class]) {
	margin-block-end: 0;
}
main ul:not([class]) {
	list-style: disc;
}
main ul:not([class]) ul:not([class]) {
	list-style: circle;
}
main ul:not([class]) ul:not([class]) ul:not([class]) {
	list-style: square;
}
main ol:not([class]) {
	list-style: decimal;
}
main ol:not([class]) ol:not([class]) {
	list-style: lower-alpha;
}
main ol:not([class]) ol:not([class]) ol:not([class]) {
	list-style: lower-roman;
}
img {
	border-radius: var(--radius-s);
	display: block;
	height: auto;
	max-width: 100%;
}
figcaption {
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	margin-block-start: var(--space-xs);
	opacity: var(--opacity-75);
}
figcaption:hover, figcaption:focus-within {
	opacity: var(--opacity-100);
}
table {
	margin: 0 0 var(--space-l);
}
table, table thead, table body {
	width: 100%;
}
thead {
	border-block-end: var(--border-med) solid var(--c-bg-accent);
	font-size: var(--font-size-tiny);
	opacity: var(--opacity-75);
	text-transform: uppercase;
}
tbody tr {
	border-block-end: var(--border-thin) solid var(--c-bg-accent);
}
th, td {
	padding: var(--space-m) 0;
}
table tr {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(auto-fit, minmax(10%, 1fr));
	text-align: left;
}
section {
	border-block-start: var(--border-thin) solid var(--c-bg-tint);
	border-block-end: var(--border-thin) solid var(--c-bg-shade);
	padding-block: var(--space-3xl);
}
.wrap {
	margin-inline: auto;
	max-inline-size: 60em;
	inline-size: 90%;
}
section *:last-child {
	margin-block-end: 0; 
}
mark, :not(pre,.button,button) > code {
	background: var(--c-bg-highlight);
	border-radius: var(--radius-s);
	color: var(--c-text);
	display: inline-block;
	font-weight: var(--font-weight-bold);
	margin: 0 var(--space-2xs);
	padding: 0 var(--space-2xs);
}

/* -----------------------------------------------
UTILITY
----------------------------------------------- */

/* 
 * Utility class to hide content visually while keeping it screen reader-accessible.
 * Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html 
 */

.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0); 
	clip-path: inset(100%); 
	height: 1px; 
	overflow: hidden; 
	position: absolute; 
	white-space: nowrap; 
	width: 1px; 
}

body.dark {
	color-scheme: dark;
	
	--c-btn-primary: var(--g-yellow);
	--c-btn-primary-hover: var(--g-yellow-dark);
}

/* -----------------------------------------------
GRID
----------------------------------------------- */

.one-three, .one-two, .three-one, .two-one, .two-up, .three-up, .four-up,
.one-one-two, .one-two-one, .two-one-one {
	container-type: inline-size;
	display: grid;
	gap: var(--space-l);
}
.no-gap {
	gap: var(--space-none);
}
.tight-gap {
	gap: var(--space-m);
}
.comfy-gap {
	gap: var(--space-xl);
}
.loose-gap {
	gap: var(--space-2xl);
}

.mobile-grid.one-three {
	grid-template-columns: 1fr 3fr;
}
.mobile-grid.one-two {
	grid-template-columns: 1fr 2fr;
}
.mobile-grid.three-one {
	grid-template-columns: 3fr 1fr;
}
.mobile-grid.two-one {
	grid-template-columns: 2fr 1fr;
}
.mobile-grid.two-up {
	grid-template-columns: 1fr 1fr;
}
.mobile-grid.one-one-two {
	grid-template-columns: 1fr 1fr 2fr;
}
.mobile-grid.one-two-one {
	grid-template-columns: 1fr 2fr 1fr;
}
.mobile-grid.two-one-one {
	grid-template-columns: 2fr 1fr 1fr;
}
.mobile-grid.three-up {
	grid-template-columns: 1fr 1fr 1fr;
}
.mobile-grid.four-up {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* -----------------------------------------------
ICONS
----------------------------------------------- */
.icon-s, .icon-m, .icon-l, .icon-xl, .icon-fill {
	aspect-ratio: 1 / 1;
	height: auto;
}
.icon-s {
	width: var(--space-m);
}
.icon-m {
	width: var(--space-l);
}
.icon-l {
	width: var(--space-xl);
}
.icon-xl {
	width: var(--space-2xl);
}
.icon-fill {
	width: 100%;
}

/* -----------------------------------------------
BUTTONS
----------------------------------------------- */

button, .button, .button:link, .button:visited, input[type="submit"], input[type="button"], input[type="reset"] {
	background: none;
	border: none;
	border-radius: var(--radius-s);
	color: var(--c-text);
	cursor: pointer;
	display: inline-block;
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	padding: var(--space-s) var(--space-m);
	text-align: center;
	text-decoration: none;
	transform: translateY(0);
	transition: all var(--transition-fast) var(--transition-bounce);
}
button:not([disabled]):hover, .button:not([disabled]):hover, button:not([disabled]):focus, .button:not([disabled]):focus, input[type="submit"]:not([disabled]):hover, input[type="button"]:not([disabled]):hover, input[type="reset"]:not([disabled]):hover, input[type="submit"]:not([disabled]):focus, input[type="button"]:not([disabled]):focus, input[type="reset"]:not([disabled]):focus {
	background: var(--c-bg-accent);
	transform: translateY(calc(-1 * var(--space-3xs)));
}
button:not([disabled]):active, .button:not([disabled]):active, input[type="submit"]:not([disabled]):active, input[type="button"]:not([disabled]):active, input[type="reset"]:not([disabled]):active {
	transform: translateY(var(--space-3xs));
}

button:not(.primary, .subtle, .danger), .button:not(.primary, .subtle, .danger), input[type="submit"]:not(.primary, .subtle, .danger), input[type="button"]:not(.primary, .subtle, .danger), input[type="reset"]:not(.primary, .subtle, .danger) {
	border: var(--border-med) solid var(--c-bg-contrast);
	padding: calc(var(--space-s) - var(--border-med)) var(--space-m);
}
button:not(.primary, .subtle, .danger, [disabled]):hover, .button:not(.primary, .subtle, .danger, [disabled]):hover, input[type="submit"]:not(.primary, .subtle, .danger, [disabled]):hover, input[type="button"]:not(.primary, .subtle, .danger, [disabled]):hover, input[type="reset"]:not(.primary, .subtle, .danger, [disabled]):hover {
	border: var(--border-med) solid var(--c-text);
}

button.small, .button.small, input[type="submit"].small, input[type="button"].small, input[type="reset"].small {
	padding: var(--space-xs) var(--space-s);
}
button.large, .button.large, input[type="submit"].large, input[type="button"].large, input[type="reset"].large {
	border-radius: var(--radius-m);
	padding: var(--space-m) var(--space-l);
}
button.small:not(.primary, .subtle, .danger), .button.small:not(.primary, .subtle, .danger), input[type="submit"].small:not(.primary, .subtle, .danger), input[type="button"].small:not(.primary, .subtle, .danger), input[type="reset"].small:not(.primary, .subtle, .danger) {
	padding: calc(var(--space-xs) - var(--border-med)) var(--space-s);
}
button.large:not(.primary, .subtle, .danger), .button.large:not(.primary, .subtle, .danger), input[type="submit"].large:not(.primary, .subtle, .danger), input[type="button"].large:not(.primary, .subtle, .danger), input[type="reset"].large:not(.primary, .subtle, .danger) {
	padding: calc(var(--space-m) - var(--border-med)) var(--space-l);
}
button.expand, .button.expand, input[type="submit"].expand, input[type="button"].expand, input[type="reset"].expand {
	display: block;
	width: 100%;
}

button.primary, .button.primary, input[type="submit"].primary, input[type="button"].primary, input[type="reset"].primary {
	background: var(--c-btn-primary);
	color: var(--c-reverse);
}
button:not([disabled]).primary:hover, .button:not([disabled]).primary:hover, button:not([disabled]).primary:focus, .button:not([disabled]).primary:focus, input[type="submit"].primary:not([disabled]):hover, input[type="button"].primary:not([disabled]):hover, input[type="reset"].primary:not([disabled]):hover, input[type="submit"].primary:not([disabled]):focus, input[type="button"].primary:not([disabled]):focus, input[type="reset"].primary:not([disabled]):focus {
	background: var(--c-btn-primary-hover);
	box-shadow: var(--shadow-glass);
}

button.subtle, .button.subtle, button.danger, .button.danger, input[type="submit"].subtle, input[type="button"].subtle, input[type="reset"].subtle, input[type="submit"].danger, input[type="button"].danger, input[type="reset"].danger {
	background: none;
	text-decoration: underline;
	text-decoration-thickness: var(--border-med);
	text-underline-offset: var(--space-2xs);
}
button.subtle:not(:is(:hover, :focus)), .button.subtle:not(:is(:hover, :focus)), button.danger:not(:is(:hover, :focus)), .button.danger:not(:is(:hover, :focus)), input[type="submit"].subtle:not(:is(:hover, :focus)), input[type="button"].subtle:not(:is(:hover, :focus)), input[type="reset"].subtle:not(:is(:hover, :focus)), input[type="submit"].danger:not(:is(:hover, :focus)), input[type="button"].danger:not(:is(:hover, :focus)), input[type="reset"].danger:not(:is(:hover, :focus)) {
	text-decoration-color: color-mix(in srgb, currentColor, transparent 80%);
}
button.subtle, .button.subtle, input[type="submit"].subtle, input[type="button"].subtle, input[type="reset"].subtle {
	color: var(--c-link);
}
button.subtle:not([disabled]):hover, .button.subtle:not([disabled]):hover, button.subtle:not([disabled]):focus, .button.subtle:not([disabled]):focus, input[type="submit"].subtle:not([disabled]):hover, input[type="button"].subtle:not([disabled]):hover, input[type="reset"].subtle:not([disabled]):hover, input[type="submit"].subtle:not([disabled]):focus, input[type="button"].subtle:not([disabled]):focus, input[type="reset"].subtle:not([disabled]):focus {
	background: var(--c-bg-link);
	color: var(--c-link-hover);
}
button.danger, .button.danger, input[type="submit"].danger, input[type="button"].danger, input[type="reset"].danger {
	color: var(--c-danger);
}
button.danger:not([disabled]):hover, .button.danger:not([disabled]):hover, button:not([disabled]).danger:focus, .button:not([disabled]).danger:focus, input[type="submit"].danger:not([disabled]):hover, input[type="button"].danger:not([disabled]):hover, input[type="reset"].danger:not([disabled]):hover, input[type="submit"].danger:not([disabled]):focus, input[type="button"].danger:not([disabled]):focus, input[type="reset"].danger:not([disabled]):focus {
	background: var(--c-bg-danger);
	color: var(--c-danger-hover);
}
[disabled], input[type][disabled] {
	cursor: default;
	opacity: var(--opacity-50);
}

/* Really not sure why icon-only buttons want to be a little higher, but this fixes it. */
button:not(.icon-only) + .icon-only, .button:not(.icon-only) + .icon-only {
	position: relative;
	top: clamp(0.25rem, 0.2391rem + 0.0543vw, 0.2813rem);
}
button.large:not(.icon-only) + .large.icon-only, .button.large:not(.icon-only) + .large.icon-only {
	top: 0.4375rem;
}
button.small:not(.icon-only) + .small.icon-only, .button.small:not(.icon-only) + .small.icon-only {
	top: 0.375rem;
}
button svg, .button svg {
	aspect-ratio: 1 / 1;
	display: inline-block;
	transition: opacity  var(--transition-fast) var(--transition-inout);
	width: var(--space-l);
}
button:not(.icon-only) svg, .button:not(.icon-only) svg {
	float: left;
	margin: 0 var(--space-xs) 0 0;
	opacity: var(--opacity-50);
}
.icon-only svg {
	margin: 0;
	padding: 0;
	opacity: var(--opacity-75);
}
button:hover svg, .button:hover svg, button:focus svg, .button:focus svg {
	opacity: var(--opacity-100);
}
button.primary svg, .button.primary svg {
	--c-icon: var(--c-reverse);
}
button.subtle svg, .button.subtle svg {
	--c-icon: var(--c-link);
}
button.danger svg, .button.danger svg {
	--c-icon: var(--c-danger);
}
.button svg.right, button svg.right {
	float: right;
	margin: 0 0 0 var(--space-xs);
}
.large svg {
	width: var(--space-xl);
}
.small svg.right {
	margin: 0 0 0 var(--space-2xs);
}

/* -----------------------------------------------
FORMS
----------------------------------------------- */

:root {
	--c-accent: light-dark(var(--c-purple-300), var(--c-yellow-300));
	--c-form-input-hover: light-dark(var(--c-neutral-black-75),var(--c-neutral-white-75));
	--c-form-input-current: var(--c-neutral-black-100);
	--c-bg-form-input: light-dark(var(--c-neutral-white-50),var(--c-neutral-black-25));
	--c-bg-form-input-hover: light-dark(var(--c-neutral-white-75), var(--c-neutral-black-50));
	--c-bg-form-input-current: var(--c-neutral-white-100);
	--border-form-input: var(--border-thin) solid var(--c-bg-accent);
	--border-form-current: var(--border-med) solid light-dark(var(--c-purple-300), var(--c-yellow-300));
	--space-form-input: calc(var(--space-s) - var(--border-thin)) var(--space-s);
	--space-form-input-current: calc(var(--space-s) - var(--border-med)) var(--space-s);
}

form{
	accent-color: var(--c-accent);
}
legend {
	font-weight: var(--font-weight-bold);
	margin: 0 0 var(--space-l);
}
label {
	display: block;
}
input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="password"], input[type="number"], input[type="time"], textarea {
	background: var(--c-bg-form-input);
	border: var(--border-form-input);
	border-radius: var(--radius-s);
	color: var(--c-text);
	cursor: pointer;
	display: block;
	font-size: var(--font-size-body);
	line-height: var(--line-height-tight);
	opacity: var(--opacity-90);
	padding: var(--space-form-input);
	transition: background var(--transition-fast) var(--transition-inout);
	width: 100%;
}
input[type="text"]:not([disabled]):hover, input[type="email"]:not([disabled]):hover, input[type="search"]:not([disabled]):hover, input[type="url"]:not([disabled]):hover, input[type="tel"]:not([disabled]):hover, input[type="date"]:not([disabled]):hover, input[type="password"]:not([disabled]):hover, input[type="number"]:not([disabled]):hover, input[type="time"]:not([disabled]):hover, textarea:not([disabled]):hover {
	background: var(--c-bg-form-input-hover);
	border-color: var(--border-form-hover);
	color: var(--c-form-input-hover);
}
input[type="text"]:not([disabled]):focus, input[type="email"]:not([disabled]):focus, input[type="search"]:not([disabled]):focus, input[type="url"]:not([disabled]):focus, input[type="tel"]:not([disabled]):focus, input[type="date"]:not([disabled]):focus, input[type="password"]:not([disabled]):focus, input[type="number"]:not([disabled]):focus, input[type="time"]:not([disabled]):focus, textarea:not([disabled]):focus {
	background: var(--c-bg-form-input-current);
	border: var(--border-form-current);
	color: var(--c-form-input-current);
	opacity: var(--opacity-100);
	padding: var(--space-form-input-current);
	z-index: var(--elevation-selected);
}
label:has(input[type="checkbox"]:checked), label:has(input[type="radio"]:checked) {
	font-weight: var(--font-weight-bold);
}
label > input[type="checkbox"]:first-child, label > input[type="radio"]:first-child {
	margin-inline: 0 var(--space-s);
}

/* -----------------------------------------------
MEDIA QUERIES
----------------------------------------------- */

@media screen and (max-width: 31.95rem) {
	
}

@media screen and (min-width: 40rem) {
	.one-three {
		grid-template-columns: 1fr 3fr;
	}
	.one-two {
		grid-template-columns: 1fr 2fr;
	}
	.three-one {
		grid-template-columns: 3fr 1fr;
	}
	.two-one {
		grid-template-columns: 2fr 1fr;
	}
	.two-up, .three-up, .four-up {
		grid-template-columns: 1fr 1fr;
	}
	.one-one-two {
		grid-template-columns: 1fr 1fr 2fr;
	}
	.one-two-one {
		grid-template-columns: 1fr 2fr 1fr;
	}
	.two-one-one {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

@media screen and (min-width: 50rem) {
	.three-up {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.four-up {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		
		--c-btn-primary: var(--g-yellow);
		--c-btn-primary-hover: var(--g-yellow-dark);
		
		--shadow-shallow: 0 var(--space-single) var(--space-3xs) var(--c-neutral-black-50);
		--shadow-moderate: 0 var(--space-3xs) var(--space-2xs) var(--c-neutral-black-75);
		--shadow-deep: 0 var(--space-2xs) var(--space-xs) var(--c-neutral-black-90);
		--shadow-glass: 0 var(--space-3xs) 0 var(--c-yellow-300-25);
		
		&[data-color-scheme~="light"] {
			--c-btn-primary: var(--g-purple);
			--c-btn-primary-hover: var(--g-purple-dark);
		}
	}
	
	.copyable::after {
		filter: invert(100%);
	}
}

@media (prefers-reduced-motion) {
	*, *::before, *::after {
		animation-duration: 0s !important;
		/* additional recommendation */
		transition: none !important;
		scroll-behavior: auto !important;
	}
}