* { box-sizing: border-box; }
	html, body {
		margin: 0; padding: 0; height: 100%;
		background: #1c1c1c;
		color: #ddd;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	#app {
		display: flex;
		height: 100vh;
	}
	#canvas-wrap {
		flex: 1;
		position: relative;
		background: #1c1c1c;
	}
	#canvas-wrap canvas { display: block; }
	#sidebar {
		width: 300px;
		flex-shrink: 0;
		background: #1c1c1c;
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 2px;
		overflow-y: auto;
	}
	.panel {
		background: #252525;
		border-radius: 3px;
		padding: 14px;
	}
	.panel-title {
		font-size: 9px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #888;
		margin: 0 0 10px 0;
	}
	.field { margin-bottom: 10px; }
	.field:last-child { margin-bottom: 0; }
	.field label {
		display: block;
		font-size: 11px;
		color: #999;
		margin-bottom: 4px;
	}
	.field input[type="number"] {
		width: 100%;
		background: #2e2e2e;
		border: none;
		border-radius: 3px;
		color: #eee;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 13px;
		padding: 8px 10px;
		outline: none;
	}
	.field input[type="number"]:focus {
		box-shadow: 0 0 0 1px #4e9fd4;
	}
	.field input[type="range"] {
		width: 100%;
		accent-color: #4e9fd4;
		margin-top: 4px;
	}
	.row { display: flex; gap: 2px; }
	.row .field { flex: 1; }
	.metric {
		border-top: 2px solid #4e9fd4;
		padding-top: 8px;
		margin-top: 10px;
	}
	.metric-label {
		font-size: 9px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #777;
	}
	.metric-value {
		font-size: 16px;
		color: #eee;
		margin-top: 2px;
		font-variant-numeric: tabular-nums;
	}
	.result-panel {
		border-left: 2px solid #4e9fd4;
		background: #252525;
		border-radius: 0 3px 3px 0;
		padding: 12px 14px;
	}
	.hint {
		font-size: 11px;
		color: #777;
		line-height: 1.5;
		margin-top: 10px;
	}
	.legend { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
	.legend-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #aaa; }
	.swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
	.swatch.dashed { border: 1px dashed currentColor; background: transparent; }
	.dropzone {
		border: 1px dashed #444;
		border-radius: 3px;
		padding: 18px 10px;
		text-align: center;
		font-size: 11px;
		color: #777;
		cursor: pointer;
		transition: border-color 0.15s, color 0.15s, background 0.15s;
	}
	.dropzone.dragover {
		border-color: #4e9fd4;
		color: #4e9fd4;
		background: rgba(78, 159, 212, 0.06);
	}
	.dropzone .fname {
		display: block;
		margin-top: 6px;
		color: #ccc;
		font-size: 11px;
		word-break: break-all;
	}
	.clear-link {
		display: inline-block;
		margin-top: 8px;
		font-size: 10px;
		color: #4e9fd4;
		cursor: pointer;
		text-decoration: none;
	}
	.clear-link:hover { text-decoration: underline; }