<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	body {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		background: linear-gradient(to bottom right, #1f2937, #374151);
		color: white;
		min-height: 100vh;
		padding: 2rem;
	}
	
	.container {
		max-width: 1200px;
		margin: 0 auto;
	}
	
	h1 {
		font-size: 2.5rem;
		font-weight: bold;
		margin-bottom: 0.5rem;
	}
	
	.subtitle {
		color: #9ca3af;
		margin-bottom: 2rem;
	}
	
	.upload-section {
		background: #1f2937;
		border-radius: 0.5rem;
		padding: 1.5rem;
		margin-bottom: 1.5rem;
	}
	
	.upload-btn {
		width: 100%;
		background: #2563eb;
		color: white;
		font-weight: 600;
		padding: 1rem 1.5rem;
		border-radius: 0.5rem;
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
		transition: background 0.2s;
	}
	
	.upload-btn:hover {
		background: #1d4ed8;
	}
	
	.preview-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
		margin-bottom: 1.5rem;
	}
	
	@media (max-width: 768px) {
		.preview-grid {
			grid-template-columns: 1fr;
		}
	}
	
	.preview-box {
		background: #1f2937;
		border-radius: 0.5rem;
		padding: 1.5rem;
	}
	
	.preview-box h2 {
		font-size: 1.25rem;
		font-weight: 600;
		margin-bottom: 1rem;
	}
	
	.preview-box img, .preview-box canvas {
		width: 100%;
		border-radius: 0.375rem;
		border: 1px solid #374151;
	}
	
	canvas {
		background: white;
	}
	
	.output-section {
		background: #1f2937;
		border-radius: 0.5rem;
		padding: 1.5rem;
	}
	
	.output-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1rem;
		flex-wrap: wrap;
		gap: 1rem;
	}
	
	.button-group {
		display: flex;
		gap: 0.5rem;
	}
	
	.btn {
		padding: 0.5rem 1rem;
		border-radius: 0.375rem;
		border: none;
		font-weight: 600;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		transition: background 0.2s;
	}
	
	.btn-copy {
		background: #7c3aed;
		color: white;
	}
	
	.btn-copy:hover {
		background: #6d28d9;
	}
	
	.btn-download {
		background: #059669;
		color: white;
	}
	
	.btn-download:hover {
		background: #047857;
	}
	
	.btn-process {
		background: #ea580c;
		color: white;
	}
	
	.btn-process:hover {
		background: #c2410c;
	}
	
	.tool-section {
		background: #1f2937;
		border-radius: 0.5rem;
		padding: 1.5rem;
		margin-bottom: 1.5rem;
	}
	
	.tool-group {
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;
		align-items: center;
	}
	
	.tool-btn {
		padding: 0.75rem 1.5rem;
		border-radius: 0.375rem;
		border: 2px solid #374151;
		background: #111827;
		color: white;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.2s;
	}
	
	.tool-btn:hover {
		border-color: #2563eb;
	}
	
	.tool-btn.active {
		background: #2563eb;
		border-color: #2563eb;
	}
	
	.brush-size {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	
	.brush-size input {
		width: 100px;
	}
	
	canvas {
		cursor: none;
	}
	
	#cursorCircle {
		position: fixed;
		border: 2px solid #2563eb;
		border-radius: 50%;
		pointer-events: none;
		z-index: 9999;
		display: none;
	}
	
	#cursorCircle.eraser {
		border-color: #ef4444;
	}
	
	.output-box {
		background: #111827;
		border-radius: 0.375rem;
		padding: 1rem;
		max-height: 384px;
		overflow: auto;
	}
	
	.output-text {
		font-family: monospace;
		font-size: 0.75rem;
		color: #4ade80;
		word-wrap: break-word;
		white-space: pre-wrap;
	}
	
	.info-text {
		font-size: 0.875rem;
		color: #9ca3af;
		margin-top: 1rem;
		line-height: 1.5;
	}
	
	.hidden {
		display: none;
	}
	
	svg {
		width: 1.25rem;
		height: 1.25rem;
	}
</style>
