@font-face {
	font-family: 'Capito';
	src: url('/site/ingredients/type/Capito04-Regular.woff2') format('woff2');
	font-display: block;
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Capito';
	src: url('/site/ingredients/type/Capito04-RegularItalic.woff2') format('woff2');
	font-display: block;
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Capito';
	src: url('/site/ingredients/type/Capito04-Bold.woff2') format('woff2');
	font-display: block;
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Capito';
	src: url('/site/ingredients/type/Capito04-BoldItalic.woff2') format('woff2');
	font-display: block;
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Komplekt 070';
	src: url('/site/ingredients/type/Komplekt070-SemiBold.woff2') format('woff2');
	font-display: block;
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Komplekt 070';
	src: url('/site/ingredients/type/Komplekt070-SemiBoldItalic.woff2') format('woff2');
	font-display: block;
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Berkeley Mono';
	src: url('/site/ingredients/type/BerkeleyMono-Regular.woff2') format('woff2');
	font-display: block;
}

:root {
	--white: #ffffff;
	--black: #000000;
	--wgray-0: #f7f3f2;
	--wgray-1: #e5e0df;
	--wgray-2: #cac5c4;
	--wgray-3: #ada8a8;
	--wgray-4: #8f8b8b;
	--wgray-5: #726e6e;
	--wgray-6: #565151;
	--wgray-7: #3c3838;
	--wgray-8: #272525;
	--wgray-9: #171414;
	--gray-0: #f8f9fa;
	--gray-1: #f1f3f5;
	--gray-2: #e9ecef;
	--gray-3: #dee2e6;
	--gray-4: #ced4da;
	--gray-5: #adb5bd;
	--gray-6: #868e96;
	--gray-7: #495057;
	--gray-8: #343a40;
	--gray-9: #212529;
	--red-0: #fff5f5;
	--red-1: #ffe3e3;
	--red-2: #ffc9c9;
	--red-3: #ffa8a8;
	--red-4: #ff8787;
	--red-5: #ff6b6b;
	--red-6: #fa5252;
	--red-7: #f03e3e;
	--red-8: #e03131;
	--red-9: #c92a2a;
	--orange-0: #fff4e6;
	--orange-1: #ffe8cc;
	--orange-2: #ffd8a8;
	--orange-3: #ffc078;
	--orange-4: #ffa94d;
	--orange-5: #ff922b;
	--orange-6: #fd7e14;
	--orange-7: #f76707;
	--orange-8: #e8590c;
	--orange-9: #d9480f;
	--yellow-0: #fff9db;
	--yellow-1: #fff3bf;
	--yellow-2: #ffec99;
	--yellow-3: #ffe066;
	--yellow-4: #ffd43b;
	--yellow-5: #fcc419;
	--yellow-6: #fab005;
	--yellow-7: #f59f00;
	--yellow-8: #f08c00;
	--yellow-9: #e67700;
	--lime-0: #f4fce3;
	--lime-1: #e9fac8;
	--lime-2: #d8f5a2;
	--lime-3: #c0eb75;
	--lime-4: #a9e34b;
	--lime-5: #94d82d;
	--lime-6: #82c91e;
	--lime-7: #74b816;
	--lime-8: #66a80f;
	--lime-9: #5c940d;
	--teal-0: #e6fcf5;
	--teal-1: #c3fae8;
	--teal-2: #96f2d7;
	--teal-3: #63e6be;
	--teal-4: #38d9a9;
	--teal-5: #20c997;
	--teal-6: #12b886;
	--teal-7: #0ca678;
	--teal-8: #099268;
	--teal-9: #087f5b;
	--green-0: #ebfbee;
	--green-1: #d3f9d8;
	--green-2: #b2f2bb;
	--green-3: #8ce99a;
	--green-4: #69db7c;
	--green-5: #51cf66;
	--green-6: #40c057;
	--green-7: #37b24d;
	--green-8: #2f9e44;
	--green-9: #2b8a3e;
	--cyan-0: #e3fafc;
	--cyan-1: #c5f6fa;
	--cyan-2: #99e9f2;
	--cyan-3: #66d9e8;
	--cyan-4: #3bc9db;
	--cyan-5: #22b8cf;
	--cyan-6: #15aabf;
	--cyan-7: #1098ad;
	--cyan-8: #0c8599;
	--cyan-9: #0b7285;
	--blue-0: #e7f5ff;
	--blue-1: #d0ebff;
	--blue-2: #a5d8ff;
	--blue-3: #74c0fc;
	--blue-4: #4dabf7;
	--blue-5: #339af0;
	--blue-6: #228be6;
	--blue-7: #1c7ed6;
	--blue-8: #1971c2;
	--blue-9: #1864ab;
	--indigo-0: #edf2ff;
	--indigo-1: #dbe4ff;
	--indigo-2: #bac8ff;
	--indigo-3: #91a7ff;
	--indigo-4: #748ffc;
	--indigo-5: #5c7cfa;
	--indigo-6: #4c6ef5;
	--indigo-7: #4263eb;
	--indigo-8: #3b5bdb;
	--indigo-9: #364fc7;
	--violet-0: #f3f0ff;
	--violet-1: #e5dbff;
	--violet-2: #d0bfff;
	--violet-3: #b197fc;
	--violet-4: #9775fa;
	--violet-5: #845ef7;
	--violet-6: #7950f2;
	--violet-7: #7048e8;
	--violet-8: #6741d9;
	--violet-9: #5f3dc4;
	--grape-0: #f8f0fc;
	--grape-1: #f3d9fa;
	--grape-2: #eebefa;
	--grape-3: #e599f7;
	--grape-4: #da77f2;
	--grape-5: #cc5de8;
	--grape-6: #be4bdb;
	--grape-7: #ae3ec9;
	--grape-8: #9c36b5;
	--grape-9: #862e9c;
	--pink-0: #fff0f6;
	--pink-1: #ffdeeb;
	--pink-2: #fcc2d7;
	--pink-3: #faa2c1;
	--pink-4: #f783ac;
	--pink-5: #f06595;
	--pink-6: #e64980;
	--pink-7: #d6336c;
	--pink-8: #c2255c;
	--pink-9: #a61e4d;
	
	color-scheme: light dark;
	
	--softened: color-mix(in srgb, currentColor 70%, transparent);
	
	--background-light: #dfdfdf;
	--primary-light: #2b2b2b;
	
	--background-dark: #2e2e2e;
	--primary-dark: #e4e4e4;
	
	--link-light: #0d5b93;
	--link-visited-light: #652cad;
	--link-dark: #92bad6;
	--link-visited-dark: #c9aeec;
	
	--notice-light: #c1c1c1;
	--notice-dark: #434343;
	
	--border-radius: .3em;
	--border-width: 1.5px;
	
	:focus-visible {
		outline: 5px solid var(--cyan-6);
		border-radius: var(--border-radius);
		outline-offset: -3px;
	}
	
	::selection {
		background: var(--yellow-5);
		color: #000;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-rendering: optimizeLegibility;
}


/*.red { background: var(--red-bg) !important; border: 2px solid var(--red-border); }*/

.notice.red { background: var(--red-9) !important; color: #fff; }
.notice.pink { background: var(--pink-9) !important; color: #fff; }
.notice.grape { background: var(--grape-9) !important; color: #fff; }
.notice.violet { background: var(--violet-9) !important; color: #fff; }
.notice.indigo { background: var(--indigo-9) !important; color: #fff; }
.notice.blue { background: var(--blue-9) !important; color: #fff; }
.notice.cyan { background: var(--cyan-9) !important; color: #fff; }
.notice.teal { background: var(--teal-9) !important; color: #fff; }
.notice.green { background: var(--green-9) !important; color: #fff; }
.notice.lime { background: var(--lime-9) !important; color: #fff; }
.notice.yellow { background: var(--yellow-6) !important; color: #000; }
.notice.orange { background: var(--orange-9) !important; color: #fff; }

html, body {
	width: 100%;
	max-width: 100vw;
	overflow-x: hidden;
}

main {
	/*overflow-x: auto;*/
	max-width: 100%;
}




.caps {
	text-transform: uppercase;
	font-size: 85%;
	letter-spacing: .07em;
}

blockquote {
	border-left: .5em solid var(--softened);
	padding-left: .5em;
}

pre {
	max-width: 100%;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: break-word;
}



html {
	scrollbar-gutter: stable;
	overflow-y: scroll;
}

body {
	font-family: 'Capito', serif;
	font-feature-settings: "lnum" on;
	font-size: 1.4em;
	background: light-dark(var(--background-light), var(--background-dark));
	color: light-dark(var(--primary-light), var(--primary-dark));
	display: grid;
	grid-template-columns: auto minmax(0, 150ch);
	grid-template-areas: "header main" "footer footer";
	justify-content: center;
	column-gap: 6rem;
	row-gap: 2rem;
	padding: 5rem;
}

body {
	display: grid;
	grid-template-columns: auto minmax(0, 100%);
}

#logotype {
	margin-top: -.2em;
}

.new {
	font-size: 71%;
	text-transform: uppercase;
	background: light-dark(var(--notice-light), var(--notice-dark));
	padding: .3em .4em .15em .4em;
	border-radius: var(--border-radius);
}

.smcp {
	font-size: 80%;
	text-transform: uppercase;
	letter-spacing: 0.05ch;
}

summary:hover {
	cursor: pointer;
}

details:last-of-type summary {
	list-style: none;
	&::before {
		font-family: "Komplekt 070", sans-serif;
		content: "→";
		width: 1.2ch;
		display: inline-block;
		padding-right: .3rem;
	}
	[open] &::before {
		font-family: "Komplekt 070", sans-serif;
		content: "↓";
		width: 1.2ch;
		display: inline-block;
	}
}
details:last-of-type summary::-webkit-details-marker {
	display: none;
}

svg {
	fill: light-dark(var(--primary-light), var(--primary-dark));
}

a svg {
	padding-right: .2em;
}

footer svg {
	height: 1.7em !important;
}

body * + * {
	margin-block-start: 1.2em;
}

li, body, header, main, nav {
	margin-block-start: unset;
}

.icon {
	height: 1em;
	width: auto;
	vertical-align: middle;
	margin: -.25em .25em 0 0;
	display: inline-block;
}

a:link, a:visited, a:hover, a:active {
	color: light-dark(var(--link-light), var(--link-dark));
	text-decoration-color: inherit;
	text-decoration-thickness: .1ch;
	text-underline-offset: 1.5px;
}

a:visited {
	color: light-dark(var(--link-visited-light), var(--link-visited-dark));
}

header a:link, header a:visited, header a:hover, header a:active, 
footer a:link, footer a:visited, footer a:hover, footera:active {
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Komplekt 070', sans-serif;
	/*font-feature-settings: "ss01" on;*/
}

:is(h1, h2, h3, h4, h5, h6) a {
	text-decoration: none;
	color: var(--text) !important;
}

:is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: 0.75em;
	padding-top: 0.75em;
}

header h1:first-of-type {
	margin-block-start: 0;
	padding-top: 0;
}

main h1:first-of-type {
	padding-top: .1em;
}

main > h1:first-child {
	margin-block-start: 0;
	padding-top: 0;
}

h1 { font-size: 170%; }
h2 { font-size: 130%; }
h3 { font-size: 120%; }
h4, h5, h6 { font-size: 110%; }

p, li {
	line-height: 1.45;
}

header {
	grid-area: header;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 9ch;
	/*max-width: 15ch;*/
}

header nav {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1em;
}

header nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

header nav .active:before {
	font-family: "Komplekt 070", sans-serif;
	content: "→";
}

footer ul {
	list-style: none;
	padding: 0;
}

footer li {
	display: inline-block;
	margin-right: .75rem;
}

header nav {
	font-size: 90%;
}

header nav ul a {
	text-decoration: none;
}

main {
	grid-area: main;
	width: 100%;
}

main p, main li {
	max-width: 64rem;
}

p:has(> img:first-child) {
	max-width: 100%;
}

footer {
	grid-column: 2;
	color: var(--softened);
	font-size: 0.9em;
	padding-top: 2rem;
}

footer hr {
	border: 0;
	border-bottom: var(--border-width) solid var(--softened);
}

img {
	border-radius: var(--border-radius);
}

/* Type stuff */

.bold {
	font-weight: bold;
}

/* Notices */

.notice {
	background: light-dark(var(--notice-light), var(--notice-dark));
	border-radius: var(--border-radius);
	padding: 1em 1em 1em 3.25em;
	position: relative;
	max-width: 64rem;
}

.notice p {
	margin: 0;
	padding: 0;
	line-height: 1.3;
}

.notice a {
	color: inherit !important;
}

.notice .icon {
	width: 1.5em;
	height: 1.5em;
	line-height: 0;
	position: absolute;
	left: 1em;
	top: calc(50% - .5em);
}

.notice.success { /* checkmark */
	background: light-dark(var(--green-6), var(--green-9));
	color: light-dark(var(--white), var(--white));
}

.notice.warning { /* exclamation point */
	background: light-dark(var(--yellow-5), var(--yellow-8));
	color: light-dark(var(--black), var(--black));
}

.notice.error {/* bomb */
	background: light-dark(var(--red-7), var(--red-9));
	color: light-dark(var(--white), var(--white));
}

.standard {
	background: var(--button-standard-bg);
	color: var(--button-standard-fg);
}

.destructive {
	background: var(--button-destructive-bg);
	color: var(--button-destructive-fg);
}

.emphasis {
	background: var(--button-emphasis-bg);
	color: var(--button-emphasis-fg);
}

.mono, code, pre {
	font-family: 'Berkeley Mono', monospace;
	font-size: 90%;
}

small, .small {
	font-size: 85%;
	line-height: 1.1 !important;
}


/* Lists */

ul {
	list-style: none;
	padding-left: 1em;
}

ol {
	list-style: digit;
	padding-left: 2em;
}

ul li:before {
	font-family: 'MD IO', monospace;
	content: "\2022";
	line-height: 0;
	margin-right: .5em;
}

li {
	padding-left: 1.1em;
	text-indent: -1.1em;
}

nav ul li:before {
	content: none;
}

footer ul li:before {
	content: none;
}

ol ol {
	list-style: lower-alpha;
}

ol ol ol {
	list-style: lower-roman;
}

ul ul li:before {
	opacity: .6;
}

ul ul ul li:before {
	opacity: .3;
}

ul.plain li:before {
	content: none;
}

ul.plain {
	padding: 0;
}

/* Description Lists */

dt {
	font-weight: normal;
	margin: 0;
}

dd {
	margin: inherit;
	margin: 0;
	margin-top: .5em;
	margin-bottom: 1em;
}

/* Forms */

input[type="password"] {
	font-family: 'Berkeley Mono', monospace;
}

input, button, .action, fieldset, legend, label, option, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	all: unset;
	margin-bottom: 1rem;
}

fieldset {
	margin: 0;
	padding: 0;
	background: white;
}

fieldset legend {
	font-weight: normal;
}

/*
form p {
	margin: 0 0 1em 0;
}
*/

label, .form-label {
	font-weight: bold;
	display: block;
	margin-bottom: .25em;
}

input, button, textarea {
	margin: 0;
	margin-right: .5em;
	padding: .5em;
	border: var(--border-width) solid var(--softened);
	border-radius: var(--border-radius);
}

input, textarea {
	width: 100%;
}

textarea {
	height: 5em;
}


select {
	padding: .6em .5ch .5ch .5ch !important;
}

button, .button, .action {
	display: inline-block;
	background: light-dark(var(--link-light), var(--link-dark));
	color: light-dark(var(--primary-dark), var(--primary-light));
	white-space: nowrap;
	font-weight: bold;
}

button svg, .button svg, .action svg {
	fill: light-dark(var(--primary-dark), var(--primary-light));
	padding-right: .25em;
}

.nowrap {
	white-space: nowrap;
}

.wrap {
	white-space: normal;
}

button:hover, .button:hover, .action:hover {
	cursor: pointer;
	filter: var(--button-filter);
	transition: filter .2s;
}

label:hover {
	cursor: pointer;
}

input[type="text"], input[type="email"], input[type="password"] {
	width: calc(100% - 5ch);
	background: light-dark(var(--gray-2), var(--gray-9));
	border: var(--border-width) solid light-dark(var(--gray-5), var(--gray-7));
}

input[type="checkbox"]:disabled + label {
	cursor: not-allowed;
}

input, button, .button {
	border: none;
	border-radius: .25ch;
	padding: .5rem 1rem;
}

form {
	width: 100%;
}

select:hover {
	cursor: pointer;
}

input {
	display: block;
	width: 100%;
}

input:disabled {
	opacity: .25;
}

input:disabled + label {
	opacity: .25;
}

input[type="checkbox"] {
	font-family: "Berkeley Mono", monospace;
	line-height: 1;
	display: inline-block;
	width: 3ch;
	height: 1ch;
	padding: 0;
	text-align: center;
	border: 0;
}

input[type="checkbox"]:hover {
	cursor: pointer;
}

input[type="checkbox"]:checked::before {
	content: "[X]";
}

input[type="checkbox"]::before {
	content: "[ ]";
}

input[type="checkbox"]:disabled {
	cursor: not-allowed;
}

input[type="checkbox"]:disabled::before {
	content: "[]";
}

input[type="checkbox"] + label {
	display: inline-block;
}

label + a {
	margin-left: .5em;
}

button, input[type="submit"] {
	border-radius: var(--border-radius);
	border: none;
}

button:hover, input[type="submit"]:hover {
	cursor: pointer;
}

/* Tables */




.table-wrapper {
	overflow-x: auto;
	max-width: calc(100vw - 2em) !important;
}

.table-wrapper table {
	/*min-width: 600px;*/ /* or max-content */
}




table {
	border-collapse: collapse;
	
}

td, th {
	padding: .7em 1.5em .7em 0;
	border-bottom: var(--border-width) solid var(--softened);
}

.borderless td {
	border: 0;
	padding-bottom: 0;
}

.centered {
	text-align: center;
}

th {
	text-align: left;
}

/* Fancypants Stuff */

@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.1s;
	animation-timing-function: ease-in-out;
}

/* Misc */

img {
	max-width: 100%;
}

/* Responsiveness */

@media (max-width: 1500px) {
	#logotype {
		width: 125px;
	}
	body {
		font-size: 1.3em;
		column-gap: 4rem;
		padding: 4rem;
	}
}

@media (max-width: 1000px) {
	body {
		font-size: 1.2em;
		grid-template-columns: 1fr;
		grid-template-areas: "header" "main" "footer";
		padding: 2rem;
	}
	
	header {
		flex-direction: row;
		justify-content: felex-start;
		flex-flow: column wrap;
		flex-wrap: wrap;
	}
	
	header h1 {
		margin: 0;
	}
	
	header nav {
		flex-direction: row;
		gap: 1rem;
		margin-top: 0;
	}
	
	header nav ul {
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	footer {
		grid-column: auto;
	}
}

@media (max-width: 500px) {
	body {
		font-size: 1em;
		padding: 1rem;
	}
}

.modal_info {
	display: none;
}

#open-modal {
	float: right;
	padding: 1em 0 .5em .5em;
	margin: 1em 0 0 0;
}

#open-modal svg {
	height: 2em !important;
}

/*
#modal {
	margin: auto;
	background: #261402;
	color: #E8AE15;
	max-width: 90%;
	width: 47ch;
	padding: 1em;
	border: none !important;
	border-radius: var(--border-radius);
}

#modal * {
	font-family: 'Berkeley Mono', monospace;
	font-weight: normal;
	font-style: normal;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

#modal h2 {
	margin-bottom: 1em;
	text-transform: uppercase;
	overflow: none;
	border-bottom: 2px solid currentcolor;
	padding-bottom: 10px;
	font-size: 1em;
}

#modal svg {
	fill: #E8AE15;
	height: 1em !important;
	vertical-align: middle !important;
	margin: -.25em .25em 0 0 !important;
}

#modal button {
	float: right;
	text-transform: uppercase;
	font-size: 1em;
	background: inherit;
	color: inherit;
}

footer button {
	background: inherit;
	color: inherit;
}

*/


::backdrop {
	backdrop-filter: blur(5px);
}


#message {
	margin: auto;
	max-width: 90%;
	width: 60ch;
	background: light-dark(var(--background-light), var(--background-dark));
	color: light-dark(var(--primary-light), var(--primary-dark));
	padding: 1.5em;
	border: none !important;
	border-radius: var(--border-radius);
}

#message :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
	padding-top: 0;
}

/*
#message * {
	font-family: 'Berkeley Mono', monospace;
	font-weight: normal;
	font-style: normal;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

#message h2 {
	margin-bottom: 1em;
	text-transform: uppercase;
	overflow: none;
	border-bottom: 2px solid currentcolor;
	padding-bottom: 10px;
	font-size: 1em;
}
*/


#message button {
	float: right;
}

.info-icon {
	padding-left: .3em;
}

.info-icon:hover {
	cursor: pointer;
}

.broadcast {
	margin: -1em;
	margin-bottom: 1.5em;
	padding: .66em 1em;
	background: light-dark(#fff, #000);
	color: light-dark(#000, #fff);
	border-radius: var(--border-radius);
}

.broadcast p {
	margin: 0;
	padding: 0;
	max-width: 100%;
}

svg {
	fill: currentColor;
}