@import "node_modules/open-props/open-props.min.css";
 @import "node_modules/open-props/normalize.min.css";
 @import "node_modules/open-props/media.min.css";
 @import "node_modules/open-props/buttons.min.css";
 body {
	 display: grid;
	 place-content: center;
	 padding-inline: var(--size-5);
}
 .voice-control-options:has(input:disabled) {
	 color: #888;
}
 .voice-selection-options:has(select:disabled) {
	 color: #888;
}
 .voice-control {
	width:100%;
 }
 .user {
	 inline-size: var(--size-fluid-7);
	 aspect-ratio: var(--ratio-square);
	 border-radius: var(--radius-round);
	 border: var(--border-size-1) solid var(--surface-4);
	 display: flex;
	 align-items: stretch;
	 justify-content: stretch;
	 align-items: center;
	 justify-content: center;
	 position: relative;
}
 .userbutton > svg {
	 --_icon-size: var(--size-fluid-4);
}
 .user > button {
	 position: absolute;
	 inset-block-start: 0;
	 inset-inline-end: 0;
	 border-radius: var(--radius-round);
	 padding: 0.75ch;
	 aspect-ratio: 1;
	 flex-shrink: 0;
}
 .user.new:not(button) {
	 animation: var(--animation-slide-in-down), var(--animation-fade-in) forwards;
	 animation-timing-function: var(--ease-elastic-3), var(--ease-3);
}
 .user img {
	 border-radius: inherit;
}
 .labelled-input-unitsx {
	 display: flex;
	 gap: var(--size-2);
	 flex-direction: row;
	 align-items: center;
}
 .labelled-input-units input[type="radio"] {
	 margin: 0 1px 0 20px;
}
 .labelled-input {
	 display: flex;
	 gap: var(--size-3);
	 flex-wrap: wrap;
	 align-items: center;
	 width: 100%;
}
 .warning-message {
	 display: grid;
	 grid-template-columns: var(--size-fluid-3) 1fr;
	 gap: var(--size-3);
	 align-items: center;
}
 .warning-message > svg {
	 inline-size: 100%;
	 stroke: var(--text-2);
}
 .icon-headline {
	 display: flex;
	 gap: var(--size-3);
	 align-items: center;
}
 .icon-headline > svg {
	 inline-size: 2em;
	 stroke: var(--text-2);
}
 @media (--md-n-below) {
	 input[type="file"] {
		 inline-size: 100%;
	}
	 svg {
		 fill: inherit;
		 stroke: inherit;
		 position: absolute;
		 top: 0;
		 right: 0;
	}
}
 @keyframes octocat-wave {
	 0%, 100% {
		 transform: rotate(0);
	}
	 20%, 60% {
		 transform: rotate(-25deg);
	}
	 40%, 80% {
		 transform: rotate(10deg);
	}
}
 input[type="text"] {
	 border: var(--border-size-1) solid var(--indigo-4);
	 border-radius: var(--radius-2);
	 padding: var(--size-2);
	 box-shadow: var(--shadow-1);
	 font-family: var(--font-sans);
	 outline: none;
	 flex-grow: 1;
}
 input[type="text"]:focus {
	 border: var(--border-size-2) solid var(--indigo-6);
}
 dialog {
	 display: grid;
	 align-content: start;
	 background: var(--surface-2);
	 color: var(--text-1);
   max-inline-size: min(90vw, var(--size-content-3));
	 margin: auto;
	 padding: 0;
	 position: fixed;
	 inset: 0;
	 border-radius: var(--radius-3);
	 box-shadow: var(--shadow-6);
	 z-index: var(--layer-important);
	 overflow: hidden;
	 transition: opacity 0.5s var(--ease-3);
}
 @media (--motionOK) {
	 dialog {
		 animation: var(--animation-scale-down) forwards;
		 animation-timing-function: var(--ease-squish-3);
	}
}
 @media (--OSdark) {
	 dialog {
		 border-block-start: var(--border-size-1) solid var(--surface-3);
	}
}
 @media (--md-n-below) {
	 dialog[modal-mode="mega"] {
		 margin-block-end: 0;
		 border-end-end-radius: 0;
		 border-end-start-radius: 0;
	}
}
 @media (--md-n-below) and (--motionOK) {
	 dialog[modal-mode="mega"] {
		 animation: var(--animation-slide-out-down) forwards;
		 animation-timing-function: var(--ease-squish-2);
	}
}
 dialog:not([open]) {
	 pointer-events: none;
	 opacity: 0;
}
 dialog[modal-mode="mega"]::backdrop {
	 backdrop-filter: blur(25px);
}
 dialog[modal-mode="mini"]::backdrop {
	 backdrop-filter: none;
}
 dialog::backdrop {
	 transition: backdrop-filter 0.5s ease;
}
 dialog[loading] {
	 visibility: hidden;
}
 @media (--motionOK) {
	 dialog[open] {
		 animation: var(--animation-slide-in-up) forwards;
	}
}
 dialog > form {
	 display: grid;
	 grid-template-rows: auto 1fr auto;
	 align-items: start;
	 max-block-size: 80vh;
	 max-block-size: 80dvb;
}
 dialog > form > article {
	 overflow-y: auto;
	 max-block-size: 100%;
	/* safari */
	 overscroll-behavior-y: contain;
	 display: grid;
	 justify-items: flex-start;
	 gap: var(--size-3);
	 box-shadow: var(--shadow-2);
	 z-index: var(--layer-1);
	 padding-inline: var(--size-5);
	 padding-block: var(--size-3);
}
 @media (--OSlight) {
	 dialog > form > article {
		 background: var(--surface-1);
	}
	 dialog > form > article::-webkit-scrollbar {
		 background: var(--surface-1);
	}
}
 @media (--OSdark) {
	 dialog > form > article {
		 border-block-start: var(--border-size-1) solid var(--surface-3);
	}
}
 dialog > form > header {
	 display: flex;
	 gap: var(--size-3);
	 justify-content: space-between;
	 align-items: flex-start;
	 padding-block: var(--size-3);
	 padding-inline: var(--size-5);
}
 dialog > form > header > button {
	 border-radius: var(--radius-round);
	 padding: 0.75ch;
	 aspect-ratio: 1;
	 flex-shrink: 0;
	 place-items: center;
	 stroke: currentColor;
	 stroke-width: 3px;
}
 dialog > form > footer {
	 display: flex;
	 flex-wrap: wrap;
	 gap: var(--size-3);
	 justify-content: space-between;
	 align-items: flex-start;
	 padding-inline: var(--size-5);
	 padding-block: var(--size-3);
}
 dialog > form > footer > menu {
	 display: flex;
	 flex-wrap: wrap;
	 gap: var(--size-3);
	 padding-inline-start: 0;
}
 dialog > form > footer > menu:only-child {
	 margin-inline-start: auto;
}
 @media (max-width: 410px) {
	 dialog > form > footer > menu button[type="reset"] {
		 display: none;
	}
}
 dialog > form self > :is(header, footer) {
	 background-color: var(--surface-2);
}
 @media (--OSdark) {
	 dialog > form self > :is(header, footer) {
		 background-color: var(--surface-1);
	}
}