:root {
	color-scheme: dark;
	--background: #0e1117;
	--foreground: #edf0f4;
	--muted: #9aa3af;
	--panel: #171b22;
	--panel-2: #20252e;
	--border: rgb(255 255 255 / 11%);
	--border-strong: rgb(255 255 255 / 20%);
	--accent: #1bd96a;
	--accent-dark: #0c8f44;
	--danger: #ef4444;
	--shadow: rgb(0 0 0 / 45%);
	font-family:
		"JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

body {
	margin: 0;
	background: var(--background);
	color: var(--foreground);
}

button,
input {
	font: inherit;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.shell {
	width: min(1180px, calc(100vw - 32px));
	margin: 0 auto;
	padding: 28px 0 40px;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
}

.eyebrow {
	margin: 0 0 6px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

h1 {
	margin: 0;
	font-size: clamp(22px, 3vw, 34px);
	line-height: 1.1;
	letter-spacing: 0;
}

.workspace {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.controls,
.preview-wrap {
	background: var(--panel);
	border: 1px solid var(--border);
	box-shadow: 0 18px 70px var(--shadow);
}

.controls {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px;
}

.dropzone {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 10px;
	align-items: center;
	min-height: 72px;
	padding: 12px;
	background: var(--panel-2);
	border: 1px solid var(--border);
	cursor: pointer;
	transition:
		border-color 160ms ease,
		filter 160ms ease;
}

.dropzone:hover,
.dropzone:focus-within,
.dropzone.is-dragging {
	border-color: var(--accent);
	filter: brightness(1.08);
}

.dropzone.is-dragging {
	background: color-mix(in srgb, var(--panel-2), var(--accent) 14%);
}

.dropzone input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}

.drop-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: #10141a;
	border: 1px solid var(--border-strong);
	color: var(--accent);
	font-size: 24px;
	line-height: 1;
}

.dropzone strong,
.dropzone small,
.field-link {
	display: block;
	overflow-wrap: anywhere;
}

.dropzone strong {
	margin-bottom: 4px;
	font-size: 14px;
}

.dropzone small,
.field-link,
.field label,
.range-row output,
.preview-toolbar {
	color: var(--muted);
	font-size: 12px;
}

.field-link {
	width: fit-content;
	margin-top: 6px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.field-link:hover {
	text-decoration: underline;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.field label {
	font-weight: 700;
	text-transform: uppercase;
}

.range-row {
	display: grid;
	grid-template-columns: 1fr 52px 32px;
	gap: 8px;
	align-items: center;
}

input[type="range"] {
	width: 100%;
	accent-color: var(--accent);
}

.range-row output {
	text-align: right;
}

.reset-slider {
	width: 32px;
	min-height: 28px;
	padding: 0;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--border-strong);
	background: var(--panel-2);
	color: var(--foreground);
	cursor: pointer;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		transform 80ms ease;
}

.button:hover:enabled {
	border-color: var(--accent);
	background: #28303a;
}

.button:active:enabled {
	transform: translateY(1px);
}

.button:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.button.primary {
	background: var(--accent);
	border-color: var(--accent);
	color: #07130c;
	font-weight: 800;
}

.button.primary:hover:enabled {
	background: #35e87d;
	border-color: #35e87d;
}

.preview-wrap {
	min-width: 0;
}

.preview-toolbar {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
}

.preview-frame {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 480px;
	padding: 18px;
	background:
		linear-gradient(45deg, rgb(255 255 255 / 4%) 25%, transparent 25%),
		linear-gradient(-45deg, rgb(255 255 255 / 4%) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, rgb(255 255 255 / 4%) 75%),
		linear-gradient(-45deg, transparent 75%, rgb(255 255 255 / 4%) 75%), #0b0e13;
	background-position:
		0 0,
		0 8px,
		8px -8px,
		-8px 0;
	background-size: 16px 16px;
}

.crop-stage {
	position: relative;
	width: 100%;
	max-height: 72vh;
	aspect-ratio: var(--stage-aspect, 1200 / 630);
	overflow: hidden;
	border: 1px dashed var(--border-strong);
	background:
		repeating-linear-gradient(
			-45deg,
			rgb(255 255 255 / 7%) 0 8px,
			rgb(255 255 255 / 2%) 8px 16px
		),
		#0b0e13;
	box-shadow: 0 16px 60px rgb(0 0 0 / 50%);
}

canvas {
	position: absolute;
	left: 0;
	top: var(--crop-top, 0%);
	display: block;
	width: 100%;
	height: calc(100% - var(--crop-top, 0%) - var(--crop-bottom, 0%));
	background: transparent;
}

.crop-handle {
	position: absolute;
	left: 0;
	z-index: 2;
	display: none;
	width: 100%;
	height: 18px;
	border: 1px solid var(--accent);
	background: rgb(27 217 106 / 20%);
	cursor: ns-resize;
	touch-action: none;
}

.has-output .crop-handle {
	display: block;
}

.crop-handle::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 3px;
	background: var(--accent);
	transform: translate(-50%, -50%);
}

.crop-handle-top {
	top: max(0px, calc(var(--crop-top, 0%) - 9px));
}

.crop-handle-bottom {
	bottom: max(0px, calc(var(--crop-bottom, 0%) - 9px));
}

.empty-state {
	position: absolute;
	inset: 18px;
	display: grid;
	place-items: center;
	padding: 24px;
	border: 1px dashed var(--border-strong);
	color: var(--muted);
	text-align: center;
	pointer-events: none;
}

.has-output .empty-state {
	display: none;
}

@media (max-width: 820px) {
	.shell {
		width: min(100vw - 20px, 620px);
		padding-top: 16px;
	}

	.topbar,
	.workspace {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.preview-frame {
		min-height: 300px;
		padding: 10px;
	}
}