			html {
				box-sizing: border-box;
				overflow-x: hidden;
			}

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

			body {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				min-height: 100vh;
				margin: 0;
				font-family: sans-serif;
				background: #55555526;
			}

			.container {
				width: 100dvh;
				max-width: 900px;
				min-height: 400px;
				min-width: 300px;
				margin: 0 auto;
				padding: 24px;
				background-color: #ffffff;
				border-radius: 16px;
				box-shadow: 0 0 10px 10px rgba(0,0,0,0.1);
			}

			.controls {
				display: flex;
				justify-content: space-evenly;
				align-items: self-end;
				margin-bottom: 20px;
			}

			.left-group, .right-group {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.preview {
				position: relative;
				display: flex;
				flex-wrap: nowrap;
				gap: 16px;
				width: 100%;
				/*margin-bottom: 24px;*/
				justify-content: center;
				align-items: center;
			}

			canvas {
				width: 100%;
				max-width: 800px;
				height: auto;
				aspect-ratio: 800 / 480;
				flex: 1;
				box-shadow: 0 0 10px 9px rgba(0,0,0,0.05);
				background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url("polaroid_bird.png");
				background-size: 40%;
				background-repeat: no-repeat;
				background-position: center;
			}

			.slider-container {
				position: absolute;
				top: 0;
				right: -10px;
				bottom: 0;
				width: 20px;
				display: flex;
				align-items: center;
				flex: none;
				background: linear-gradient(to top, white, black);
				border: 1px solid #333;
				border-radius: 8px;
				touch-action: none;
			}

			.slider {
				-webkit-appearance: none;
				appearance: none;
				writing-mode: vertical-lr;
				direction: rtl;
				width: 18px;
				height: 100%;
				transform: translate(-2px, 0px);
				background: transparent;
				border-radius: 6px;
				outline: none;
				transition: opacity 0.2s;
			}

			.slider::-webkit-slider-runnable-track {
				width: 20px;
				height: 100%;
				border-radius: 8px;
			}

			.slider::-moz-range-track {
				width: 20px;
				height: 100%;
				border-radius: 8px;
			}

			.slider::-webkit-slider-thumb {
				-webkit-appearance: none;
				appearance: none;
				width: 20px;
				height: 20px;
				background-color: transparent;
				border: none;
				border-radius: 50%;
				cursor: pointer;
			}

			.slider::-moz-range-thumb {
				width: 20px;
				height: 20px;
				background-color: transparent;
				border: none;
				border-radius: 50%;
				cursor: pointer;
			}

			#slider-value {
				position: absolute;
				width: 5ch;
				background-color: #333;
				border-radius: 4px;
				color: white;
				font-family: monospace;
				font-size: 16px;
				text-align: center;
				white-space: nowrap;
				pointer-events: none;
				transform: translate(-50%, -46%);
			}

			#status_message {
				display: none;
				text-align: center;
			}

			button, .file-input label {
				display: inline-block;
				padding: 10px 10px;
				margin-bottom: 20px;
				border: 1px solid #33333329;
				border-radius: 8px;
				background: #55555526;
				color: #221f1f;
				font-size: 18px;
				font-weight: 500;
				text-align: center;
				cursor: pointer;
				transition: all 0.2s ease;
				box-shadow: 5px 5px 4px 0px rgba(0,0,0,0.3);
			}

			button:disabled {
				background: #999;
				border-color: #666;
				color: #ccc;
				opacity: 0.7;
				cursor: not-allowed;
			}

			button:hover:not(:disabled), .file-input label:hover {
				background: #333333a3;
				color: #ffffff;
			}
			button:active:not(:disabled), .file-input label:active {
				transform: translateY(2px);
				box-shadow: none;
			}


			.file-input input[type="file"] {
				display: none;
			}

			.settings input[type="radio"] {
				-webkit-appearance: none;
				appearance: none;
				width: 16px;
				height: 16px;
				margin: 0 4px 0 0;
				border: 2px solid #333;
				border-radius: 50%;
				background: #fff;
				cursor: pointer;
				transition: all 0.2s ease;
			}

			.settings input[type="radio"]:checked {
				background: #333;
				border-color: #000;
			}

			.settings input[type="radio"]:hover {
				border-color: #000;
			}

			.settings {
				display: flex;
				align-items: center;
				gap: 6px;
				font-size: 16px;
				color: #333;
			}

			.settings label {
				cursor: pointer;
			}

			@media (max-width: 600px) {
				body {
					padding: 10px;
				}
				.container {
					width: 100%;
					padding: 10px;
				}
				.preview {
					position: static;
					flex-direction: column;
					align-items: stretch;
					gap: 10px;
					margin-bottom: 24px;
				}
				#slider-value {
					transform: rotate(90deg) translate(-10px, 26px);
				}
				.slider-container {
					position: relative;
					right: 0px;
					top: 14px;
					width: 100%;
					height: 20px;
					background: linear-gradient(to right, white, black);
					border: 1px solid #333;
					border-radius: 8px;
				}
				.slider {
					writing-mode: horizontal-tb;
					direction: ltr;
					width: 100%;
					height: 20px;
					transform: translate(1px, 0px) scaleX(1.019);
				}
				.slider::-webkit-slider-runnable-track {
					width: 100%;
					height: 20px;
					border: 1px solid #333;
				}
				.slider::-moz-range-track {
					width: 100%;
					height: 20px;
				}
			}