.osc {
	--osc-accent: #3f6b2c;
	--osc-accent-soft: #e7efdf;
	--osc-rule: #e0e4da;
	--osc-muted: #6b7568;
	margin: 1.5em 0;
	font-size: 16px;
	line-height: 1.5;
	max-width: 480px;
}

.osc * {
	box-sizing: border-box;
}

.osc .osc-form {
	border: 1px solid var(--osc-rule);
	border-radius: 8px;
	padding: 16px;
}

.osc .osc-field {
	margin-bottom: 14px;
}

.osc .osc-field:last-of-type {
	margin-bottom: 0;
}

.osc label,
.osc .osc-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.osc select,
.osc input[type="number"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--osc-rule);
	border-radius: 6px;
	font-size: 16px;
}

.osc .osc-size-inputs {
	display: flex;
	align-items: center;
	gap: 8px;
}

.osc .osc-size-x {
	color: var(--osc-muted);
}

.osc .osc-submit {
	margin-top: 16px;
	background: var(--osc-accent);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.osc .osc-submit:hover {
	opacity: 0.9;
}

.osc .osc-error {
	margin-top: 10px;
	color: #a33;
}

.osc .osc-result {
	margin-top: 16px;
	padding: 16px;
	background: var(--osc-accent-soft);
	border-radius: 8px;
}

.osc .osc-result p {
	margin: 0 0 8px;
}

.osc .osc-result p:last-child {
	margin-bottom: 0;
}

.osc .osc-result-main strong,
.osc .osc-result-seeds strong {
	color: var(--osc-accent);
}

.osc .osc-result-note,
.osc .osc-result-hint {
	color: var(--osc-muted);
	font-size: 0.9em;
}