@import "index-01.css";
@import "https://www.nerdfonts.com/assets/css/webfont.css";


/* ╭──────────────────────────────────────────────────────────╮
   │                     APP LATIN FONTS.                     │
   ╰──────────────────────────────────────────────────────────╯
*/

@font-face {
	font-family: 'Big Shoulders Stencil Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/bigshouldersstencildisplay/v28/6aeZ4LS6U6pR_bp5b_t2ugOhHWFcxSGP9ttD96KCb8xPytKb-oPRU-vkuLm_3E__L3bm.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Mitr';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/mitr/v11/pxiLypw5ucZF-Tw4MQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Mitr';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/mitr/v11/pxiEypw5ucZF8c8bJJfecg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Saira Semi Condensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/sairasemicondensed/v13/U9MD6c-2-nnJkHxyCjRcnMHcWVWV1cWRRX8MaOY.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Saira Semi Condensed';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/sairasemicondensed/v13/U9MM6c-2-nnJkHxyCjRcnMHcWVWV1cWRRXf_S_MRiXk.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Saira Semi Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/sairasemicondensed/v13/U9MM6c-2-nnJkHxyCjRcnMHcWVWV1cWRRXe3TfMRiXk.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


*, *::before, *::after {
	box-sizing: inherit;
}


:root {
	--font-title: 1.5rem;
	--fonts-input: clamp(1.4ch, 1.4vw, .8rem);
	--fonts: clamp(1.5ch, 1.5vw, .8rem);
	--color1: oklch(0.8496 0.2442 200.9);
	--color2: #162789;
	--color3: oklch(0.6383 0.2569 3.87);
	--color03: #FC007A50;
	--color4: #FFF;
	--color5: #333;
	--color6: #00ff00;
	--color06: #00ff0080;
	--color7: #6B3A00;
	--color8: #B80056;
	--color9: #141E30;
	--color10: #243B55;
	--color11: #B8005670;
	--color12: #FC007A80;
	--box: #57420C;
	--light-blue1: oklch(0.8804 0.0162 201.68);
	--light-blue2: oklch(0.8804 0.0662 201.68);
	--light-blue02: oklch(0.8804 0.0662 201.68 / 80%);
	--light-blue3: oklch(0.7804 0.0662 201.68);
	--light-blue4: oklch(0.6804 0.0662 201.68);
	--light-blue5: oklch(0.5904 0.0662 201.68);
	--dark-blue: oklch(0.4228 0.0929 237.43);
	--dark-blue1: #003852;
	--dark-blue2: #002A3D;
	--dark-blue3: #002A3D50;
	--cark-blue4: oklch(0.284 0.0695 269.17);
	--font-weight: 600;
	--colg: 2rem;
	--colg-mobile: 1rem;
	--rowg: 2rem;
	--rowg-mobile: 1rem;
	--bord: .3rem;
	--mob-col: #12111385;
	--gradient: linear-gradient(270deg, var(--bg-col), var(--dark-blue2));
	--gradient1: linear-gradient(90deg, var(--bg-col), var(--dark-blue1));
	--sides: #88898E;
	--info: oklch(0.7162 0.226 276.09);
	--info-data: oklch(0.755 0.226 296.09);
	--shadow1: .3rem .3rem .6rem var(--iframes-bg),
		-.2rem -.2rem .5rem var(--color4);
	--inner-shadow1: inset .2rem .2rem .5rem var(--pressed),
		-.2rem -.2rem .5rem var(--iframes-bg);
	--inner-shadow-light: inset .1rem .1rem .5rem var(--color5),
		inset -.1rem -.1rem .5rem var(--iframes-bg);
	--inner-shadow-dark: inset .2rem .2rem .5rem var(--pressed),
		-.2rem -.2rem .5rem var(--iframes-bg);

	/* ╭────────────────╮
	   │ 	main setup    │
	   ╰────────────────╯
	*/
	--work-link: oklch(0.4745 0.106 7.35);
	--state: running;
	--gold: goldenrod;
	--yellow-select: #EFECBBBE;
	--hover-bg: #A39D29;
	/* --bg-col: #808b96; */
	--bg-col: #BEBBBB;
	--panel-backcolor:  #b4b6b790;
	--iframes-bg: oklch(0.6771 0.0074 277.11);
	--pop-bg: oklch(0.6271 0.0074 277.11);
	--lines: #757575;
	--table-line: #96979C10;
	--add-col: #0B8325;
	--measure: #2DD751;
	--result-col: #BF5E30;
	--dark: #121113;
	--back-gray: #222725;
	--menu-col: oklch(0.6496 0.2442 190.9);
	--pressed: #77797E;
	scroll-behavior: smooth;
	--layer-state: block;
	--header-path-open: path("M 2000,0 L 0,0 L 0,1000 L 255,1900 L 256,66 A 10,10 0,0,1 267,60 L 2000,60 Z");
	--header-path-close: path("M 2000,0 L 0,0 L 0,40 A 10,10 0,0,0 10,50 L 2000,60 Z");
	--material: none;
}


:focus::afater {
	-webkit-transform: scaleX(1);
	transform:scaleX(1);
	background:var(--gradient);
	box-shadow: var(--shadow1);
}


.light-mode {
	background-color: var(--bg-col);
	transition: all 1s linear;
	--table-font: var(--pressed);
	--table-bg: var(--light-blue1);
	--inner-shadow: var(--inner-shadow-dark);
	--input-bg: var(--bg-col);
	--input-font-col: var(--mob-col);
	--selection-bg: transparent;
	--crate-btn-col: var(--color4);
	--p__color--mode: var(--back-gray);
	--pack-works: var(--light-blue2);
	--work-hover: var(--yellow-select);
	--stroke: var(--box);
	--background-select: var(--bg-col);
	--background-option: var(--color4);
	--popup: var(--color5);
	--preview: var(--color3);
	--preview-hover: var(--menu-col);
}


.dark-mode {
	background-color: var(--color5);
	transition: all 1s linear;
	--table-bg: var(--table-line);
	--table-font: var(--light-blue1);
	--p__color--mode: var(--color4);
	--inner-shadow: var(--inner-shadow-light);
	--input-bg: var(--iframes-bg);
	--input-font-col: var(--color4);
	--selection-bg: var(--add-col);
	--crate-btn-col: var(--iframes-bg);
	--pack-works: var(--iframes-bg);
	--work-hover: var(--pressed);
	--stroke: var(--color1);
	--background-select: var(--color5);
	--popup: var(--color4);
	--preview: var(--bg-col);
	--preview-hover: var(--color3);
}


body {
	box-sizing: border-box;
	font-family: Saira Semi Condensed, Mitr, sans-serif;
	font-size: var(--fonts);
	background-position: center;
	scroll-behavior: slow;
	background-color: var(--bg-col);
	transition: all 1s ease-in-out;
}


h2 {
	font-size: var(--font-title);
}


h2, h3, h4, h5 {
	color: var(--color4);
	opacity: 50%;
}


h6 {
	padding: .3ch 0;
	position: relative;
	width: 100%;
	&::before {
		content: "";
		inset: 0;
		position: absolute;
		border-bottom: solid 1px var(--lines);
	}
}


iframe, .addedStatus {
	text-align: center;
	border: .05rem solid var(--iframes-bg);
	border-radius: 1.2rem;
	transition: 500ms ease-in-out;
	animation-name: fill-pane 2s ease;
	animation-fill-mode: both;
	animation-delay: 1s;
	&:hover {
		border: none;
		box-shadow: var(--shadow1);
		cursor: pointer;
	}
	&:focus-within {
		outline: .1rem solid var(--dark-blue);
	}
}


details summary {
	text-align:initial;
	font-size: calc(var(--fonts-input) - .2ch);
	font-family: 'Mitr', sans-serif;
	font-weight: 500;
	color: var(--pressed);
	padding: .3ch;
}


p, label {
	background: transparent;
	text-align-last: left;
	line-height: 1rem;
	font-size: var(--fonts);
	font-family: 'Mitr', sans-serif;
	font-weight: 500;
	color: var(--p__color--mode);
	opacity: .5;
	z-index: 10;
}


button:disabled,
button[disabled] {
	cursor: not-allowed;
}


ul, li, a {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}


li {
	text-align: left;
	font-family: Mitr, sans-serif;
	font-size: var(--fonts);
	font-weight: 400;
	line-height: 2rem;
}


label {
	position: relative;
	color: var(--p__color--mode);
	font-size: var(--fonst);
	font-family: 'Mitr', sans-serif;
	opacity: .7;
}


input {
	background-color: var(--input-bg);
	border-radius: .3rem;
	outline: none;
	height: 1.5rem;
	& {
		text-align: center;
		font-family: Mitr, sans-serif;
		font-size: var(--fonts-input);
		font-weight: 400;
		color: var(--input-font-col);
	}
	&:focus {
		outline: 1px solid #ffffff75;
		border-radius: .3rem;
		background-color: var(--iframes-bg);
		color: var(--color4);
		&::placeholder {
			opacity: 0;
		}
	}
	&::placeholder {
		opacity: .5;
		font-weight: 300;
		font-style: italic;
		font-size: var(--fonts-input);
		color: var(--table-font);
		z-index: 20;
	}
}


select {
	display: block;
	text-align: center;
	font-size: clamp(.87ch, .87vw, .55rem);
	& option {
		text-align: center;
	}
}


:is(td, th, thead) {
	text-align: center;
	padding: .1rem .3rem;
	font-family: Saira Semi Condensed, sans-serif;
	font-weight: 500;
	font-size: calc(var(--fonts) - .08rem);
	border-radius: .2rem;
	background: var(--table-bg);
	color: var(--pressed);
	border: solid 1px var(--pressed);
}

.materialReusable {
	position: relative;
	border: 1.9px solid var(--color4) !important;
	&:hover::before {
		content: attr(data-name , 'Material usaed from other');
		position: absolute;
		inset: 0, 0;
		left: 0%;
		bottom: 1.5rem;
		background-color: var(--pop-bg);
		border-radius: .3rem;
		padding: .3rem;
		white-space: nowrap;
		transition: all 3ms ease-in-out;
		animation-name: fill-pane 2s ease-in-out;
		animation-fill-mode: both;
		animation-delay: 2ms;
		color: var(--color4);
		font-weight: 500;
		font-style: italic;
	}
	&:hover::after {
		content: '';
		position: absolute;
		top: -.2rem;
		left: 50%;
		right: 30%;
		margin-left: -5px;
		border-width: 7px;
		border-style: solid;
		border-color: var(--pop-bg) transparent transparent transparent;
	}
}


th {
	font-weight: 700;
	text-decoration: underline;
}


td:nth-child(1) {
	font-weight: 700;
}


tr {
	&:nth-child(even) > * {
		text-align: center;
		background: none;
		border: solid 1px var(--pressed);
	}
}


tbody {
	&:nth-child(even) {
		text-align: center;
		background: var(--table-bg);
		&, tr > * {
			background: none;
			border: solid 1px var(--pressed);
		}
	}
}


::-webkit-scrollbar {
	width: .4rem;
	height: .4rem;
}


::-webkit-scrollbar-track {
	background: white;
	border-radius: 10vw;
	margin-block: .2rem;
}


::-webkit-scrollbar-thumb {
	background: var(--pressed);
	border-radius: 10vh;
	border: .1rem solid white;
}


.loading-panels {
	display: none;
	&:is([aria-hidden="false"]) {
		display: block;
		animation: fill-pane 1s linear;
		animation-fill-mode: forwards;
		transition: all .3s linear;
	}
}

.app {
	container-name: main-area;
	container-type: inline-size;
	display: grid;
	/* grid-template-columns: repeat(auto-fit, minmax(mian(25rem, 10cqw), 1fr)); */
	/* grid-template-columns: repeat(auto-fit, minmax(min(100%,[base-width], 1fr))); */
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: 2% 48% 49%;
	column-gap: 1rem;
	row-gap: 1rem;
	height: 91.5dvh;
	transition: all 1s ease-in-out;
	&:is([aria-hidden="false"]) {
		display: unset;
	}
	& .otto__interface {
		grid-area: 2 / 2 / 3 / 6;
		border-radius: var(--lines);
		& {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: 1fr;
			& .container__insert:is([aria-hidden="false"]) {
				grid-area: 1 / 1 / 1 / 6;
				display: grid;
				grid-template-columns: 1fr .9fr .5fr;
				grid-template-rows: .5fr 1fr;
				column-gap: 5rem;
				row-gap: 2rem;
				border: solid .1rem var(--lines);
				border-radius: .5rem;
				padding: .5rem;
				background-color: var(--panel-backcolor);
				& .searcher {
					grid-area: 2 / 2 / 1 / 2;
				}
				& .menu-shifts {
					grid-area: 1 / 3 / 1 / 4;
					display: flex;
					flex-direction: column;
					align-items: end;
					justify-content: start;
					gap: .5rem;
					& .info {
						padding: .2rem;
					}
					& svg {
						z-index: 10;
					}
				}
				& .IO__sizes__code {
					grid-area: 2 / 2 / 3 / 2;
					display: flex;
					flex-direction: column;
					gap: .5rem;
					justify-content: flex-end;
					& .single-input {
						display: flex;
						justify-content: center;
						padding: .2rem;
						border-radius: .5rem;
						border: solid .1rem var(--lines);
						& input {
							width: 100%;
						}
					}
					& .LDH {
						display: flex;
						flex-direction: row;
						gap: 1rem;
						justify-items: space-between;
						& span {
							position: relative;
							padding: .2rem;
							& > input {
								width: 100%;
								border-radius: .4rem;
							}
							&::before {
								content: "";
								position: absolute;
								inset: 0;
								border: solid .1rem var(--p__color--mode);
								border-radius: .5rem;
								width: 100%;
								height: 100%;
								z-index: -10;
								opacity: 1;
							}
						}
					}
				}
				& .IO__press {
					grid-area: 2 / 3 / 2 / 4;
					.add--btn, .del--btn, .clear--btn {
						&:disabled {
							opacity: .1;
							cursor: not-allowed;
						}
						&:disabled:hover {
							opacity: .0;
							cursor: not-allowed;
						}
					}
					.add--btn {
						position: relative;
						&:focus-within {
							outline: 1px solid var(--color6);
							outline-offset: 2px;
						}
						&::before {
							content: '';
							background-image: url('https://app.ottocratesolver.com/images/Otto-SVGs/add-square-svgrepo-com.svg');
							/* background-image: url('./images/Otto-SVGs/add-square-svgrepo-com.svg'); */
							background-repeat: no-repeat;
							background-size: 1rem, 1rem;
							position: absolute;
							inset: 45% 0% 0% 78%;
						}
					}
					.del--btn {
						position: relative;
						&:focus-within {
							outline: 1px solid var(--color6);
							outline-offset: 2px;
						}
						&::before {
							content: '';
							background-image: url('https://app.ottocratesolver.com/images/Otto-SVGs/minus-square-svgrepo-com.svg');
							/* background-image: url('./images/Otto-SVGs/minus-square-svgrepo-com.svg'); */
							background-repeat: no-repeat;
							background-size: 1rem, 1rem;
							position: absolute;
							inset: 45% 0% 0% 78%;
						}
					}
					.clear--btn {
						position: relative;
						&:focus-within {
							outline: 1px solid var(--color6);
							outline-offset: 2px;
						}
						&::before {
							content: '';
							background-image: url('https://app.ottocratesolver.com/images/Otto-SVGs/eraser-svgrepo-com.svg');
							/* background-image: url('./images/Otto-SVGs/eraser-svgrepo-com.svg'); */
							background-repeat: no-repeat;
							background-size: 1rem, 1rem;
							position: absolute;
							inset: 45% 0% 0% 78%;
						}
					}
				}
				& .IO__press__crate {
					grid-area: 3 / 3 / 3 / 4;
					display: flex;
					align-items: start;
					justify-content: end;
					.IO__crate {
						&:focus-within {
							outline: 1px solid var(--color6);
							outline-offset: 2px;
						}
						&::after {
							content: '';
							background-image: url('https://aap.ottocratesolver.com/images/Otto-SVGs/delivery-svgrepo-com.svg');
							/* background-image: url('./images/Otto-SVGs/delivery-svgrepo-com.svg'); */
							background-size: 1rem, 1rem;
							background-repeat: no-repeat;
							position: absolute;
							inset: 85% 0% 0% 78%;
						}
						& .IO__crate:active {
							transition: .5s ease-in-out;
							transition: .3s ease-in-out;
							transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
							background-color: var(--table-line);
							opacity: .5;
						}
					}
					& .container__status__counter {
						grid-area: 3 / 2 / 3 / 3;
					}
				}
				& .container__status__pane__frame {
					grid-area: 1 / 1 / 4 / 1;
					border: .1rem solid var(--iframes-bg);
					border-radius: .5rem;
					overflow-y: hidden;
					padding: .5rem;
					max-height: 42dvh;
					&:hover {
						overflow-y: scroll;
						border: transparent;
						border-radius: 1rem;
						box-shadow: var(--shadow1);
						transition: .5s ease-in-out;
					}
				}
			}
		}
	}
	& .container-bottom:is([aria-hidden="false"]) {
		grid-area: 3 / 2 / 4 / 6;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
		column-gap: 1rem;
		& .container__results {
			display: flex;
			align-items: center;
			justify-content: center;
			border: solid .1rem var(--lines);
			border-radius: .5rem;
			box-shadow: var(--rise-panels);
			padding: .3rem;
			isolation: isolate;
			max-height: 45dvh;
			background-color: var(--panel-backcolor);
			& .copy-pane1:is([aria-hidden="true"]),
			.copy-pane2:is([aria-hidden="true"]){
				display: none;
			}
			& .copy-pane1:is([aria-hidden="false"]) {
				display: flex;
				grid-area: 1 / 1 / 1 / 2;
				overflow: hidden;
				height: 100%;
				&:hover {
					height: 100%;
					overflow-y: scroll;
				}
			}
			& .copy-pane2:is([aria-hidden="false"]) {
				display: flex;
				grid-area: 1 / 2 / 1 / 3;
				overflow: hidden;
				height: 100%;
				&:hover {
					height: 100%;
					overflow-y: scroll;
				}
			}
			& div:is([aria-hidden="true"]) {
				display: none
			}
			& div:is([araia-hidden="false"]) {
				background-color: var(--background-select);
				border: solid .1rem var(--lines);
				border-radius: .3rem;
				width: auto;
				height: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 2rem;
				& .menu__currency, .menu__units {
					display: flex;
					flex-flow: column;
					gap: 1.5rem;
					& div {
						display: flex;
						flex-flow: row;
						flex-basis: 1;
						justify-content: space-between;
						gap: 1rem;
						height: 100%;
						width: 100%;
						& select > option {
							text-align: center;
							text-transform: uppercase;
							background: var(--background-option);
							line-height: 0;
							border: .1rem solid var(--add-col);
						}
						& select {
							font-family: 'Mitr', sans-serif;
							border-radius: var(--bord);
							font-size: var(--fonts);
							font-weight: 500;
							background: var(--background-select);
							color: var(--p__color--mode);
							box-shadow: var(--inner-shadow);
							text-align-last: center;
						}
						& div {
							position: relative;
							padding: .3rem;
							& .IO__add--form {
								position: relative;
								margin: 0;
								padding: 0;
								width: auto;
								&::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
									-webkit-appearance: none;
									margin: 0;
								}
								&[type=number] {
									-moz-appearance: textfield;
								}
							}
							&::before {
								content: '';
								position: absolute;
								inset: 0;
								height: 100%;
								width: 100%;
								border: solid .1rem var(--lines);
								border-radius: .5rem;
							}
						}
					}
				}
				& .get__currency, .get__measure {
					position: relative;
				}
			}
		}
	}
	& .package-crates {
		grid-area: 2 / 6 / 4 / 8;
		border: solid .1rem var(--lines);
		border-radius: .5rem;
		position: relative;
		padding: .5rem;
		background-color: var(--panel-backcolor);
		& .top-btns {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			& div {
				& .settings-content {
					&:hover {
						background-color: var(--gold);
					}
					&:active {
						background-color: var(--color3);
					}
				}
				& > button {
					border: solid .1rem var(--lines);
					border-radius: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 2rem;
					width: 2rem;
					opacity: .5;
					padding: 0;
					z-index: 10;
					background-color: transparent;
					&:hover {
						transition: all 200ms ease-in-out;
						transform: translateY(.1rem);
						box-shadow: var(--shadow1);
						cursor: pointer;
					}
					&:active {
						border: solid .1rem var(--color3);
					}
					& svg {
						height: 1.5rem;
						width: 1.5rem;
					}
				}
			}
		}
		& {
			display: grid;
			grid-template-rows: 1rem 2rem 1.5fr 1.5fr .2fr;
			grid-template-columns: 1fr;
			row-gap: 2rem;
		}
		& .contents1, .contents2 {
			overflow-y: hidden;
			overflow-x: clip;
			border: solid .1rem var(--lines);
			border-radius: .5rem;
			background-color: transparent;
			padding: .5rem;
			max-height: 42dvh;
			& > * {
				height: 100%;
				animation-name: fill-pane 1s linear;
				animation-fill-mode: forwards;
				transition: all .3s linear;
			}
			& {
				flex-direction: column;
				flex-grow: 1;
				align-items: start;
				justify-content: start;
				position: relative;
				transition: all 200ms ease-in-out;
			}
			&:active {
				box-shadow: var(--inner-shadow1);
				transform: translateY(.1rem);
				transition: 100ms ease-in-out;
			}
			&:hover {
				cursor: pointer;
			}
		}
		& .contents1 {
			grid-area: 2 / 1 / 4 / 1;
		}
		& .contents2 {
			grid-area: 4 / 1 / 5 / 1;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
		}
	}
	& .bottom-btns {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		& div {
			& .packages {
				z-index: 40;
				&:hover {
					background-color: var(--result-col);
				}
				& .materials, #package-material {
					isolation: isolate;
					z-index: 0;
				}
			}
			& .works-packed {
				&:hover {
					background-color: var(--menu-col);
				}
			}
			& .reset-sizes {
				&:hover {
					background-color: var(--menu-col);
				}
			}
			& .add__new__field {
				&:hover {
					background-color: var(--pressed);
				}
			}
			& .confirm-btn {
				&:hover {
					background-color: var(--color6);
				}
			}
			& .cancel-btn {
				&:hover {
					background-color: var(--color3);
				}
			}
			& > .packages, .works-packed, .reset-sizes, .add__new__field, .confirm-btn, .cancel-btn {
				&:active {
					box-shadow: var(--inner-shadow1);
					background-color: transparent;
					transition: 100ms ease-in-out;
				}
			}
			& button {
				padding: 0;
				border: solid .1rem var(--lines);
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 3rem;
				width: 3rem;
				opacity: .7;
				background-color: transparent;
				z-index: 50;
				&:hover {
					transition: all 200ms ease-in-out;
					transform: translateY(.1rem);
					box-shadow: var(--shadow1);
					cursor: pointer;
					}
					&:disabled {
						opacity: .3;
						cursor: not-allowed;
					}
					& > svg {
						height: 2rem;
						width: 2rem;
					}
				}
			}
		}
	& .left-section {
		grid-area: 1 / 1 / 4 / 1;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: .2fr 1fr;
		row-gap: 1rem;
		height: 100%;
		padding: 2.5rem;
		& .id__user {
			grid-area: 1 / 1 / 1 / 2;
			align-self: center;
			justify-self: center;
			& div {
				border: solid .1rem var(--light-blue1);
				border-radius: 50%;
				padding: 0;
				& .avatar {
					padding: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 4rem;
					width: 4rem;
					& > svg {
						height: 3rem;
						width: 3rem;
					}
				}
			}
		}
		& .side-menu {
			grid-area: 2 / 1 / 2 / 3;
			align-self: center;
			justify-self: center;
		}
		& .coins, .size_converter {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: .1rem;
		}
		& .size_converter {
			position: relative;
		}
	}
	& .right-section {
		grid-area: 1 / 8 / 4 / 9;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 1fr);
		padding-top: 1rem;
		height: 100%;
		& .logout {
			grid-area: 1 / 1 / 1 / 2;
			align-self: start;
			justify-self: center;
		}
		& .logo {
			grid-area: 2 / 1 / 2 / 2;
			align-self: end;
			justify-self: center;
			& {
				display: grid;
				grid-template-columns: 1fr;
				grid-template-rows: 1fr;
				& .logo-otto {
					width: 70%;
					height: 70%;
					grid-area: 1 / 1 / 1 / 1;
					align-self: center;
					justify-self: center;
				}
				& .spinner {
					grid-area: 1 / 1 / 1 / 1;
					align-self: center;
					justify-self: center;
				}
			}
		}
	}
	& .left-section, .right-section {
		background-color: var(--sides);
	}
}


:is(.popup, .plotter, .container__insert, .container__status, .result-left, .result, .menu) {
	padding: 2rem;
.toggle__plotter:is([aria-hidden="true"]) * {
	display: none;
.colorbar {
	font-size: var(--fonts);
	font-weight: 600;
	box-sizing: border-box;
	box-shadow: var(--shadow1);
	border-radius: .3rem;
}


/* ╭──────────────────────────────────────────────────────────╮
   │                     Status container                     │
   ╰──────────────────────────────────────────────────────────╯
*/

.container__status__counter {
	border-radius: .5rem;
	padding: 0 .6rem;
	border: .1rem solid var(--iframes-bg);
	box-sizing: border-box;
	transition: 1s ease-in-out;
	width: auto;
	& > p {
		border-radius: 1rem;
		font-size: .7rem;
		color: var(--p__color--mode);
		padding: .1rem .3rem;
		border: .1rem solid var(--iframes-bg);
		box-sizing: border-box;
	}
	&:hover > p {
		border-radius: 1rem;
		box-shadow: var(--shadow1);
		transition: .5s ease-in-out;
	}
}


/* ╭──────────────────────────────────────────────────────────╮
   │                       Result pane                        │
   ╰──────────────────────────────────────────────────────────╯
*/

<<<<<<< HEAD
.container__results {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 1rem;
	justify-content: space-evenly;
	align-content: center;
	& > div {
		flex-grow: 1;
		content: var(--r_height);
		animation-name: fill-pane;
		animation-delay: 1s;
		animation-fill-mode: forwards;
	}
	& div > div {
		padding-top: .5rem;
		height: 15rem;
		width: 100%;
		border: .1rem solid var(--iframes-bg);
		border-radius: 1rem;
		overflow-y: clip;
		overflow-x: clip;
		&:hover {
			overflow-y: scroll;
			overflow-x: clip;
			border: transparent;
			border-radius: 1rem;
			box-shadow: var(--shadow1);
			transition: .5s ease-in-out;
		}
	}
}
=======
/* .container__results { */
/* 	display: flex; */
/* 	flex-wrap: wrap; */
/* 	flex-direction: row; */
/* 	gap: 1rem; */
/* 	justify-content: space-evenly; */
/* 	align-content: center; */
/* 	height: 100%; */
/* 	width: 100%; */
/* 	& > div { */
/* 		flex-grow: 1; */
/* 		content: var(--r_height); */
/* 		animation-name: fill-pane; */
/* 		animation-delay: 1s; */
/* 		animation-fill-mode: forwards; */
/* 	} */
/* 	& div > div { */
/* 		padding-top: .5rem; */
/* 		height: 15rem; */
/* 		width: 100%; */
/* 		border: .1rem solid var(--iframes-bg); */
/* 		border-radius: 1rem; */
/* 		overflow-y: clip; */
/* 		overflow-x: clip; */
/* 		&:active { */
/* 			overflow-y: scroll; */
/* 			overflow-x: clip; */
/* 			border: transparent; */
/* 			border-radius: 1rem; */
/* 			box-shadow: var(--shadow1); */
/* 			transition: .5s ease-in-out; */
/* 		} */
/* 	} */
/* } */
>>>>>>> newLayout

.copy-pane1, .copy-pane2 {
	height: 100%;
	width: 100%;
	padding: .3rem 0;
	margin: 0;
	inset: 0;
	border: solid .1rem var(--lines);
	border-radius: .3rem;
	background-color: transparent;
	position: relative;
	overflow: hidden;
	z-index: 10;
	& {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	&:hover {
		cursor: pointer;
		box-shadow: var(--shadow1);
		overflow-y: scroll;
	}
	&:active {
		box-shadow: var(--inner-shadow1);
		transform: translateY(.1rem);
		transition: 100ms ease-in-out;
	}
}

.copy {
	height: 100%;
	overflow-y: clip;
	&:hover {
		cursor: pointer;
		box-shadow: var(--shadow1);
		overflow: scroll;
	}
}


.copy-message {
	visibility: hidden;
}


.copy:active > .copy-message {
	visibility: visible;
	-webkit-animation: fadeIn 300ms;
	animat1on: fadeIn 200ms;
	opacity: .5;
	height: 25%;
	width: 25%;
	position: relative;
}


/* ╭──────────────────────────────────────────────────────────╮
   │                      Buttons setup                       │
   ╰──────────────────────────────────────────────────────────╯
*/

:is(.IO__press, .IO__press-mobile) {
	display: flex;
	align-items: end;
	justify-content: end;
	flex-direction: column;
	gap: .5rem;
	& > button {
		border: solid .1rem var(--lines);
		border-radius: .3rem;
	}
}


/* ADD button style */
.IO__press--btn {
	color: var(--color4);
	height: 2rem;
	width: 5rem;
	background: transparent;
	border: 0;
	border-radius: .8rem;
	cursor: pointer;
	transition: transform .3s ease-in-out;
	opacity: .6;
	&:hover {
		transition: all .5s ease-in-out;
		transform: translateY(.1rem);
		box-shadow: var(--shadow1);
	}
	&:active {
		box-shadow: var(--inner-shadow);
		transition: all .5s ease-in-out;
	}
}


:is(.press--btn-mobile, .IO__press--btn) {
	color: black;
	opacity: .5;
	font-family: Saira Semi Condensed, sans-serif;
	font-weight: 700;
	font-size: calc(var(--fonts));
	transition: all 1s ease;
	&:is(.add--btn, .del--btn, .clear--btn) {
		outline: 0;
	}
}


.del--btn:focus-within {
	outline: 1px solid var(--color8);
	outline-offset: 2px;
}

.clear--btn:focus-within {
	outline: 1px solid var(--color4);
	outline-offset: 2px;
}

/* ╭──────────────────────────────────────────────────────────╮
   │                       Crate button                       │
   ╰──────────────────────────────────────────────────────────╯
*/
.IO__crate {
	height: 7rem;
	width: 5rem;
	/* &:hover { */
	/* 	visibility: visible; */
	/* 	-webkit-animation: fadeIn .5s; */
	/* 	animation: fadeIn 1s; */
	/* 	transform: translateY(.1rem); */
	/* 	background: goldenrod; */
	/* 	box-shadow: var(--shadow1); */
	/* 	border: .5rem solid var(--color8); */
	/* 	transition: all .5s ease-in-out; */
	/* 	transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); */
	/* 	color: var(--color5); */
	.popup {
		display: block;
	}
}


.IO__crate__txt {
	display: grid;
	place-items: center;
	opacity: 100%;
}


.IO__crate {
	background: var(--bg-clr);
	box-sizing: border-box;
	border: solid .1rem var(--iframes-bg);
	border-radius: .5rem;
	position: absolute;
	transition: all 0.3s ease;
	cursor: pointer;
	overflow: hidden;
	z-index: 10;
	text-transform: uppercase;
	color: var(--crate-btn-col);
	isolation: isolate;
	&::before {
		content: "";
		position: absolute;
		display: block;
		top: 0;
		left: -7rem;
		width: 100%;
		height: 100%;
		background: linear-gradient(
			90deg, transparent, #ffffff75,
			transparent
			);
		transition: all 3s;
		z-index: -1;
		transform: translateX(-12rem) skew(-20deg);
	}
	&:hover::before {
		transform: translateX(30rem) skew(-20deg);
	}
	&:focus-within {
		outline: 3px solid goldenrod;
		outline-offset: 2px;
	}
	&:active ~ span {
		animation-play-state: paused;
	}
	& > p {
		color: black;
		opacity: .5;
		font-size: 1rem;
		font-family: Saira Semi Condensed, sans-serif;
		font-weight: 900;
		font-style: "semi-bold";
		text-decoration-style: bold;
	}
	&:disabled:hover {
		opacity: 0;
		cursor: not-allowed;
	}
	&:disabled {
		opacity: .3;
		cursor: not-allowed;
	}
}

/* :is(.IO__crate--shadow1, .IO__crate--shadow2) { */
/* 	grid-row: 1 / 2; */
/* 	grid-column: 1 / 2; */
/* 	border-radius: .5rem; */
/* 	z-index: -10; */
/* 	width: 6.7rem; */
/* 	height: 6.7rem; */
/* 	filter: blur(.1rem); */
/* } */
/**/
/**/
/* .IO__crate--shadow1 { */
/* 	box-shadow: .3rem .3rem .6rem var(--iframes-bg), */
/* 	-.2rem -.2rem .5rem white; */
/* 	background: linear-gradient( */
/* 		to bottom right, */
/* 		var(--color4) 0%, */
/* 		var(--background) 100% */
/* 	); */
/* 	transition: all .2s linear; */
/* 	animation: waves 2000ms linear infinite; */
/* 	animation-play-state: running; */
/* 	cursor: pointer; */
/* } */
/**/
/**/
/* .IO__crate--shadow2 { */
/* 	box-shadow: .3rem .3rem .6rem var(--iframes-bg), */
/* 	-.2rem -.2rem .5rem white; */
/* 	background: linear-gradient( */
/* 		to bottom right, */
/* 		var(--background) 0%, */
/* 		var(--color8) 100% */
/* 	); */
/* 	transition: all .2s linear; */
/* 	animation: waves 2000ms linear 1000ms infinite; */
/* 	animation-play-state: running; */
/* 	cursor: pointer; */
/* } */


@keyframes waves {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}
/* ╭──────────────────────────────────────────────────────────╮
   │                      This is the div menu                │
   ╰──────────────────────────────────────────────────────────╯
*/

.menu {
	display: flex;
	flex-direction: column;
	isolation: isolate;
	& {
		background: transparent;
		border-color: var(--menu-col);
		padding: .7rem;
		inset: 0;
	}
}


.menu__option--text {
	visibility: hidden;
	color: var(--popup);
	overflow: hidden;
	transition: .5s ease-in-out;
	& {
		font-size: var(--fonts);
		font-weight: 400;
		max-width: 80ch;
		box-shadow: var(--shadow1);
		border-radius: var(--bord);
		padding: 0.3rem 1rem;
		position: absolute;
		margin: -2.5% 0 0 7%;
	}
}


/* .accordion-panel:has([aria-expanded="true"]) { */
/* 	--input-menu-radius: 2rem; */
/* 	--input-menu-margin: 1rem; */
/* 	--input-menu-border: .1rem solid var(--iframes-bg); */
/* 	--input-menu-display: block; */
/* 	--input-menu-paddin-units: 1.5rem 1.5rem; */
/* 	--input-menu-units-radius: .5rem; */
/* 	--display-flex: flex; */
/* } */


@keyframes open-pane {
	0% {
		opacity: 0;
		filter: blur(1rem);
	}
	100% {
		opacity: .9;
	}
}


.accordion-panel > h3{
	cursor: pointer;
	margin: 0;
}


.accordion-panel + .accordion-panel {
	margin-top: 1rem;
}


.trigger-menu {
	border: solid .1rem var(--light-blue1);
	border-radius: .3rem;
	transition: all .5s ease-in-out;
	z-index: 10;
	background: transparent;
	width: auto;
	padding: .4rem;
	cursor: pointer;
	&:active {
		background-color: unset;
		box-shadow: var(--inner-shadow);
		transition: all 200ms ease-in-out;
	}
	&:hover {
		background-color: var(--light-blue3);
		opacity: .5;
	}
}


.menu-icon {
	text-align: center;
	align-self: center;
	justify-self: center;
	background: transparent;
	height: auto;
	width: 1.5rem;
	z-index: -10;
	aspect-ratio: 1 / 1;
	transition: .5s ease-in-out;
	inset: 0;
	& {
		fill: var(--dark-blue2);
	}
}

.trigger-menu {
	outline: 0;
}


@media (max-width: 768px) {
	:root {
		--font-title: 1.2rem;
		--fonts: .7rem;
		--colg: 1rem;
		--rowg: 1rem;
	}

	.app {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		column-gap: var(--colg-mobile);
		row-gap: var(--rowg-mobile);
		height: auto;

		& .left-section {
			grid-area: unset;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			height: auto;
			padding: 1rem;

			& .id__user {
				grid-area: unset;
				& div {
					& .avatar {
						height: 3rem;
						width: 3rem;
						& > svg {
							height: 2rem;
							width: 2rem;
						}
					}
				}
			}
			& .side-menu {
				grid-area: unset;
			}
		}

		& .right-section {
			grid-area: unset;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			height: auto;
			padding: 1rem;

			& .logout {
				grid-area: unset;
			}
			& .logo {
				grid-area: unset;
				& .logo-otto {
					width: 50%;
					height: 50%;
				}
				& .spinner {
					width: 50%;
					height: 50%;
				}
			}
		}

		& .otto__interface {
			grid-area: unset;
			grid-column: 1 / -1;
			grid-row: auto;
			margin: 0 var(--colg-mobile);
			& .container__insert {
				grid-template-columns: 1fr;
				grid-template-rows: auto;
				column-gap: var(--colg-mobile);
				row-gap: var(--rowg-mobile);
				& .searcher {
					grid-area: unset;
				}
				& .menu-shifts {
					grid-area: unset;
					align-items: center;
				}
				& .IO__sizes__code {
					grid-area: unset;
				}
				& .IO__press {
					grid-area: unset;
					align-items: center;
				}
				& .IO__press__crate {
					grid-area: unset;
					justify-content: center;
				}
				& .container__status__pane__frame {
					grid-area: unset;
				}
			}
		}

		& .package-crates {
			grid-area: unset;
			grid-column: 1 / -1;
			grid-row: auto;
			margin: 0 var(--colg-mobile);
		}

		& .container-bottom {
			grid-area: unset;
			grid-column: 1 / -1;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			margin: 0 var(--colg-mobile);
			& .container__results {
				& .copy-pane1:is([aria-hidden="false"]) {
					grid-area: unset;
				}
				& .copy-pane2:is([aria-hidden="false"]) {
					grid-area: unset;
				}
			}
		}
	}
}



.accordion-panel:nth-child(2) {
	--__icon-color: var(--color6);
	opacity: .8;
}


.accordion-panel:nth-child(3) {
	--__icon-color: yellow;
}


.trigger-menu:hover + .menu__option--text {
	visibility: visible;
	transition: all .5s ease-in-out;
	-webkit-animation: fadeIn 2s;
	animation: fadeIn 1.5s linear;
}


.menu__input {
	& {
		width: 100%;
		height: 100%;
	}
}


/* ╭──────────────────────────────────────────────────────────╮
   │                   Menu fetch estimate.                   │
   ╰──────────────────────────────────────────────────────────╯
*/
.menu__fetch {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	transition: all 2s ease-in-out, transform 2s ease;
	position: relative;
	padding: .3rem;
	isolation: isolate;
	& input {
		width: 100%;
	}
	&::before {
		content: '';
		background-image: url('./images/Otto-SVGs/magnifier-tool-in-vertical-position-interface-symbol-svgrepo-com.svg');
		background-repeat: no-repeat;
		background-size: 1rem, 1rem;
		position: absolute;
		height: 1rem;
		width: 1rem;
		inset: 25% 0% 0% 5%;
		opacity: .3;
	}
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		border: solid .1rem var(--lines);
		width: 100%;
		height: 100%;
		border-radius: .5rem;
		z-index: -10;
	}
}


.menu__search-btn {
	display: var(--input-menu-display, none);
	margin-top: var(--input-menu-margin);
	padding: auto;
}


/* ╭──────────────────────────────────────────────────────────╮
   │                  Menu Units & Currency.                  │
   ╰──────────────────────────────────────────────────────────╯
*/

/* .menu__units, */
/* .menu__currency { */
/* 	display: var(--display-flex, none); */
/* 	flex-flow: row nowrap; */
/* 	justify-content: flex-start; */
/* 	gap: var(--input-menu-margin); */
/* 	animation: open-pane 2.5s ease; */
/* 	& > div { */
/* 		display: var(--display-flex, none); */
/* 		flex-flow: row wrap; */
/* 		flex-grow: .1; */
/* 		justify-content: flex-start; */
/* 		gap: var(--input-menu-margin); */
/* 		animation: open-pane 2.5s ease; */
/* 		& > select option { */
/* 			text-align: center; */
/* 			background: var(--background-option); */
/* 			line-height: 0; */
/* 			border: .1rem solid var(--add-col); */
/* 		} */
/* 		& > select { */
/* 			padding: .1rem; */
/* 			font-family: 'Mitr', sans-serif; */
/* 			border-radius: var(--bord); */
/* 			font-size: var(--fonts); */
/* 			font-weight: 500; */
/* 			background: var(--background-select); */
/* 			color: var(--p__color--mode); */
/* 			box-shadow: var(--inner-shadow); */
/* 			text-align-last: center; */
/* 		} */
/* 	} */
/* 	& .get__currency, .get__measure { */
/* 		width: 100%; */
/* 		color: var(--p__color--mode); */
/* 		z-index: 10; */
/* 		&:focus { */
/* 			width: 95%; */
/* 		} */
/* 	} */
/* } */


:is(.exchange--content, .units-conversion) {
	transition: width 3s ease-in-out;
	transition: padding 5s ease-in-out;
}


/* ╭──────────────────────────────────────────────────────────╮
   │            This is the div to estimate input             │
   ╰──────────────────────────────────────────────────────────╯
*/

.info + .info {
	margin: 1rem 0 0 0;
}

.IO--span2 ~ .IO--span2 {
	margin: 5cqh 0 0 0;
}

.IO label {
	cursor: pointer;
}


/* ╭────────────────────────────────────────────────────────╮
   │                    Metric selectors.                   │
   ╰────────────────────────────────────────────────────────╯
*/

.IO__sizes__units {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	& {
		width: 5rem;
		height: 2rem;
		border: .1rem solid var(--iframes-bg);
		border-radius: .5rem;
		transition: .5s ease;

	}
	&:hover {
		border: none;
		box-shadow: var(--shadow1);
	}
}


.IO__sizes__units > input:checked + label {
	transition: all .5s ease;
	color: var(--color4);
	z-index: 5;
}


.IO__sizes__units--seg1, .IO__sizes__units--seg2 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.2rem;
	height: 1rem;
	font-family: Saira Semi Condensed, sans-serif;
	font-size: var(--fonts);
	font-weight: 900;
	cursor: pointer;
	color: var(--iframes-bg);
	transition: all 5s ease;
}


.cm, .in {
	padding: .1rem .1rem;
	margin: .1rem .1rem;
	display: none;
}


.IO__sizes--color {
	position: absolute;
	pointer-events: none;
	width: 2.4em;
	height: 1.5rem;
	margin-right: 2.3rem;
	border-radius: .3rem;
	box-shadow: var(--inner-shadow);
	background: var(--menu-col);
	border-bottom: .05rem solid var(--color4);
	border-right: .05rem solid var(--color4);
}


.cm:checked ~ .IO__sizes--color {
	transform: translateX(0);
	transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}


.in:checked ~ .IO__sizes--color {
	transform: translateX(2rem);
	transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}


/* ╭──────────────────────────────────────────────────────────╮
   │             This is the form to input data.              │
   ╰──────────────────────────────────────────────────────────╯
*/

.IO__sizes__measure {
	display: flex;
	justify-content: flex-end;
	& input {
		width: 4.5rem;
		height: 1.5rem;
	}
	& input:focus {
		width: 4rem;
		font-size: 1.1rem;
		transition: input 1s ease-in-out;
	}
}


/*
 * ╭─────────────────────────────────────────────────────────╮
 * │                  Dialog padding setup.                  │
 * ╰─────────────────────────────────────────────────────────╯
*/

.pad {
	visibility: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
	color: var(--dark-blue);
	background: var(--light-blue1);
	border-radius: 1rem;
	position: relative;
	z-index: 1;
	padding: .3rem;
	& {
		font-size: 100;
		font-family: Mitr, sans-serif;
	}
	&::after {
		content: " ";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -.5rem;
		border-width: .5rem;
		border-style: solid;
		border-color: var(--light-blue1) transparent transparent transparent
	}
}


.dialog {
	display: block;
	container-type: normal;
	container-name: pad-crates;
	border-radius: 1rem;
	background: none;
	border: solid var(--iframes-bg);
	position: absolute;
	opacity: .9;
	z-index: 100;
	margin: 2% 82% auto .3%;
	& .crates-done {
		height: 18cqb;
	}
	& {
		padding: 1rem;
		animation: emerge 1s ease-in-out;
		animation-fill-mode: forwards;
		transition: backdrop 1s ease-in-out;
		width: clamp(18dvw, 17rem, 25cqw);
	}
	&:hover .pad {
		margin-bottom: .7rem;
		border-radius: .5rem;
		font-size: .6rem;
		visibility: visible;
		animation: emerge 500ms ease-in;
		animation-fill-mode: forwards;
		transition: backdrop 500ms ease-in-out;
		z-index: 10;
	}
}


.padding-dialog {
	container: dialog;
	display: grid;
	grid-auto-columns: 1fr;
	grid-template-rows: 1fr 8cqh 8cqh;
	grid-template-areas:
	"iframe"
	"pads"
	"pad-btns";
	row-gap: 1rem;
	justify-items: center;
	align-items: center;
	& > iframe {
		grid-area: iframe;
		height: 40cqh;
		width: 100%;
	}
}

.IO__padding, .pad__buttons, .pads-sizes {
	display: flex;
	flex-direction: row;
	align-content: space-evenly ;
	justify-content: space-evenly;
	gap: 1rem;
}


.pads-sizes {
	grid-area: pads;
	border: .1rem solid var(--iframes-bg);
	border-radius: 1rem;
	padding: 10% 12%;
	& > input {
		max-width: 4rem;
	}
}


.pad__buttons {
	grid-area: pad-btns;
	width: auto;
}


.all-crates {
	& li > label > input {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		inset: 1rem;
		width: 1rem;
		height: 1rem;
	}
	& > li > label {
		font-family: Mitr, sans-serif;
		font-size: calc(var(--fonts) - .08rem);
		font-weight: 400;
		color: var(--pressed);
	}
}


.layer__open__close {
<<<<<<< HEAD
	display: var(block, --layer-state);
=======
	display: flex;
	align-items: center;
	justify-content: center;
>>>>>>> newLayout
	inset: 0;
	position: relative;
	transition: display 1s ease-in-out;
}


<<<<<<< HEAD
.layers-btn {
	z-index: 30;
	&::before {
		content: "";
		inset: 0;
		position: absolute;
		height: 100%;
		width: 100%;
		background: var(--background);
		box-shadow: var(--shadow1);
		/*border: .1px solid var(--color3);*/
		transition: all .2s linear;
		animation: waves 2000ms linear infinite;
		animation-play-state: running;
		border-radius: .8rem;
		z-index: -30;
	}
	&::after {
		content: "";
		inset: 0;
		position: absolute;
		height: 100%;
		width: 100%;
		background: var(--background);
		box-shadow: var(--shadow1);
		/*border: .5px solid var(--color3);*/
		transition: all .2s linear;
		animation: waves 2000ms linear 1000ms infinite;
		animation-play-state: running;
		border-radius: .8rem;
		z-index: -30;
	}
}
=======
/* .layers-btn { */
/* 	z-index: 30; */
/* 	&::before { */
/* 		content: ""; */
/* 		inset: 0; */
/* 		position: absolute; */
/* 		height: 100%; */
/* 		width: 100%; */
/* 		background: var(--background); */
/* 		box-shadow: var(--shadow1); */
/* 		/*border: .1px solid var(--color3);*/ */
/* 		transition: all .2s linear; */
/* 		animation: waves 2000ms linear infinite; */
/* 		animation-play-state: running; */
/* 		border-radius: .8rem; */
/* 		z-index: -30; */
/* 	} */
/* 	&::after { */
/* 		content: ""; */
/* 		inset: 0; */
/* 		position: absolute; */
/* 		height: 100%; */
/* 		width: 100%; */
/* 		background: var(--background); */
/* 		box-shadow: var(--shadow1); */
/* 		/*border: .5px solid var(--color3);*/ */
/* 		transition: all .2s linear; */
/* 		animation: waves 2000ms linear 1000ms infinite; */
/* 		animation-play-state: running; */
/* 		border-radius: .8rem; */
/* 		z-index: -30; */
/* 	} */
/* } */
>>>>>>> newLayout


.preview-icon {
	fill: var(--color3);
}

/* TODO: link the screen sizes passing through actual min -> next max sizes. */
/* @media only screen and (min-width: 1080px) and (max-width: 4000px) { */
/* @media not all and (aspect-ratio: 16 / 9) and (max-width: 4000px) { */
/* @media not all and (max-width: 80rem) { */
@media only screen and (width > 80rem) {
/* 	/* ╭─────────────────────╮ */
/* 	   │ 	main container.    │ */
/* 	   ╰─────────────────────╯ */

	.otto-interface {
		container-name: main-app;
		container-type: inline-size;
		/* display: grid; */
		/* grid-template-columns: repeat(auto-fit, minmax(mian(25rem, 10cqw), 1fr)); */
		/* column-gap: var(--colg); */
		/* row-gap: var(--rowg); */
		/* padding: 2% 30%; */
	}

	/* .accordion-panel:has([aria-expanded="false"]) { */
	/* 	width: var(--accordion-width, 1rem); */
	/* 	transition: width 2s ease-in-out; */
	/* 	fill: var(--p__color--mode); */
	/* } */
	/**/
	/* .accordion-panel:has([aria-expanded="true"]) { */
	/* 	& .menu-icon { */
	/* 		box-shadow: var(--shadow1); */
	/* 		cursor: pointer; */
	/* 		background: var(--menu-col); */
	/* 		fill: var(--__icon-color); */
	/* 	} */
	/* 	width: 18vw; */
	/* 	transition: width 2s ease-in-out; */
	/* } */

	/* ╭───────────────────╮
	   │ 	Spinner setup    │
	   ╰───────────────────╯
	*/
	/* Made by Kailoyan Todorov - from https://uiverse.io/bociKond/wise-bat-13 */
	.spinner {
		margin-top: 2rem;
		width: 2rem;
		height: 2rem;
		--clr: var(--dark-blue2);
		--clr-alpha: var(--gradient);
		animation: spinner 3.6s infinite ease;
		transform-style: preserve-3d;
		& {
			display:grid;
			place-items: center;
			align-items: center;
		}

		& > div {
			background-color: var(--clr-alpha);
			height: 50%;
			position: absolute;
			width: 50%;
			border: .1rem solid var(--clr);
		}

		& div:nth-of-type(1) {
			transform: translateZ(-.5rem) rotateY(180deg);
		}

		& div:nth-of-type(2) {
			transform: rotateY(-270deg) translateX(50%);
			transform-origin: top right;
		}

		& div:nth-of-type(3) {
			transform: rotateY(270deg) translateX(-50%);
			transform-origin: center left;
		}

		& div:nth-of-type(4) {
			transform: rotateX(90deg) translateY(-50%);
			transform-origin: top center;
		}

		& div:nth-of-type(5) {
			transform: rotateX(-90deg) translateY(50%);
			transform-origin: bottom center;
		}

		& div:nth-of-type(6) {
			transform: translateZ(.5rem);
		}
	}


	@keyframes spinner {
		0% {
			transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
		}

		50% {
			transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
		}

		100% {
			transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
		}
	}

	/* ╭────────────────────╮
	   │ 	Boxes loading.    │
	   ╰────────────────────╯
	*/
	/* Made by Nawsome- from : https://uiverse.io/Nawsome/cold-liger-90
	 Page load
	 */
	.loading {
		margin-top: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.boxes {
		--size: 3rem;
		--duration: 800ms;
		height: calc(var(--size) * 2);
		width: calc(var(--size) * 3);
		position: relative;
		transform-style: preserve-3d;
		transform-origin: 50% 50%;
		margin-top: calc(var(--size) * 1.5 * -1);
		transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
	}

	.boxes .box {
		width: var(--size);
		height: var(--size);
		top: 0;
		left: 0;
		position: absolute;
		transform-style: preserve-3d;
	}

	.boxes .box:nth-child(1) {
		transform: translate(100%, 0);
		-webkit-animation: box1 var(--duration) linear infinite;
		animation: box1 var(--duration) linear infinite;
	}

	.boxes .box:nth-child(2) {
		transform: translate(0, 100%);
		-webkit-animation: box2 var(--duration) linear infinite;
		animation: box2 var(--duration) linear infinite;
	}

	.boxes .box:nth-child(3) {
		transform: translate(100%, 100%);
		-webkit-animation: box3 var(--duration) linear infinite;
		animation: box3 var(--duration) linear infinite;
	}

	.boxes .box:nth-child(4) {
		transform: translate(200%, 0);
		-webkit-animation: box4 var(--duration) linear infinite;
		animation: box4 var(--duration) linear infinite;
	}

	.boxes .box > div {
		--background: var(--box);
		--top: auto;
		--right: auto;
		--bottom: auto;
		--left: auto;
		--translateZ: calc(var(--size) / 2);
		--rotateY: 0deg;
		--rotateX: 0deg;
		position: absolute;
		width: 100%;
		height: 100%;
		background: var(--background);
		top: var(--top);
		right: var(--right);
		bottom: var(--bottom);
		left: var(--left);
		transform:
			rotateY(var(--rotateY))
			rotateX(var(--rotateX))
			translateZ(var(--translateZ));
	}

	.boxes .box > div:nth-child(1) {
		--top: 0;
		--left: 0;
	}

	.boxes .box > div:nth-child(2) {
		--background: var(--box);
		--right: 0;
		--rotateY: 90deg;
	}

	.boxes .box > div:nth-child(3) {
		--background: goldenrod;
		--rotateX: -90deg;
	}

	.boxes .box > div:nth-child(4) {
		--background: var(--back-gray);
		--top: 0;
		--left: 0;
		--translateZ: calc(var(--size) * 3 * -1);
	}

	@-webkit-keyframes box1 {
		0%, 50% {
			transform: translate(100%, 0);
		}

		100% {
			transform: translate(200%, 0);
		}
	}

	@keyframes box1 {
		0%, 50% {
			transform: translate(100%, 0);
		}

		100% {
			transform: translate(200%, 0);
		}
	}

	@-webkit-keyframes box2 {
		0% {
			transform: translate(0, 100%);
		}

		50% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(100%, 0);
		}
	}

	@keyframes box2 {
		0% {
			transform: translate(0, 100%);
		}

		50% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(100%, 0);
		}
	}

	@-webkit-keyframes box3 {
		0%, 50% {
			transform: translate(100%, 100%);
		}

		100% {
			transform: translate(0, 100%);
		}
	}

	@keyframes box3 {
		0%, 50% {
			transform: translate(100%, 100%);
		}

		100% {
			transform: translate(0, 100%);
		}
	}

	@-webkit-keyframes box4 {
		0% {
			transform: translate(200%, 0);
		}

		50% {
			transform: translate(200%, 100%);
		}

		100% {
			transform: translate(100%, 100%);
		}
	}

	@keyframes box4 {
		0% {
			transform: translate(200%, 0);
		}

		50% {
			transform: translate(200%, 100%);
		}

		100% {
			transform: translate(100%, 100%);
		}
	}

	/* ╭────────────────────────────────╮
	   │   Animation footer settings    │
	   ╰────────────────────────────────╯
	*/
	.svg-frame {
		position: relative;
		width: 18rem;
		height: 18rem;
		transform-style: preserve-3d;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.svg-frame svg {
		position: absolute;
		transition: .5s;
		z-index: calc(1 - (0.2 * var(--j)));
		transform-origin: center;
		width: 344px;
		height: 344px;
		fill: none;
	}

	.svg-frame:hover svg {
		transform:
		rotate(-80deg)
		skew(30deg)
		translateX(calc(45px * var(--i)))
		translateY(calc(-35px * var(--i)));
	}

	.svg-frame svg #center {
		transition: .5s;
		transform-origin: center;
	}

	.svg-frame:hover svg #center {
		transform: rotate(-30deg) translateX(45px) translateY(-3px);
	}

	#out2 {
		animation: rotate16 7s ease-in-out infinite alternate;
		transform-origin: center;
	}

	#out3 {
		animation: rotate16 3s ease-in-out infinite alternate;
		transform-origin: center;
		stroke: var(--color8);
	}

	#inner3,
	#inner1 {
		animation: rotate16 4s ease-in-out infinite alternate;
		transform-origin: center;
	}

	#center1 {
		fill: var(--color3);
		animation: rotate16 2s ease-in-out infinite alternate;
		transform-origin: center;
	}

	@keyframes rotate16 {
		to {
			transform: rotate(360deg);
		}
	}

/* 	 ╭─────────────────────────────╮ */
/*   │ 	Right status container.    │ */
/*   ╰─────────────────────────────╯ */
	.cntainer__status__pane {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
		column-gap: 2rem;
		row-gap: 4rem;
		& .container__status__pane__frame {
			border: .1rem solid var(--iframes-bg);
			border-radius: 1rem;
<<<<<<< HEAD
			overflow-y: clip;
			overflow-x: clip;
=======
			overflow-y: hidden;
			overflow-x: hidden;
>>>>>>> newLayout
			padding: .5rem;
			&:hover {
				overflow-y: scroll;
				overflow-x: clip;
				border: transparent;
				border-radius: 1rem;
				box-shadow: var(--shadow1);
				transition: .5s ease-in-out;
			}
		}
	}

	.IO__add--form {
		border: .1rem solid var(--iframes-bg);
		border-radius: .5rem;
		&::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
		&[type=number] {
			-moz-appearance: textfield;
		}
	}

	.IO__press-mobile * {
		display: none;
	}

	:is(.IO__sizes--code, .IO__top__estimate) {
		&:focus {
			transition: input 1s ease-in-out;
		}
	}

/* 	/* ╭──────────────────────╮ */
/* 	   │ 	Header settings:    │ */
/* 	   ╰──────────────────────╯ */
/* 	*/ */
	.header--title {
		text-align: left;
	}


	:is(.header-content, .section__menu) {
		display: flex;
		justify-content: space-between;
	}


	.footer-content {
		display: none;
		&:is([aria-hidden="false"]) {
			display: flex;
			justify-content: space-between;
		}
		& div:nth-of-type(2):has(h3) {
			margin-top: 3rem;
		}
	}

	:is(.layers-btn, .logout-btn) {
		aspect-ratio: 2 / 2;
		border: solid .1rem var(--light-blue1);
		border-radius: .3rem;
		background: transparent;
		transition: all 500ms ease-in-out;
		cursor: pointer;
		opacity: .9;
		z-index: 10;
		padding: .5rem;
		&:active {
			background-color: unset;
			box-shadow: var(--inner-shadow);
			transition: all 200ms ease-in-out;
		}
		&:hover {
			background-color: var(--light-blue3);
			opacity: .5;
		}
		&:disabled {
			opacity: .3;
			cursor: not-allowed;
		}
		& {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}


	.section-right-up {
		display: flex;
		align-content: center;
		flex-direction: column;
		justify-content: center;
		gap: .3rem;
	}


	.side__menu {
		visibility: hidden;
		color: var(--popup);
		overflow: hidden;
		transition: .5s ease-in-out;
		& {
			font-size: var(--fonts);
			font-weight: 400;
			max-width: 80ch;
			box-shadow: var(--shadow1);
			border-radius: var(--bord);
			padding: 0.3rem 1rem;
			position: absolute;
			margin-top: 7rem;
		}
	}


	.mode {
		border: solid .1rem var(--iframes-bg);
		border-radius: .5rem;
		width: 5rem;
		height: 2rem;
		padding: .1rem;
		&:hover {
			box-shadow: none;
		}
		& label > svg {
			fill: var(--color4);
			width: 1rem;
			height: 1rem;
			transition: all 500ms ease-in-out;
			&:hover {
				fill: var(--dark);
			}
		}
		.mode--color {
			box-shadow: var(--inner-shadow);
			border: solid .1rem var(--light-blue1);
			border-radius: .3rem;
		}
		&:hover > .side__menu {
			visibility: visible;
			transition: all .5s ease-in-out;
			-webkit-animation: fadeIn 2s;
			animation: fadeIn 1.5s linear;
		}
	}


	:is(.logout-icon, .preview-icon) {
		fill: var(--color4);
		width: 1.4rem;
		height: 1.4rem;
		transition: all 500ms ease-in-out;
		&:hover{
			fill: var(--color1);
		}
	}


	.preview-icon:hover {
		fill: var(--preview-hover);
		fill-opacity: .8;
		& + .side__menu {
			visibility: visible;
			transition: all .5s ease-in-out;
			-webkit-animation: fadeIn 2s;
			animation: fadeIn 1.5s linear;
		}
	}

	/* ╭──────────────────────────────────────────────────────────╮
	   │                   Layer plotter setup.                   │
	   ╰──────────────────────────────────────────────────────────╯
	*/
	.plotter__menu:is([aria-hidden="true"]),
	.plotter:is([aria-hidden="true"]) {
		display: none;
		transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}

	.plotter:is([aria-hidden="false"]) {
		grid-area: 2 / 2 / 4 / 6;
		display: grid;
		grid-template-rows: 3rem 1fr 3rem;
		gap: 1rem;
		& {
			isolation: isolate;
			animation: emerge 2s ease-in;
			animation-fill-mode: forwards;
			border: .1rem solid var(--iframes-bg);
		}
		.plotter__header {
			grid-area: 1 / 1 / 1 / 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-basis: 1;
			& h2 {
				margin: 0;
			}
			& > p {
				font-size: .6rem;
				background: transparent;
				border: .1rem solid var(--iframes-bg);
				box-shadow: var(--inner-shadow);
				border-radius: 1rem;
				padding: .4rem;
				color: var(--p__color--mode);
				opacity: .6;
			}
		}
		& .plotter__display {
			grid-area: 2 / 1 / 2 / 1;
			border: solid .12rem var(--lines);
			border-radius: .3rem;
			display: grid;
			& .plotlyjsicon, .modebar-btn--logo {
				display: none;
			}
			& .svg-container {
				align-self: center;
				align-self: center;
				justify-self: center;
			}
		}
		.layer-button {
			place-self: center;
			grid-area: 3 / 1 / 3 / 1;
			display: flex;
			flex-direction: row;
			gap: 2ch;
			align-items: space-between;
			justify-content: space-between;
			animation: emerge 4s ease;
			animation-fill-mode: forwards;
			transition: all 3s linear;
			& button {
				border-radius: 50%;
				border: none;
				height: 3rem;
				width: 3rem;
				cursor: pointer;
				background-color: var(--bg-col);
				z-index: -10;
				&:hover {
					background-color: unset;
					transition: all 200ms ease-in-out;
					transform: translateY(.1rem);
				}
				&:active{
					background-color: var(--result-col);
				}
				& svg {
					width: 100%;
					height: 100%;
				}
			}
		}
		& .crate-layer {
			width: 100%;
			height: 100%;
			place-self: center;
			animation: fede-open 3s ease;
			animation-fill-mode: forwards;
			transition: width height 2s ease;
			& {
				justify-content: center;
				border-radius: .3rem;
				border: .1rem solid var(--iframes-bg);
				box-shadow: var(--inner-shadow);
			}
		}
		.crate-layer > * {
			font-family: 'Mitr', sans-serif;
			font-weight: 400;
			font-size: .7rem;
		}
		.crate-layer text {
			font-size: .8rem;
			fill: white;
			transition: fill 1.5s ease;
			z-index: -10;
			animation: stroke-draw 3s ease-in-out, emerge 2s ease-in;
			animation-fill-mode: forwards;
			transition: ani1s ease-in-out;
		}
		.crate-layer rect {
			rx: .5rem;
			ry: .5rem;
			fill: transparent;
			stroke-dasharray: 100%;
			stroke-dashoffset: 100%;
			stroke: var(--stroke);
			animation: stroke-draw 2.5s ease-in-out, emerge 1s ease-in;
			animation-fill-mode: forwards;
			transition: animation 2.5s ease-in-out;
			transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
		}
		.crate-layer rect:hover {
			fill: var(--color3);
			animation: emerge 2s ease-in-out;
			transition: animation 1s ease-in-out;
			transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
			opacity: .3;
			& text {
				fill: white;
			}
		}
	}
	.plotter__menu:is([aria-hidden="false"]) {
		display: flex;
		justify-content: center;
		transition: all 300ms ease-in;
		& {
			animation: emerge 3s ease-in;
			animation-fill-mode: forwards;
		}
		& {
			width: 17%;
			/* margin: 10% 3% 0 1%; */
			/* position: fixed; */
		}
		.plotter__menu__crates {
			display: inherit;
			justify-content: flex-start;
			flex-direction: column;
			& > h3 {
				text-align: center;
				min-width: 100%;
				max-height: 10%;
			}
			& {
				min-width: 100%;
				animation-delay: 15s;
				animation: fade-open 3s ease-in;
				animation-fill-mode: forwards;
				transition: all 2s ease-in;
			}
			.plotter__crate__list {
				display: inherit;
				flex-basis: 100%;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				& {
					isolation: isolate;
					border-radius: 1rem;
					box-sizing: border-box;
					margin-top: 1rem;
				}
				.crates-done {
					font-family: 'Mitr', sans-serif;
					font-size: .75rem;
					font-weight: 500;
					color: var(--p__color--mode);
					opacity: .8;
					& {
						background: transparent;
						box-shadow: var(--inner-shadow);
						border-radius: 1rem;
						padding: .2rem .3rem;
						counter-reset: crates-counter;
					}
					& option {
						background: var(--color4);
						line-height: 0;
						border: .1rem solid var(--add-col);
						box-shadow: var(--inner-shadow);
						color: var(--iframes-bg);
						border-radius: 1rem;
					}
				}
			}
		}
	}
}


@keyframes stroke-draw {
	0% {
		stroke-dashoffset: 0;
		stroke-dasharray: 0;
		fill: var(--work-hover);
	}
	50% {
		stroke-dashoffset: 1000;
		stroke-dasharray: 1000;
	}
	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 0;
	}
}


@keyframes emerge {
	0%, 50% {
		opacity: 0;
		box-shadow: none;
		border: .1rem solid var(--iframes-bg);
		filter: blur(1rem);
	}
	100% {
		opacity: 1;
	}
}

@keyframes fade-open {
	from {
		display:none;
		inset: 0;
		opacity: 0;
		width: 0;
		height: 0;
		transform: translateY(-50%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fade-close {
	0%, 50% {
		inset: 10%;
		opacity: .8;
		filter: blur(2rem);
	}
	100% {
		filter: blur(4rem);
		opacity: 0;
		display: none;
		transform: translateX(10%);
	}
}
/* ╭──────────────────────────────────────────────────────────╮
   │                      This is the div menu                │
   ╰──────────────────────────────────────────────────────────╯
*/

.menu {
	display: flex;
	flex-direction: column;
	isolation: isolate;
	& {
		background: transparent;
		border-color: var(--menu-col);
		padding: .7rem;
		inset: 0;
	}
}


.menu__option--text {
	visibility: hidden;
	color: var(--popup);
	overflow: hidden;
	transition: .5s ease-in-out;
	& {
		font-size: var(--fonts);
		font-weight: 400;
		max-width: 80ch;
		box-shadow: var(--shadow1);
		border-radius: var(--bord);
		padding: 0.3rem 1rem;
		position: absolute;
		margin: -2.5% 0 0 7%;
	}
}


/* .accordion-panel:has([aria-expanded="true"]) { */
/* 	--input-menu-radius: 2rem; */
/* 	--input-menu-margin: 1rem; */
/* 	--input-menu-border: .1rem solid var(--iframes-bg); */
/* 	--input-menu-display: block; */
/* 	--input-menu-paddin-units: 1.5rem 1.5rem; */
/* 	--input-menu-units-radius: .5rem; */
/* 	--display-flex: flex; */
/* } */


@keyframes open-pane {
	0% {
		opacity: 0;
		filter: blur(1rem);
	}
	100% {
		opacity: .9;
	}
}


.accordion-panel > h3{
	cursor: pointer;
	margin: 0;
}


.accordion-panel + .accordion-panel {
	margin-top: 1rem;
}


.trigger-menu {
	border: solid .1rem var(--light-blue1);
	border-radius: .3rem;
	transition: all .5s ease-in-out;
	z-index: 10;
	background: transparent;
	width: auto;
	padding: .4rem;
	cursor: pointer;
	&:active {
		background-color: unset;
		box-shadow: var(--inner-shadow);
		transition: all 200ms ease-in-out;
	}
	&:hover {
		background-color: var(--light-blue3);
		opacity: .5;
	}
}


.menu-icon {
	text-align: center;
	align-self: center;
	justify-self: center;
	background: transparent;
	height: auto;
	width: 1.5rem;
	z-index: -10;
	aspect-ratio: 1 / 1;
	transition: .5s ease-in-out;
	inset: 0;
	& {
		fill: var(--dark-blue2);
	}
}

.trigger-menu {
	outline: 0;
}


@media (max-width: 768px) {
	:root {
		--font-title: 1.2rem;
		--fonts: .7rem;
		--colg: 1rem;
		--rowg: 1rem;
	}

	.app {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		column-gap: var(--colg-mobile);
		row-gap: var(--rowg-mobile);
		height: auto;

		& .left-section {
			grid-area: unset;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			height: auto;
			padding: 1rem;

			& .id__user {
				grid-area: unset;
				& div {
					& .avatar {
						height: 3rem;
						width: 3rem;
						& > svg {
							height: 2rem;
							width: 2rem;
						}
					}
				}
			}
			& .side-menu {
				grid-area: unset;
			}
		}

		& .right-section {
			grid-area: unset;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			height: auto;
			padding: 1rem;

			& .logout {
				grid-area: unset;
			}
			& .logo {
				grid-area: unset;
				& .logo-otto {
					width: 50%;
					height: 50%;
				}
				& .spinner {
					width: 50%;
					height: 50%;
				}
			}
		}

		& .otto__interface {
			grid-area: unset;
			grid-column: 1 / -1;
			grid-row: auto;
			margin: 0 var(--colg-mobile);
			& .container__insert {
				grid-template-columns: 1fr;
				grid-template-rows: auto;
				column-gap: var(--colg-mobile);
				row-gap: var(--rowg-mobile);
				& .searcher {
					grid-area: unset;
				}
				& .menu-shifts {
					grid-area: unset;
					align-items: center;
				}
				& .IO__sizes__code {
					grid-area: unset;
				}
				& .IO__press {
					grid-area: unset;
					align-items: center;
				}
				& .IO__press__crate {
					grid-area: unset;
					justify-content: center;
				}
				& .container__status__pane__frame {
					grid-area: unset;
				}
			}
		}

		& .package-crates {
			grid-area: unset;
			grid-column: 1 / -1;
			grid-row: auto;
			margin: 0 var(--colg-mobile);
		}

		& .container-bottom {
			grid-area: unset;
			grid-column: 1 / -1;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			margin: 0 var(--colg-mobile);
			& .container__results {
				& .copy-pane1:is([aria-hidden="false"]) {
					grid-area: unset;
				}
				& .copy-pane2:is([aria-hidden="false"]) {
					grid-area: unset;
				}
			}
		}
	}
}



.accordion-panel:nth-child(2) {
	--__icon-color: var(--color6);
	opacity: .8;
}


.accordion-panel:nth-child(3) {
	--__icon-color: yellow;
}


.trigger-menu:hover + .menu__option--text {
	visibility: visible;
	transition: all .5s ease-in-out;
	-webkit-animation: fadeIn 2s;
	animation: fadeIn 1.5s linear;
}


.menu__input {
	& {
		width: 100%;
		height: 100%;
	}
}


/* ╭──────────────────────────────────────────────────────────╮
   │                   Menu fetch estimate.                   │
   ╰──────────────────────────────────────────────────────────╯
*/
.menu__fetch {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	transition: all 2s ease-in-out, transform 2s ease;
	position: relative;
	padding: .3rem;
	isolation: isolate;
	& input {
		width: 100%;
	}
	&::before {
		content: '';
		background-image: url('./images/Otto-SVGs/magnifier-tool-in-vertical-position-interface-symbol-svgrepo-com.svg');
		background-repeat: no-repeat;
		background-size: 1rem, 1rem;
		position: absolute;
		height: 1rem;
		width: 1rem;
		inset: 25% 0% 0% 5%;
		opacity: .3;
	}
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		border: solid .1rem var(--lines);
		width: 100%;
		height: 100%;
		border-radius: .5rem;
		z-index: -10;
	}
}


.menu__search-btn {
	display: var(--input-menu-display, none);
	margin-top: var(--input-menu-margin);
	padding: auto;
}


/* ╭──────────────────────────────────────────────────────────╮
   │                  Menu Units & Currency.                  │
   ╰──────────────────────────────────────────────────────────╯
*/

/* .menu__units, */
/* .menu__currency { */
/* 	display: var(--display-flex, none); */
/* 	flex-flow: row nowrap; */
/* 	justify-content: flex-start; */
/* 	gap: var(--input-menu-margin); */
/* 	animation: open-pane 2.5s ease; */
/* 	& > div { */
/* 		display: var(--display-flex, none); */
/* 		flex-flow: row wrap; */
/* 		flex-grow: .1; */
/* 		justify-content: flex-start; */
/* 		gap: var(--input-menu-margin); */
/* 		animation: open-pane 2.5s ease; */
/* 		& > select option { */
/* 			text-align: center; */
/* 			background: var(--background-option); */
/* 			line-height: 0; */
/* 			border: .1rem solid var(--add-col); */
/* 		} */
/* 		& > select { */
/* 			padding: .1rem; */
/* 			font-family: 'Mitr', sans-serif; */
/* 			border-radius: var(--bord); */
/* 			font-size: var(--fonts); */
/* 			font-weight: 500; */
/* 			background: var(--background-select); */
/* 			color: var(--p__color--mode); */
/* 			box-shadow: var(--inner-shadow); */
/* 			text-align-last: center; */
/* 		} */
/* 	} */
/* 	& .get__currency, .get__measure { */
/* 		width: 100%; */
/* 		color: var(--p__color--mode); */
/* 		z-index: 10; */
/* 		&:focus { */
/* 			width: 95%; */
/* 		} */
/* 	} */
/* } */


:is(.exchange--content, .units-conversion) {
	transition: width 3s ease-in-out;
	transition: padding 5s ease-in-out;
}


/* ╭──────────────────────────────────────────────────────────╮
   │            This is the div to estimate input             │
   ╰──────────────────────────────────────────────────────────╯
*/

.info + .info {
	margin: 1rem 0 0 0;
}

.IO--span2 ~ .IO--span2 {
	margin: 5cqh 0 0 0;
}

.IO label {
	cursor: pointer;
}


/* ╭────────────────────────────────────────────────────────╮
   │                    Metric selectors.                   │
   ╰────────────────────────────────────────────────────────╯
*/

.IO__sizes__units {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	& {
		width: 5rem;
		height: 2rem;
		border: .1rem solid var(--iframes-bg);
		border-radius: .5rem;
		transition: .5s ease;

	}
	&:hover {
		border: none;
		box-shadow: var(--shadow1);
	}
}


.IO__sizes__units > input:checked + label {
	transition: all .5s ease;
	color: var(--color4);
	z-index: 5;
}


.IO__sizes__units--seg1, .IO__sizes__units--seg2 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.2rem;
	height: 1rem;
	font-family: Saira Semi Condensed, sans-serif;
	font-size: var(--fonts);
	font-weight: 900;
	cursor: pointer;
	color: var(--iframes-bg);
	transition: all 5s ease;
}


.cm, .in {
	padding: .1rem .1rem;
	margin: .1rem .1rem;
	display: none;
}


.IO__sizes--color {
	position: absolute;
	pointer-events: none;
	width: 2.4em;
	height: 1.5rem;
	margin-right: 2.3rem;
	border-radius: .3rem;
	box-shadow: var(--inner-shadow);
	background: var(--menu-col);
	border-bottom: .05rem solid var(--color4);
	border-right: .05rem solid var(--color4);
}


.cm:checked ~ .IO__sizes--color {
	transform: translateX(0);
	transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}


.in:checked ~ .IO__sizes--color {
	transform: translateX(2rem);
	transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}


/* ╭──────────────────────────────────────────────────────────╮
   │             This is the form to input data.              │
   ╰──────────────────────────────────────────────────────────╯
*/

.IO__sizes__measure {
	display: flex;
	justify-content: flex-end;
	& input {
		width: 4.5rem;
		height: 1.5rem;
	}
	& input:focus {
		width: 4rem;
		font-size: 1.1rem;
		transition: input 1s ease-in-out;
	}
}


/*
 * ╭─────────────────────────────────────────────────────────╮
 * │                  Dialog padding setup.                  │
 * ╰─────────────────────────────────────────────────────────╯
*/

.pad {
	visibility: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
	color: var(--dark-blue);
	background: var(--light-blue1);
	border-radius: 1rem;
	position: relative;
	z-index: 1;
	padding: .3rem;
	& {
		font-size: 100;
		font-family: Mitr, sans-serif;
	}
	&::after {
		content: " ";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -.5rem;
		border-width: .5rem;
		border-style: solid;
		border-color: var(--light-blue1) transparent transparent transparent
	}
}


.dialog {
	display: block;
	container-type: normal;
	container-name: pad-crates;
	border-radius: 1rem;
	background: none;
	border: solid var(--iframes-bg);
	position: absolute;
	opacity: .9;
	z-index: 100;
	margin: 2% 82% auto .3%;
	& .crates-done {
		height: 18cqb;
	}
	& {
		padding: 1rem;
		animation: emerge 1s ease-in-out;
		animation-fill-mode: forwards;
		transition: backdrop 1s ease-in-out;
		width: clamp(18dvw, 17rem, 25cqw);
	}
	&:hover .pad {
		margin-bottom: .7rem;
		border-radius: .5rem;
		font-size: .6rem;
		visibility: visible;
		animation: emerge 500ms ease-in;
		animation-fill-mode: forwards;
		transition: backdrop 500ms ease-in-out;
		z-index: 10;
	}
}


.padding-dialog {
	container: dialog;
	display: grid;
	grid-auto-columns: 1fr;
	grid-template-rows: 1fr 8cqh 8cqh;
	grid-template-areas:
	"iframe"
	"pads"
	"pad-btns";
	row-gap: 1rem;
	justify-items: center;
	align-items: center;
	& > iframe {
		grid-area: iframe;
		height: 40cqh;
		width: 100%;
	}
}

.IO__padding, .pad__buttons, .pads-sizes {
	display: flex;
	flex-direction: row;
	align-content: space-evenly ;
	justify-content: space-evenly;
	gap: 1rem;
}


.pads-sizes {
	grid-area: pads;
	border: .1rem solid var(--iframes-bg);
	border-radius: 1rem;
	padding: 10% 12%;
	& > input {
		max-width: 4rem;
	}
}


.pad__buttons {
	grid-area: pad-btns;
	width: auto;
}


.all-crates {
	& li > label > input {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		inset: 1rem;
		width: 1rem;
		height: 1rem;
	}
	& > li > label {
		font-family: Mitr, sans-serif;
		font-size: calc(var(--fonts) - .08rem);
		font-weight: 400;
		color: var(--pressed);
	}
}


.layer__open__close {
	display: flex;
	align-items: center;
	justify-content: center;
	inset: 0;
	position: relative;
	transition: display 1s ease-in-out;
}


/* .layers-btn { */
/* 	z-index: 30; */
/* 	&::before { */
/* 		content: ""; */
/* 		inset: 0; */
/* 		position: absolute; */
/* 		height: 100%; */
/* 		width: 100%; */
/* 		background: var(--background); */
/* 		box-shadow: var(--shadow1); */
/* 		/*border: .1px solid var(--color3);*/ */
/* 		transition: all .2s linear; */
/* 		animation: waves 2000ms linear infinite; */
/* 		animation-play-state: running; */
/* 		border-radius: .8rem; */
/* 		z-index: -30; */
/* 	} */
/* 	&::after { */
/* 		content: ""; */
/* 		inset: 0; */
/* 		position: absolute; */
/* 		height: 100%; */
/* 		width: 100%; */
/* 		background: var(--background); */
/* 		box-shadow: var(--shadow1); */
/* 		/*border: .5px solid var(--color3);*/ */
/* 		transition: all .2s linear; */
/* 		animation: waves 2000ms linear 1000ms infinite; */
/* 		animation-play-state: running; */
/* 		border-radius: .8rem; */
/* 		z-index: -30; */
/* 	} */
/* } */


.preview-icon {
	fill: var(--color3);
}

/* TODO: link the screen sizes passing through actual min -> next max sizes. */
/* @media only screen and (min-width: 1080px) and (max-width: 4000px) { */
/* @media not all and (aspect-ratio: 16 / 9) and (max-width: 4000px) { */
/* @media not all and (max-width: 80rem) { */
@media only screen and (width > 80rem) {
/* 	/* ╭─────────────────────╮ */
/* 	   │ 	main container.    │ */
/* 	   ╰─────────────────────╯ */

	.otto-interface {
		container-name: main-app;
		container-type: inline-size;
		/* display: grid; */
		/* grid-template-columns: repeat(auto-fit, minmax(mian(25rem, 10cqw), 1fr)); */
		/* column-gap: var(--colg); */
		/* row-gap: var(--rowg); */
		/* padding: 2% 30%; */
	}

	/* .accordion-panel:has([aria-expanded="false"]) { */
	/* 	width: var(--accordion-width, 1rem); */
	/* 	transition: width 2s ease-in-out; */
	/* 	fill: var(--p__color--mode); */
	/* } */
	/**/
	/* .accordion-panel:has([aria-expanded="true"]) { */
	/* 	& .menu-icon { */
	/* 		box-shadow: var(--shadow1); */
	/* 		cursor: pointer; */
	/* 		background: var(--menu-col); */
	/* 		fill: var(--__icon-color); */
	/* 	} */
	/* 	width: 18vw; */
	/* 	transition: width 2s ease-in-out; */
	/* } */

	/* ╭───────────────────╮
	   │ 	Spinner setup    │
	   ╰───────────────────╯
	*/
	/* Made by Kailoyan Todorov - from https://uiverse.io/bociKond/wise-bat-13 */
	.spinner {
		margin-top: 2rem;
		width: 2rem;
		height: 2rem;
		--clr: var(--dark-blue2);
		--clr-alpha: var(--gradient);
		animation: spinner 3.6s infinite ease;
		transform-style: preserve-3d;
		& {
			display:grid;
			place-items: center;
			align-items: center;
		}

		& > div {
			background-color: var(--clr-alpha);
			height: 50%;
			position: absolute;
			width: 50%;
			border: .1rem solid var(--clr);
		}

		& div:nth-of-type(1) {
			transform: translateZ(-.5rem) rotateY(180deg);
		}

		& div:nth-of-type(2) {
			transform: rotateY(-270deg) translateX(50%);
			transform-origin: top right;
		}

		& div:nth-of-type(3) {
			transform: rotateY(270deg) translateX(-50%);
			transform-origin: center left;
		}

		& div:nth-of-type(4) {
			transform: rotateX(90deg) translateY(-50%);
			transform-origin: top center;
		}

		& div:nth-of-type(5) {
			transform: rotateX(-90deg) translateY(50%);
			transform-origin: bottom center;
		}

		& div:nth-of-type(6) {
			transform: translateZ(.5rem);
		}
	}


	@keyframes spinner {
		0% {
			transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
		}

		50% {
			transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
		}

		100% {
			transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
		}
	}

	/* ╭────────────────────╮
	   │ 	Boxes loading.    │
	   ╰────────────────────╯
	*/
	/* Made by Nawsome- from : https://uiverse.io/Nawsome/cold-liger-90
	 Page load
	 */
	.loading {
		margin-top: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.boxes {
		--size: 3rem;
		--duration: 800ms;
		height: calc(var(--size) * 2);
		width: calc(var(--size) * 3);
		position: relative;
		transform-style: preserve-3d;
		transform-origin: 50% 50%;
		margin-top: calc(var(--size) * 1.5 * -1);
		transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
	}

	.boxes .box {
		width: var(--size);
		height: var(--size);
		top: 0;
		left: 0;
		position: absolute;
		transform-style: preserve-3d;
	}

	.boxes .box:nth-child(1) {
		transform: translate(100%, 0);
		-webkit-animation: box1 var(--duration) linear infinite;
		animation: box1 var(--duration) linear infinite;
	}

	.boxes .box:nth-child(2) {
		transform: translate(0, 100%);
		-webkit-animation: box2 var(--duration) linear infinite;
		animation: box2 var(--duration) linear infinite;
	}

	.boxes .box:nth-child(3) {
		transform: translate(100%, 100%);
		-webkit-animation: box3 var(--duration) linear infinite;
		animation: box3 var(--duration) linear infinite;
	}

	.boxes .box:nth-child(4) {
		transform: translate(200%, 0);
		-webkit-animation: box4 var(--duration) linear infinite;
		animation: box4 var(--duration) linear infinite;
	}

	.boxes .box > div {
		--background: var(--box);
		--top: auto;
		--right: auto;
		--bottom: auto;
		--left: auto;
		--translateZ: calc(var(--size) / 2);
		--rotateY: 0deg;
		--rotateX: 0deg;
		position: absolute;
		width: 100%;
		height: 100%;
		background: var(--background);
		top: var(--top);
		right: var(--right);
		bottom: var(--bottom);
		left: var(--left);
		transform:
			rotateY(var(--rotateY))
			rotateX(var(--rotateX))
			translateZ(var(--translateZ));
	}

	.boxes .box > div:nth-child(1) {
		--top: 0;
		--left: 0;
	}

	.boxes .box > div:nth-child(2) {
		--background: var(--box);
		--right: 0;
		--rotateY: 90deg;
	}

	.boxes .box > div:nth-child(3) {
		--background: goldenrod;
		--rotateX: -90deg;
	}

	.boxes .box > div:nth-child(4) {
		--background: var(--back-gray);
		--top: 0;
		--left: 0;
		--translateZ: calc(var(--size) * 3 * -1);
	}

	@-webkit-keyframes box1 {
		0%, 50% {
			transform: translate(100%, 0);
		}

		100% {
			transform: translate(200%, 0);
		}
	}

	@keyframes box1 {
		0%, 50% {
			transform: translate(100%, 0);
		}

		100% {
			transform: translate(200%, 0);
		}
	}

	@-webkit-keyframes box2 {
		0% {
			transform: translate(0, 100%);
		}

		50% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(100%, 0);
		}
	}

	@keyframes box2 {
		0% {
			transform: translate(0, 100%);
		}

		50% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(100%, 0);
		}
	}

	@-webkit-keyframes box3 {
		0%, 50% {
			transform: translate(100%, 100%);
		}

		100% {
			transform: translate(0, 100%);
		}
	}

	@keyframes box3 {
		0%, 50% {
			transform: translate(100%, 100%);
		}

		100% {
			transform: translate(0, 100%);
		}
	}

	@-webkit-keyframes box4 {
		0% {
			transform: translate(200%, 0);
		}

		50% {
			transform: translate(200%, 100%);
		}

		100% {
			transform: translate(100%, 100%);
		}
	}

	@keyframes box4 {
		0% {
			transform: translate(200%, 0);
		}

		50% {
			transform: translate(200%, 100%);
		}

		100% {
			transform: translate(100%, 100%);
		}
	}

	/* ╭────────────────────────────────╮
	   │   Animation footer settings    │
	   ╰────────────────────────────────╯
	*/
	.svg-frame {
		position: relative;
		width: 18rem;
		height: 18rem;
		transform-style: preserve-3d;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.svg-frame svg {
		position: absolute;
		transition: .5s;
		z-index: calc(1 - (0.2 * var(--j)));
		transform-origin: center;
		width: 344px;
		height: 344px;
		fill: none;
	}

	.svg-frame:hover svg {
		transform:
		rotate(-80deg)
		skew(30deg)
		translateX(calc(45px * var(--i)))
		translateY(calc(-35px * var(--i)));
	}

	.svg-frame svg #center {
		transition: .5s;
		transform-origin: center;
	}

	.svg-frame:hover svg #center {
		transform: rotate(-30deg) translateX(45px) translateY(-3px);
	}

	#out2 {
		animation: rotate16 7s ease-in-out infinite alternate;
		transform-origin: center;
	}

	#out3 {
		animation: rotate16 3s ease-in-out infinite alternate;
		transform-origin: center;
		stroke: var(--color8);
	}

	#inner3,
	#inner1 {
		animation: rotate16 4s ease-in-out infinite alternate;
		transform-origin: center;
	}

	#center1 {
		fill: var(--color3);
		animation: rotate16 2s ease-in-out infinite alternate;
		transform-origin: center;
	}

	@keyframes rotate16 {
		to {
			transform: rotate(360deg);
		}
	}

/* 	 ╭─────────────────────────────╮ */
/*   │ 	Right status container.    │ */
/*   ╰─────────────────────────────╯ */
	.cntainer__status__pane {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
		column-gap: 2rem;
		row-gap: 4rem;
		& .container__status__pane__frame {
			border: .1rem solid var(--iframes-bg);
			border-radius: 1rem;
			overflow-y: hidden;
			overflow-x: hidden;
			padding: .5rem;
			&:hover {
				overflow-y: scroll;
				overflow-x: clip;
				border: transparent;
				border-radius: 1rem;
				box-shadow: var(--shadow1);
				transition: .5s ease-in-out;
			}
		}
	}

	.IO__add--form {
		border: .1rem solid var(--iframes-bg);
		border-radius: .5rem;
		&::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
		&[type=number] {
			-moz-appearance: textfield;
		}
	}

	.IO__press-mobile * {
		display: none;
	}

	:is(.IO__sizes--code, .IO__top__estimate) {
		&:focus {
			transition: input 1s ease-in-out;
		}
	}

/* 	/* ╭──────────────────────╮ */
/* 	   │ 	Header settings:    │ */
/* 	   ╰──────────────────────╯ */
/* 	*/ */
	.header--title {
		text-align: left;
	}


	:is(.header-content, .section__menu) {
		display: flex;
		justify-content: space-between;
	}


	.footer-content {
		display: none;
		&:is([aria-hidden="false"]) {
			display: flex;
			justify-content: space-between;
		}
		& div:nth-of-type(2):has(h3) {
			margin-top: 3rem;
		}
	}

	:is(.layers-btn, .logout-btn) {
		aspect-ratio: 2 / 2;
		border: solid .1rem var(--light-blue1);
		border-radius: .3rem;
		background: transparent;
		transition: all 500ms ease-in-out;
		cursor: pointer;
		opacity: .9;
		z-index: 10;
		padding: .5rem;
		&:active {
			background-color: unset;
			box-shadow: var(--inner-shadow);
			transition: all 200ms ease-in-out;
		}
		&:hover {
			background-color: var(--light-blue3);
			opacity: .5;
		}
		&:disabled {
			opacity: .3;
			cursor: not-allowed;
		}
		& {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}


	.section-right-up {
		display: flex;
		align-content: center;
		flex-direction: column;
		justify-content: center;
		gap: .3rem;
	}


	.side__menu {
		visibility: hidden;
		color: var(--popup);
		overflow: hidden;
		transition: .5s ease-in-out;
		& {
			font-size: var(--fonts);
			font-weight: 400;
			max-width: 80ch;
			box-shadow: var(--shadow1);
			border-radius: var(--bord);
			padding: 0.3rem 1rem;
			position: absolute;
			margin-top: 7rem;
		}
	}


	.mode {
		border: solid .1rem var(--iframes-bg);
		border-radius: .5rem;
		width: 5rem;
		height: 2rem;
		padding: .1rem;
		&:hover {
			box-shadow: none;
		}
		& label > svg {
			fill: var(--color4);
			width: 1rem;
			height: 1rem;
			transition: all 500ms ease-in-out;
			&:hover {
				fill: var(--dark);
			}
		}
		.mode--color {
			box-shadow: var(--inner-shadow);
			border: solid .1rem var(--light-blue1);
			border-radius: .3rem;
		}
		&:hover > .side__menu {
			visibility: visible;
			transition: all .5s ease-in-out;
			-webkit-animation: fadeIn 2s;
			animation: fadeIn 1.5s linear;
		}
	}


	:is(.logout-icon, .preview-icon) {
		fill: var(--color4);
		width: 1.4rem;
		height: 1.4rem;
		transition: all 500ms ease-in-out;
		&:hover{
			fill: var(--color1);
		}
	}


	.preview-icon:hover {
		fill: var(--preview-hover);
		fill-opacity: .8;
		& + .side__menu {
			visibility: visible;
			transition: all .5s ease-in-out;
			-webkit-animation: fadeIn 2s;
			animation: fadeIn 1.5s linear;
		}
	}

	/* ╭──────────────────────────────────────────────────────────╮
	   │                   Layer plotter setup.                   │
	   ╰──────────────────────────────────────────────────────────╯
	*/
	.plotter__menu:is([aria-hidden="true"]),
	.plotter:is([aria-hidden="true"]) {
		display: none;
		transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}

	.plotter:is([aria-hidden="false"]) {
		grid-area: 2 / 2 / 4 / 6;
		display: grid;
		grid-template-rows: 3rem 1fr 3rem;
		gap: 1rem;
		& {
			isolation: isolate;
			animation: emerge 2s ease-in;
			animation-fill-mode: forwards;
			border: .1rem solid var(--iframes-bg);
		}
		.plotter__header {
			grid-area: 1 / 1 / 1 / 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-basis: 1;
			& h2 {
				margin: 0;
			}
			& > p {
				font-size: .6rem;
				background: transparent;
				border: .1rem solid var(--iframes-bg);
				box-shadow: var(--inner-shadow);
				border-radius: 1rem;
				padding: .4rem;
				color: var(--p__color--mode);
				opacity: .6;
			}
		}
		& .plotter__display {
			grid-area: 2 / 1 / 2 / 1;
			border: solid .12rem var(--lines);
			border-radius: .3rem;
			display: grid;
			& .plotlyjsicon, .modebar-btn--logo {
				display: none;
			}
			& .svg-container {
				align-self: center;
				align-self: center;
				justify-self: center;
			}
		}
		.layer-button {
			place-self: center;
			grid-area: 3 / 1 / 3 / 1;
			display: flex;
			flex-direction: row;
			gap: 2ch;
			align-items: space-between;
			justify-content: space-between;
			animation: emerge 4s ease;
			animation-fill-mode: forwards;
			transition: all 3s linear;
			& button {
				border-radius: 50%;
				border: none;
				height: 3rem;
				width: 3rem;
				cursor: pointer;
				background-color: var(--bg-col);
				z-index: -10;
				&:hover {
					background-color: unset;
					transition: all 200ms ease-in-out;
					transform: translateY(.1rem);
				}
				&:active{
					background-color: var(--result-col);
				}
				& svg {
					width: 100%;
					height: 100%;
				}
			}
		}
		& .crate-layer {
			width: 100%;
			height: 100%;
			place-self: center;
			animation: fede-open 3s ease;
			animation-fill-mode: forwards;
			transition: width height 2s ease;
			& {
				justify-content: center;
				border-radius: .3rem;
				border: .1rem solid var(--iframes-bg);
				box-shadow: var(--inner-shadow);
			}
		}
		.crate-layer > * {
			font-family: 'Mitr', sans-serif;
			font-weight: 400;
			font-size: .7rem;
		}
		.crate-layer text {
			font-size: .8rem;
			fill: white;
			transition: fill 1.5s ease;
			z-index: -10;
			animation: stroke-draw 3s ease-in-out, emerge 2s ease-in;
			animation-fill-mode: forwards;
			transition: ani1s ease-in-out;
		}
		.crate-layer rect {
			rx: .5rem;
			ry: .5rem;
			fill: transparent;
			stroke-dasharray: 100%;
			stroke-dashoffset: 100%;
			stroke: var(--stroke);
			animation: stroke-draw 2.5s ease-in-out, emerge 1s ease-in;
			animation-fill-mode: forwards;
			transition: animation 2.5s ease-in-out;
			transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
		}
		.crate-layer rect:hover {
			fill: var(--color3);
			animation: emerge 2s ease-in-out;
			transition: animation 1s ease-in-out;
			transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
			opacity: .3;
			& text {
				fill: white;
			}
		}
	}
	.plotter__menu:is([aria-hidden="false"]) {
		display: flex;
		justify-content: center;
		transition: all 300ms ease-in;
		& {
			animation: emerge 3s ease-in;
			animation-fill-mode: forwards;
		}
		& {
			width: 17%;
			/* margin: 10% 3% 0 1%; */
			/* position: fixed; */
		}
		.plotter__menu__crates {
			display: inherit;
			justify-content: flex-start;
			flex-direction: column;
			& > h3 {
				text-align: center;
				min-width: 100%;
				max-height: 10%;
			}
			& {
				min-width: 100%;
				animation-delay: 15s;
				animation: fade-open 3s ease-in;
				animation-fill-mode: forwards;
				transition: all 2s ease-in;
			}
			.plotter__crate__list {
				display: inherit;
				flex-basis: 100%;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				& {
					isolation: isolate;
					border-radius: 1rem;
					box-sizing: border-box;
					margin-top: 1rem;
				}
				.crates-done {
					font-family: 'Mitr', sans-serif;
					font-size: .75rem;
					font-weight: 500;
					color: var(--p__color--mode);
					opacity: .8;
					& {
						background: transparent;
						box-shadow: var(--inner-shadow);
						border-radius: 1rem;
						padding: .2rem .3rem;
						counter-reset: crates-counter;
					}
					& option {
						background: var(--color4);
						line-height: 0;
						border: .1rem solid var(--add-col);
						box-shadow: var(--inner-shadow);
						color: var(--iframes-bg);
						border-radius: 1rem;
					}
				}
			}
		}
	}
}


@keyframes stroke-draw {
	0% {
		stroke-dashoffset: 0;
		stroke-dasharray: 0;
		fill: var(--work-hover);
	}
	50% {
		stroke-dashoffset: 1000;
		stroke-dasharray: 1000;
	}
	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 0;
	}
}


@keyframes emerge {
	0%, 50% {
		opacity: 0;
		box-shadow: none;
		border: .1rem solid var(--iframes-bg);
		filter: blur(1rem);
	}
	100% {
		opacity: 1;
	}
}

@keyframes fade-open {
	from {
		display:none;
		inset: 0;
		opacity: 0;
		width: 0;
		height: 0;
		transform: translateY(-50%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fade-close {
	0%, 50% {
		inset: 10%;
		opacity: .8;
		filter: blur(2rem);
	}
	100% {
		filter: blur(4rem);
		opacity: 0;
		display: none;
		transform: translateX(10%);
	}
}


/* /* ╭──────────────────────────────────────────────────────────╮ */
/*    │                    iPhone x portrait                     │ */
/*    ╰──────────────────────────────────────────────────────────╯ */
/* */ */
/**/
/* @media only screen and (width <= 80rem) and (orientation: portrait) { */
/**/
/* 	header { */
/* 		height: 10%; */
/* 	} */
/**/
/* 	footer { */
/* 		display: none; */
/* 	} */
/**/
/* 	/* ╭──────────────────────╮ */
/* 	   │ 	Header settings:    │ */
/* 	   ╰──────────────────────╯ */
/* 	*/ */
/* 	.header--title { */
/* 		text-align: left; */
/* 	} */
/**/
/**/
/* 	.header-content, */
/* 	.section__menu { */
/* 		display: flex; */
/* 		justify-content: space-between; */
/* 	} */
/**/
/**/
/* 	/* ╭───────────────────╮ */
/* 	   │ 	Spinner setup    │ */
/* 	   ╰───────────────────╯ */
/* 	*/ */
/* 	/* Made by Kailoyan Todorov - from https://uiverse.io/bociKond/wise-bat-13 */ */
/* 	.spinner { */
/* 		width: 4rem; */
/* 		height: 4rem; */
/* 		--clr: var(--color1); */
/* 		--clr-alpha: var(--gradient); */
/* 		animation: spinner 3.6s infinite ease; */
/* 		transform-style: preserve-3d; */
/* 		& > * { */
/* 			display:grid; */
/* 			place-items: center; */
/* 		} */
/**/
/* 		& > div { */
/* 			background-color: var(--clr-alpha); */
/* 			height: 100%; */
/* 			position: absolute; */
/* 			width: 100%; */
/* 			border: .2rem solid var(--clr); */
/* 		} */
/**/
/* 		& div:nth-of-type(1) { */
/* 			transform: translateZ(-2rem) rotateY(180deg); */
/* 		} */
/**/
/* 		& div:nth-of-type(2) { */
/* 			transform: rotateY(-270deg) translateX(50%); */
/* 			transform-origin: top right; */
/* 		} */
/**/
/* 		& div:nth-of-type(3) { */
/* 			transform: rotateY(270deg) translateX(-50%); */
/* 			transform-origin: center left; */
/* 		} */
/**/
/* 		& div:nth-of-type(4) { */
/* 			transform: rotateX(90deg) translateY(-50%); */
/* 			transform-origin: top center; */
/* 		} */
/**/
/* 		& div:nth-of-type(5) { */
/* 			transform: rotateX(-90deg) translateY(50%); */
/* 			transform-origin: bottom center; */
/* 		} */
/**/
/* 		& div:nth-of-type(6) { */
/* 			transform: translateZ(2rem); */
/* 		} */
/* 	} */
/**/
/**/
/* 	@keyframes spinner { */
/* 		0% { */
/* 			transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); */
/* 		} */
/**/
/* 		50% { */
/* 			transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); */
/* 		} */
/* 	} */
/**/
/* 	/* ╭────────────────────╮ */
/* 	   │ 	Boxes loading.    │ */
/* 	   ╰────────────────────╯ */
/* 	*/ */
/* 	/* Made by Nawsome- from : https://uiverse.io/Nawsome/cold-liger-90 */ */
/* 	.loading { */
/* 		z-index: 40; */
/* 		margin-top: 80%; */
/* 		margin-left: 30%; */
/* 		position: absolute; */
/* 		& { */
/* 			display: flex; */
/* 			align-items: center; */
/* 			justify-content: center; */
/* 		} */
/* 	} */
/**/
/* 	.boxes { */
/* 		--size: 3rem; */
/* 		--duration: 800ms; */
/* 		height: calc(var(--size) * 2); */
/* 		width: calc(var(--size) * 3); */
/* 		position: relative; */
/* 		transform-style: preserve-3d; */
/* 		transform-origin: 50% 50%; */
/* 		margin-top: calc(var(--size) * 1.5 * -1); */
/* 		transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px); */
/* 	} */
/**/
/* 	.boxes .box { */
/* 		width: var(--size); */
/* 		height: var(--size); */
/* 		top: 0; */
/* 		left: 0; */
/* 		position: absolute; */
/* 		transform-style: preserve-3d; */
/* 	} */
/**/
/* 	.boxes .box:nth-child(1) { */
/* 		transform: translate(100%, 0); */
/* 		-webkit-animation: box1 var(--duration) linear infinite; */
/* 		animation: box1 var(--duration) linear infinite; */
/* 	} */
/**/
/* 	.boxes .box:nth-child(2) { */
/* 		transform: translate(0, 100%); */
/* 		-webkit-animation: box2 var(--duration) linear infinite; */
/* 		animation: box2 var(--duration) linear infinite; */
/* 	} */
/**/
/* 	.boxes .box:nth-child(3) { */
/* 		transform: translate(100%, 100%); */
/* 		-webkit-animation: box3 var(--duration) linear infinite; */
/* 		animation: box3 var(--duration) linear infinite; */
/* 	} */
/**/
/* 	.boxes .box:nth-child(4) { */
/* 		transform: translate(200%, 0); */
/* 		-webkit-animation: box4 var(--duration) linear infinite; */
/* 		animation: box4 var(--duration) linear infinite; */
/* 	} */
/**/
/* 	.boxes .box > div { */
/* 		--background: #5C8DF6; */
/* 		--top: auto; */
/* 		--right: auto; */
/* 		--bottom: auto; */
/* 		--left: auto; */
/* 		--translateZ: calc(var(--size) / 2); */
/* 		--rotateY: 0deg; */
/* 		--rotateX: 0deg; */
/* 		position: absolute; */
/* 		width: 100%; */
/* 		height: 100%; */
/* 		background: var(--background); */
/* 		top: var(--top); */
/* 		right: var(--right); */
/* 		bottom: var(--bottom); */
/* 		left: var(--left); */
/* 		transform: */
/* 			rotateY(var(--rotateY)) */
/* 			rotateX(var(--rotateX)) */
/* 			translateZ(var(--translateZ)); */
/* 	} */
/**/
/* 	.boxes .box > div:nth-child(1) { */
/* 		--top: 0; */
/* 		--left: 0; */
/* 	} */
/**/
/* 	.boxes .box > div:nth-child(2) { */
/* 		--background: #145af2; */
/* 		--right: 0; */
/* 		--rotateY: 90deg; */
/* 	} */
/**/
/* 	.boxes .box > div:nth-child(3) { */
/* 		--background: #447cf5; */
/* 		--rotateX: -90deg; */
/* 	} */
/**/
/* 	.boxes .box > div:nth-child(4) { */
/* 		--background: #DBE3F4; */
/* 		--top: 0; */
/* 		--left: 0; */
/* 		--translateZ: calc(var(--size) * 3 * -1); */
/* 	} */
/**/
/* 	@-webkit-keyframes box1 { */
/* 		0%, 50% { */
/* 			transform: translate(100%, 0); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(200%, 0); */
/* 		} */
/* 	} */
/**/
/* 	@keyframes box1 { */
/* 		0%, 50% { */
/* 			transform: translate(100%, 0); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(200%, 0); */
/* 		} */
/* 	} */
/**/
/* 	@-webkit-keyframes box2 { */
/* 		0% { */
/* 			transform: translate(0, 100%); */
/* 		} */
/**/
/* 		50% { */
/* 			transform: translate(0, 0); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(100%, 0); */
/* 		} */
/* 	} */
/**/
/* 	@keyframes box2 { */
/* 		0% { */
/* 			transform: translate(0, 100%); */
/* 		} */
/**/
/* 		50% { */
/* 			transform: translate(0, 0); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(100%, 0); */
/* 		} */
/* 	} */
/**/
/* 	@-webkit-keyframes box3 { */
/* 		0%, 50% { */
/* 			transform: translate(100%, 100%); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(0, 100%); */
/* 		} */
/* 	} */
/**/
/* 	@keyframes box3 { */
/* 		0%, 50% { */
/* 			transform: translate(100%, 100%); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(0, 100%); */
/* 		} */
/* 	} */
/**/
/* 	@-webkit-keyframes box4 { */
/* 		0% { */
/* 			transform: translate(200%, 0); */
/* 		} */
/**/
/* 		50% { */
/* 			transform: translate(200%, 100%); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(100%, 100%); */
/* 		} */
/* 	} */
/**/
/* 	@keyframes box4 { */
/* 		0% { */
/* 			transform: translate(200%, 0); */
/* 		} */
/**/
/* 		50% { */
/* 			transform: translate(200%, 100%); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(100%, 100%); */
/* 		} */
/* 	} */
/**/
/**/
/* 	.layers-btn, */
/* 	.logout-btn { */
/* 		border-radius: 40%; */
/* 		background: var(--inner-shadow); */
/* 		width: 2.3rem; */
/* 		height: 2.3rem; */
/* 		transition: all 500ms ease-in-out; */
/* 		cursor: pointer; */
/* 		opacity: .9; */
/* 		z-index: 10; */
/* 		& { */
/* 			display: flex; */
/* 			align-items: center; */
/* 			justify-content: center; */
/* 		} */
/* 	} */
/**/
/**/
/* 	.section-left-up { */
/* 		display: flex; */
/* 		flex-wrap: wrap; */
/* 		align-content: center; */
/* 		justify-content: space-around; */
/* 		flex-direction: row; */
/* 		gap: .3rem; */
/* 		& { */
/* 			width: 50%; */
/* 			height: 8%; */
/* 			position: absolute; */
/* 		} */
/* 		& > * { */
/* 			box-shadow: var(--shadow1); */
/* 		} */
/* 		.layers-btn { */
/* 			display: none; */
/* 		} */
/* 		& .section__menu--btn { */
/* 			border-radius: 40%; */
/* 		} */
/* 		& > .section__menu--btn:active { */
/* 			box-shadow: var(--inner-shadow); */
/* 		} */
/* 	} */
/**/
/**/
/* 	.mode { */
/* 		& label > svg { */
/* 			fill: var(--p__color--mode); */
/* 			width: 1rem; */
/* 			height: 1rem; */
/* 			transition: all 500ms ease-in-out; */
/* 			&:hover { */
/* 				fill: var(--dark); */
/* 			} */
/* 		} */
/* 	} */
/**/
/**/
/* 	.logout-icon { */
/* 		fill: var(--p__color--mode); */
/* 		width: 1rem; */
/* 		height: 1rem; */
/* 		transition: all 500ms ease-in-out; */
/* 		&:hover { */
/* 			fill: var(--color1); */
/* 		} */
/* 	} */
/**/
/**/
/* 	.clear, .IO__press__btn { */
/* 		margin: 2rem 1rem; */
/* 	} */
/**/
/**/
/* 	/* ╭─────────────────────╮ */
/* 	   │ 	main container.    │ */
/* 	   ╰─────────────────────╯ */
/* 	*/ */
/**/
/* 	.container { */
/* 		margin-top: 4.2rem; */
/* 	} */
/**/
/* 	.accordion-panel:has([aria-expanded="false"]) { */
/* 		width: var(--accordion-width, 1rem); */
/* 		transition: width 2s ease-in-out; */
/* 		fill: var(--p__color--mode); */
/* 	} */
/**/
/* 	.accordion-panel:has([aria-expanded="true"]) { */
/* 		& .menu-icon { */
/* 			box-shadow: var(--shadow1); */
/* 			cursor: pointer; */
/* 			background: var(--menu-col); */
/* 			fill: var(--__icon-color); */
/* 		} */
/* 		width: 100%; */
/* 		transition: width 2s ease-in-out; */
/* 	} */
/**/
/* 	.container__status__pane, */
/* 	.container__status__pane__frame { */
/* 		display: flex; */
/* 		flex-wrap: wrap; */
/* 		flex-shrink: 1; */
/* 		flex-basis: clamp(80%, 70%, 100%); */
/* 		gap: 1rem; */
/* 		justify-content: space-between; */
/* 		padding: 2rem; */
/* 	} */
/**/
/**/
/* 	.IO__press * { */
/* 		display: none; */
/* 	} */
/**/
/**/
/* 	.IO__press-mobile > * { */
/* 		position: fixed; */
/* 		inset: 0; */
/* 		width: 90%; */
/* 		& > button > * { */
/* 			pointer-events: none; */
/* 		} */
/* 	} */
/**/
/**/
/* 	.press--btn-mobile { */
/* 		color: var(--color4); */
/* 		height: 2.5rem; */
/* 		width: 2.5rem; */
/* 		background: var(--mob-col); */
/* 		opacity: .8; */
/* 		border: none; */
/* 		border-radius: .7rem; */
/* 		cursor: pointer; */
/* 		transition: transform .3s ease-in-out; */
/* 		& { */
/* 			display: flex; */
/* 			align-items: center; */
/* 			justify-content: center; */
/* 		} */
/* 		& > span { */
/* 			position: absolute; */
/* 			margin-top: 2rem; */
/* 			font-size: .5rem; */
/* 			font-weight: 700; */
/* 		} */
/* 		& > svg { */
/* 			fill: var(--p__color--mode); */
/* 		} */
/* 		&:hover { */
/* 			transition: all .5s ease-in-out; */
/* 			transform: translateY(.1rem); */
/* 			border-bottom: .05rem solid var(--color4); */
/* 			border-right: .05rem solid var(--color4); */
/* 			box-shadow: var(--shadow1); */
/* 		} */
/* 		&:active { */
/* 			box-shadow: var(--inner-shadow); */
/* 			transition: all .5s ease-in-out; */
/* 		} */
/* 	} */
/**/
/**/
/* 	.fixed-menu { */
/* 		height: 9svh; */
/* 		margin: 203% 6svw 0 6svw; */
/* 		border-radius: 10dvw; */
/* 		opacity: .8; */
/* 		z-index: 10; */
/* 		& { */
/* 			isolation: isolate; */
/* 			display: flex; */
/* 			justify-content: space-between; */
/* 			flex-basis: 100%; */
/* 			flex-grow: 1; */
/* 			transition: 500ms ease-in-out; */
/* 		} */
/* 		& .add--btn:active { */
/* 			background: var(--color6); */
/* 			& > svg { */
/* 				fill: var(--add-col); */
/* 			} */
/* 		} */
/* 		& .del--btn:active { */
/* 			background: var(--color8); */
/* 			& > svg { */
/* 				fill: var(--color3); */
/* 			} */
/* 		} */
/* 		& .clear--btn:active { */
/* 			background: var(--color4); */
/* 			& > svg { */
/* 				fill: var(--iframes-bg); */
/* 			} */
/* 		} */
/* 		& .option--btn:active { */
/* 			--options: flex; */
/* 			background: var(--inner-shadow); */
/* 			& > svg { */
/* 				fill: var(--result-col); */
/* 			} */
/* 		} */
/* 	} */
/**/
/**/
/* 	.fan-options { */
/* 		display: none; */
/* 	} */
/**/
/**/
/* 	.fan-options:is([aria-hidden="false"]) { */
/* 		display: flex; */
/* 		flex-direction: row-reverse; */
/* 		& { */
/* 			margin: 206% 10% 0 3%; */
/* 			z-index: 20; */
/* 		} */
/* 		& a:target { */
/* 			display: true; */
/* 		} */
/* 		& a > svg { */
/* 			fill: var(--light-blue1); */
/* 			opacity: .7; */
/* 		} */
/* 		& > * { */
/* 			flex-direction: column-reverse; */
/* 			flex-basis: 100%; */
/* 			position: absolute; */
/* 			border-radius: 40%; */
/* 			border: transparent; */
/* 			background: var(--mob-col); */
/* 		} */
/* 		& a:nth-child(1) { */
/* 			line-height: 0; */
/* 			animation: search 500ms ease; */
/* 			animation-fill-mode: forwards; */
/* 		} */
/* 		& a:nth-child(2) { */
/* 			line-height: 0; */
/* 			animation: currency 200ms ease; */
/* 			animation-delay: .3s; */
/* 			animation-fill-mode: forwards; */
/* 		} */
/* 		& a:nth-child(3) { */
/* 			line-height: 0; */
/* 			animation: units 300ms ease; */
/* 			animation-delay: .6s; */
/* 			animation-fill-mode: forwards; */
/* 		} */
/* 	} */
/**/
/**/
/* 	@keyframes search { */
/* 		0% { */
/* 			opacity: 0; */
/* 			transform: translate( */
/* 				cos(0deg), */
/* 				sin(0deg) */
/* 			); */
/* 		} */
/* 		100% { */
/* 			opacity: 1; */
/* 			transform: translate( */
/* 				calc(cos(330deg) * 1.5rem), */
/* 				calc(sin(270deg) * 3rem) */
/* 			); */
/* 		} */
/* 	} */
/* 	@keyframes currency { */
/* 		0% { */
/* 			opacity: 0; */
/* 			transform: translate( */
/* 				cos(0deg), */
/* 				sin(0deg) */
/* 			); */
/* 		} */
/* 		100% { */
/* 			opacity: 1; */
/* 			transform: translate( */
/* 				calc(cos(250deg) * 3.8rem), */
/* 				calc(sin(250deg) * 3.5rem) */
/* 			); */
/* 		} */
/* 	} */
/* 	@keyframes units { */
/* 		0% { */
/* 			opacity: 0; */
/* 			transform: translate( */
/* 				cos(0deg), */
/* 				sin(0deg) */
/* 			); */
/* 		} */
/* 		100% { */
/* 			opacity: 1; */
/* 			transform: translate( */
/* 				calc(cos(190deg) * 2.6rem), */
/* 				calc(sin(190deg) * 6rem) */
/* 			); */
/* 		} */
/* 	} */
/**/
/**/
/* 	.mobile-icon { */
/* 		fill: var(--iframes-bg); */
/* 		fill-opacity: .9; */
/* 		width: 1.7rem; */
/* 		height: 1.7rem; */
/* 		border-radius: 50%; */
/* 		box-shadow: var(--shadow1); */
/* 		stroke-width: 5rem; */
/* 	} */
/**/
/**/
/* 	.mobile-menu { */
/* 		fill: var(--dark); */
/* 		width: 1.5rem; */
/* 		height: 1.5rem; */
/* 	} */
/**/
/**/
/**/
/* 	.IO__sizes--code, */
/* 	.IO__top__estimate { */
/* 		width: 100%; */
/* 		margin-right: .2rem; */
/* 	} */
/**/
/**/
/* 	.IO__sizes__measure { */
/* 		display: flex; */
/* 		flex-wrap: wrap; */
/* 		justify-content: space-between; */
/* 		gap: 1rem; */
/* 	} */
/**/
/**/
/* 	.IO__add--form { */
/* 		width: 90%; */
/* 		border: .1rem solid var(--iframes-bg); */
/* 		border-radius: 1rem; */
/* 		padding: .8rem .5rem; */
/* 		transition: .5s ease; */
/* 	} */
/**/
/**/
/* 	.plotter:is([aria-hidden="true"]), */
/* 	.result:is([aria-hidden="true"]), */
/* 	.accordion div:is([aria-hidden="true"]) { */
/* 		display: none; */
/* 	} */
/**/
/* 	.accordion div:is([aria-hidden="false"]) { */
/* 		margin-top: 1rem; */
/* 	} */
/**/
/* 	.exchange--content:is([aria-hidden="false"]), */
/* 	.units-conversion:is([aria-hidden="false"]), */
/* 	.get-estimate:is([aria-hidden="false"]) { */
/* 		display: block; */
/* 		animation: emerge 1.5s linear; */
/* 		animation-fill-mode: forwards; */
/* 	} */
/**/
/**/
/* 	.plotter__menu:is([aria-hidden="true"]), */
/* 	.plotter:is([aria-hidden="true"]) { */
/* 		animation: fade-close 500ms ease-out; */
/* 		animation-fill-mode: forwards; */
/* 		transition: all 1000ms ease-in-out; */
/* 	} */
/**/
/* 	.container--interactive { */
/* 		width: 100%; */
/* 		margin: 0; */
/* 	} */
/* } */
/**/
/* /* ╭──────────────────────────────────────────────────────────╮ */
/*    │                    iPhone x landscape                    │ */
/*    ╰──────────────────────────────────────────────────────────╯ */
/* */ */
/* @media only screen and (width <= 80rem) and (orientation: landscape) { */
/**/
/* 	header { */
/* 		height: 10%; */
/* 	} */
/**/
/* 	footer { */
/* 		display: none; */
/* 	} */
/**/
/* 	/* ╭───────────────────╮ */
/* 	   │  Spinner setup    │ */
/* 	   ╰───────────────────╯ */
/* 	*/ */
/* 	/* Made by Kailoyan Todorov - from https://uiverse.io/bociKond/wise-bat-13 */ */
/* 	.spinner { */
/* 		width: 8rem; */
/* 		height: 8rem; */
/* 		--clr: var(--color1); */
/* 		--clr-alpha: var(--gradient); */
/* 		animation: spinner 3.6s infinite ease; */
/* 		transform-style: preserve-3d; */
/* 		& > * { */
/* 			display:grid; */
/* 			place-items: center; */
/* 			align-items: center; */
/* 			position: absolute; */
/* 		} */
/**/
/* 		& > div { */
/* 			background-color: var(--clr-alpha); */
/* 			height: 100%; */
/* 			position: absolute; */
/* 			width: 100%; */
/* 			border: .2rem solid var(--dark-blue); */
/* 		} */
/**/
/* 		& div:nth-of-type(1) { */
/* 			transform: translateZ(-4rem) rotateY(180deg); */
/* 		} */
/**/
/* 		& div:nth-of-type(2) { */
/* 			transform: rotateY(-270deg) translateX(50%); */
/* 			transform-origin: top right; */
/* 		} */
/**/
/* 		& div:nth-of-type(3) { */
/* 			transform: rotateY(270deg) translateX(-50%); */
/* 			transform-origin: center left; */
/* 		} */
/**/
/* 		& div:nth-of-type(4) { */
/* 			transform: rotateX(90deg) translateY(-50%); */
/* 			transform-origin: top center; */
/* 		} */
/**/
/* 		& div:nth-of-type(5) { */
/* 			transform: rotateX(-90deg) translateY(50%); */
/* 			transform-origin: bottom center; */
/* 		} */
/**/
/* 		& div:nth-of-type(6) { */
/* 			transform: translateZ(4rem); */
/* 		} */
/* 	} */
/**/
/**/
/* 	@keyframes spinner { */
/* 		0% { */
/* 			transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); */
/* 		} */
/**/
/* 		50% { */
/* 			transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); */
/* 		} */
/* 	} */
/**/
/**/
/* 	/* ╭────────────────────╮ */
/* 	   │ 	Boxes loading.    │ */
/* 	   ╰────────────────────╯ */
/* 	*/ */
/* 	/* Made by Nawsome- from : https://uiverse.io/Nawsome/cold-liger-90 */ */
/**/
/* 	.loading { */
/* 		z-index: 40; */
/* 		inset: 0; */
/* 		position: relative; */
/* 		& { */
/* 			display: flex; */
/* 			align-items: center; */
/* 			justify-content: center; */
/* 			position: absolute; */
/* 		} */
/* 	} */
/**/
/* 	.boxes { */
/* 		--size: 3rem; */
/* 		--duration: 800ms; */
/* 		height: calc(var(--size) * 2); */
/* 		width: calc(var(--size) * 3); */
/* 		position: relative; */
/* 		transform-style: preserve-3d; */
/* 		transform-origin: 50% 50%; */
/* 		margin-top: calc(var(--size) * 1.5 * -1); */
/* 		transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px); */
/* 	} */
/**/
/* 	.boxes .box { */
/* 		width: var(--size); */
/* 		height: var(--size); */
/* 		top: 0; */
/* 		left: 0; */
/* 		position: absolute; */
/* 		transform-style: preserve-3d; */
/* 	} */
/**/
/* 	.boxes .box:nth-child(1) { */
/* 		transform: translate(100%, 0); */
/* 		-webkit-animation: box1 var(--duration) linear infinite; */
/* 		animation: box1 var(--duration) linear infinite; */
/* 	} */
/**/
/* 	.boxes .box:nth-child(2) { */
/* 		transform: translate(0, 100%); */
/* 		-webkit-animation: box2 var(--duration) linear infinite; */
/* 		animation: box2 var(--duration) linear infinite; */
/* 	} */
/**/
/* 	.boxes .box:nth-child(3) { */
/* 		transform: translate(100%, 100%); */
/* 		-webkit-animation: box3 var(--duration) linear infinite; */
/* 		animation: box3 var(--duration) linear infinite; */
/* 	} */
/**/
/* 	.boxes .box:nth-child(4) { */
/* 		transform: translate(200%, 0); */
/* 		-webkit-animation: box4 var(--duration) linear infinite; */
/* 		animation: box4 var(--duration) linear infinite; */
/* 	} */
/**/
/* 	.boxes .box > div { */
/* 		--background: #5C8DF6; */
/* 		--top: auto; */
/* 		--right: auto; */
/* 		--bottom: auto; */
/* 		--left: auto; */
/* 		--translateZ: calc(var(--size) / 2); */
/* 		--rotateY: 0deg; */
/* 		--rotateX: 0deg; */
/* 		position: absolute; */
/* 		width: 100%; */
/* 		height: 100%; */
/* 		background: var(--background); */
/* 		top: var(--top); */
/* 		right: var(--right); */
/* 		bottom: var(--bottom); */
/* 		left: var(--left); */
/* 		transform: */
/* 			rotateY(var(--rotateY)) */
/* 			rotateX(var(--rotateX)) */
/* 			translateZ(var(--translateZ)); */
/* 	} */
/**/
/* 	.boxes .box > div:nth-child(1) { */
/* 		--top: 0; */
/* 		--left: 0; */
/* 	} */
/**/
/* 	.boxes .box > div:nth-child(2) { */
/* 		--background: #145af2; */
/* 		--right: 0; */
/* 		--rotateY: 90deg; */
/* 	} */
/**/
/* 	.boxes .box > div:nth-child(3) { */
/* 		--background: #447cf5; */
/* 		--rotateX: -90deg; */
/* 	} */
/**/
/* 	.boxes .box > div:nth-child(4) { */
/* 		--background: #DBE3F4; */
/* 		--top: 0; */
/* 		--left: 0; */
/* 		--translateZ: calc(var(--size) * 3 * -1); */
/* 	} */
/**/
/* 	@-webkit-keyframes box1 { */
/* 		0%, 50% { */
/* 			transform: translate(100%, 0); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(200%, 0); */
/* 		} */
/* 	} */
/**/
/* 	@keyframes box1 { */
/* 		0%, 50% { */
/* 			transform: translate(100%, 0); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(200%, 0); */
/* 		} */
/* 	} */
/**/
/* 	@-webkit-keyframes box2 { */
/* 		0% { */
/* 			transform: translate(0, 100%); */
/* 		} */
/**/
/* 		50% { */
/* 			transform: translate(0, 0); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(100%, 0); */
/* 		} */
/* 	} */
/**/
/* 	@keyframes box2 { */
/* 		0% { */
/* 			transform: translate(0, 100%); */
/* 		} */
/**/
/* 		50% { */
/* 			transform: translate(0, 0); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(100%, 0); */
/* 		} */
/* 	} */
/**/
/* 	@-webkit-keyframes box3 { */
/* 		0%, 50% { */
/* 			transform: translate(100%, 100%); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(0, 100%); */
/* 		} */
/* 	} */
/**/
/* 	@keyframes box3 { */
/* 		0%, 50% { */
/* 			transform: translate(100%, 100%); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(0, 100%); */
/* 		} */
/* 	} */
/**/
/* 	@-webkit-keyframes box4 { */
/* 		0% { */
/* 			transform: translate(200%, 0); */
/* 		} */
/**/
/* 		50% { */
/* 			transform: translate(200%, 100%); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(100%, 100%); */
/* 		} */
/* 	} */
/**/
/* 	@keyframes box4 { */
/* 		0% { */
/* 			transform: translate(200%, 0); */
/* 		} */
/**/
/* 		50% { */
/* 			transform: translate(200%, 100%); */
/* 		} */
/**/
/* 		100% { */
/* 			transform: translate(100%, 100%); */
/* 		} */
/* 	} */
/**/
/**/
/**/
/* 	/* ╭──────────────────────╮ */
/* 	   │ 	Header settings:    │ */
/* 	   ╰──────────────────────╯ */
/* 	*/ */
/* 	.header--title { */
/* 		text-align: left; */
/* 	} */
/**/
/**/
/* 	.header-content, */
/* 	.section__menu { */
/* 		display: flex; */
/* 		justify-content: space-between; */
/* 	} */
/**/
/**/
/* 	header { */
/* 		height: 10cqw; */
/* 		overflow: clip; */
/* 	} */
/**/
/**/
/* 	.layers-btn, */
/* 	.logout-btn { */
/* 		border-radius: 40%; */
/* 		background: var(--inner-shadow); */
/* 		width: 2.3rem; */
/* 		height: 2.3rem; */
/* 		transition: all 500ms ease-in-out; */
/* 		cursor: pointer; */
/* 		opacity: .9; */
/* 		z-index: 10; */
/* 		& { */
/* 			display: flex; */
/* 			align-items: center; */
/* 			justify-content: center; */
/* 		} */
/* 	} */
/**/
/**/
/* 	.section-right-up { */
/* 		display: flex; */
/* 		flex-wrap: wrap; */
/* 		align-content: center; */
/* 		justify-content: space-around; */
/* 		flex-direction: row reverse; */
/* 		gap: .3rem; */
/* 		position: fixed; */
/* 		& { */
/* 			width: 15cqw; */
/* 			max-height: 10%; */
/* 			margin-top: 1rem; */
/* 			margin-left: 84%; */
/* 			position: absolute; */
/* 		} */
/* 		& > * { */
/* 			box-shadow: var(--shadow1); */
/* 		} */
/* 		& .section__menu--btn { */
/* 			border-radius: 40%; */
/* 		} */
/* 		& > .section__menu--btn:active { */
/* 			box-shadow: var(--inner-shadow); */
/* 		} */
/* 	} */
/**/
/**/
/* 	.mode { */
/* 		& label > svg { */
/* 			fill: var(--color4); */
/* 			width: 1rem; */
/* 			height: 1rem; */
/* 			transition: all 500ms ease-in-out; */
/* 			&:hover { */
/* 				fill: var(--dark); */
/* 			} */
/* 		} */
/* 	} */
/**/
/**/
/* 	.logout-icon { */
/* 		fill: var(--color4); */
/* 		width: 1rem; */
/* 		height: 1rem; */
/* 		transition: all 500ms ease-in-out; */
/* 		&:hover { */
/* 			fill: var(--dark); */
/* 		} */
/* 	} */
/* 	.clear, .IO__press__btn { */
/* 		margin: 2rem 1rem; */
/* 	} */
/**/
/* 	.side__menu { */
/* 		visibility: hidden; */
/* 		color: var(--popup); */
/* 		overflow: hidden; */
/* 		transition: .5s ease-in-out; */
/* 		& { */
/* 			font-size: var(--fonts); */
/* 			font-weight: 400; */
/* 			/* max-width: 80ch; */ */
/* 			box-shadow: var(--shadow1); */
/* 			border-radius: var(--bord); */
/* 			padding: 0.3rem 1rem; */
/* 			position: absolute; */
/* 			margin-top: 7rem; */
/* 		} */
/* 	} */
/**/
/**/
/* 	.mode { */
/* 		& label > svg { */
/* 			fill: var(--color4); */
/* 			width: 1rem; */
/* 			height: 1rem; */
/* 			transition: all 500ms ease-in-out; */
/* 			&:hover { */
/* 				fill: var(--dark); */
/* 			} */
/* 		} */
/* 		.mode--color { */
/* 			box-shadow: var(--inner-shadow); */
/* 		} */
/* 		&:hover > .side__menu { */
/* 			visibility: visible; */
/* 			transition: all .5s ease-in-out; */
/* 			-webkit-animation: fadeIn 2s; */
/* 			animation: fadeIn 1.5s linear; */
/* 		} */
/* 	} */
/**/
/**/
/* 	:is(.logout-icon, .preview-icon) { */
/* 		fill: var(--color4); */
/* 		width: 1.4rem; */
/* 		height: 1.4rem; */
/* 		transition: all 500ms ease-in-out; */
/* 	} */
/**/
/**/
/* 	.logout-icon:hover { */
/* 		fill: var(--color1); */
/* 		& + .side__menu { */
/* 			visibility: visible; */
/* 			transition: all .5s ease-in-out; */
/* 			-webkit-animation: fadeIn 2s; */
/* 			animation: fadeIn 1.5s linear; */
/* 		} */
/* 	} */
/**/
/**/
/* 	.preview-icon:hover { */
/* 		fill: var(--color1); */
/* 		& + .side__menu { */
/* 			visibility: visible; */
/* 			transition: all .5s ease-in-out; */
/* 			-webkit-animation: fadeIn 2s; */
/* 			animation: fadeIn 1.5s linear; */
/* 		} */
/* 	} */
/**/
/* 	/* ╭─────────────────────╮ */
/* 	   │  main container.    │ */
/* 	   ╰─────────────────────╯ */
/* 	*/
/* 	tr, td, th { */
/* 		text-align: center; */
/* 		padding: .1rem .3rem; */
/* 		border-radius: 0.3rem; */
/* 		color: var(--table-font); */
/* 		font-family: Saira Semi Condensed, sans-serif; */
/* 		font-weight: 500; */
/* 		font-size: calc(var(--fonts) - .08rem); */
/* 	} */
/**/
/* 	.container { */
/* 		display: grid; */
/* 		grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr)); */
/* 		column-gap: var(--colg-mobile); */
/* 		row-gap: var(--rowg-mobile); */
/* 		padding: 1cqw 22cqw; */
/* 	} */
/**/
/* 	.pads-sizes { */
/* 		grid-area: pads; */
/* 		border: unset; */
/* 		& > input { */
/* 			max-width: 4rem; */
/* 		} */
/* 	} */
/**/
/* 	.container-bottom { */
/* 		display: flex; */
/* 		gap: 1rem; */
/* 		flex-direction: row; */
/* 		& > .container--span { */
/* 			&:nth-of-type(1) { */
/* 				width: 100%; */
/* 			} */
/* 		} */
/* 		& { */
/* 			grid-column: span 2; */
/* 			transition: all 2s ease-in-out; */
/* 		} */
/* 	} */
/**/
/* 	.accordion-panel:has([aria-expanded="false"]) { */
/* 		width: var(--accordion-width, 1rem); */
/* 		transition: width 2s ease-in-out; */
/* 		fill: var(--p__color--mode); */
/* 	} */
/**/
/* 	.accordion-panel:has([aria-expanded="true"]) { */
/* 		& .menu-icon { */
/* 			box-shadow: var(--shadow1); */
/* 			cursor: pointer; */
/* 			background: var(--menu-col); */
/* 			fill: var(--__icon-color); */
/* 		} */
/* 		width: 100%; */
/* 		transition: width 2s ease-in-out; */
/* 	} */
/**/
/* 	/* ╭─────────────────────────────╮ */
/* 	   │ 	Right status container.    │ */
/* 	   ╰─────────────────────────────╯ */
/* 	*/ */
/* 	.container__status__pane, */
/* 	.container__status__pane__frame { */
/* 		display: flex; */
/* 		flex-wrap: wrap; */
/* 		flex-shrink: 1; */
/* 		flex-basis: clamp(80%, 70%, 100%); */
/* 		/*flex-basis: 1;*/ */
/* 		gap: 2rem; */
/* 		justify-content: space-between; */
/* 	} */
/**/
/**/
/* 	.container__status__pane__frame { */
/* 		flex-shrink: 1; */
/* 		flex-grow: 3; */
/* 	} */
/**/
/**/
/* 	/* .IO__press * { */ */
/* 	/* 	display: none; */ */
/* 	/* } */ */
/**/
/**/
/* 	.IO__press-mobile > * { */
/* 		position: fixed; */
/* 		inset: 0; */
/* 		& > button > * { */
/* 			pointer-events: none; */
/* 		} */
/* 	} */
/**/
/**/
/* 	.press--btn-mobile { */
/* 		color: var(--color4); */
/* 		height: 3rem; */
/* 		width: 3rem; */
/* 		background: #12111385; */
/* 		opacity: .8; */
/* 		border: none; */
/* 		border-radius: 30%; */
/* 		cursor: pointer; */
/* 		transition: transform .3s ease-in-out; */
/* 		& { */
/* 			display: flex; */
/* 			align-items: center; */
/* 			justify-content: center; */
/* 		} */
/* 		& > span { */
/* 			position: absolute; */
/* 			margin-top: 2rem; */
/* 			font-size: .5rem; */
/* 			font-weight: 700; */
/* 		} */
/* 		& > svg { */
/* 			fill: var(--p__color--mode); */
/* 		} */
/* 		&:hover { */
/* 			transition: all .5s ease-in-out; */
/* 			transform: translateY(.1rem); */
/* 			border-bottom: .05rem solid var(--color4); */
/* 			border-right: .05rem solid var(--color4); */
/* 			box-shadow: var(--shadow1); */
/* 		} */
/* 		&:active { */
/* 			box-shadow: var(--inner-shadow); */
/* 			transition: all .5s ease-in-out; */
/* 		} */
/* 	} */
/**/
/**/
/* 	.fixed-menu { */
/* 		display: flex; */
/* 		justify-content: space-between; */
/* 		flex-basis: 100%; */
/* 		flex-grow: 1; */
/* 		height: 10svh; */
/* 		margin: 40% 3svw 0 3svw; */
/* 		transition: 500ms ease-in-out; */
/* 		& { */
/* 			height: 9svh; */
/* 			padding: .1rem; */
/* 			border-radius: 10dvw; */
/* 			z-index: 20; */
/* 			opacity: .8; */
/* 			z-index: 10; */
/* 			position: fixed; */
/* 		} */
/* 		& .add--btn:active { */
/* 			background: var(--color6); */
/* 			& > svg { */
/* 				fill: var(--add-col); */
/* 			} */
/* 		} */
/* 		& .del--btn:active { */
/* 			background: var(--color8); */
/* 			& > svg { */
/* 				fill: var(--color3); */
/* 			} */
/* 		} */
/* 		& .clear--btn:active { */
/* 			background: var(--color4); */
/* 			& > svg { */
/* 				fill: var(--light-blue1); */
/* 			} */
/* 		} */
/* 		& .option--btn:active { */
/* 			background: var(--color4); */
/* 			& > svg { */
/* 				fill: var(--result-col); */
/* 			} */
/* 		} */
/* 	} */
/**/
/**/
/* 	.fan-options:is([aria-hidden="true"]) { */
/* 		display: none; */
/* 	} */
/**/
/**/
/* 	.fan-options:is([aria-hidden="false"]) { */
/* 		display: flex; */
/* 		flex-direction: row-reverse; */
/* 		& { */
/* 			margin: 41.5% 4.5svw 0 6svw; */
/* 			z-index: 20; */
/* 		} */
/* 		& a:target { */
/* 			display: unset; */
/* 		} */
/* 		& a > svg { */
/* 			fill: var(--light-blue1); */
/* 			opacity: .7; */
/* 		} */
/* 		& > * { */
/* 			flex-direction: column-reverse; */
/* 			flex-basis: 100%; */
/* 			position: absolute; */
/* 			border-radius: 40%; */
/* 			border: transparent; */
/* 			background: var(--mob-col); */
/* 		} */
/* 		& a:nth-child(1) { */
/* 			line-height: 0; */
/* 			animation: search 500ms ease; */
/* 			animation-fill-mode: forwards; */
/* 		} */
/* 		& a:nth-child(2) { */
/* 			line-height: 0; */
/* 			animation: currency 200ms ease; */
/* 			animation-delay: .3s; */
/* 			animation-fill-mode: forwards; */
/* 		} */
/* 		& a:nth-child(3) { */
/* 			line-height: 0; */
/* 			animation: units 200ms ease; */
/* 			animation-delay: .3s; */
/* 			animation-fill-mode: forwards; */
/* 		} */
/* 	} */
/**/
/**/
/* 	@keyframes search { */
/* 		0% { */
/* 			opacity: 0; */
/* 			transform: translate( */
/* 				cos(0deg), */
/* 				sin(0deg) */
/* 			); */
/* 		} */
/* 		100% { */
/* 			opacity: 1; */
/* 			transform: translate( */
/* 				calc(cos(280deg) * 3rem), */
/* 				calc(sin(280deg) * 3.5rem) */
/* 			); */
/* 		} */
/* 	} */
/* 	@keyframes currency { */
/* 		0% { */
/* 			opacity: 0; */
/* 			transform: translate( */
/* 				cos(0deg), */
/* 				sin(0deg) */
/* 			); */
/* 		} */
/* 		100% { */
/* 			opacity: 1; */
/* 			transform: translate( */
/* 				calc(cos(230deg) * 4rem), */
/* 				calc(sin(230deg) * 4rem) */
/* 			); */
/* 		} */
/* 	} */
/* 	@keyframes units { */
/* 		0% { */
/* 			opacity: 0; */
/* 			transform: translate( */
/* 				cos(0deg), */
/* 				sin(0deg) */
/* 			); */
/* 		} */
/* 		100% { */
/* 			opacity: 1; */
/* 			transform: translate( */
/* 				calc(cos(180deg) * 3.5rem), */
/* 				calc(sin(185deg) * 5rem) */
/* 			); */
/* 		} */
/* 	} */
/**/
/**/
/* 	.mobile-icon { */
/* 		fill: var(--dark); */
/* 		fill-opacity: .9; */
/* 		width: 1.7rem; */
/* 		height: 1.7rem; */
/* 		border-radius: 50%; */
/* 		box-shadow: var(--shadow1); */
/* 		stroke-width: 5rem; */
/* 	} */
/**/
/**/
/* 	.mobile-menu { */
/* 		fill: var(--color4); */
/* 		width: 1.5rem; */
/* 		height: 1.5rem; */
/* 	} */
/**/
/**/
/* 	.IO__sizes--code, */
/* 	.IO__top__estimate { */
/* 		width: 90%; */
/* 		margin-right: .2rem; */
/* 	} */
/**/
/**/
/* 	.IO__sizes__measure { */
/* 		display: flex; */
/* 		flex-wrap: wrap; */
/* 		justify-content: space-between; */
/* 		gap: 1rem; */
/* 	} */
/**/
/**/
/* 	.IO__add--form { */
/* 		width: 90%; */
/* 		border: .1rem solid var(--iframes-bg); */
/* 		border-radius: 1rem; */
/* 		padding: .8rem .5rem; */
/* 		transition: .5s ease; */
/* 		& label { */
/* 			margin-right: 1ch; */
/* 		} */
/* 	} */
/**/
/**/
/* 	.exchange--content:is([aria-hidden="false"]), */
/* 	.units-conversion:is([aria-hidden="false"]), */
/* 	.get-estimate:is([aria-hidden="false"]) { */
/* 		display: block; */
/* 		animation: emerge 1.5s linear; */
/* 		animation-fill-mode: forwards; */
/* 	} */
/**/
/**/
/* 	.result:is([aria-hidden="false"]) { */
/* 		display: block; */
/* 		animation: emerge 2.5s linear; */
/* 		animation-fill-mode: forwards; */
/* 		& > .result--panels { */
/* 			display: flex; */
/* 			flex-wrap: wrap; */
/* 			flex-direction: row; */
/* 			justify-content: space-evenly; */
/* 			gap: 1rem; */
/* 		} */
/* 	} */
/**/
/**/
/* 	@keyframes emerge { */
/* 		0%, 50% { */
/* 			opacity: 0; */
/* 			box-shadow: none; */
/* 			border: .1rem solid var(--iframes-bg); */
/* 			filter: blur(1rem); */
/* 		} */
/* 		100% { */
/* 			opacity: 1; */
/* 		} */
/* 	} */
/**/
/* 	/* ╭──────────────────────────────────────────────────────────╮ */
/* 	   │                   Layer plotter setup.                   │ */
/* 	   ╰──────────────────────────────────────────────────────────╯ */
/* 	*/ */
/**/
/* 	.plotter__menu:is([aria-hidden="true"]), */
/* 	.plotter:is([aria-hidden="true"]) { */
/* 		animation: fade-close 500ms ease-out; */
/* 		animation-fill-mode: forwards; */
/* 		transition: all 1000ms ease-in-out; */
/* 	} */
/**/
/* 	.plotter:is([aria-hidden="true"]) { */
/* 		display: none; */
/* 	} */
/**/
/* 	.plotter:is([aria-hidden="false"]) { */
/* 		display: grid; */
/* 		grid-auto-rows: .15fr 1fr .10fr; */
/* 		grid-template-columns: .25fr 1fr 25fr; */
/* 		margin: 0 12cqw; */
/* 		& { */
/* 			animation: emerge 2.5s ease; */
/* 			animation-fill-mode: forwards; */
/* 			transition: all 2s linear; */
/* 			border: .1rem solid var(--iframes-bg); */
/* 		} */
/* 		.plotter__header { */
/* 			grid-area: 1 / 1 / 1 / 4; */
/* 			display: flex; */
/* 			flex-direction: row; */
/* 			/* min-width: 100%; */ */
/* 			align-items: baseline; */
/* 			justify-content: space-between; */
/* 			flex-basis: 1; */
/* 			& > p { */
/* 				font-size: .7rem; */
/* 				background: var(--work-hover); */
/* 				border: .1rem solid var(--iframes-bg); */
/* 				box-shadow: var(--inner-shadow); */
/* 				border-radius: 1rem; */
/* 				padding: .5rem; */
/* 				margin: 0; */
/* 			} */
/* 		} */
/* 		.layer-button { */
/* 			place-self: center; */
/* 			grid-area: 3 / 3 / 3 / 3; */
/* 			display: flex; */
/* 			flex-direction: row; */
/* 			gap: 2ch; */
/* 			animation: emerge 4s ease; */
/* 			animation-fill-mode: forwards; */
/* 			transition: all 3s linear; */
/* 			& button { */
/* 				margin-top: 1rem; */
/* 			} */
/* 			& button > svg { */
/* 				width: 100%; */
/* 				height: 100%; */
/* 				fill: var(--color4); */
/* 			} */
/* 		} */
/* 		& > h2 { */
/* 			min-width: 100%; */
/* 		} */
/* 		.crate-layer { */
/* 			place-self: center; */
/* 			grid-area: 2 / 1 / 2 / 4; */
/* 			animation: fede-open 3s ease; */
/* 			animation-fill-mode: forwards; */
/* 			transition: all 2s linear; */
/* 			border: .1rem solid var(--iframes-bg); */
/* 		} */
/* 		.crate-layer > * { */
/* 			font-family: 'Mitr', sans-serif; */
/* 			font-weight: 400; */
/* 			font-size: .7rem; */
/* 		} */
/* 		.crate-layer text { */
/* 			fill: var(--p__color--mode); */
/* 			transition: fill 1.5s ease; */
/* 			z-index: -10; */
/* 			animation: stroke-draw 3s ease-in-out, emerge 2s ease-in; */
/* 			animation-fill-mode: forwards; */
/* 			transition: ani1s ease-in-out; */
/* 		} */
/* 		.crate-layer rect { */
/* 			rx: 1rem; */
/* 			ry: 1rem; */
/* 			fill: transparent; */
/* 			stroke: var(--color8); */
/* 			stroke-dasharray: 100%; */
/* 			stroke-dashoffset: 100%; */
/* 			stroke: var(--stroke); */
/* 			animation: stroke-draw 2.5s ease-in-out, emerge 1s ease-in; */
/* 			animation-fill-mode: forwards; */
/* 			/* animation-timing-function: cubic-bezier(.5, -100, .5, 100); */ */
/* 			transition: animation 2.5s ease-in-out; */
/* 		} */
/* 		.crate-layer rect:hover { */
/* 			fill: var(--work-hover); */
/* 			animation: emerge 2s ease-in-out; */
/* 			transition: animation 1s ease; */
/* 		} */
/* 		.crate-layer { */
/* 			padding: .5rem; */
/* 			justify-content: center; */
/* 			border-radius: 3.5ch; */
/* 			border: .1rem solid var(--iframes-bg); */
/* 			box-shadow: var(--inner-shadow); */
/* 		} */
/* 	} */
/**/
/**/
/* 	.plotter__menu { */
/* 		display: flex; */
/* 		justify-content: center; */
/* 		transition: all 1s ease-in; */
/* 		& { */
/* 			animation: emerge 3s ease-in; */
/* 			animation-fill-mode: forwards; */
/* 		} */
/* 		& { */
/* 			width: 17%; */
/* 		} */
/* 		.plotter__menu__crates { */
/* 			display: inherit; */
/* 			justify-content: flex-start; */
/* 			flex-direction: column; */
/* 			& > h3 { */
/* 				text-align: center; */
/* 				min-width: 100%; */
/* 				max-height: 10%; */
/* 			} */
/* 			& { */
/* 				min-width: 100%; */
/* 				animation-delay: 15s; */
/* 				animation: fade-open 3s ease-in; */
/* 				animation-fill-mode: forwards; */
/* 				transition: all 2s ease-in; */
/* 			} */
/* 			.plotter__crate__list { */
/* 				display: inherit; */
/* 				flex-basis: 100%; */
/* 				flex-direction: column; */
/* 				align-items: center; */
/* 				justify-content: center; */
/* 				& { */
/* 					isolation: isolate; */
/* 					border-radius: 1rem; */
/* 					box-sizing: border-box; */
/* 					padding: .5rem 1rem; */
/* 					margin-top: 1rem; */
/* 				} */
/* 				.crates-done { */
/* 					font-family: 'Mitr', sans-serif; */
/* 					font-size: .75rem; */
/* 					font-weight: 500; */
/* 					background: var(--work-hover); */
/* 					color: var(--table-font); */
/* 					box-shadow: var(--inner-shadow); */
/* 					border-radius: 1rem; */
/* 					padding: .3rem .2rem; */
/* 					counter-reset: crates-counter; */
/* 					& option::before { */
/* 						counter-increment: crates-counter; */
/* 						content: counter(crates-counter) " - Create:"; */
/* 						color: var(color8); */
/* 					} */
/* 					& option { */
/* 						background: var(--color4); */
/* 						line-height: 0; */
/* 						border: .1rem solid var(--add-col); */
/* 						box-shadow: var(--inner-shadow); */
/* 						color: var(--iframes-bg); */
/* 						border-radius: 1rem; */
/* 					} */
/* 				} */
/* 			} */
/* 		} */
/* 	} */
/* } */